Web Clone · Metodologia de Clonagem de Sites

Transformar "clonar um site" em um processo repetível. Área de trabalho: ~/projects/website-clones/ (cada clone é um subdiretório).

Regra de Ouro: Código Fonte Real Acima de Tudo, Nunca Confie em Código Gerado por IA

Qualquer "análise de clonagem / plano de obra" gerado por IA, o esqueleto conceitual pode ser útil como referência, mas os blocos de código executáveis dentro dele são, por padrão, totalmente inventados e devem ser verificados linha a linha com o código fonte real; copiar cegamente resultará em falha.

Evidência (caso marbles): Um documento de análise de IA interpretou a arquitetura real do site original — que calcula interseções raio-esfera analiticamente e codifica o resultado óptico em um mapa de deslocamento, usando SVG feDisplacementMap para distorcer o DOM real — como "ray-marching + SDF + amostragem do DOM como textura" — duas implementações completamente diferentes. Copiá-la não produziria o efeito original e seria N vezes mais lento. Veja references/marbles-case.md.

Portanto, a primeira ação é sempre: obter o código fonte real.

Árvore de Decisão (Siga a Ordem, Sem Pular)

Passo 0 · Crie a Estrutura Padrão do Projeto

node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <nome-do-site> --url <URL-original>

Este script criará ~/projects/website-clones/<nome-do-site>-clone/, NOTES.md, RECON/screenshots/, evitando que artefatos sejam esquecidos manualmente.

Passo 1 · Procure o Código Fonte no GitHub Primeiro, Não Saia Baixando o Site

unset SSL_CERT_FILE   # peculiaridade do macOS, resolver antes do bash
# Pesquise pelo nome do site/produto
SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<palavra-chave>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
# O slug da URL de vercel.app/netlify.app/github.io geralmente é o nome do repositório / nome de usuário do deployer

Site de arquivo único (github.io / HTML puro) → Baixe raw: curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html
Código fonte encontrado e licença permite → Pule para o Passo 4 e faça clone diretamente. Lição: Pesquisar no GitHub primeiro economiza 30 minutos de desvio.

Passo 2 · Código Fonte Não Encontrado → Reconhecimento no Navegador (Sonda)

Carregue o skill Browser ou o MCP do Playwright, execute a sonda para extrair sinais (framework / window.THREE / número de canvases / biblioteca de scroll suave / fontes / scrollHeight). Faça capturas de tela em 1440/768/390 e salve o JSON do reconhecimento em <site>/RECON/.

Priorize o uso do script interno para reconhecimento padrão:

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url <URL-original> \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/asset-harvest.mjs \
  --recon ~/projects/website-clones/<nome-do-site>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<nome-do-site>-clone/assets/original \
  --manifest ~/projects/website-clones/<nome-do-site>-clone/RECON/asset-manifest.json

node /Users/jane/.shared-skills/web-clone/scripts/network-capture.mjs \
  --url <URL-original> \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/network \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url <URL-original> \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/routes \
  --label original \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url <URL-original> \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/interactions \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/sourcemap-hunt.mjs \
  --recon ~/projects/website-clones/<nome-do-site>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/sourcemaps

Use bb-browser apenas para sites privados com login; para localhost / sites públicos sem login, use o skill Browser ou Playwright (não mexa no bb-browser, ele pode roubar o Brave).

Passo 2.5 · Classifique a Complexidade Primeiro, Não Prometa Cegamente

Com base nos resultados do reconhecimento, escreva uma primeira versão da "Pré-avaliação de Clonagem": complexidade L1-L6, modo recomendado (clonagem fiel / clonagem visual / reforma de conteúdo), escopo de reprodução esperado e partes explicitamente não clonadas. Regras de classificação e pontuação em references/assessment.md.

Se o modo for "Clonagem Visual" ou "Reforma de Conteúdo" → Aproveite para gerar uma identidade de design estruturada design-dna.json, transformando a "sensação" do site em uma especificação de token versionável e comparável, para que no Passo 6 a substituição "mantenha o DNA, troque o conteúdo" tenha uma base sólida:

node /Users/jane/.shared-skills/web-clone/scripts/dna-scaffold.mjs \
  --recon ~/projects/website-clones/<nome-do-site>-clone/RECON/original-recon.json \
  --out   ~/projects/website-clones/<nome-do-site>-clone/RECON/design-dna.json \
  --name  "<nome-do-site>"

O script pré-preenche com o best-effort as fontes, cores candidatas e sinais de efeitos de framework detectados. Os campos restantes devem ser preenchidos manualmente via análise. Estrutura tridimensional (design_system / design_style / visual_effects), schema completo e limites de aplicação em references/design-dna.md.

⚠️ No ramo "Clonagem Fiel", não use DNA: o código fonte real é a verdade; não deixe um DNA de "estilo aproximado" diluir a regra de fidelidade byte a byte.

Passo 3 · Escolha o Caminho com Base nos Resultados do Reconhecimento

Resultado do Reconhecimento	Qual Caminho Seguir
HTML/CSS estático, sem framework	`wget --mirror` para espelhar → remover scripts de rastreio → alterar texto
React / Vue / Next (baseado em conteúdo)	Recriar template (ex.: `ai-website-cloner-template`, Node 24+), injetar conteúdo
SPA / SaaS / Páginas orientadas a dados	Primeiro rode `network-capture.mjs` para salvar fixtures de API → substituir por JSON local / mock server
Site multi-página / site de produto	Primeiro rode `route-crawl.mjs` para obter mapa de rotas → extrair template por tipo de página → substituir conteúdo uniformemente
Site com interações complexas	Primeiro rode `interaction-probe.mjs` para registrar estados de hover/click/scroll/canvas drag → complementar interações por estado, não apenas capturar a primeira tela
Front-end pesado em WebGL / Canvas / Three.js	Engenharia reversa profunda do código fonte real (veja abaixo) → clonagem fiel ou encontrar template 3D open source similar e trocar o conteúdo. Sites nativos de arquivo único frequentemente exigem a retenção byte a byte para a clonagem mais fiel. Quando o código fonte real não for encontrado, use captura de quadros em tempo de execução + comporta baseline, disciplina em `references/effect-extraction.md` (pode delegar ao web-shader-extractor)
Site construído estaticamente (Astro/Vite SSG/Hugo), incluindo WebGL pesado	`mirror-site.mjs` para espelhar completamente os assets de deploy → auto-hospedar fontes + remover rastreio → servir localmente com web root = clonagem fiel 1:1 do código fonte real. Para sites estáticos, "obter o código fonte real" = "espelhar o conjunto completo de assets de deploy". Receita em `references/static-mirror.md`. Exemplo: oryzo.ai (Lusion, L6, Gaussian Splatting, hero pixel diff 5/5)
Site usando tema open source existente (tema Astro/Hugo)	Ir ao mercado de temas correspondente para encontrar o tema original (apenas para sites que usam temas prontos; sites personalizados sigam a linha anterior de espelhamento completo, não venham para esta linha)

Sites complexos L4-L6 sigam references/complex-playbooks.md, não use apenas o fluxo de site normal.

Passo 4 · Monte o Projeto no Diretório Central de Clonagem

mkdir ~/projects/website-clones/<nome-do-site>-clone && cd $_
# Código fonte git: clone aqui; arquivo único: coloque aqui. Mantenha uma cópia somente leitura do original como baseline index-original.html
# Verifique a versão do Node (package.json engines), use nvm use para a versão correspondente, fixe .nvmrc

Passo 5 · Remova Rastreio + Escreva Metadados + Verifique

Remova rastreio: Google Analytics (gtag / googletagmanager), pixels, mapas de calor — remova linha a linha com precisão (bloco GA geralmente no topo do <head>).
Escreva NOTES.md (obrigatório): Inclua complexidade, modo de clonagem, comparação entre site original e clone, pontuação de fidelidade, lacunas conhecidas. Template em references/deliverables.md.
Sites complexos escrevam TEARDOWN.md (decomposição técnica). Todas as conclusões devem referenciar números de linha do código fonte real.
Pontuação pós-clone: De acordo com references/assessment.md, avalie estrutura / visual / interação / responsividade / substituição de conteúdo / integridade funcional. A pontuação deve ser suportada por capturas de tela, código fonte e resultados de execução.
Verificação real no navegador (exigência rigorosa, não basta olhar o código e dizer "deve funcionar"): Inicie servidor local → abra no navegador → verifique o console (sem erros de JS/WebGL) → compare capturas de tela com o site original. Registre honestamente as partes que não puderem ser verificadas (ex.: se o PointerEvent sintético com isTrusted=false não acionar o arrasto, escreva honestamente, não finja "arrasto bem-sucedido").

Após a conclusão do clone, execute novamente o reconhecimento do site clone e gere um relatório de comparação automatizado:

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url http://127.0.0.1:<porta>/ \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \
  --url http://127.0.0.1:<porta>/ \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/routes-clone \
  --label clone \
  --max-pages 25 \
  --max-depth 2

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \
  --url http://127.0.0.1:<porta>/ \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/interactions-clone \
  --label clone

node /Users/jane/.shared-skills/web-clone/scripts/compare-recon.mjs \
  --original ~/projects/website-clones/<nome-do-site>-clone/RECON/original-recon.json \
  --clone ~/projects/website-clones/<nome-do-site>-clone/RECON/clone-recon.json \
  --visual-diff ~/projects/website-clones/<nome-do-site>-clone/RECON/visual-diff-1440.json \
  --original-routes ~/projects/website-clones/<nome-do-site>-clone/RECON/routes/original-route-map.json \
  --clone-routes ~/projects/website-clones/<nome-do-site>-clone/RECON/routes-clone/clone-route-map.json \
  --original-interactions ~/projects/website-clones/<nome-do-site>-clone/RECON/interactions/original-interactions.json \
  --clone-interactions ~/projects/website-clones/<nome-do-site>-clone/RECON/interactions-clone/clone-interactions.json \
  --out ~/projects/website-clones/<nome-do-site>-clone/CLONE_REPORT.md

node /Users/jane/.shared-skills/web-clone/scripts/visual-diff.mjs \
  --original ~/projects/website-clones/<nome-do-site>-clone/RECON/screenshots/original-1440.png \
  --clone ~/projects/website-clones/<nome-do-site>-clone/RECON/screenshots/clone-1440.png \
  --out ~/projects/website-clones/<nome-do-site>-clone/RECON/visual-diff-1440.json \
  --diff ~/projects/website-clones/<nome-do-site>-clone/RECON/screenshots/visual-diff-1440.png

node /Users/jane/.shared-skills/web-clone/scripts/audit-clone.mjs \
  --project ~/projects/website-clones/<nome-do-site>-clone \
  --brand "<marca-do-site-original>" \
  --out ~/projects/website-clones/<nome-do-site>-clone/CLONE_AUDIT.md

Passo 6 · Substitua pelo Conteúdo da Jane

O objetivo é sempre "fazer o próprio site dela", não apenas copiar um idêntico. O trio de substituição: texto (index.html/data/*.json/content/*.md), mídia (public/assets), cores da marca (variáveis CSS / tema Tailwind). Se a estrutura não for trivial, escreva REPLACE_GUIDE.md.

Para quem fez design-dna.json (modos visual/reforma): Este passo é a sua concretização — mantenha o DNA, troque o conteúdo. Transforme design_system em propriedades customizadas CSS, faça escolhas subjetivas de acordo com design_style, selecione o nível de implementação de acordo com visual_effects.effect_intensity (lightweight CSS / medium Canvas+GSAP / heavy Three.js); priorize o uso de imagens reais do site original obtidas com asset-harvest.mjs; não use IA para recriar aproximações. Fluxo de geração em references/design-dna.md.

Engenharia Reversa de Front-end Pesado WebGL/Canvas (Habilidade Central)

Decomponha o site interativo em pilares técnicos, localize a implementação real para cada pilar + marque números de linha: renderização (WebGL/algoritmo de shader), composição (filtro SVG / múltiplos canvases / pós-processamento), física, interação, áudio. Só então verifique qualquer análise secundária.

Disciplina dos Três Pilares ao Reverter Efeitos (para evitar "ficar ajustando e embelezando, e no final não se parece nem se sabe explicar"):

Classificação de Evidências: Cada conclusão deve ser marcada com SOURCE (código fonte real / source-map / dump em tempo de execução / captura de quadros), PARTIAL (nome/trecho, precisa de verificação), GUESS (ajuste visual / número mágico). Não marcado = GUESS, deve ser atualizado para SOURCE antes de copiar.
no-compensation: É estritamente proibido ajustar brilho/velocidade/posição/ruído para mascarar erros de tempo/coordenadas/estado; valores ajustados ainda devem ser marcados como GUESS, e deve-se escrever claramente qual evidência é necessária para atualizar.
Comporta baseline-first: Primeiro, use draw calls/shaders/uniforms reais para fazer uma "REPRODUÇÃO RAW MÍNIMA E FIEL" → compare quadro a quadro → só então é permitido refatorar para engenharia. Detalhes em references/effect-extraction.md (inclui captura em tempo de execução como rede de segurança + quando delegar ao web-shader-extractor).

Padrões Avançados Portáveis (vale a pena acumular):

Refração do DOM via Mapa de Deslocamento: WebGL off-screen calcula um "mapa de deslocamento" onde RG=deslocamento / B=Fresnel, e então usa SVG <filter><feDisplacementMap scale=N> para deformar HTML real, vivo e interativo — a refração é feita no DOM real, o WebGL nunca toca nos pixels do DOM. Esta é a alma do marbles e algo que o Three.js MeshPhysicalMaterial(transmission) não consegue fazer (ele só consegue fazer a "aparência de uma bola de vidro", não a "refração da página web inteira").

Método detalhado + decomposição item a item da arquitetura real do marbles → references/reverse-engineering.md, references/marbles-case.md.

Licença e Atribuição (Verifique Antes de Clonar)

SSL_CERT_FILE=/etc/ssl/cert.pem gh api repos/<u>/<r> | jq '.license'  # + encontrar arquivo LICENSE + ler README

Licença	O que Pode Fazer
MIT / Apache / BSD / Unlicense	Pode modificar, publicar, basta manter os créditos
NENHUMA (sem arquivo LICENSE / sem declaração)	Por padrão, todos os direitos reservados. Apenas para estudo local / clonagem, deve atribuir o autor original, proibido republicar publicamente sem permissão. Não presuma que é MIT só porque o código está público no GitHub
Proprietária / Proibição explícita	Apenas estudo, sem copiar ou publicar

⚠️ Não confunda "está público no GitHub" ou "gh api não encontrou nada por enquanto" com MIT — verifique até o fim.

Especificação dos Artefatos

Cada subprojeto na raiz: NOTES.md (informações da fonte/stack técnico/licença/mapa de substituição/comando para executar)
Sites complexos com interação adicionar: TEARDOWN.md (decomposição técnica, com números de linha)
Para relatórios externos ou avaliação de eficácia do skill, adicionar: CLONE_REPORT.md (comparação completa entre site original e clone)
Antes de publicar, adicionar: CLONE_AUDIT.md (scripts de rastreio, resquícios de marca/idioma do original, TODO, riscos de links externos)
RECON/screenshots/: Imagens comparativas do original vs. clone
Após concluir o clone, atualizar a linha de índice do README.md do diretório central

Scripts Internos

scripts/init-clone.mjs: Inicializa o esqueleto do projeto de clone e o NOTES.md.
scripts/recon-site.mjs: Usa Playwright para abrir a página, coletar framework/recursos/estrutura DOM/erros de console e salvar capturas de tela em três tamanhos.
scripts/asset-harvest.mjs: A partir do JSON do reconhecimento, baixa imagens, scripts e estilos do site original e gera um manifesto de assets.
scripts/network-capture.mjs: Captura requisições XHR/fetch e salva respostas JSON/text, para criar fixtures locais de SPAs/SaaS.
scripts/mirror-site.mjs: Navegador real com rolagem completa para capturar cada requisição real → espelha assets de mesma origem por caminho (incluindo .sog/.buf/.wasm/.riv/fontes buscados em tempo de execução pelo JS), para fazer clonagem fiel 1:1 de sites construídos estaticamente (Astro/Vite SSG/Hugo). Veja references/static-mirror.md.
scripts/route-crawl.mjs: Rastreia links internos do mesmo site, salva capturas de tela, título, H1, sinais de estrutura por rota, resolvendo o problema de clonar apenas a página inicial em sites multipágina.
scripts/interaction-probe.mjs: Executa automaticamente scroll, hover, clicks seguros, canvas drag, salva estado antes/depois da interação, capturas de tela, evidências de rede e console.
scripts/sourcemap-hunt.mjs: Procura source maps em chunks JS; se encontrar, salva o mapeamento de código fonte.
scripts/compare-recon.mjs: Lê os JSONs de reconhecimento do site original e do clone, mapa de rotas e evidências de interação, gera CLONE_REPORT.md.
scripts/visual-diff.mjs: Usa o canvas do navegador para calcular diferença de pixels entre capturas de tela, gerando score visual e imagem de diferença.
scripts/audit-clone.mjs: Escaneia scripts de rastreio, resquícios de marca do original, resquícios de japonês, TODO, riscos de URLs externas.
scripts/dna-scaffold.mjs: A partir do JSON de reconhecimento, gera o esqueleto de design-dna.json (fontes/cores candidatas/sinais de efeitos de framework pré-preenchidos com best-effort), para uso nos modos "Clonagem Visual / Reforma de Conteúdo". Veja references/design-dna.md.

Limites de Capacidade (Posição Padrão)

Consegue fazer com alta fidelidade: Páginas estáticas de marketing, sites corporativos, front-end React/Vue/Next baseado em conteúdo, sites animados cujo código fonte pode ser obtido diretamente.
Consegue reproduzir visualmente, mas com simplificações: Dados de back-end de CMS, narrativas complexas com scroll, breakpoints responsivos, efeitos WebGL/Canvas, embeds de terceiros.
Não promete clone completo por padrão: Login, pagamento, finalização de compra, recomendação de busca, sistema de permissões, lógica de negócios server-side, APIs proprietárias, assets protegidos por direitos autorais. Quando necessário, apenas crie um substituto front-end demonstrável.
Ao fazer Reforma de Conteúdo: Priorize manter a arquitetura de informação, ritmo, animações e gramática visual do site original, substituindo o texto, imagens, cores da marca e proposta de negócio pelo conteúdo da Jane.

Caso Bandeira

~/projects/website-clones/marbles-clone/ — Site de bolinhas de gude nativo WebGL + SVG Filter + física própria, clonado byte a byte com fidelidade + TEARDOWN completo, é o exemplo do ramo "front-end pesado WebGL".

Claude Site Clone · Clonagem de Sites Web

O que é Claude Site Clone · Clonagem de Sites Web?

Perguntar na sua IA favorita

Documentação