Copiez n'importe quel design de site web en une spécification de construction IA.
Paste a URL and we copy any website design into a spécification d'ingénierie de 6 000 mots. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90 % du travail fait dès la première invite.
N'importe quel site actif — nous ajoutons https:// si manquant. Appuyez sur Entrée pour générer.
Compte gratuit — 1 spec inclus, sans carte, un compte par personne.
Essayez un exemple :
Fonctionne avec tous les outils de code IA que vous utilisez déjà.
Lancement public prochainement
Une capture d'écran donne à votre IA un JPEG et une prière. Elle hallucine la police, invente l'espacement et choisit la mauvaise bibliothèque de composants. Nous lui donnons les données réelles.
Dépendance, à l'aveugle
Bolt, Lovable, v0 vous enferment dans leur éditeur et hallucinent tout ce qu'une capture d'écran ne peut pas montrer. Vous passez trois heures à corriger ce qu'une bonne spécification aurait pu éviter.
- Animations perdues. La capture d'écran est une image figée.
- Polices devinées. Généralement sur system-ui.
- Couleurs estimées à l'œil. Dérive HSL, opacité incorrecte.
- Mise en page réactive inventée. Généralement incorrecte.
- Bibliothèque de composants : ce que le LLM veut.
- Pile technologique inconnue. Le résultat est des divs non stylisés.
- Effets de défilement, états de survol, interactions : ignorés.
- Invite vague, code vague.
Portable. Précis. À vous.
Markdown simple. Collez-le dans n'importe quel outil IA que vous payez déjà. Nous explorons la page en direct, analysons le DOM, rendons les états de défilement, extrayons le graphe CSS et produisons une spécification avec suffisamment de signaux pour que votre IA n'ait pas à deviner.
- Courbes cubic-bezier, durées, délais — tout est mappé.
- Famille de police, graisse, taille, hauteur de ligne exactes.
- Couleurs hexadécimales précises, arrêts de dégradé, variables CSS.
- Chaque point de rupture, effondrement de colonne, pas de police.
- Identifie shadcn / Radix / MUI / Tailwind.
- Détecte Next.js, Astro, Vite, Motion, GSAP.
- Déclencheurs de défilement et états de survol documentés.
- Spécification de plus de 6 000 mots que votre IA peut réellement suivre.
Votre IA n'est aussi bonne que le contexte que vous lui donnez. Donnez-lui une spécification, pas une capture d'écran.
Pas de fouille dans les DevTools. Pas de sélection de couleurs. Pas de valeurs de padding enregistrées dans la console. Nous faisons passer le site par six passes d'extraction et vous livrons la source de vérité en moins de 45 secondes.
Récupérer le site en direct
Headless Chromium rend la page réelle — JS évalué, polices web chargées, états de défilement capturés, appels réseau enregistrés. Pas de capture d'écran obsolète, pas de devinettes à partir de la vue source.
Extraire la vérité du DOM
Nous lisons le CSS calculé sur chaque élément — couleurs hexadécimales exactes, font-family, line-height, padding, border-radius, shadow. Plus le texte brut pour que l'IA reproduise le texte au lieu de l'halluciner.
Analyse visuelle en deux passes
Un modèle de vision de pointe lit les captures d'écran. La première passe mappe la mise en page, la hiérarchie et la structure des composants. La deuxième passe détecte les animations, les états de survol et les mouvements déclenchés par le défilement.
Identifier la pile technologique
Nous détectons Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — à partir des motifs DOM et des globales d'exécution. Le résultat cible la même pile pour que votre IA construise du code de forme native.
Synthétiser la spécification
Les découvertes DOM + les découvertes visuelles + l'identification de la pile fusionnent en un dossier d'ingénierie structuré de 6 000 mots — tokens de design, grille de mise en page, timings d'animation, points de rupture réactifs, ordre de construction.
Coller dans n'importe quel outil IA
Texte brut en sortie — fonctionne avec Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Aucune dépendance fournisseur. Vous possédez la spécification pour toujours, même si vous annulez.
Chaque exécution produit un plan structuré de plus de 6 000 mots. Collez-le dans Claude Code, Cursor ou Codex et obtenez une implémentation fonctionnelle — pas une approximation hallucinatoire.
# 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
Pile technologique
Détectée à partir des en-têtes, des signatures de script et des motifs DOM. Next.js / Astro / Vite / Remix — avec les versions lorsqu'elles sont exposées.
Tokens de design
Valeurs hexadécimales, propriétés personnalisées CSS, échelle d'espacement, métriques de police, border-radius, définitions d'ombres — chaque variable qui compte.
Comportement
Courbes d'accélération, déclencheurs de défilement, transitions de survol, changements de points de rupture. Les 40 % du design qu'une capture d'écran ne peut pas capturer.
Le signal qui sépare une construction soignée d'une copie brute — courbes d'accélération, tokens calculés, la bibliothèque de composants réelle. Nous l'extrayons de la page en direct, pas d'une image.
Extraction de la mise en page et de l'espacement
Lit les modèles de boîte calculés, les définitions de grille, les valeurs d'espacement, le padding et la hiérarchie visuelle du DOM en direct — pas une supposition à partir d'une capture d'écran.
Couleur et typographie exactes
Extrait les valeurs hexadécimales, les arrêts de dégradé, les propriétés personnalisées CSS, les familles de polices, les graisses, les tailles et les hauteurs de ligne calculées directement de l'arbre de rendu.
Détection de la bibliothèque de composants
Identifie les motifs shadcn/ui, Radix, MUI, Headless UI et Tailwind — ainsi la spécification indique à votre IA quels primitives utiliser.
Courbes et déclencheurs d'animation
Capture les fonctions d'accélération, les durées, les effets liés au défilement et les transitions de survol — puis les écrit comme des spécifications Motion/GSAP que votre IA peut implémenter.
Identification complète de la pile
Détecte Next.js, Vite, Astro, Remix, les scripts d'analyse, les signatures CDN et les intégrations tierces. Versions exactes lorsque les en-têtes les exposent.
Carte des points de rupture réactifs
Documente chaque point de rupture, commutation flex/grid, effondrement de colonne et pas de taille de police — pour que la mise en page mobile ne soit pas une réflexion après coup dans la spécification.
Inspiration, pas infraction.
CopyDesign.ai est un outil d'étude et de prototypage. Utilisez-le pour comprendre les motifs de design, extraire des composants individuels et accélérer votre propre travail original. Nous ne soutenons pas l'utilisation malveillante — pas d'usurpation de marque, pas de pages de phishing, pas d'infraction de marque ou de droit d'auteur. Changez le logo, le nom, le texte. Faites-en le vôtre.
Nous écrivons la spécification. Votre IA construit.
Sortie markdown simple. Fonctionne avec Bolt, Lovable, v0, Cursor, Claude Code, Codex — à vous de choisir.
Aucune dépendance à un outil. Jamais.
La spécification est en texte brut. Collez-la dans Claude Code aujourd'hui, Codex demain, Gemini la semaine prochaine.
1,99 $. Une spécification. Aucun abonnement requis.
Essayez-le avant de vous engager. Achat unique, sortie immédiate.
90 % du travail fait dès la première invite. Honnêtement.
Nous ne promettons pas la perfection au pixel près. Nous promettons suffisamment de signaux pour que votre IA ne devine pas.
6 000 mots de signal structuré, pas une description vague.
Pile technologique, tokens de design, spécifications d'animation, logique réactive — tout en un seul collage.
L'URL est l'invite. Arrêtez les captures d'écran.
Donnez à votre IA les données dont elle a besoin au lieu d'une image qu'elle doit interpréter.
Étudiez le métier. Construisez quelque chose d'original.
Inspiration, pas infraction. Nous extrayons les motifs — vous apportez l'idée.
Essayez-le une fois, gratuitement, sans carte requise. Passez à la version supérieure lorsque le résultat parle de lui-même — pas d'essais, pas de remboursements.
Gratuit
1 clone · pour toujours
Starter
12 clones / mois
Pro
30 clones / mois
Questions, réponses.
Des réponses claires sur ce que CopyDesign.ai fait, et ce qu'il ne fait pas.
Fonctionne-t-il sur les applications derrière des murs de connexion ?
Peut-il gérer les sites CSS-in-JS comme Linear ou Stripe ?
Qu'en est-il des sites WebGL ou très gourmands en canvas ?
Mon URL est-elle stockée quelque part ?
Qu'est-ce qui compte comme un 'clone' — les réexécutions coûtent-elles plus cher ?
Combien de temps prend un clone typique ?
Puis-je cloner des applications mobiles à partir de captures d'écran ?
Avec quels outils IA le résultat fonctionne-t-il ?
Donnez une spécification à votre IA.
Pas une capture d'écran à déchiffrer.
Une URL. Moins de 45 secondes. Une spécification de 6 000 mots que votre IA peut réellement construire. Le premier est gratuit — sans carte, sans liste d'attente.
Sans carte · Annulez à tout moment · Résultat en moins de 45 secondes