Por dentro do pipeline: como o AI Website Cloner reconstrói um site
por Fabricio Telles··design.app.br
Não é um “wget bonito” — é engenharia reversa de verdade
O AI Website Cloner usa agentes de IA para entender e reconstruir um site com código limpo. Cada fase do pipeline resolve um problema específico, e a fase de build paralelo com git worktrees é a parte mais elegante de engenharia que vi nesta série. Vou abrir cada fase.
Fase 1: reconhecimento
O agente não começa codando. Começa observando.
Screenshots em múltiplos viewports: desktop (1920px, 1440px, 1280px), tablet (1024px, 768px), mobile (390px, 375px).
Extração de design tokens: cores usadas (via computed styles, não via inspeção visual), fontes e tamanhos reais, espaçamentos e gaps, border radius, shadows, opacidades.
Varredura de interações: elementos com hover states, animações de scroll, comportamento de click/tap, transições entre estados.
O resultado é um mapa completo do site, não uma impressão, mas dados concretos.
Fase 2: fundação
Com os tokens extraídos, o agente configura as fontes no projeto (download + @font-face), define a paleta de cores como CSS custom properties / Tailwind tokens, configura globals (reset, base styles), e faz download de todos os assets organizados em diretórios padronizados.
Fase 3: specs de componentes
Esta é a fase mais sofisticada. Para cada seção/componente do site, o agente gera um arquivo de spec contendo valores exatos de CSS (não “parece ter 16px de padding”, mas padding: 24px 32px via getComputedStyle()), modelos de interação (default, hover com timing, active, focus, disabled), conteúdo multi-estado, e breakpoints responsivos (como o componente muda em cada viewport).
Fase 4: build paralelo
Aqui o pipeline brilha. Em vez de construir sequencialmente, o agente cria um git worktree por seção/componente, despacha um agente builder para cada worktree, cada builder recebe a spec completa inline, e builders trabalham em paralelo sem conflitos.
Cada builder tem tudo que precisa. Zero adivinhação. Eu achei essa parte particularmente elegante do ponto de vista de engenharia.
Fase 5: assembly e QA
Depois que todos os builders terminam: merge dos worktrees no branch principal, wiring dos componentes na página, comparação visual lado-a-lado com o original, ajustes finos de espaçamento e alinhamento.
O que torna isso diferente
A maioria das ferramentas de clonagem gera HTML/CSS inline, código impossível de manter. O AI Website Cloner gera componentes React reutilizáveis, Tailwind CSS com tokens semânticos, TypeScript com tipos definidos, e estrutura de projeto Next.js padrão. É código que você pode manter, estender e deployar.
Clone um site que você admira, depois rode /audit do Impeccable no resultado. Você vai entender não só como o design foi implementado, mas também onde ele pode melhorar.
Instalação
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
/clone-website <url-do-site>