Install once, activate your key, and every capture after that is three clicks: open Pluck, click a component, paste into your LLM. Here's the whole thing.
Pluck runs in any Chromium browser — Chrome, Edge, Brave or Arc.
When your order lands you'll get a download link and your licence key. Unzip the folder somewhere permanent (don't delete it afterwards — the browser loads from it).
Open chrome://extensions, switch on Developer mode (top-right), click Load unpacked, and choose the Pluck folder. Then pin the icon so it's one click away.
chrome://extensions → Developer mode: ON → Load unpacked → select the "pluck" folder → pin the ▲ icon to your toolbar
One key, up to three browsers. Activation is instant and works offline afterwards.
Go to any live website — your own, a competitor's, a component gallery — and try it.
Click the Pluck ▲ icon in your toolbar. The page dims slightly and a highlight follows your cursor.
Hover the element you want. A label shows its tag, classes and size (e.g. div.pricing-card · 236×214) so you know exactly what you'll grab. Move up the tree for a bigger chunk, down for a smaller one.
Click once. Pluck reads the element, and a small panel appears with three copy buttons.
Pick a mode (below), the prompt lands on your clipboard, and you paste it straight into your LLM. Done.
After you click a component, the panel offers three ways to copy it. Same capture, different shape for your workflow.
A written instruction — "recreate this faithfully" — followed by the fonts, any keyframes, and the self-contained HTML with styles inlined. Paste into Claude or ChatGPT and it builds the component.
The same capture, but the instruction asks for a React component. Ideal for v0, Cursor, Lovable and Bolt.
The cleaned, self-contained HTML on its own — when you'd rather write your own instruction, or drop it into a scratch file.
The output is plain text, so it works anywhere you can type a prompt. A capture looks like this:
Recreate the following UI component faithfully.
Match the layout, spacing, colours, typography,
borders, shadows, radii and animations exactly.
FONTS: Public Sans — load from Google Fonts.
ANIMATIONS (add these @keyframes to your CSS):
```css
@keyframes float { from{...} to{...} }
```
COMPONENT (self-contained HTML, styles inlined):
```html
<div style="padding:22px;border-radius:14px;…">
…
</div>
```
NOTES:
- Source: https://somesite.com/pricingFollow it with your own line — "make it a dark-mode variant", "convert to Tailwind", "turn it into a Vue SFC" — and the model has everything it needs to get the first version right.
Pluck sends your model the signal and drops the noise.
@keyframes in use by the captured elements, pulled from the page's stylesheets.::before / ::after content flagged for the model to reproduce as pseudo-elements.Stripped out: scripts, event handlers, tracker and framework runtime attributes, and oversized inline data URIs.
Everything above takes about a minute end to end.