How to copy a website design with AI
To copy a website design with AI, give your coding tool measurements instead of a picture. Render the page, record its container width, type scale, colors and spacing, and list the sections in order. Then ask Claude Code, Cursor or Codex to build it in your stack with your own content. CopyDesign.ai does the measuring for you: paste a URL and you get a spec of about 4,000 words plus starter code.
Checked November 3, 2026. Sources are linked at the bottom.
Why a screenshot alone falls short
A screenshot shows one width at one moment. It doesn't tell the model that the container is 1,200 px wide, that body text drops from 18 px to 16 px on a phone, or what's below the fold. The model has to guess. The build may come back close, but visibly off.
The steps
- Pick the page. A live URL gives you the most to measure, including the rendered layout and the content below the fold.
- Look at it at desktop and phone widths. The two layouts often differ more than you expect.
- Record the container width and gutters, then the padding on each section. Note the type scale and color values down to the corner radii.
- List the sections in order, including their components and any motion.
- Ask your coding tool to build one section at a time in your stack, using your own copy and images.
What a spec looks like
Here is the top of a real run on linear.app from November 3, 2026, unedited apart from the cut marked ⋯. The full output ran 5,061 words.
Build a high-craft, dark-themed product development landing page with a fixed glassmorphism navbar, complex UI mockups, bento grids, and scrollytelling sections. Use Next.js + TypeScript + Tailwind CSS v4 + motion (Framer Motion). Install `lucide-react`, `motion`, and `clsx`. Load the site's font (Inter Variable) via `next/font/google`. ### 0. Measured Layout (Forensic Analysis) - **Container:** `max-w-[1200px]` [EST], side gutters `24px` (Desktop) / `20px` (Mobile). - **Navbar:** Height `64px`. Fixed top. - **Section Padding:** Hero `pt-[120px] pb-[80px]`; Feature sections `py-[120px]` (Desktop) / `py-[80px]` (Mobile). ⋯ - **Radii:** Cards `12px` [EST], Buttons `999px` (pill). - **Colors:** Background `#08090a`, Primary `#5e6ad2`, Border `rgba(255,255,255,0.08)`.
What 244 clones tell us
Between April 19 and November 3, 2026, CopyDesign.ai wrote 244 specs. The median was 4,143 words; the middle half fell between 3,058 and 5,141.
Most people started from a link. Of those runs, 226 used a URL, 11 a screenshot, 5 a screen recording and 2 a mobile app screen.
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.
Is copying a design legal?
Layout patterns, spacing and type choices are widely reused. Logos, written copy, photos and trademarks belong to their owners. Rebuild the structure with your own brand and content, and check with a lawyer if the stakes are high. This isn't legal advice.
Try it on a site you like
Your first clone is free, and you don't need a card.