Chrome & Edge extension · v1.0

Copy any UI. Paste it into your AI.

Hover an element on any website and get clean CSS and Tailwind v4 for free. With Pro, copy the whole component, the page's design tokens and a ready-made brief for Claude Code, Cursor or v0. Runs locally. No account.

Add to Chrome — free Get Pro — US$5 once Get Pro — US$5 once Email me the install link

Available now on the Chrome Web Store and Edge Add-ons. Clean CSS and Tailwind free forever; every install starts with a 7-day Pro trial, no card.

Version 1.0 is ready and going through Chrome Web Store review. Pro keys are delivered right after payment and work as soon as it's live.

<div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-xs">
  <p class="text-sm font-semibold text-indigo-600">Pro</p>
  <p class="mt-1.5 text-3xl font-semibold tracking-tight">
    $29<span class="text-base font-normal text-zinc-500">/yr</span>
  </p>
  <a class="mt-4.5 inline-flex h-9.5 items-center rounded-lg
            bg-indigo-600 px-4 text-sm font-semibold text-white">
    Upgrade
  </a>
</div>

Example of UIBrief's output. Real results depend on the page you inspect.

What it does

From "I like that card" to working code in one click.

Built for the way people build UIs in 2026: you show your AI agent what you want, and it writes the code. UIBrief gives it the right context.

Clean CSS, not a dump

Only the styles that differ from browser defaults and the parent. No 200-line computed-style noise.

Tailwind v4 classes

Mapped to the v4 scale (0.25rem spacing, oklch colors), with arbitrary values only when nothing fits. HTML or JSX.

Design tokens

Palette, type scale, spacing, radii and shadows from the whole page, exported as @theme, CSS variables or JSON.

Copy for AI

A markdown brief with structure, styles, tokens and a cropped screenshot, ready for Claude Code, Cursor or v0.

How it works

Three steps. Zero setup.

Click the icon

The inspector only runs on the tab you activate it on. No "read all your data" permission.

Hover and pick

Hover to highlight, click to lock. ↑ and ↓ jump to the parent or child element.

Copy the format you need

Tailwind, clean CSS, tokens or the AI brief, straight to your clipboard.

Typical CSS inspectors compared with UIBrief
Typical CSS inspectorUIBrief
OutputRaw CSS, or Tailwind without a v4 focusClean CSS, Tailwind v4 (oklch, 0.25rem scale), JSX
Design tokensRarelyWhole-page @theme / vars / JSON
Made for AI agentsNoMarkdown brief + screenshot crop
Account & dataVaries by toolNo account. Runs locally.
PriceSubscriptions up to ~US$96/yrFree · Pro US$5 once
Pricing

Free for CSS and Tailwind. Pro is US$5, once.

No subscription. Pay once and keep every Pro feature, including future ones.

Free

US$0

Forever

  • Unlimited inspection
  • Clean CSS of any element
  • Tailwind v4 classes of any element
  • Every Pro feature free for 7 days
Add to Chrome — freeEmail me the install link
Launch price

Pro

US$5 once

Lifetime license · Chrome + Edge

  • Whole component as HTML or JSX with Tailwind
  • Design tokens: @theme, CSS variables or JSON
  • Copy for AI: brief + screenshot of the element
  • Future Pro features included
Get Pro — US$5
Terms, in plain English
  • Your license key appears on the page right after payment. It works offline, on all your browsers. Keep it somewhere safe.
  • Changed your mind? Full refund within 14 days of purchase, no questions asked. Just email contact@your-domain.com from the address you bought with.
  • Pro is a lifetime license: every Pro feature, including future ones, for as long as UIBrief is sold. If it's ever discontinued, your installed version keeps working offline.
  • Payments are processed by Creem, our merchant of record (authorized reseller), who handles taxes and receipts and is the name on your statement.
FAQ

Questions

Does it send the pages I inspect anywhere?

No. Everything runs in your browser. The extension asks for the minimum permissions and only touches the tab where you click it. Your license is verified offline; once a week the extension asks our license server to renew yearly licenses and check for refunds. That request carries only the license key.

Does it use AI or need an API key?

No AI calls and no API key. UIBrief prepares the context; your own agent (Claude Code, Cursor, v0…) does the generating.

Which browsers?

Chrome and Edge (version 137 or newer). Other browsers depend on demand.

Tailwind v3?

The output targets Tailwind v4. Sites built with v3 are recognized (their palette maps to the same class names), and most classes also work in a v3 project.

Will it work on every website?

On the vast majority. Browsers block extensions on chrome:// pages, the Chrome Web Store and PDF files, and elements inside cross-origin iframes may be out of reach with UIBrief's minimal permissions.

Do I need an account?

No. Install it and use it. If you buy Pro, you paste a license key once; no login, ever.

Who is building it?

A solo developer from Brazil who builds UIs with AI agents every day and wanted this tool. Questions: contact@your-domain.com.