Clonagem Web · Metodologia de Clonagem de Sites

Transformar "clonar um site" em um processo repetível. No OpenDesign, o trabalho padrão é no diretório do projeto atual: NOTES.md, RECON/, CLONE_REPORT.md, CLONE_AUDIT.md e o pré-visualizável final index.html devem ser escritos dentro do projeto atual, a menos que o usuário especifique explicitamente um diretório de trabalho externo.

Preparação do Ambiente OpenDesign (Leia antes de executar qualquer scripts/):

• Os scripts desta skill serão "stageados" no projeto em .od-skills/<插件目录>/scripts/ (o caminho exato está na introdução da skill). Os comandos no texto são interpretados de acordo com esse caminho, por exemplo, node scripts/xxx.mjs; produtos como node .od-skills/<插件目录>/scripts/recon-site.mjs ..., RECON/, assets/ ainda serão escritos na raiz do projeto.
• O script possui uma camada de controle sem dependências baseada no Chrome DevTools Protocol, reutilizando diretamente o Chrome, Edge ou Chromium já existentes no sistema; não é necessário iniciar o cliente Electron e também suporta CLI puro de od. Dentro do sandbox do agente, um daemon local criará sessões CDP temporárias para evitar que o sandbox bloqueie subprocessos do Chrome. É proibido executar npm install playwright ou baixar Chromium no projeto do usuário. Se o relatório de pré-verificação não indicar um navegador compatível, informe diretamente a falta do navegador do sistema ou especifique o caminho via OD_BROWSER_EXECUTABLE_PATH, não faça suposições visuais nem instale dependências repetidamente. Se o ambiente de desenvolvimento de código-fonte já fornecer OD_PLAYWRIGHT_PACKAGE, o script ainda será compatível com esse runtime, mas ele não é um pré-requisito para o fluxo do produto.

Primeira Lei de Ferro: Código-Fonte Verdadeiro Acima de Tudo, Nunca Confie em Código Inferido por IA

Qualquer "análise de clonagem/diagrama de construção" gerada por IA, o esqueleto conceitual do corpo principal pode ser referenciado, mas os blocos de código executável dentro são padrão e fabricados; eles devem ser verificados linha por linha com o código-fonte verdadeiro, caso contrário, a cópia direta resultará em falha.

Evidência Empírica (Caso marbles): Um documento de análise de IA interpretou incorretamente a arquitetura verdadeira de um site original que "calculava a interseção raio-esfera por análise + codificava os resultados ópticos em um mapa de deslocamento, entregando-o ao feDisplacementMap do SVG para distorcer o DOM real" como "ray-marching + SDF + amostragem do DOM como textura" - dois esquemas de implementação completamente diferentes. Copiar isso não produziria o efeito original e seria N vezes mais lento. Veja references/marbles-case.md para detalhes.

Portanto, a primeira ação é sempre: Obtenha o código-fonte verdadeiro.

Árvore de Decisão (Siga em ordem, não pule)

Passo 0 · Crie primeiro o esqueleto padrão do projeto

node scripts/init-clone.mjs <站名> --url <原站URL> --in-place

Este script criará NOTES.md e RECON/screenshots/ dentro do projeto atual, evitando que produtos sejam esquecidos manualmente a cada vez.

Passo 1 · Procure primeiro no GitHub pelo código-fonte, não se apresse em baixar o site

unset SSL_CERT_FILE   # macOS 怪癖，bash 前先解
# 按站名/产品名搜
SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<关键词>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
# vercel.app/netlify.app/github.io 的 URL slug 常常就是 仓库名 / 部署者用户名

• Sites de arquivo único (github.io / HTML puro) → Baixe diretamente o raw: curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html
• Se o código-fonte for encontrado e a licença permitir → Pule para o Passo 4 e clone diretamente. Lição aprendida: Pesquisar primeiro no GitHub pode economizar 30 minutos de desvio.

Passo 2 · Se o código-fonte não for encontrado → Reconhecimento do navegador (Sonda)

Use a camada de controle do navegador CDP integrada e sem dependências para executar a sonda e coletar sinais (framework / window.THREE / contagem de canvas / biblioteca de rolagem suave / fontes / scrollHeight). Capture screenshots em 1440/768/390 e salve o JSON da sonda em RECON/.

Priorize a execução da sonda padrão com scripts integrados:

node scripts/recon-site.mjs \
  --url <原站URL> \
  --out RECON \
  --label original

# 真浏览器全程滚动，把页面真实用到的图片/字体/媒体（含第三方 CDN、防盗链资产）
# 全部拔到本地，并生成 assets/fonts/fonts.css（自托管 @font-face）+ URL→本地路径映射。
node scripts/asset-harvest.mjs \
  --url <原站URL> \
  --recon RECON/original-recon.json \
  --out assets \
  --manifest RECON/asset-manifest.json

node scripts/network-capture.mjs \
  --url <原站URL> \
  --out RECON/network \
  --label original

node scripts/route-crawl.mjs \
  --url <原站URL> \
  --out RECON/routes \
  --label original \
  --max-pages 25 \
  --max-depth 2

node scripts/interaction-probe.mjs \
  --url <原站URL> \
  --out RECON/interactions \
  --label original

node scripts/sourcemap-hunt.mjs \
  --recon RECON/original-recon.json \
  --out RECON/sourcemaps

--wait indica apenas uma espera adicional estável após a navegação da página ter sido concluída, não um timeout de navegação. Timeout de navegação só pode ser ajustado com --navigation-timeout <毫秒>; não tente novamente cegamente aumentando --wait para o mesmo erro.

Sites privados que exigem estado de login precisam usar o contexto do navegador já logado no ambiente atual; sites públicos localhost / sem login usam diretamente a sonda CDP integrada.

Passo 2.5 · Classifique a complexidade primeiro, não prometa cegamente

Com base nos resultados da sonda, escreva uma versão de "previsão pré-clonagem": complexidade L1-L6, modo recomendado (clonagem fiel / clonagem visual / grande modificação de conteúdo), escopo de restauração esperado, partes explicitamente não clonadas. As regras de classificação e pontuação podem ser vistas em references/assessment.md.

Disciplina de seleção de modo (padrão quando o usuário não respondeu aos itens de confirmação): Quando o usuário diz "clonar/replicar este site", o padrão é clonagem fiel — a fidelidade é o primeiro objetivo deste cenário. Não rebaixe para clonagem visual, substitua marcas por placeholders ou use blocos de layout em vez de fotos apenas porque "o site original é comercial / tem conteúdo protegido por direitos autorais": isso será percebido diretamente pelo usuário como "a imagem não foi baixada, a fonte está errada, a cor não foi restaurada". A abordagem correta é primeiro clonar fielmente (todas as imagens verdadeiras, fontes verdadeiras, valores de cor verdadeiros implementados), escreva os riscos de direitos autorais/marca registrada na "Lista de Substituição Antes da Implantação" em NOTES.md, e deixe a ação de substituição para o Passo 6, a ser decidida pelo usuário. Somente quando o usuário explicitamente quiser "fazer meu próprio site / mudar para minha marca" é que se deve seguir para clonagem visual / grande modificação de conteúdo. Da mesma forma, não pule a sonda de script porque "o site alvo é uma SPA sensível a controle de risco" — recon-site.mjs / asset-harvest.mjs usam navegadores reais, execute primeiro, e se não funcionar, rebaixe e registre honestamente.

Se o modo for "Clonagem Visual" ou "Grande Modificação de Conteúdo" → Produza um design system estruturado design-dna.json, transformando "a sensação daquele site" em um padrão de tokens versionável e comparável, para que a substituição no Passo 6 tenha uma base para "manter o DNA, trocar o conteúdo":

node scripts/dna-scaffold.mjs \
  --recon RECON/original-recon.json \
  --out   RECON/design-dna.json \
  --name  "<站名>"

O script preencherá os candidatos a fonte/cor/efeitos de framework detectados com o melhor esforço, e os campos restantes serão preenchidos manualmente via Análise. A estrutura tridimensional (design_system / design_style / visual_effects), o schema completo e os limites de aplicabilidade podem ser vistos em references/design-dna.md.

⚠️ Não use DNA no ramo "Clonagem Fiel": O código-fonte verdadeiro é a verdade, não deixe o DNA de "estilo aproximado" diluir a lei de ferro byte a byte.

Passo 3 · Escolha o caminho com base nos resultados da sonda

…