UIFrom

Chrome extension for AI builders

Read the system
behind the
screen.

Capture website colors, typography and component styles as a brief for your AI coding tool.

Add to ChromeSee how it works ↓

Free design briefs. No product account. Saved in your browser.

Copy your brief into the tool you already useChatGPTClaudeCursorYour AI editor

01 / A clearer starting point

Less “make it like this.”
More useful detail.

Turn the design decisions you can see into values your AI can work with.

01 / FIND

Start with a real website.

Open a page you like. Scan it or select a specific button, card or navigation element.

02 / CAPTURE

Keep the details.

Save measured colors, fonts, spacing, corners and shadows. A screenshot is included when Chrome allows capture.

03 / BUILD

Give your AI a brief.

Copy the brief or download Markdown. Add your project requirements and build with your own AI tool.

02 / Block code export · Pro

Pick a block.
Make it your own.

Select a button, card or section on a website. Export its appearance as HTML + CSS, a React component or Tailwind code. Ask your AI tool to adapt it to your project.

Explore Pro
SelectA button, card or section
PreviewThe captured block
ExportCopy code or download a file
HTML · React · Tailwind↗
Static appearance at the captured size. JavaScript and original responsive rules are not included.

03 / Keep it simple

Start free. Export blocks with Pro.

Capture briefs as often as you need. Pay once to export selected blocks as HTML, React or Tailwind.

Free

NO ACCOUNT
$0no scan limit
  • Page scans and individual elements
  • Colors, typography and component styles
  • Local reference library and screenshots
  • AI briefs from a single reference
  • Copy, Markdown download and backups
Add to Chrome

Keep using Free for single-reference briefs.

Purchases are processed by Creem, the merchant of record. See Terms, Privacy and Creem’s Buyer Terms.

04 / A few useful answers

Before you
start building.

What can I do without paying?

Scan pages, select elements, save references and create a brief from one reference. There is no usage counter or trial deadline for these features.

Do I need an account?

No product account is needed. After checkout confirms payment, Pro unlocks automatically in the extension. Checkout requires purchase details, including an email address.

Does it build the website for me?

Free prepares design briefs for your AI coding tool. Pro also exports selected blocks as static HTML + CSS, React components or Tailwind source. Add your own requirements to adapt the result. JavaScript behavior and original responsive rules are not reconstructed; AI tool fees are separate.

What do I get when I export a block?

HTML + CSS is selected by default. Copy the code or download an HTML file you can open in your browser. Other formats provides React + CSS, HTML + Tailwind and React + Tailwind. React files need a React project; Tailwind files need a Tailwind CSS v4 build that scans them. Exports preserve the captured appearance; add your own behavior and responsive rules. Linked images and fonts can require internet access.

Can it extract every style on every website?

UIFrom measures the page as it is currently rendered. It cannot inspect browser-protected pages, cross-origin frames or closed shadow roots. A capture can include an active hover state, but it does not reconstruct all hover states, interactions, responsive breakpoints or the original source project. Large pages are sampled.

Is Pro a subscription?

No. Pay $19 once for lifetime access to Pro code exports. No subscription or recurring payment. Your purchase covers one active browser installation at a time. Activation and periodic access checks require internet. Your AI coding tool is separate.

How do I restore a purchase?

Open Settings → Restore a purchase, enter the email used at checkout and confirm the link sent to your inbox. This moves Pro access to that browser installation. It does not transfer your Saved references. No password or activation code is needed.

Where do my captures go?

They stay in Saved in your current Chrome profile. Use Saved → Saved tools → Download backup to save a copy on your computer. Restore backup loads that UIFrom backup into Saved. Back up before removing the extension or changing profiles. Files you already downloaded remain on your device.