How do I copy a website design?

Paste the URL into CopyDesign.ai. Our 6-pass pipeline renders the page in headless Chromium, reads every computed style, fingerprints the tech stack, and produces a 6,000-word engineering spec. Paste that spec into Claude Code, Cursor, Codex, Gemini, or v0 and the AI rebuilds the design in your own stack.

Is it legal to copy a website design?

CopyDesign.ai produces a structural specification — colors, spacing, typography scale, layout grid, animation timings, tech stack. It is not a verbatim copy of code, copy, imagery, logos, or trademarks. You are responsible for replacing proprietary brand assets and copy before shipping. Taking structural inspiration is standard practice; shipping a pixel-identical knockoff with someone else's logo is not.

Can I copy a website design without coding?

You still need an AI code tool — Claude Code, Cursor, Codex, Gemini, v0, Bolt, or Lovable — to ship the result. CopyDesign.ai is the prompt layer: it generates the structured spec those tools need to reproduce a design faithfully on the first try.

Does it work on apps behind login walls?

No. CopyDesign.ai fetches and screenshots the public-facing URL. For authenticated pages, upload screenshots via Image or Mobile mode instead.

Can it handle CSS-in-JS sites like Linear or Stripe?

Yes. We read computed styles injected after hydration, not source JS. Stripe and Linear produce some of our highest-fidelity clones.

How long does a typical clone take?

Most URL clones complete in 20-45 seconds. Image mode runs in 10-20 seconds. Video mode can take 60-90 seconds.

What AI tools does the output work with?

The generated prompt is plain text, optimised for Claude Code, Claude Design, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt, Lovable, and ChatGPT.

How is CopyDesign.ai different from v0, Bolt, or Lovable?

v0, Bolt, and Lovable are hosted builders — you work inside their editor and the output is locked to their runtime. CopyDesign.ai is a prompt layer: you get a plain-text 6,000-word engineering spec that works in any AI code tool, forever, with no vendor lock.

Is the output copyright-safe?

The output is a structural specification — design tokens, layout, animation timings, tech stack — not a verbatim copy. You are responsible for replacing proprietary copy, imagery, brand assets, and trademarks before shipping.

What exactly is in the 6,000-word spec?

Tech stack detection, design tokens (colors, typography, spacing), component library fingerprint, full layout grid with breakpoints, animation timing functions and triggers, interaction specs (hover, scroll, focus states), responsive behavior per section, and a step-by-step build order.

Do you store the cloned sites or the specs?

We cache URL specs for 7 days so re-runs return instantly. Uploaded screenshots and videos are discarded after analysis. You can delete your clone history at any time from the dashboard.

How long does it take to copy a website design?

Most URL clones complete in 20–45 seconds. Image and mobile-screenshot mode finishes in 10–20 seconds because there is no fetch step. Video mode takes 60–90 seconds depending on file size. The 6-pass pipeline runs in parallel, so even complex JS-heavy pages rarely exceed 90 seconds.

How much does it cost to copy a website design?

Your first clone is free, no card required. After that, a single spec costs $1.99 (one-shot, no subscription). Monthly plans start at $9.99 for 12 clones, $19.99 for 30 clones, and $49 for the Scale tier with higher limits. All plans produce the same 6,000-word plain-text output.

Can I copy a website design and customize it for my brand?

Yes — that is the intended use. The spec documents design tokens, layout grid, typography, and animation timings as editable values, not locked assets. Swap the color palette, replace the logo, rewrite the copy, and the underlying structure is yours. CopyDesign.ai is a starting point, not a final deliverable.

How do I copy a website's CSS and design tokens?

CopyDesign.ai reads computed styles directly from the live DOM after the page has fully rendered. Every hex color, CSS custom property, font metric, spacing value, border-radius, and shadow definition is extracted and written into the spec as named design tokens. You get the exact values — not eyeballed approximations.

Can I copy a mobile app or mobile-responsive design?

Yes, in two ways. For mobile-responsive websites, the 6-pass pipeline captures every breakpoint, column collapse, and font-size step. For native iOS and Android apps, use Mobile App mode — upload up to 10 screenshots and receive a full spec with React Native and SwiftUI component guidance.

Does it copy animations, hover states, and scroll interactions?

Yes. The second visual pass is dedicated to motion: easing functions, durations, delays, scroll-triggered IntersectionObserver thresholds, and hover transitions are all captured and written as Motion/GSAP-compatible specs. This is one of the main advantages over pasting a screenshot into an LLM, which drops all interaction data.

What's the difference between copying a design and taking inspiration from it?

CopyDesign.ai produces a structural specification — spacing, typography scale, color tokens, layout grid, animation timings — not a verbatim copy of code, copy, logos, or brand assets. Taking structural inspiration is standard industry practice. You are responsible for replacing proprietary brand elements before shipping. The spec gives you the engineering blueprint; the creative application is yours.

Can I copy websites built with Webflow, Framer, or Squarespace?

Yes. The 6-pass pipeline reads computed styles from the live DOM regardless of the builder used. Webflow, Framer, Squarespace, Wix, and WordPress sites all render to standard HTML and CSS in the browser — that is what we extract. The spec will note the detected platform so your AI can target an appropriate stack.

Will Google penalize my site for copying another design?

Google penalizes duplicate content — identical text and media — not similar visual layouts. Design patterns (grid systems, card layouts, color palettes) are not copyrightable in most jurisdictions. Build on the structural blueprint, write original copy, and use your own imagery and brand assets. That produces a unique page Google can index and rank on its own merits.

How is CopyDesign.ai different from Locofy, Anima, or Builder.io?

Locofy, Anima, and Builder.io convert existing Figma designs into code — you need the source design file. CopyDesign.ai works from a live URL, screenshot, or video with no design file required. The output is a plain-text engineering spec you paste into any AI code tool you already use, rather than generated code locked to a proprietary runtime.

Can I copy a SaaS landing page for my own product?

Yes — SaaS landing pages are among the most common use cases. Paste the URL of any landing page you admire, get a 6,000-word spec covering its layout, typography, component structure, and animations, then drop it into Claude Code, Cursor, or v0 to build your own version with your branding and messaging.

Does it work on single-page apps built with React, Vue, or Svelte?

Yes. Headless Chromium fully evaluates JavaScript before extraction begins, so client-rendered SPAs — whether built with React, Vue, Svelte, or Angular — are processed the same way as server-rendered pages. The stack fingerprint step will detect the framework and include it in the spec so your AI targets the right primitives.

Can I copy a website's design for client work?

Yes. There is no restriction on using specs for client projects. Many agencies and freelancers use CopyDesign.ai to rapidly prototype designs inspired by reference sites, then customise them for each client. The plain-text spec can be shared directly with clients or dropped into whichever AI code tool the project uses.

How accurate is the copied design — is it really pixel-perfect?

We aim for 90% fidelity on the first AI prompt, not guaranteed pixel-perfection. Design tokens, layout grid, typography, and animations are extracted from computed values and are highly accurate. Complex WebGL scenes, proprietary SVG illustrations, and custom shader effects are approximated with described placeholders. Budget one or two rounds of AI refinement to close the remaining gap.

Do I need a Figma file to use CopyDesign.ai?

No Figma file required. CopyDesign.ai works from three input types: a public URL (most common), an uploaded screenshot or set of screenshots, or an uploaded screen-recording video. The 6-pass extraction pipeline reads the live or uploaded source directly — no design tool, no API key, no plugin to install.

Eén specificatie. Elke AI-codetool. Geen vendor lock-in.

Kopieer elk websiteontwerp naar een AI-bouwspecificatie.

Paste a URL and we copy any website design into a technische specificatie van 6.000 woorden. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90% klaar bij de eerste prompt.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

Website-URL

Elke live site — we voegen https:// toe als dat ontbreekt. Druk op Enter om te genereren.

Gratis account — 1 spec inbegrepen, geen kaart, één account per persoon.

Probeer een voorbeeld:

Scrollen

Werkt met elke AI-codetool die je al gebruikt.

Claude Code

Claude Design

Codex

Gemini

Cursor

Windsurf

Replit

ChatGPT

Bolt

Copilot

Lovable

Claude Code

Claude Design

Codex

Gemini

Cursor

Windsurf

Replit

ChatGPT

Bolt

Copilot

Lovable

Binnenkort openbaar gelanceerd

Waarom screenshots falen

Een screenshot geeft je AI een jpeg en een gebed. Het hallucineert het lettertype, verzint de spatiëring en kiest de verkeerde componentenbibliotheek. Wij geven het de daadwerkelijke data.

De screenshot-aanpakscreenshot.png → llm → giswerk

Vastgezet, blind vliegend

Bolt, Lovable, v0 houden je vast in hun editor en hallucineren alles wat de screenshot niet kan tonen. Je besteedt drie uur aan het repareren van wat één goede specificatie had kunnen voorkomen.

Animaties verdwenen. Screenshot is een bevroren frame.
Lettertypen geraden. Landt meestal op system-ui.
Kleuren op het oog bepaald. HSL-drift, verkeerde dekking.
Responsieve lay-out verzonnen. Meestal verkeerd.
Componentenbibliotheek: wat de LLM maar wil.
Tech stack onbekend. Output zijn ongestylede divs.
Scrolleffecten, hover-statussen, interacties: weggelaten.
Vage prompt in, vage code uit.

CopyDesign.aiurl → spec → elke AI-tool

Draagbaar. Nauwkeurig. Van jou.

Eenvoudige markdown. Plak het in elke AI-tool waarvoor je al betaalt. We crawlen de live pagina, parsen de DOM, renderen scroll-statussen, extraheren de CSS-grafiek en produceren een specificatie met voldoende signaal zodat je AI niet hoeft te gissen.

cubic-bezier curves, duraties, vertragingen — allemaal in kaart gebracht.
Exacte lettertypefamilie, gewicht, grootte, regelhoogte.
Hex-precieze kleuren, gradiëntstops, CSS-variabelen.
Elke breakpoint, kolom-ineenstorting, lettertype-stap.
Vingerafdrukken shadcn / Radix / MUI / Tailwind.
Detecteert Next.js, Astro, Vite, Motion, GSAP.
Scroll-triggers en hover-statussen gedocumenteerd.
Specificatie van 6.000+ woorden die je AI daadwerkelijk kan volgen.

Je AI is slechts zo goed als de context die je eraan geeft. Geef het een specificatie, geen screenshot.

Ons proces

Geen DevTools-speurtocht. Geen kleuren kiezen. Geen console-logging van padding-waarden. We halen de site door zes extractiepasses en overhandigen je de bron van waarheid in minder dan 45 seconden.

INVOER

Haal de live site op

Headless Chromium rendert de echte pagina — JS geëvalueerd, webfonts geladen, scroll-statussen vastgelegd, netwerkoproepen gelogd. Geen verouderde screenshot, geen giswerk vanuit broncode.

EXTRACTIE

Extraheer de DOM-waarheid

We lezen berekende CSS op elk element — exacte hex-kleuren, lettertypefamilie, regelhoogte, padding, border-radius, schaduw. Plus de ruwe tekst zodat de AI de tekst reproduceert in plaats van deze te hallucineren.

ZIEN

Visuele analyse in twee passes

Een geavanceerd vision-model leest de screenshots. Pass één brengt lay-out, hiërarchie en componentstructuur in kaart. Pass twee detecteert animaties, hover-statussen en scroll-geactiveerde beweging.

IDENTIFICEREN

Vingerafdruk van de stack

We detecteren Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — op basis van DOM-patronen en runtime-globals. De output richt zich op dezelfde stack, zodat je AI native-vormige code bouwt.

SAMENSTELLEN

Synthetiseer de specificatie

DOM-bevindingen + visuele bevindingen + stack-vingerafdruk worden samengevoegd tot een gestructureerde technische briefing van 6.000 woorden — designtokens, lay-outraster, animatietijden, responsieve breakpoints, bouwvolgorde.

LEVEREN

Plak in elke AI-tool

Eenvoudige tekstuitvoer — werkt in Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Geen vendor lock-in. Je bezit de specificatie voor altijd, zelfs als je opzegt.

Wat je krijgt

Elke run produceert een gestructureerde blauwdruk van 6.000+ woorden. Plak het in Claude Code, Cursor of Codex en krijg een werkende implementatie — geen gehallucineerde benadering.

clone-prompt.md

6,247 words

# 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

Kopiëren. Plakken in je AI-tool. Leveren.

Tech stack

Gedetecteerd uit headers, scriptsignaturen en DOM-patronen. Next.js / Astro / Vite / Remix — met versies waar deze worden weergegeven.

Designtokens

Hex-waarden, CSS custom properties, spatiëringsschaal, lettertypemetrieken, border-radius, schaduwdefinities — elke variabele die ertoe doet.

Gedrag

easing curves, scroll-triggers, hover-overgangen, breakpoint-switches. De 40% van het ontwerp die een screenshot niet kan vastleggen.

Wat we extraheren

Het signaal dat een gepolijste build scheidt van een ruwe kopie — easing curves, berekende tokens, de daadwerkelijke componentenbibliotheek. We halen het van de live pagina, niet van een afbeelding.

Lay-out & Spatiëringsextractie

Leest berekende box-modellen, grid-definities, gap-waarden, padding en visuele hiërarchie van de live DOM — niet een gok van een screenshot.

Exacte kleur & type

Haalt hex-waarden, gradiëntstops, CSS custom properties, lettertypefamilies, gewichten, groottes en berekende regelhoogtes rechtstreeks uit de render-tree.

Componentenbibliotheekdetectie

Vingerafdrukken shadcn/ui, Radix, MUI, Headless UI en Tailwind-patronen — zodat de specificatie je AI vertelt welke primitieven te gebruiken.

Animatiecurves & triggers

Legt easing-functies, duraties, scroll-gerelateerde effecten en hover-overgangen vast — en schrijft deze vervolgens als Motion/GSAP-specificaties die je AI kan implementeren.

Volledige stack-vingerafdruk

Detecteert Next.js, Vite, Astro, Remix, analysescripts, CDN-signaturen en integraties van derden. Exacte versies wanneer headers deze blootleggen.

Responsieve breakpoint-kaart

Documenteert elke breakpoint, flex/grid-schakelaar, kolom-ineenstorting en lettergrootte-stap — zodat mobiele lay-out geen bijzaak is in de specificatie.

Verantwoord gebruik

Inspiratie, geen inbreuk.

CopyDesign.ai is een studie- en prototypingtool. Gebruik het om ontwerppatronen te begrijpen, individuele componenten te extraheren en je eigen originele werk te versnellen. Wij ondersteunen geen kwaadwillig gebruik — geen merkimpersonatie, geen phishingpagina's, geen inbreuk op handelsmerken of auteursrechten. Verwissel het logo, de naam, de tekst. Maak het van jou.

Waarom CopyDesign.ai

Wij schrijven de specificatie. Jouw AI bouwt.

Eenvoudige markdown-output. Werkt met Bolt, Lovable, v0, Cursor, Claude Code, Codex — jouw keuze.

Geen tool lock-in. Nooit.

De specificatie is platte tekst. Plak het vandaag in Claude Code, morgen in Codex, volgende week in Gemini.

$1.99. Eén specificatie. Geen abonnement vereist.

Probeer het voordat je je vastlegt. Eenmalige aankoop, directe output.

90% klaar bij de eerste prompt. Eerlijk.

We beloven geen pixel-perfectie. We beloven voldoende signaal zodat je AI niet hoeft te gissen.

6.000 woorden gestructureerd signaal, geen vage beschrijving.

Tech stack, designtokens, animatiespecificaties, responsieve logica — alles in één keer plakken.

De URL is de prompt. Stop met screenshots maken.

Geef je AI de data die het nodig heeft in plaats van een afbeelding die het moet interpreteren.

Bestudeer het vak. Bouw iets origineels.

Inspiratie, geen inbreuk. Wij extraheren patronen — jij brengt het idee.

Prijzen

Probeer het één keer, gratis, geen kaart vereist. Upgrade wanneer de output voor zichzelf spreekt — geen proefperiodes, geen terugbetalingen.

Gratis

$0/mnd

1 kloon · voor altijd

Meest populair

Starter

$9.99/mnd

12 klonen / maand

Pro

$19.99/mnd

30 klonen / maand

Of pak een enkele specificatie voor $1,99 — geen abonnement, geen verlenging.

Bekijk volledige prijzen

Veelgestelde vragen

Vragen, beantwoord.

Duidelijke antwoorden over wat CopyDesign.ai doet, en wat het niet doet.

Werkt het op apps achter inlogschermen?

Nee. We halen alleen de openbaar toegankelijke URL op en maken daar screenshots van. Dashboards, adminpanelen en geauthenticeerde flows zijn buiten bereik. Schakel hiervoor over naar de Afbeelding- of Mobiele modus — maak zelf de screenshots en upload ze.

Kan het CSS-in-JS sites zoals Linear of Stripe aan?

Ja. We lezen berekende stijlen nadat de pagina is gerenderd, niet de bron-JS. Stripe en Linear zijn twee van onze outputs met de hoogste getrouwheid — CSS-in-JS is geen probleem.

Hoe zit het met WebGL- of canvas-intensieve sites?

Gedeeltelijk. Statische lay-out, typografie en UI-chrome worden schoon geëxtraheerd. WebGL-shaders en Three.js-scènes worden benaderd — we beschrijven het effect en bieden een placeholder-implementatie. Volledige shader-replicatie staat niet op de roadmap.

Wordt mijn URL ergens opgeslagen?

Je URL wordt opgeslagen in je kloongeschiedenis, zichtbaar in je dashboard. We verkopen of delen deze niet. Screenshots die tijdens de analyse zijn gemaakt, worden verwijderd zodra de specificatie is gegenereerd. Zie het privacybeleid voor het volledige plaatje.

Wat telt als één 'kloon' — kosten herhalingen extra?

Elke klik op Genereren kost één credit, inclusief herhalingen van dezelfde URL. Resultaten worden niet tussen sessies gecached, dus een herhaling produceert een nieuwe specificatie en verbruikt één credit.

Hoe lang duurt een typische kloon?

URL-modus: 20–45 seconden. Afbeelding- en mobiele-screenshotmodus: 10–20 seconden (geen ophaalstap). Videomodus: 60–90 seconden afhankelijk van bestandsgrootte. JS-intensieve pagina's duren langer omdat we wachten op volledige rendering.

Kan ik mobiele apps klonen van screenshots?

Ja — dat is de Mobiele App-modus. Upload tot 10 screenshots van elke iOS- of Android-app en krijg een volledige specificatie met React Native en SwiftUI componentbegeleiding. Meer schermen betekent een completere output.

Met welke AI-tools werkt de output?

De specificatie is platte tekst. Plak het in Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt of ChatGPT. Het is standaard geformatteerd voor Next.js + Tailwind, maar leesbaar genoeg om aan te passen aan elke stack.

Geef je AI een specificatie.
Geen screenshot om naar te turen.

Eén URL. Binnen 45 seconden. Een specificatie van 6.000 woorden waar je AI daadwerkelijk mee kan bouwen. De eerste is gratis — geen kaart, geen wachtlijst.

Bekijk prijzen

Geen kaart · Annuleer op elk moment · Output binnen 45 seconden