Copy any website design into an AI build spec.
Paste a URL. We reverse-engineer the design and produce a 6,000-word engineering spec. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90% there on the first prompt.
Any live site — we'll add https:// if missing. Press Enter to generate.
Free account — 1 spec included, no card required, one account per person.
Try an example:
Works with every AI code tool you already use.
Launching publicly soon
A screenshot gives your AI a jpeg and a prayer. It hallucinates the font, invents the spacing, and picks the wrong component library. We give it the actual data.
Locked in, flying blind
Bolt, Lovable, v0 trap you in their editor and hallucinate everything the screenshot can\u2019t show. You spend three hours fixing what one good spec would have prevented.
- Animations gone. Screenshot is a frozen frame.
- Fonts guessed. Usually lands on system-ui.
- Colors eyeballed. HSL drift, wrong opacity.
- Responsive layout invented. Usually wrong.
- Component library: whatever the LLM feels like.
- Tech stack unknown. Output is unstyled divs.
- Scroll effects, hover states, interactions: dropped.
- Vague prompt in, vague code out.
Portable. Precise. Yours.
Plain markdown. Paste it into any AI tool you already pay for. We crawl the live page, parse the DOM, render scroll states, extract the CSS graph, and produce a spec with enough signal that your AI doesn\u2019t have to guess.
- cubic-bezier curves, durations, delays — all mapped.
- Exact font family, weight, size, line-height.
- Hex-precise colors, gradient stops, CSS vars.
- Every breakpoint, column collapse, font step.
- Fingerprints shadcn / Radix / MUI / Tailwind.
- Detects Next.js, Astro, Vite, Motion, GSAP.
- Scroll triggers and hover states documented.
- 6,000+ word spec your AI can actually follow.
Your AI is only as good as the context you give it. Give it a spec, not a screenshot.
No DevTools spelunking. No color-picking. No console-logging padding values. We run the site through six extraction passes and hand you the source of truth in under 45 seconds.
Fetch the live site
Headless Chromium renders the real page — JS evaluated, web fonts loaded, scroll states captured, network calls logged. No stale screenshot, no source-view guessing.
Extract the DOM truth
We read computed CSS on every element — exact hex colors, font-family, line-height, padding, border-radius, shadow. Plus the raw copy so the AI reproduces text instead of hallucinating it.
Two-pass visual analysis
A frontier vision model reads the screenshots. Pass one maps layout, hierarchy, and component structure. Pass two catches animations, hover states, and scroll-triggered motion.
Fingerprint the stack
We detect Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — from DOM patterns and runtime globals. Output targets the same stack so your AI builds native-shaped code.
Synthesize the spec
DOM findings + visual findings + stack fingerprint merge into a structured 6,000-word engineering brief — design tokens, layout grid, animation timings, responsive breakpoints, build order.
Paste into any AI tool
Plain text out — works in Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. No vendor lock. You own the spec forever, even if you cancel.
Every run produces a structured 6,000+ word blueprint. Paste it into Claude Code, Cursor, or Codex and get a working implementation — not a hallucinated approximation.
# CLONE SPECIFICATION # source · linear.app ## TECH STACK DETECTED framework Next.js 14 (App Router) styling Tailwind CSS + CSS vars components Custom primitives + Radix animation Framer Motion font loader next/font · "Inter Tight" ## DESIGN TOKENS → colors --background #08090A --foreground #F7F8F8 --accent #5E6AD2 --muted #858699 --border rgba(255,255,255,0.08) ## TYPOGRAPHY font-family "Inter Tight", -apple-system scale 12 / 14 / 16 / 20 / 28 / 40 / 64 line-height 1.1 headings · 1.5 body tracking -0.022em headings ## LAYOUT ARCHITECTURE hero 12-col grid · 1200px max · centered nav sticky · backdrop-blur(24px) · 64h section 96px vertical rhythm cards 4px radius · inset 1px 0 rgba(...) ## ANIMATION SPECS hero.enter opacity 0→1, y 20→0, 600ms ease-out scroll.reveal IntersectionObserver · margin -80px hover.default scale(1.02) · 250ms cubic-bezier(.2,.8,.2,1) ## RESPONSIVE ≤ 640px single column · 16px padding ≤ 1024px 2-col grid · 24px padding ≥ 1024px 3-col grid · 48px padding ## BUILD INSTRUCTIONS Build in Next.js 14 (App Router). Use Tailwind with
Tech stack
Detected from headers, script signatures, and DOM patterns. Next.js / Astro / Vite / Remix — with versions where exposed.
Design tokens
Hex values, CSS custom properties, spacing scale, font metrics, border-radius, shadow definitions — every variable that matters.
Behavior
easing curves, scroll triggers, hover transitions, breakpoint switches. The 40% of the design a screenshot can’t capture.
The signal that separates a polished build from a rough copy — easing curves, computed tokens, the actual component library. We pull it from the live page, not an image.
Layout & Spacing Extraction
Reads computed box models, grid definitions, gap values, padding, and visual hierarchy from the live DOM — not a guess from a screenshot.
Exact Color & Type
Pulls hex values, gradient stops, CSS custom properties, font families, weights, sizes, and computed line-heights straight from the render tree.
Component Library Detection
Fingerprints shadcn/ui, Radix, MUI, Headless UI, and Tailwind patterns — so the spec tells your AI which primitives to reach for.
Animation Curves & Triggers
Captures easing functions, durations, scroll-linked effects, and hover transitions — then writes them as Motion/GSAP specs your AI can implement.
Full Stack Fingerprint
Detects Next.js, Vite, Astro, Remix, analytics scripts, CDN signatures, and third-party integrations. Exact versions when headers expose them.
Responsive Breakpoint Map
Documents every breakpoint, flex/grid switch, column collapse, and font-size step — so mobile layout isn’t an afterthought in the spec.
Inspiration, not infringement.
CopyDesign.ai is a study and prototyping tool. Use it to understand design patterns, extract individual components, and accelerate your own original work. We do not support malicious use — no brand impersonation, no phishing pages, no trademark or copyright infringement. Swap the logo, the name, the copy. Make it yours.
We write the spec. Your AI does the building.
Plain markdown output. Works with Bolt, Lovable, v0, Cursor, Claude Code, Codex — your call.
No tool lock-in. Ever.
The spec is plain text. Paste it into Claude Code today, Codex tomorrow, Gemini next week.
$1.99. One spec. No subscription required.
Try it before you commit. One-shot purchase, immediate output.
90% there on the first prompt. Honest.
We don’t promise pixel-perfect. We promise enough signal that your AI isn’t guessing.
6,000 words of structured signal, not a vague description.
Tech stack, design tokens, animation specs, responsive logic — all in one paste.
The URL is the prompt. Stop screenshotting.
Give your AI the data it needs instead of an image it has to interpret.
Study the craft. Build something original.
Inspiration, not infringement. We extract patterns — you bring the idea.
Try it once, free, no card required. Upgrade when the output speaks for itself — no trials, no refunds.
Free
1 clone · forever
Starter
12 clones / month
Pro
30 clones / month
Questions, answered.
Straight answers about what CopyDesign.ai does, and what it doesn't.
Does it work on apps behind login walls?
Can it handle CSS-in-JS sites like Linear or Stripe?
What about WebGL or canvas-heavy sites?
Is my URL stored anywhere?
What counts as one 'clone' — do re-runs cost extra?
How long does a typical clone take?
Can I clone mobile apps from screenshots?
What AI tools does the output work with?
Give your AI a spec.
Not a screenshot to squint at.
One URL. Under 45 seconds. A 6,000-word spec your AI can actually build from. First one is free — no card, no waitlist.
No card · Cancel anytime · Output in under 45 seconds