Chrome Extension for UI Engineers

Annotate visually, ship UI fixes faster!

UICuts turns UI annotations into structured, code-aware context your agent can actually use. Point to the exact element, send the exact classes, selectors, and context needed.

Get Started Free No credit card · 30s setup

Stop guessing. Start pointing.

UICuts gives AI the exact UI context it needs to act fast. No vague screenshots, no long explanations, and no wasted tokens.

Exact targeting

Click the element you want to change. No guessing, no searching.

Faster fixes

Send the right classes, selectors & edits to AI instantly.

Lower AI spend

Avoid wasting credits on screenshot interpretation and retries.

Less searching

No need to inspect the entire codebase for one small fix.

Most Popular Saves ~45 min/day

Inspect. Edit. Send to AI.

Hover any element to instantly see fonts, colors, and spacing. Click to edit or annotate, then copy structured context for your AI agent.

8 CSS properties shown
<1s Inspection time
0 DevTools needed

Typography details

Font family, size, weight, line height at a glance.

Color inspection

Text, background, border colors without DevTools.

Spacing & layout

Padding, margins, gaps on any element.

Annotation mode

Add notes for changes you want made.

Click to edit

Make style changes directly in the browser.

Change-aware copy

Includes your edits and annotations when you copy.

Precise targeting

Exact classes and selectors for the element you chose.

Any website

Production, staging, or localhost.

Welcome to our site

This is a paragraph of text that describes our amazing product. Hover over it to inspect the styles.

Get Started
Learn more →
👆 Hover the elements to inspect them!
🎨

For designers

Verify implementations match your mocks instantly

💻

For developers

Skip DevTools and get CSS values in one hover

🤖

For AI workflows

Send structured context to Claude, GPT, Cursor, etc.

Up and running in 30 seconds

Three steps. No accounts, no API keys, no config files.

1

Install the extension

Add UICuts to Chrome and pin it to your toolbar. No setup, no config.

2

Open any site

Click the bubble, hover to inspect, and select what you want to change.

3

Copy and ship

Annotate or edit styles, then copy structured context for your AI agent.

Teams love this

Design + Dev on the same page.

Point at the exact element, capture what needs to change, and hand it off without repeating yourself.

How handoffs actually work

Designer

Points at button, writes "Make this 14px with more padding"

UICuts

Captures element, classes, current styles, and annotation

Developer

Gets structured context, applies change in < 30 seconds

Total time: ~45 seconds vs. 10+ minute back-and-forth threads

Shared visual context

Everyone sees the same element, notes, and intent from the start.

Cleaner handoffs

Turn vague requests into implementation-ready feedback.

Less back-and-forth

Reduce clarification loops between design, product, and eng.

Faster execution

Move from review to edit faster with structured context.

✗ Without UICuts

💬 "Hey, can you make that button bigger?"

💬 "Which button? The one on the hero?"

💬 "No, the CTA in the pricing section"

💬 "How big? What padding?"

💬 "Idk, just a bit bigger. Like the one on Stripe"

⏱ 12 messages later...

✓ With UICuts

🎯 Annotation on <button.cta-primary>

"Increase padding to 16px 32px, font-size to 18px"

+ element selector, current CSS, screenshot attached

✓ One message. Zero ambiguity.

Want to see every feature in action?

Copy components, pick colors, detect fonts, download assets — try them all interactively.

Explore All Demos

Pricing that pays for itself

One small payment to save time, reduce AI misfires, and waste fewer credits.

Free

$0/mo

Free, forever.

  • 3 picks every day
  • Comment on anything
  • Colour picker
  • Font detect
  • Assets download
  • Copy components
Get Free
Popular!

Yearly

$9.99/yr

One small annual fee.

  • Unlimited picks
  • Comment on anything
  • Colour picker
  • Font detect
  • Assets download
  • Copy components
Get Yearly

Lifetime

$19.99once

One-time payment, own forever.

  • Unlimited picks
  • Comment on anything
  • Colour picker
  • Font detect
  • Assets download
  • Copy components
Get Lifetime

Why so affordable? We're bootstrapped — we answer only to customers. ✌️

How picks work

Simple, transparent usage — one pick per component, not per action

One pick = one component

When you click an element and perform your first action — like adding a note, picking a color, copying code, or downloading an asset — that's 1 pick. Every action after that on the same component is completely free.

First action costs 1 pick

  • Add a comment/note
  • Pick a color
  • Pick a font
  • Copy component code
  • Download an asset

Always free

  • Inspecting any element
  • Viewing styles & properties
  • Additional actions on picked components

Example: Real-world usage

1

Click button element → Add a note

✨ Consumes 1 pick

2

Same button → Pick its blue color

🆓 Free (component already picked)

3

Same button → Copy its HTML/JSX

🆓 Free (component already picked)

4

Click heading element → Pick its font

✨ Consumes 1 pick (new component)

Total: 2 picks used

You performed 4 actions on 2 components

Notes remember your picks

When you save a note on a component, that component stays "picked" forever — even after page refreshes. Come back days later, click the saved note marker, and all actions on that component remain free.

Free plan gives you 3 picks per day. Unlimited plan removes all limits.

See pricing

Frequently asked

What is UICuts? +

A Chrome extension that lets you inspect any website visually, point at exact UI elements, and turn those selections into structured, code-aware context.

Is UICuts free to use? +

Yes. The free plan gives you 3 picks every day including color picker, font detect, assets download, and component copy. Upgrade for unlimited picks.

How do I get started? +

Install from the Chrome Web Store, pin it to your toolbar, and open any website. Click the bubble to launch. That is all.

Does it work on any website? +

Yes. Live production sites, staging URLs, and localhost all work the same way.

What does UICuts copy when I export? +

The exact element context including classes, selectors, styles, and any edits or annotations you made.

How does it save AI tokens? +

Instead of sending screenshots for image interpretation, you send exact element context. Smaller prompts, fewer retries, less overhead.

Works with Claude, Cursor, Copilot? +

Yes. Plain structured text that works with any AI coding tool or agent.

Can clients use it for feedback? +

Yes. They install the extension, point at the element they want changed, add notes, and send you the copied feedback.

What export formats? +

HTML, CSS, or JSX. You can also download components directly.

Yearly vs lifetime? +

Both plans include unlimited picks and full features. Yearly is $9.99 per year and lifetime is a one-time $19.99 payment.

A clearer way to work with AI on frontend changes

UICuts gives frontend teams a faster way to turn UI feedback into implementation-ready context. Instead of describing a button, spacing issue, or layout mismatch in a screenshot, you point to the element in the browser and capture the exact classes, styles, and annotations your AI tool needs.

The result is less guesswork and fewer retries. Whether you use Cursor, Claude Code, Copilot, or another AI coding agent, UICuts helps you move from visual feedback to code changes with less token waste and clearer handoffs.

It also works as a practical UI inspect extension for day-to-day debugging, component extraction, and design review. You can inspect typography and colors, annotate changes, and copy structured context straight into your workflow without jumping between tools.

Less guessing.
Faster fixes!

Stop burning time on vague prompts and AI retries that miss the point.

Start using UICuts

Free plan available · No credit card · 30-second setup