PickCodeCopy the component as code (Tailwind, JSX or HTML + CSS) and paste it into the prompt with clear instructions: which file to create, which of your components to reuse, and what to replace. Real markup gives the model exact values; a screenshot leaves it to estimate them.
Why markup beats a screenshot
A screenshot is pixels. To rebuild it, a model has to estimate spacing, font sizes, colors and radii by eye, and it cannot see hover states, breakpoints or the font name at all. One developer described the result: "fixing the spacing and border-radius because the AI is guessing from pixels."
Markup carries the actual values: px-6, rounded-xl, text-sm, the exact color, the hover: and md: classes, the element structure and the text. The model's job changes from guessing to adapting, which is a much easier task to get right.
Screenshots still help for layout intent. Pasting both, the code plus a picture, is a reasonable combination when the tool accepts images.
Pick the right size
Copy the smallest element that contains what you want. A whole landing page pasted into a prompt is long, mixes unrelated sections and gives the model more to get wrong. A single pricing card or navbar is easy to check. If you need a page, do it one section at a time.
Pick the format that matches your project: Tailwind or JSX for React and Next.js projects, Blade for Laravel, HTML + CSS for anything else.
Copy component code for your prompt with PickCode
- Pick the component. Press Alt Shift C and select the card, navbar or section.
- Choose a format. Press Space, then 1 to 4 for Tailwind, React, Blade or HTML + CSS.
- Copy without children if needed. For a wrapper or layout shell, copy the element without its children to keep the prompt short.
- Paste into your prompt. Add the instructions from the prompt above and send it to Cursor, Claude Code or v0.
- Copy it again later. Recent copies stay in the PickCode popup, so you can re-copy in another format if the tool needs it.
A prompt that works
Tell the tool what the pasted code is, where it should go, and what to change. Be specific about your own conventions:
Below is a pricing card copied from a live site as React + Tailwind.
Create components/pricing-card.tsx:
- Keep the layout and every Tailwind class unless noted.
- Props: name, price, features (string[]), featured (boolean).
- Use our Button from components/ui/button.tsx for the CTA.
- Replace the hard-coded text with the props.
- Map the hex colors to our theme tokens in app/globals.css.
<paste the copied component here>In Cursor and Claude Code you can paste this straight into the chat or save the copied code to a file in your repo and reference it from the prompt. In v0, paste it into the prompt box as text. The same prompt shape works in all three.
Check the result against the original
- Open both side by side at phone and desktop widths.
- Hover buttons and links to confirm hover states survived.
- Look for values the model "cleaned up" that you wanted to keep, like a specific radius or letter spacing.
- Replace the original site's text, images and logos with your own content.
Questions
Is it better to send code or a screenshot?
Code, when you want the result to match the original. It carries exact values, states and breakpoints. A screenshot can help as extra context for layout.
Does PickCode send the page to an AI service?
No. PickCode runs in your browser and only copies code to your clipboard. Where you paste it is up to you.
Which format should I pick for an AI editor?
The one your project uses. Tailwind or React for most JavaScript projects, Blade for Laravel, HTML + CSS for everything else.
Why does the AI change my pasted classes?
Models sometimes normalize values. Say "keep every class unless noted" in the prompt, and check the diff.