Una specifica. Ogni strumento di codice AI. Nessun vincolo.

Copia qualsiasi design di sito web in una specifica di costruzione AI.

Paste a URL and we copy any website design into a specifica di ingegneria di 6.000 parole. Drop it into Claude Code, Codex, Cursor, or Gemini and get il 90% del lavoro fatto al primo prompt.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

Qualsiasi sito live — aggiungiamo https:// se manca. Premi Invio per generare.

Account gratuito — 1 spec incluso, senza carta, un account per persona.

Prova un esempio:

Scorri

Funziona con ogni strumento di codice AI che già utilizzi.

Claude Code
Claude Design
Codex
Gemini
Cursor
Windsurf
Replit
ChatGPT
v0
Bolt
Copilot
Lovable
Claude Code
Claude Design
Codex
Gemini
Cursor
Windsurf
Replit
ChatGPT
v0
Bolt
Copilot
Lovable

Lancio pubblico a breve

Perché gli screenshot falliscono


Uno screenshot dà alla tua AI un jpeg e una preghiera. Allucina il font, inventa la spaziatura e sceglie la libreria di componenti sbagliata. Noi le diamo i dati reali.

L'approccio dello screenshotscreenshot.png → llm → ipotesi

Vincolato, alla cieca

Bolt, Lovable, v0 ti intrappolano nel loro editor e allucinano tutto ciò che lo screenshot non può mostrare. Passi tre ore a correggere ciò che una buona specifica avrebbe prevenuto.

  • Animazioni perse. Lo screenshot è un fotogramma congelato.
  • Font indovinati. Di solito finisce su system-ui.
  • Colori stimati a occhio. Deriva HSL, opacità sbagliata.
  • Layout responsivo inventato. Solitamente sbagliato.
  • Libreria di componenti: quello che l'LLM preferisce.
  • Stack tecnologico sconosciuto. L'output sono div senza stile.
  • Effetti di scorrimento, stati hover, interazioni: persi.
  • Prompt vago in ingresso, codice vago in uscita.
CopyDesign.aiurl → spec → qualsiasi strumento AI

Portatile. Preciso. Tuo.

Markdown semplice. Incollalo in qualsiasi strumento AI per cui paghi già. Scansioniamo la pagina live, analizziamo il DOM, rendiamo gli stati di scorrimento, estraiamo il grafo CSS e produciamo una specifica con abbastanza segnale da non far indovinare la tua AI.

  • Curve cubic-bezier, durate, ritardi — tutto mappato.
  • Famiglia di font, peso, dimensione, interlinea esatti.
  • Colori esatti in esadecimale, stop di gradiente, variabili CSS.
  • Ogni breakpoint, collasso di colonna, passo del font.
  • Identifica shadcn / Radix / MUI / Tailwind.
  • Rileva Next.js, Astro, Vite, Motion, GSAP.
  • Trigger di scorrimento e stati hover documentati.
  • Specifica di oltre 6.000 parole che la tua AI può effettivamente seguire.

La tua AI è buona solo quanto il contesto che le dai. Dalle una specifica, non uno screenshot.

Il nostro processo

Nessuna esplorazione di DevTools. Nessuna selezione di colori. Nessun logging di valori di padding nella console. Eseguiamo il sito attraverso sei passaggi di estrazione e ti consegniamo la fonte di verità in meno di 45 secondi.

ACQUISIZIONE

Recupera il sito live

Headless Chromium renderizza la pagina reale — JS valutato, font web caricati, stati di scorrimento catturati, chiamate di rete registrate. Nessuno screenshot obsoleto, nessuna ipotesi dalla vista sorgente.

ESTRAZIONE

Estrai la verità del DOM

Leggiamo il CSS calcolato su ogni elemento — colori esatti in esadecimale, font-family, line-height, padding, border-radius, shadow. Più il testo grezzo in modo che l'AI riproduca il testo invece di allucinarlo.

VISIONE

Analisi visiva a due passaggi

Un modello di visione all'avanguardia legge gli screenshot. Il primo passaggio mappa layout, gerarchia e struttura dei componenti. Il secondo passaggio cattura animazioni, stati hover e movimenti attivati dallo scorrimento.

IDENTIFICAZIONE

Identifica lo stack

Rileviamo Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — da pattern DOM e globali di runtime. L'output mira allo stesso stack in modo che la tua AI costruisca codice con la forma nativa.

COMPOSIZIONE

Sintetizza la specifica

I risultati del DOM + i risultati visivi + l'identificazione dello stack si fondono in un brief di ingegneria strutturato di 6.000 parole — token di design, griglia di layout, tempistiche delle animazioni, breakpoint responsivi, ordine di costruzione.

CONSEGNA

Incolla in qualsiasi strumento AI

Testo semplice in uscita — funziona con Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Nessun vincolo del fornitore. Possiedi la specifica per sempre, anche se annulli.

Cosa ottieni

Ogni esecuzione produce un blueprint strutturato di oltre 6.000 parole. Incollalo in Claude Code, Cursor o Codex e ottieni un'implementazione funzionante — non un'approssimazione allucinata.

clone-prompt.md
# 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
Copia. Incolla nel tuo strumento AI. Consegna.

Stack tecnologico

Rilevato da header, firme di script e pattern DOM. Next.js / Astro / Vite / Remix — con versioni dove esposte.

Token di design

Valori esadecimali, proprietà CSS personalizzate, scala di spaziatura, metriche dei font, border-radius, definizioni di ombre — ogni variabile che conta.

Comportamento

Curve di easing, trigger di scorrimento, transizioni hover, cambi di breakpoint. Il 40% del design che uno screenshot non può catturare.

Cosa estraiamo

Il segnale che separa una build raffinata da una copia grezza — curve di easing, token calcolati, la libreria di componenti effettiva. Lo estraiamo dalla pagina live, non da un'immagine.

Estrazione di Layout e Spaziatura

Legge modelli di box calcolati, definizioni di griglia, valori di gap, padding e gerarchia visiva dal DOM live — non un'ipotesi da uno screenshot.

Colore e Tipo Esatti

Estrae valori esadecimali, stop di gradiente, proprietà CSS personalizzate, famiglie di font, pesi, dimensioni e interlinee calcolate direttamente dall'albero di rendering.

Rilevamento Libreria Componenti

Identifica shadcn/ui, Radix, MUI, Headless UI e pattern Tailwind — così la specifica dice alla tua AI quali primitive utilizzare.

Curve e Trigger di Animazione

Cattura funzioni di easing, durate, effetti legati allo scorrimento e transizioni hover — poi li scrive come specifiche Motion/GSAP che la tua AI può implementare.

Identificazione Completa dello Stack

Rileva Next.js, Vite, Astro, Remix, script di analisi, firme CDN e integrazioni di terze parti. Versioni esatte quando gli header le espongono.

Mappa dei Breakpoint Responsivi

Documenta ogni breakpoint, switch flex/grid, collasso di colonna e passo della dimensione del font — così il layout mobile non è un ripensamento nella specifica.

Uso responsabile

Ispirazione, non infrazione.

CopyDesign.ai è uno strumento di studio e prototipazione. Usalo per comprendere i pattern di design, estrarre singoli componenti e accelerare il tuo lavoro originale. Non supportiamo l'uso malevolo — nessuna impersonificazione di brand, nessuna pagina di phishing, nessuna violazione di marchi o copyright. Cambia il logo, il nome, il testo. Rendilo tuo.

Perché CopyDesign.ai

Noi scriviamo la specifica. La tua AI costruisce.

Output in markdown semplice. Funziona con Bolt, Lovable, v0, Cursor, Claude Code, Codex — a tua scelta.

Nessun vincolo dello strumento. Mai.

La specifica è testo semplice. Incollala in Claude Code oggi, Codex domani, Gemini la prossima settimana.

$1.99. Una specifica. Nessun abbonamento richiesto.

Provalo prima di impegnarti. Acquisto singolo, output immediato.

Il 90% del lavoro fatto al primo prompt. Onesto.

Non promettiamo la perfezione al pixel. Promettiamo abbastanza segnale da non far indovinare la tua AI.

6.000 parole di segnale strutturato, non una descrizione vaga.

Stack tecnologico, token di design, specifiche di animazione, logica responsiva — tutto in un unico incolla.

L'URL è il prompt. Smetti di fare screenshot.

Dai alla tua AI i dati di cui ha bisogno invece di un'immagine che deve interpretare.

Studia l'arte. Costruisci qualcosa di originale.

Ispirazione, non infrazione. Estraiamo pattern — tu porti l'idea.

Prezzi

Provalo una volta, gratuitamente, nessuna carta richiesta. Effettua l'upgrade quando l'output parla da sé — nessun periodo di prova, nessun rimborso.

Gratuito

$0/mese

1 clone · per sempre

Più popolare

Starter

$9.99/mese

12 cloni / mese

Pro

$19.99/mese

30 cloni / mese

FAQ

Domande, risposte.

Risposte chiare su cosa fa CopyDesign.ai e cosa non fa.

Funziona con app protette da login?
No. Recuperiamo e facciamo screenshot solo dell'URL pubblico. Dashboard, pannelli di amministrazione e flussi autenticati sono fuori portata. Per questi, passa alla modalità Immagine o Mobile — scatta tu stesso gli screenshot e caricali.
Può gestire siti CSS-in-JS come Linear o Stripe?
Sì. Leggiamo gli stili calcolati dopo il rendering della pagina, non il JS sorgente. Stripe e Linear sono due dei nostri output con la più alta fedeltà — CSS-in-JS non è un problema.
E per quanto riguarda siti con WebGL o canvas pesanti?
Parzialmente. Layout statico, tipografia e interfaccia utente si estraggono in modo pulito. Shader WebGL e scene Three.js sono approssimati — descriviamo l'effetto e forniamo un'implementazione placeholder. La replicazione completa degli shader non è in programma.
Il mio URL viene memorizzato da qualche parte?
Il tuo URL è memorizzato nella cronologia dei tuoi cloni, visibile nella tua dashboard. Non lo vendiamo né lo condividiamo. Gli screenshot catturati durante l'analisi vengono eliminati una volta generata la specifica. Consulta la politica sulla privacy per il quadro completo.
Cosa conta come un 'clone' — le ri-esecuzioni costano extra?
Ogni clic su Genera costa un credito, incluse le ri-esecuzioni dello stesso URL. I risultati non vengono memorizzati nella cache tra le sessioni, quindi una ri-esecuzione produce una nuova specifica e consuma un credito.
Quanto tempo impiega un clone tipico?
Modalità URL: 20–45 secondi. Modalità Immagine e screenshot mobile: 10–20 secondi (nessun passaggio di recupero). Modalità Video: 60–90 secondi a seconda della dimensione del file. Le pagine pesanti in JS richiedono più tempo perché aspettiamo il rendering completo.
Posso clonare app mobile da screenshot?
Sì — questa è la modalità App Mobile. Carica fino a 10 screenshot da qualsiasi app iOS o Android e ottieni una specifica completa con indicazioni sui componenti React Native e SwiftUI. Più schermate significano un output più completo.
Con quali strumenti AI funziona l'output?
La specifica è testo semplice. Incollala in Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt o ChatGPT. È formattata per Next.js + Tailwind per impostazione predefinita ma abbastanza leggibile da adattarsi a qualsiasi stack.

Dai alla tua AI una specifica.
Non uno screenshot da decifrare.

Un URL. Meno di 45 secondi. Una specifica di 6.000 parole da cui la tua AI può effettivamente costruire. La prima è gratuita — nessuna carta, nessuna lista d'attesa.

Vedi prezzi

Nessuna carta · Annulla in qualsiasi momento · Output in meno di 45 secondi