web-clonelisted

# Web Clone · 网站复刻方法论 把"复刻一个网站"做成可重复的流程。配套工程区：`~/projects/website-clones/`（每个复刻是一个子目录）。 ## 头号铁律：真源码至上，绝不信 AI 推测的代码 > 任何 AI 生成的"复刻分析/施工图"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。 **实证（marbles 案例）**：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references/marbles-case.md`。 所以第一动作永远是：**拿到真源码**。 ## 决策树（按顺序走，不许跳） ### Step 1 · 先去 GitHub 搜源码，别急着抓站 ```bash 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/`。 > 登录态私域站才用 `bb-browser`；localhost / 无登录公开站用 `Browser` skill 或 playwright（别动 bb-browser，会抢 Brave）。 ### Step 3 · 按侦察结果选路径 | 侦察结果 | 走哪条路 | |---|---| | 静态 HTML/CSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 | | React / Vue / Next（内容为主） | 重建模板（如 `ai-website-cloner-template`，Node 24+），灌内容 | | **WebGL / Canvas / Three.js 重前端** | **深度逆向真源码（见下）→ 忠实复刻 或 找同类开源 3D 模板换内容**。单文件原生站常常逐字节保留=最忠实复刻 | | 大型开