Back to blog

How to Copy Web Components from Any Site into Cursor

May 12, 2026·Pluck Team·4 min read
guide
cursor
tutorial

Cursor is great at writing code. It's bad at one thing: knowing what you want a UI to look like. If you've ever pasted a screenshot into Cursor and asked it to "make a button like this one," you know the problem. The output looks vaguely correct and exactly wrong.

There's a faster workflow. Pluck a real component from any live website, paste it into Cursor with full DOM + CSS context, and let Cursor produce a near-pixel-perfect copy in your own codebase.

The Cursor + reference design problem

When you want Cursor to build a specific UI, you have three options today:

  1. Describe it in prose. Slow, lossy, generic.
  2. Paste a screenshot. Cursor's vision is good but not pixel-accurate. It guesses fonts, colors, spacing.
  3. Paste a Figma frame. Only works if the design exists in Figma — most "I want it like that website" references don't.

None of these gives Cursor the real CSS values from the actual webpage.

The fix: clone the real component, paste it into Cursor

The right workflow uses the live DOM as your source of truth.

Instead of describing or screenshotting, you capture the actual rendered component — including its computed styles, layout, typography, and structure — and hand all of that to Cursor as a single prompt. Cursor then has everything it needs to recreate the component in your project's stack and style system.

This is the Pluck workflow.

Step-by-step: from webpage to Cursor

1. Install Pluck

Add the Pluck Chrome extension. One-click install.

2. Find your reference

Open any live website. SaaS landing pages, design portfolios, e-commerce sites — anything that renders in your browser is plucked-able. Including apps behind login.

3. Pluck the component

Click the Pluck icon. Hover the element you want — a button, a card, a navbar, a whole hero section. Click to select.

4. Copy as LLM Prompt

In Pluck's popup, the default copy mode is LLM Prompt. This packages the component's DOM, computed CSS, layout, and structure into a structured prompt optimized for AI coding tools.

Click copy.

5. Paste into Cursor with your intent

Open Cursor's composer (Cmd+I) or chat (Cmd+L). Paste. Then add a single instruction:

"Recreate this as a React component at src/components/cta-card.tsx using Tailwind and our shadcn Button. Match the colors as closely as possible."

That's the entire prompt. Cursor has every design value it needs, and your instruction tells it where the code goes and which conventions to use.

6. Review and refine

The first generation is usually 80–90% there. Small follow-ups handle the rest:

  • "Make the corner radius slightly larger, more like the reference."
  • "Use our brand purple #5B21B6 for the button instead."
  • "Convert the hardcoded spacing to our Tailwind scale (p-6, gap-4)."

Each follow-up takes seconds because Cursor already has the structure in context.

Why this beats screenshots

A screenshot is what the component looks like. Pluck's LLM prompt is what the component is. The difference matters because:

  • Cursor doesn't have to guess font weight — it has the actual font-weight value.
  • Cursor doesn't have to estimate spacing — it has the actual padding and gap.
  • Cursor doesn't have to invent the DOM structure — it has the real tree.
  • Cursor doesn't have to hallucinate colors — it has the exact hex/rgb values.

The result is a much higher first-try fidelity, and far fewer "make it more like the reference" rounds.

Pro tips for using Pluck with Cursor

  • Pluck the largest meaningful container. Cursor handles "build this hero section" better than "build this one button, this other button, and this heading."
  • Reference your codebase in the instruction. Tell Cursor which existing components to use, which design tokens, which file location. The Pluck context handles the what, your instruction handles the how.
  • Use the agent for multi-file changes. If the cloned component needs new files, helper utilities, or design token additions, Cursor's agent mode handles it cleanly.
  • Save your favorite plucks. Pluck stores your captures in your dashboard, so you can re-paste a reference into Cursor across multiple sessions without re-plucking.

What about other AI coding tools?

The same Pluck output works in Claude, Lovable, v0, Bolt, ChatGPT, Gemini, and most other AI coding tools — they all accept rich text prompts. We've found Cursor especially good because of its in-editor context: it can see your existing components and conventions while applying the cloned design.

For more on this, see How to Clone a Website with AI.

Wrapping up

Cursor turns into a much more capable design tool the moment you give it real reference data instead of guesses. Pluck is the fastest way to do that — one click in your browser, one paste in Cursor.

Try Pluck free — 50 plucks/month on the free plan, unlimited plucks for $10/month.