How to turn a website into a prompt for Claude Code
To turn a website into a prompt for Claude Code, give it the page's measurements and section order instead of a screenshot. CopyDesign.ai does that from a URL: it renders the page and writes a spec of about 4,000 words plus starter code, as plain text. Paste the spec into Claude Code and ask it to build one section at a time.
Checked November 3, 2026. Sources are linked at the bottom.
What the prompt needs
Claude Code builds what it is told. A prompt that holds these gives it something to follow:
- Container width and gutters, and the padding on each section
- The type scale and every color value
- The sections in order, with their components
- Any motion, and how the layout changes at phone width
The steps
- Paste the page's URL into CopyDesign.ai and wait two to three minutes.
- Read the spec and cut anything you don't want to copy.
- Open your project in Claude Code, paste the spec, and tell it your stack and which copy and images to use.
- Ask for one section at a time, and check each at desktop and phone widths before the next.
How CopyDesign.ai gets its numbers
For a URL, CopyDesign.ai loads the page in a headless browser, takes eight screenshots from top to bottom and reads the HTML plus up to three stylesheets. Gemini writes the spec in two passes: measurements and sections first, then starter code. A URL run usually takes two to three minutes.
Rebuild the structure, not the brand
Layout patterns, spacing and type choices are widely reused. Logos, written copy and photos belong to their owners, so use your own. This isn't legal advice.
Try it on a site you like
Your first clone is free, and you don't need a card.