Grab any UI component from any website and hand it to your LLM as a faithful, ready-to-build prompt. No screenshots. No describing pixel by pixel. Just the markup and styles your AI actually needs.
# Recreate this UI component faithfully. Match layout, spacing, colour, type, borders, shadows, radii and animation exactly. FONTS: Public Sans — load from Google Fonts. COMPONENT (HTML, computed styles inlined): <div style="padding:22px;border-radius:14px; background:linear-gradient(150deg,#2a2350, #3a2f78);box-shadow:0 18px 40px …"> <span style="background:#c8ff5b;color:#16…"> Most popular </span> <h4 style="font:600 19px Fraunces…">Agency</h4> … </div> NOTES: Source: somesite.com/pricing
How it works
Describing a component in words is slow and lossy. Pluck reads the live element's computed styles and hands your model the real thing — so the first generation already matches.
Click the Pluck icon and hover any page. The element under your cursor lights up with its tag, classes and size. Click to grab it.
Pluck clones the subtree, inlines the computed styles, harvests the fonts and keyframes it uses, and strips the noise — scripts, trackers, framework attributes.
Copy an AI-ready prompt, a React-component prompt, or clean HTML. Paste into your LLM and it rebuilds the component pixel-faithful, first try.
What's inside
Hover-to-highlight with live tag, class and dimension read-out. Grab exactly the element you mean — a button, a card, a whole hero.
Every node carries its real rendered styles — diffed against browser defaults so the output stays compact instead of a wall of noise.
The exact @keyframes a component uses come along for the ride, so hover states and motion survive the trip to your LLM.
Web fonts in use are listed with a load-from-Google-Fonts note; system fonts are filtered out so your model isn't chasing ghosts.
Copy a full AI prompt, a React-component prompt, or clean self-contained HTML. One click each — pick what your workflow wants.
No account, no server, no upload. Pluck runs entirely on the page you're looking at and needs only activeTab — it can't watch you browse.
Pricing
No subscription, no seats to count. Buy once, use it on up to three browsers, keep every future update.
Chrome, Edge & Brave · works offline · no account
Questions
A screenshot shows your model what a component looks like and leaves it to guess the rest — spacing, exact colours, fonts, the animation. Pluck reads the live element's computed styles and hands over the real markup, so the first generation already matches instead of being an approximation you fight to correct.
No. Pluck runs entirely inside the tab you're on, uses only the activeTab permission, and copies to your clipboard locally. There's no account, no server and no upload — it can't see any page until you click its icon.
Your one licence key activates Pluck on up to three browser installs — for example Chrome on your laptop, Chrome on your desktop and Brave. Enough to cover how most people actually work without buying seats.
Any Chromium browser — Chrome, Edge, Brave, Arc. The output is plain text, so it pastes into Claude, Cursor, v0, Lovable, Bolt, ChatGPT, Copilot or anything else that takes a prompt.
No. $99 once, yours forever, including future updates. If it isn't for you, there's a 14-day money-back guarantee.
Yes — you pick the level you want. Grab a single button, a card, or a whole hero section. Pluck captures the element you click plus everything nested inside it.
The next component you want to rebuild is already on a page somewhere. Point at it.