AI Website Cloner: engenharia reversa de design com IA
por Fabricio Telles··design.app.br
Seu site favorito, em código limpo, em minutos
Aponte para uma URL, rode /clone-website, e seu agente de IA vai inspecionar o site, extrair design tokens e assets, escrever specs de componentes, e despachar builders paralelos para reconstruir cada seção. O resultado é um codebase Next.js limpo — não um dump de HTML.
Por que clonar sites?
Antes de julgar, os casos de uso legítimos:
Migração de plataforma: seu site está em WordPress/Webflow/Squarespace e você quer migrar para Next.js. Em vez de reescrever do zero, clone a estrutura e refine.
Código-fonte perdido: o site está no ar mas o repositório sumiu, o dev saiu, ou o stack é legado. Recupere o código em formato moderno. Isso acontece mais do que a gente imagina.
Aprendizado: desconstrua como sites de produção alcançam layouts, animações e comportamentos responsivos específicos trabalhando com código real.
Não é para phishing, impersonação, violação de termos de serviço, ou passar design alheio como seu.
O pipeline multi-fase
Na fase de reconhecimento, o agente tira screenshots em múltiplos viewports, extrai design tokens (cores, fontes, espaçamentos), e faz varredura de interações (scroll, click, hover, responsivo).
Na fase de fundação, atualiza fontes, cores e globals no projeto, e faz download de todos os assets.
Na fase de specs de componentes, gera um arquivo de spec detalhado para cada seção em docs/research/components/ com valores exatos de getComputedStyle(), modelos de interação, conteúdo multi-estado, breakpoints responsivos e paths de assets.
Na fase de build paralelo, despacha agentes builders em git worktrees, um por seção/componente. Cada builder recebe a spec completa inline. Sem adivinhação.
Na fase de assembly e QA, faz merge dos worktrees, wiring da página, e visual diff contra o original.
O stack
Next.js 16 com App Router, React 19, TypeScript strict. shadcn/ui com Radix primitives + Tailwind CSS v4. Lucide React para ícones (substituídos por SVGs extraídos durante clonagem).
Compatibilidade
Funciona com praticamente todos os agentes: Claude Code (recomendado com Opus 4.6), Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code e Aider.
Instalação
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
/clone-website <url-do-site>A conexão com UI/UX
O AI Website Cloner é uma ferramenta de aprendizado para design. Ao clonar um site bem feito, você pode estudar os design tokens reais (não os que você acha que são), entender como espaçamento e tipografia funcionam na prática, ver como animações são implementadas em produção, e extrair padrões de componentes reutilizáveis.
Combine com Impeccable (/audit no clone) para entender o que torna um design bom, e o que poderia ser melhor.