You know the workflow. You see a beautiful component on some website — a pricing card, a navbar, a hero section — and you want something like it in your project.
So you open your AI tool and start typing:
"Make a card with rounded corners, a subtle box shadow, the title in 18px semibold, padding maybe 24px, the button is blue — no, more like indigo — with white text..."
Three prompts later, it still doesn't look right. You're spending more time describing the design than it would take to just code it.
This felt broken to me. The component is right there on your screen. Every color value, every pixel of spacing, every font weight — your browser already knows all of it. Why are we translating visuals into words for an AI to translate back into code?
So I built Pluck.
What it does
Pluck is a free Chrome extension. You click any component on any website, and it captures the full picture — DOM structure, computed styles for every element, layout relationships, images, icons, SVGs — and packages it into a structured prompt.
You paste that prompt into Claude, Cursor, Lovable, Bolt, v0, or whatever you use. The AI recreates the component on the first try because it has all the context it needs.
No describing. No back-and-forth. One click, one paste.
How it works under the hood
When you click an element, Pluck:
- Walks the DOM tree from your selected element down through all children
- Reads computed styles for every node — not the stylesheet rules, but the actual rendered values (so inherited styles, cascade resolution, and overrides are all accounted for)
- Extracts layout data — flexbox/grid relationships, positioning, dimensions
- Captures assets — images as data URIs, inline SVGs, icon references
- Packages everything into a structured prompt format that's optimized for how LLMs parse context
The output is tailored to your stack. You pick your CSS framework (Tailwind, CSS Modules, Styled Components, Vanilla Extract) and UI framework (React, Vue, Svelte, Solid, Qwik), and Pluck generates the prompt accordingly.
Since it runs entirely in your browser, it works on any page — including dashboards, admin panels, and pages behind authentication. Nothing leaves your machine until you paste it.
Example
Say you want to recreate a pricing card from Stripe's website.
Without Pluck: You'd spend 5-10 minutes in dev tools eyeballing values, then write a long prompt, then iterate 2-3 times when the AI gets the spacing or colors wrong.
With Pluck: Click the card. Cmd+V into Claude. Done. The AI gets the exact border-radius, the exact padding, the exact color values, the exact font stack — because you gave it all of that information in one shot.
Copy to Figma
Beyond LLM prompts, Pluck can also copy components as editable SVG layers directly into Figma. The layers, styles, and structure are preserved, so you get an actual editable design — not a flat screenshot.
This is useful if you're building a design system and want to pull reference components from existing sites as a starting point.
The tech stack
For the technically curious:
- Extension: Built with Plasmo (React-based Chrome extension framework) + React 19
- Web app: Next.js + TypeScript + Tailwind + shadcn/ui
- API: Hono + tRPC for end-to-end type-safe APIs
- Database: PostgreSQL + Drizzle ORM
- Monorepo: Turborepo managing the extension, web app, and API server
- Runtime: Bun
Plasmo was a great choice for the extension — it abstracts away the manifest v3 boilerplate and lets you write React components that render in content scripts, popups, and sidepanels.
tRPC deserves a shoutout too. Having full type safety from the database schema through the API to the frontend, with zero code generation, is a huge DX win when you're iterating fast as a solo dev.
Pricing
- Free: 50 captures/month in LLM prompt mode, +3/month in Figma mode
- Unlimited: $10/month, Unlimited captures
The free tier is genuinely usable — 50 captures per month covers most people's needs.
Try it out
Pluck is available on the Chrome Web Store. Install it, click something on a website you like, paste it into your AI tool of choice, and see what happens.
I'd love to hear:
- How accurate are the recreations in your tool of choice?
- What components or sites does it struggle with?
- What would make this more useful for your workflow?
Drop a comment or find me on X. Happy to answer questions about the tech or the product.
Top comments (0)