Copie qualquer design de site em uma especificação de construção AI.
Paste a URL and we copy any website design into a especificação de engenharia de 6.000 palavras. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90% pronto no primeiro prompt.
Qualquer site ativo — adicionamos https:// se faltar. Pressione Enter para gerar.
Conta grátis — 1 spec incluído, sem cartão, uma conta por pessoa.
Experimente um exemplo:
Funciona com todas as ferramentas de código AI que você já usa.
Lançamento público em breve
Uma captura de tela dá à sua AI um jpeg e uma oração. Ela alucina a fonte, inventa o espaçamento e escolhe a biblioteca de componentes errada. Nós fornecemos os dados reais.
Aprisionado, voando às cegas
Bolt, Lovable, v0 prendem você em seus editores e alucinam tudo o que a captura de tela não pode mostrar. Você gasta três horas corrigindo o que uma boa especificação teria evitado.
- Animações perdidas. A captura de tela é um quadro congelado.
- Fontes adivinhadas. Geralmente cai em system-ui.
- Cores estimadas. Desvio HSL, opacidade errada.
- Layout responsivo inventado. Geralmente errado.
- Biblioteca de componentes: o que o LLM quiser.
- Pilha de tecnologia desconhecida. A saída são divs sem estilo.
- Efeitos de rolagem, estados de hover, interações: perdidos.
- Prompt vago na entrada, código vago na saída.
Portátil. Preciso. Seu.
Markdown puro. Cole em qualquer ferramenta AI pela qual você já paga. Nós rastreamos a página ao vivo, analisamos o DOM, renderizamos estados de rolagem, extraímos o grafo CSS e produzimos uma especificação com sinal suficiente para que sua AI não precise adivinhar.
- Curvas cubic-bezier, durações, atrasos — tudo mapeado.
- Família de fonte, peso, tamanho, line-height exatos.
- Cores hexadecimais precisas, paradas de gradiente, variáveis CSS.
- Cada breakpoint, colapso de coluna, passo de fonte.
- Identifica shadcn / Radix / MUI / Tailwind.
- Detecta Next.js, Astro, Vite, Motion, GSAP.
- Gatilhos de rolagem e estados de hover documentados.
- Especificação de mais de 6.000 palavras que sua AI pode realmente seguir.
Sua AI é tão boa quanto o contexto que você lhe dá. Dê a ela uma especificação, não uma captura de tela.
Sem exploração de DevTools. Sem seleção de cores. Sem registro de valores de preenchimento no console. Executamos o site através de seis passes de extração e entregamos a você a fonte da verdade em menos de 45 segundos.
Buscar o site ao vivo
O Headless Chromium renderiza a página real — JS avaliado, fontes da web carregadas, estados de rolagem capturados, chamadas de rede registradas. Sem captura de tela desatualizada, sem adivinhação da visualização do código-fonte.
Extrair a verdade do DOM
Lemos o CSS computado em cada elemento — cores hexadecimais exatas, font-family, line-height, padding, border-radius, shadow. Além do texto bruto para que a AI reproduza o texto em vez de aluciná-lo.
Análise visual em duas passagens
Um modelo de visão de fronteira lê as capturas de tela. A primeira passagem mapeia o layout, a hierarquia e a estrutura dos componentes. A segunda passagem captura animações, estados de hover e movimento acionado por rolagem.
Identificar a pilha de tecnologia
Detectamos Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — a partir de padrões DOM e globais de tempo de execução. A saída visa a mesma pilha para que sua AI construa código com formato nativo.
Sintetizar a especificação
Descobertas do DOM + descobertas visuais + identificação da pilha se unem em um relatório de engenharia estruturado de 6.000 palavras — tokens de design, grade de layout, tempos de animação, breakpoints responsivos, ordem de construção.
Colar em qualquer ferramenta AI
Texto puro na saída — funciona em Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Sem aprisionamento de fornecedor. Você é o proprietário da especificação para sempre, mesmo se cancelar.
Cada execução produz um blueprint estruturado de mais de 6.000 palavras. Cole-o no Claude Code, Cursor ou Codex e obtenha uma implementação funcional — não uma aproximação alucinada.
# 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
Pilha de tecnologia
Detectado a partir de cabeçalhos, assinaturas de script e padrões DOM. Next.js / Astro / Vite / Remix — com versões quando expostas.
Tokens de design
Valores hexadecimais, propriedades CSS personalizadas, escala de espaçamento, métricas de fonte, border-radius, definições de sombra — cada variável que importa.
Comportamento
Curvas de easing, gatilhos de rolagem, transições de hover, mudanças de breakpoint. Os 40% do design que uma captura de tela não consegue capturar.
O sinal que separa uma construção polida de uma cópia bruta — curvas de easing, tokens computados, a biblioteca de componentes real. Nós o extraímos da página ao vivo, não de uma imagem.
Extração de Layout e Espaçamento
Lê modelos de caixa computados, definições de grade, valores de gap, padding e hierarquia visual do DOM ao vivo — não uma suposição de uma captura de tela.
Cor e Tipo Exatos
Extrai valores hexadecimais, paradas de gradiente, propriedades CSS personalizadas, famílias de fontes, pesos, tamanhos e line-heights computados diretamente da árvore de renderização.
Detecção de Biblioteca de Componentes
Identifica padrões shadcn/ui, Radix, MUI, Headless UI e Tailwind — para que a especificação diga à sua AI quais primitivos usar.
Curvas e Gatilhos de Animação
Captura funções de easing, durações, efeitos vinculados à rolagem e transições de hover — então os escreve como especificações Motion/GSAP que sua AI pode implementar.
Identificação Completa da Pilha
Detecta Next.js, Vite, Astro, Remix, scripts de análise, assinaturas CDN e integrações de terceiros. Versões exatas quando os cabeçalhos as expõem.
Mapa de Breakpoints Responsivos
Documenta cada breakpoint, mudança de flex/grid, colapso de coluna e passo de tamanho de fonte — para que o layout móvel não seja uma reflexão tardia na especificação.
Inspiração, não infração.
CopyDesign.ai é uma ferramenta de estudo e prototipagem. Use-a para entender padrões de design, extrair componentes individuais e acelerar seu próprio trabalho original. Não apoiamos uso malicioso — sem personificação de marca, sem páginas de phishing, sem infração de marca registrada ou direitos autorais. Troque o logotipo, o nome, o texto. Torne-o seu.
Nós escrevemos a especificação. Sua AI faz a construção.
Saída em markdown puro. Funciona com Bolt, Lovable, v0, Cursor, Claude Code, Codex — sua escolha.
Sem aprisionamento de ferramenta. Nunca.
A especificação é texto puro. Cole-a no Claude Code hoje, no Codex amanhã, no Gemini na próxima semana.
$1.99. Uma especificação. Nenhuma assinatura necessária.
Experimente antes de se comprometer. Compra única, saída imediata.
90% pronto no primeiro prompt. Honestamente.
Não prometemos perfeição pixel a pixel. Prometemos sinal suficiente para que sua AI não esteja adivinhando.
6.000 palavras de sinal estruturado, não uma descrição vaga.
Pilha de tecnologia, tokens de design, especificações de animação, lógica responsiva — tudo em uma única colagem.
A URL é o prompt. Pare de tirar capturas de tela.
Dê à sua AI os dados de que ela precisa, em vez de uma imagem que ela tem que interpretar.
Estude a arte. Construa algo original.
Inspiração, não infração. Nós extraímos padrões — você traz a ideia.
Experimente uma vez, grátis, sem necessidade de cartão. Faça upgrade quando a saída falar por si — sem testes, sem reembolsos.
Grátis
1 clone · para sempre
Básico
12 clones / mês
Pro
30 clones / mês
Perguntas, respondidas.
Respostas diretas sobre o que CopyDesign.ai faz e o que não faz.
Funciona em aplicativos protegidos por login?
Consegue lidar com sites CSS-in-JS como Linear ou Stripe?
E quanto a sites com WebGL ou uso intenso de canvas?
Minha URL é armazenada em algum lugar?
O que conta como um 'clone' — reexecuções custam extra?
Quanto tempo leva um clone típico?
Posso clonar aplicativos móveis a partir de capturas de tela?
Com quais ferramentas AI a saída funciona?
Dê à sua AI uma especificação.
Não uma captura de tela para forçar a vista.
Uma URL. Em menos de 45 segundos. Uma especificação de 6.000 palavras que sua AI pode realmente construir. A primeira é grátis — sem cartão, sem lista de espera.
Sem cartão · Cancele a qualquer momento · Saída em menos de 45 segundos