How to Copy a Website Component into Claude Code

Claude Code works in your terminal, inside your repository, with your components and your conventions. That makes it a good place to rebuild a design you found on another site: it can put the new component in the right file, use your existing primitives, and match your styling system. The hard part is getting the design into the conversation with enough detail that it does not have to guess.

This guide covers the whole loop, from a live webpage to a component in your repo, using Pluck as the capture step. If you would rather connect Claude Code to your Pluck library directly, skip to the MCP section at the end.

What you need

The Pluck extension for Chrome. The free plan includes 50 plucks a month.
Claude Code installed and open in your project.

Step 1: find the component

Open the site in Chrome. It can be anything that renders in your browser: a public marketing page, a competitor's app you have an account on, or your own staging environment behind a login.

Click the Pluck icon in the toolbar. As you move the cursor over the page, elements highlight. You can pick a single element (a button, an input, a badge) or a container (a card, a section, a navbar). For a faithful rebuild, pick the largest container that makes sense as one component. A whole pricing section gives Claude the grid and the spacing between cards; a single card does not.

Click to select it.

Step 2: set the stack

In the Pluck popup, choose the AI prompt mode. Below it is a stack picker. Choose your styling approach (Tailwind, CSS Modules, Styled Components or Vanilla Extract) and your framework (React, Vue, Svelte, Solid or Qwik). If you leave it on Auto, the prompt asks the model to match whatever the project uses, which works well with Claude Code because it can read your codebase.

Pluck remembers your choice.

Step 3: copy

Click copy. Your clipboard now holds a structured prompt: the element tree, the computed styles for every node, a record of how the component changes at each responsive breakpoint, and a screenshot alongside the text. The pluck is also saved to your Studio library in case you want it again.

Step 4: paste into Claude Code with one line of intent

In the Claude Code session, paste the clipboard and add a single sentence that says where the component goes and what to respect. For example:

Recreate this as a React component at src/components/marketing/pricing-table.tsx.
Use our Button and Card from src/components/ui and the brand colours from
src/styles/theme.css. Keep the breakpoints from the capture.

The pasted content carries the design. Your sentence carries the intent: the file, the primitives, the theme. Keep them separate and you will get better results than trying to describe both at once.

Claude Code will read the prompt, look at the files you referenced, and write the component. Because the computed styles are in the paste, the first version usually matches the reference on spacing, radius, weight and shadow. The things that typically need a follow-up are state the capture could not see, like hover and focus styles, and fonts that are not loaded in your project.

Step 5: iterate in small steps

Follow-ups work best when they are specific and refer to the capture:

"The highlighted tier in the reference has a gradient ring. Ours has a flat border. Match the reference."
"Use our existing Badge for the 'Most popular' label instead of a custom span."
"The reference collapses to one column at the breakpoint in the capture. Ours is still three columns on mobile."

Because Claude Code already has the structure and the values, these are quick edits rather than rewrites.

Tips from our own use

Pluck at the viewport you care about first. The capture records breakpoints, but the primary layout is whatever your browser window was when you plucked. For a desktop-first component, pluck at desktop width.
Pluck pieces of a page, not the whole page, when the page is large. A full landing page is a lot of context. Three or four section plucks, pasted in sequence, give Claude a cleaner job each time.
Keep your theme in one place. When your colours and fonts live in a single file, you can point Claude at it in your one-line instruction and the rebuilt component picks up your brand instead of the reference's.
Say what to keep from the reference and what to replace. "Keep the layout and spacing, use our palette" is the most common instruction we write.

Going further: connect Claude Code to your library

If you find yourself plucking components for the same project repeatedly, Claude Code can read your Pluck library directly over MCP. One command:

claude mcp add --transport http pluck https://api.pluck.so/mcp

Sign in with OAuth in the browser on first use. After that, Claude Code can search your library by site or text, look at the screenshot of any pluck, and pull the style data itself, without you touching the clipboard. "Find the pricing table I plucked from the billing site last week and rebuild it in our components" becomes a single instruction. There is a full setup guide in Connect Pluck to Claude Code, Cursor and Codex with MCP.

A word on what you are copying

Plucking a component to study it, to use as a starting point, or to rebuild your own site in the same spirit is normal practice. Shipping a copy of someone else's site under your brand is not. We cover the practical line in Is It Legal to Copy a Website's Design?.

Get started

Install Pluck free, open Claude Code in a project, and pluck one component you have been meaning to build. The difference between pasting a screenshot and pasting the real styles shows up on the first run. If Cursor is your editor, the same flow is written up for it in How to Copy Web Components into Cursor, and there is a Claude use-case page with more examples.