Web Clone · 网站复刻方法论

把"复刻一个网站"做成可重复的流程。配套工程区：~/projects/website-clones/（每个复刻是一个子目录）。

头号铁律：真源码至上，绝不信 AI 推测的代码

任何 AI 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。

实证（marbles 案例）：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样", , 两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。

所以第一动作永远是：拿到真源码。

决策树（按顺序走，不许跳）

Step 0 · 先建标准工程骨架

node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>

该脚本会创建 ~/projects/website-clones/<站名>-clone/、NOTES.md、RECON/screenshots/，避免每次手工漏掉产物。

Step 1 · 先去 GitHub 搜源码，别急着抓站

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 常常就是 仓库名 / 部署者用户名

• 单文件站（github.io / 纯 HTML）→ 直接抓 raw：curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html
• 找到源码且许可允许 → 跳 Step 4 直接 clone。 教训：先搜 GitHub 能省 30 分钟弯路。

Step 2 · 没找到源码 → 浏览器侦察（探针）

加载 Browser skill 或 playwright MCP，跑探针抽信号（框架 / window.THREE / canvas 数 / 平滑滚动库 / 字体 / scrollHeight）。截图 1440/768/390 三档 + 侦察 JSON 存 <站>/RECON/。

优先用内置脚本跑标准侦察：

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

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

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