How to Copy a Website Component into Lovable

Lovable is good at going from a sentence to a working app. Where it struggles is the same place every AI builder struggles: matching a specific design you have in your head. You write "make the pricing section look like Linear's" and get something generic, because Lovable has never seen Linear's pricing section at the level of detail that matters.

The fix is to show it. Not a screenshot, which gives it a vague impression, but the actual component with its actual styles. That's what Pluck does, and the whole workflow is about a minute long.

What Lovable gets from a pluck

When you pluck an element, Pluck captures the full element tree with the computed styles for every node: layout, flexbox and grid, spacing, colours, typography, borders, shadows, transforms and images. It also records how the component changes at each responsive breakpoint, and copies a screenshot alongside the text.

Pasted into Lovable's chat, that gives it three things a screenshot can't:

• Exact values. #0f172a, not "dark navy". font-weight: 600, not "bold-ish".
• Structure. Which element wraps which, so the generated JSX nests the same way and the layout holds up when you change the content.
• Responsive behaviour. What collapses, what stacks, what hides at 375px.

Lovable's output is React with Tailwind, so set the Pluck stack picker to match and the prompt arrives in the vocabulary Lovable already speaks.

Step by step

1. Install Pluck

Add the Pluck extension from the Chrome Web Store. It's free: 50 plucks a month on the Free plan, unlimited on any paid plan.

2. Find the component

Go to the live page. Pluck works on anything that renders in your browser, including pages you're signed into, so a dashboard you admire is as fair game as a marketing site.

3. Pluck it

Click the Pluck icon. Hover over the page and the element under your cursor highlights. Move up to the container that holds the whole thing you want (the pricing section, not one price card) and click.

4. Set the stack and copy

In the popup, choose AI prompt. In the stack picker, choose React and Tailwind, which is what Lovable generates. Click copy. The prompt text and the screenshot are now on your clipboard together.

5. Paste into Lovable

In your Lovable project, open the chat, paste, and add one line of intent above or below the pasted block:

Rebuild this as the pricing section on our landing page. Use our existing Button component and the primary colour from our theme instead of the reference's blue. Keep the three-column layout and the "Most popular" badge.

Send it. Lovable has the structure and every style value, so the first result is usually close enough to refine rather than restart.

What to say in the one-line instruction

The pasted pluck carries the design. Your line carries the intent. Keep it to things the pluck can't know:

• Where it goes. "The hero on the homepage", "a new /pricing route".
• What to swap. Your colours, your fonts, your button component, your copy.
• What to keep. Name the one or two things you plucked it for, so they survive the swap.
• What to drop. "Ignore the newsletter form at the bottom."

Avoid restating what's in the pluck. "Make it 24px padding" is already there, and repeating it in words invites the model to second-guess the data.

Iterating

Lovable's follow-up edits work well once the structure is right. Typical second messages:

• "Make the middle plan card slightly taller and give it our accent border."
• "On mobile, stack the cards and show the badge above the plan name."
• "Replace the placeholder prices with the ones from our pricing config."

If you're assembling a page from several sites, pluck each section separately and paste them one at a time with their own instruction. One message per section keeps Lovable focused and makes it obvious which paste caused which result.

A real example

We built an onboarding checklist for an internal tool this way. The reference was a task list we liked in a project management app we pay for, behind a login:

1. Plucked the checklist panel (the whole card, not one row).
2. Copied as AI prompt, React and Tailwind.
3. Pasted into Lovable: "Add this as an onboarding checklist on the dashboard home. Items come from onboardingSteps in the store. Use our green for completed items."
4. Lovable produced the panel with the right row height, the progress bar, the check icons and the hover state, pulled from the captured styles.
5. One follow-up to collapse the panel once every step is done.

Fifteen minutes, including the time spent deciding which app's checklist we liked best.

Beyond a single paste

Every pluck is also saved to your Pluck Studio library, so the component you pasted into Lovable today is there next month when you want it in another project. And if the design you want doesn't exist on any one site yet, put a few plucks on a board, write a brief, and generate the direction first, then pluck the generated layout's references into Lovable. How to Build a Moodboard from Real Websites covers that.

Get started

Install Pluck, pluck something, paste it into Lovable. The same workflow works for Cursor, Claude, v0 and Bolt. See the Lovable use-case page for the short version.