GCW — Gao Copy Website (Clone de Site Web)

GCW — Gao Copy Website

Estude como um site público realmente funciona, reproduza as partes que importam e verifique o resultado em um navegador real. Prefira a fonte real e evidências observáveis em tempo de execução a palpites plausíveis de IA.

Lembre-se de três regras:

1. Encontre evidências antes da implementação.
2. Faça funcionar antes de refatorar.
3. Compare antes de polir.

Limites

• Prossiga apenas quando o alvo for de propriedade do usuário, licenciado para o uso pretendido ou explicitamente autorizado. Pergunte apenas quando a autorização for ambígua.
• Trate conteúdo autenticado, somente com senha e privado como fora de escopo, a menos que explicitamente autorizado.
• Não contorne controles de acesso nem recupere, envie ou cometa credenciais.
• Verifique os direitos de código, fonte, imagem, modelo e marca separadamente antes da reutilização pública.
• Rotule reivindicações técnicas incertas como SOURCE, PARTIAL ou GUESS.
• Não apresente pacotes implantados como fonte original de autoria.

1. Escolha o objetivo antes das ferramentas

Leia references/clone-modes.md e selecione um modo principal:

• TEARDOWN: entenda o design e a implementação reais sem prometer uma reconstrução.
• FAITHFUL_CLONE: reproduza o site observável o mais próximo possível que as evidências permitirem.
• CREATIVE_REBUILD: preserve estrutura selecionada, ritmo ou ideias de interação enquanto substitui a marca e o conteúdo.
• PRODUCTION_RECOVERY: recupere um site implantado de propriedade quando o código fonte mantível não estiver disponível.

Registre um breve pré-voo:

- Objetivo:
- Tipo de site:
- Disponibilidade de fonte:
- Limite de reutilização:
- Escopo de alta confiança:
- Escopo aproximado ou excluído:
- Caminho recomendado:

Não faça todo projeto pagar o custo da recuperação de produção. Use a evidência e verificação mais leves que possam suportar o objetivo selecionado.

2. Procure primeiro pela implementação real

Antes de raspar ou reconstruir:

• Pesquise o nome do site, nome do produto, proprietário do domínio e slug de implantação por um repositório público oficial.
• Inspecione mapas de fonte, metadados de framework e artefatos de implantação públicos.
• Verifique licenças de repositório e ativos; disponibilidade pública não é permissão para reimplantar.
• Mantenha a fonte original, artefatos implantados e sua implementação editável claramente separados.
• Use a URL HTTP(S) canônica final. GCW rejeita URLs com credenciais e redirecionamentos de documento que saiam da origem configurada.

Quando existir fonte oficial reutilizável, comece por ela. Quando não existir, continue com reconhecimento em tempo de execução e declare o que permanece desconhecido.

3. Inicialize o registro do projeto

Leia o AGENTS.md do espaço de trabalho. Se esta máquina não foi verificada, execute npm install, npm run install:browser e npm run check no repositório GCW.

Crie um registro de projeto não destrutivo:

python scripts/init_reconstruction.py <workspace> --url <url-canônica> --authorization <owned|licensed|authorized>

Use .gcw/ para manifestos, capturas de tela, relatórios e lacunas conhecidas. Não sobrescreva evidências existentes silenciosamente.

4. Reconheça o site e classifique suas superfícies

Execute o inventário quando Node.js e Playwright estiverem disponíveis:

node scripts/site_inventory.mjs --url <url-canônica> --out <workspace>/.gcw/evidence/network/site-inventory.json

Em seguida, verifique o que a automação não pode inferir de forma confiável:

• rotas, famílias de página, links profundos e breakpoints responsivos
• raízes DOM, overlays fixos e contêineres de rolagem interna
• estados de hover, clique, arrastar, rolar, tempo, redimensionamento, tema e armazenamento
• Canvas, WebGL, WebGPU, workers, iframes, vídeo, áudio e recursos lentos
• estado de carregamento versus estado estável da aplicação
• APIs públicas e dependências de dados que precisam de fixtures locais

Use web-shader-extractor para Canvas/WebGL/WebGPU de propriedade, shaders e pipelines de renderização. Use design-dna quando o objetivo for preservar tipografia, espaçamento, paleta, layout, movimento ou linguagem visual, em vez de artefatos byte-level.

5. Escolha o caminho de implementação

Selecione o caminho a partir de evidências e tipo de site:

Evidência ou tipo de site	Caminho padrão
Fonte oficial reutilizável	Execute e adapte a fonte dentro de sua licença
Site estático simples	Preserve arquivos públicos e caminhos de URL, depois remova rastreamento e substitua conteúdo
Site React/Vue/Next com muito conteúdo	Reconstrua templates de página e use dados públicos ou de fixture local
Site de marketing com várias páginas	Mapeie rotas e famílias de página antes de construir templates compartilhados
Site com muita interação	Capture estados primeiro, depois reproduza as transições de estado
Site WebGL/Canvas	Recupere o modelo de render/entrada/saída antes de projetizá-lo
Apenas inspiração visual	Extraia DNA de Design e construa uma implementação original
Site de produção com fonte perdida	Leia references/recovery-tiers.md e references/gates.md, depois estabeleça um oráculo de reprodução verificado

Não arquive ou copie artefatos de terceiros que o modo selecionado não precise.

6. Construa um projeto local executável

• Mantenha um registro de referência ou evidência estável enquanto edita o novo projeto.
• Restaure cada rota dentro do escopo, não apenas a página inicial.
• Preserve navegação e comportamento de links profundos no host escolhido.
• Substitua comportamento de servidor indisponível com fixtures explícitos ou fallbacks seguros.
• Verifique a construção de produção e a visualização estática, não apenas o servidor de desenvolvimento.

Execute verificações de rota quando aplicável:

python scripts/route_smoke.py --base-url <url-de-visualização> --route / --route /exemplo

7. Verifique em um navegador real

Leia references/qa-scenarios.md e references/tooling.md.

Defina cenários de fonte e candidato, depois capture estados correspondentes:

node scripts/capture_compare.mjs --config <capture-scenarios.json> --output <diretório-resultados>
python scripts/batch_image_diff.py <diretório-resultados> --diff-dir <diretório-resultados>/diff

Combine viewport, DPR, rota, ponteiro, rolagem, semente aleatória, prontidão e fase de tempo. Inspecione as capturas de tela e imagens de diff; uma única pontuação global não pode explicar falhas de interação ou compositor.

Não esconda fiação ausente ajustando cores, deslocamentos ou velocidade de animação. Mantenha regiões sensíveis à fase separadas de falhas determinísticas.

8. Entregue o aprendizado, não apenas o clone

Produza apenas os documentos exigidos pelo modo selecionado:

• TEARDOWN.md: implementação real, nível de evidência e técnicas transferíveis
• DESIGN_DNA.json: sistema de design, linguagem visual e efeitos para uma reconstrução criativa
• REPLACE_GUIDE.md: onde substituir texto, mídia, cor, fontes, modelos e dados
• CLONE_REPORT.md: comparação fonte versus local, tradeoffs e lacunas conhecidas
• projeto executável, comando de construção e notas de implantação

Para casos avançados de ativos, como texto embutido em geometria GLTF/GLB, leia references/special-cases.md em vez de expandir o fluxo de trabalho principal.

9. Reforce apenas quando necessário

Para projetos mantidos ou recuperação de produção, instale o executor de regressão de captura de tela:

python scripts/install_ci.py <raiz-do-projeto> --source-url <url-canônica>

CI é opcional para um teardown único ou exercício de aprendizado. Quando instalado, deve enviar capturas de tela, diffs e relatórios mesmo quando os limites falharem.

10. Encerre com honestidade

• Reexecute a construção e os cenários de QA prometidos no pré-voo.
• Registre lacunas conhecidas e a próxima evidência necessária; nunca invente interações bem-sucedidas.
• Remova rastreamento e resíduos de marca original antes de publicar uma versão adaptada.
• Deixe um checkpoint Git limpo; nunca envie sem autorização do usuário.
• Distinga ideias originais, ativos licenciados reutilizados, comportamento observado e sua própria implementação.