Web Clone · 网站复刻方法论
Web Clone 是一套把「复刻一个网站」做成可重复流程的方法论技能，属于 OpenDesign 体系。默认在当前项目目录工作：NOTES.md、RECON/、CLONE_REPORT.md、CLONE_AUDIT.md 和最终可预览的 index.html 都应写在当前项目内，除非用户明确指定外部工作目录。
一、用途
当用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的，或复刻某个交互 / WebGL / Canvas / Three.js 效果时使用。目标是把「复刻一个网站」变成可重复、可验证、可交付的流程。
二、核心原则：真源码至上
头号铁律是绝不信 AI 推测的代码。任何 AI 生成的「复刻分析 / 施工图」，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。资料给出的实证是 marbles 案例：一份 AI 分析文档把原站「解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM」的真架构，臆造成了「ray-marching + SDF + 把 DOM 当纹理采样」，两套实现完全不同。因此第一动作永远是拿到真源码。
三、环境准备
脚本会被 stage 到项目内 .od-skills/<插件目录>/scripts/，文中命令写的 node scripts/xxx.mjs 按该路径解析，例如 node .od-skills/<插件目录>/scripts/recon-site.mjs；RECON/、assets/ 等产物仍写到项目根。脚本内置基于 Chrome DevTools Protocol 的零依赖控制层，直接复用系统已有的 Chrome、Edge 或 Chromium，无需启动 Electron 客户端，也支持纯 od CLI。Agent 沙箱内会通过本地 daemon 创建临时 CDP 会话。禁止在用户项目里执行 npm install playwright 或下载 Chromium。若预检报告没有兼容浏览器，直接说明缺少系统浏览器或通过 OD_BROWSER_EXECUTABLE_PATH 指定路径，不要改为目测，也不要反复安装依赖。源码开发环境若已提供 OD_PLAYWRIGHT_PACKAGE，脚本仍兼容该运行时，但它不是产品链路的前置条件。
四、决策树（按顺序走）
Step 0 · 先建标准工程骨架：node scripts/init-clone.mjs <站名> --url <原站URL> --in-place，创建 NOTES.md、RECON/screenshots/。
Step 1 · 先去 GitHub 搜源码，别急着抓站。按站名 / 产品名搜索仓库，vercel.app / netlify.app / github.io 的 URL slug 常常就是仓库名或部署者用户名。单文件站可直接抓 raw。找到源码且许可允许，跳 Step 4 直接 clone。
Step 2 · 没找到源码则用内置零依赖 CDP 浏览器控制层跑探针，抽框架 / window.THREE / canvas 数 / 平滑滚动库 / 字体 / scrollHeight 等信号，截图 1440 / 768 / 390 三档并存 RECON/。标准侦察脚本包括 recon-site.mjs、asset-harvest.mjs、network-capture.mjs、route-crawl.mjs、interaction-probe.mjs、sourcemap-hunt.mjs。--wait 仅表示页面导航完成后的额外稳定等待，不是导航超时；导航超时只可用 --navigation-timeout 调整。登录态私域站需使用当前环境里已登录的浏览器上下文。
Step 2.5 · 先给复杂度定级（L1-L6），写「复刻前预判」，推荐模式（忠实复刻 / 视觉复刻 / 内容爆改）、预计可还原范围、明确不克隆的部分。用户说「复刻 / 克隆这个网站」时默认就是忠实复刻，不许因版权或风控敏感就自作主张降级。若模式是视觉复刻或内容爆改，可产出 design-dna.json；忠实复刻分支不要用 DNA。
Step 3 · 按侦察结果选路径：静态 HTML/CSS 用 wget --mirror；React / Vue / Next 重建模板；SPA / SaaS 先跑 network-capture.mjs 保存 API fixtures；多页面官网先跑 route-crawl.mjs；复杂交互站先跑 interaction-probe.mjs；WebGL / Canvas / Three.js 深度逆向真源码；静态构建站用 mirror-site.mjs 全量镜像。L4-L6 复杂站按 references/complex-playbooks.md 走。
Step 4 · 在当前项目里搭工程，git 源码 clone 到 source/ 或直接放入当前目录，原始源码留一份只读基准 index-original.html，检查 Node 版本并钉 .nvmrc。
Step 5 · 删追踪（GA、像素、热图逐行精确切除）、写元信息、验证。交付前必须跑 node scripts/od-preview-rewrite.mjs --project . 把项目根资源引用改成相对路径。写 NOTES.md，复杂站写 TEARDOWN.md，所有结论标真源码行号。复刻后按 references/assessment.md 评分。浏览器真验证是硬要求，起本地服务器、抓 console、截图对照原站，诚实记录验证不了的部分。复刻完成后再跑一次克隆站侦察并生成 CLONE_REPORT.md、visual-diff、audit-clone.mjs --recon --strict。
Step 6 · 替换成用户自己的内容：文字、媒体、品牌色三件套；做过 design-dna.json 的在这一步兑现。
五、资产与颜色保真（硬性门槛）
字体必须自托管真字体，禁止系统字体近似；图片必须落地本地真图，禁止渐变 / SVG 占位顶替；颜色必须照抄 recon 的计算值，禁止目测；滚动体感必须一致，禁止默认原生滚动了事。audit-clone.mjs --recon --strict 会机器校验，有硬伤 exit 2，不通过不许交付。
六、逆向拆解 WebGL / Canvas 重前端
把交互站拆成技术支柱（渲染、合成、物理、交互、音频），逐柱定位真实实现并标行号。逆向特效三件套纪律：证据分级（SOURCE / PARTIAL / GUESS）、no-compensation（严禁靠调亮度 / 速度 / 位置 / 噪声掩盖时序 / 坐标 / 状态错误）、baseline-first 闸门（先做最小原样可复现 RAW REPLAY，逐帧比对通过才允许重构工程化）。可迁移的高级范式包括「位移图折射 DOM」：离屏 WebGL 算出位移图，再用 SVG feDisplacementMap 扭曲真实可交互 HTML。
七、许可与署名
clone 前必查许可：MIT / Apache / BSD / Unlicense 可改可上线，保留致谢；NONE 默认保留所有权利，仅本地学习 / 复刻，须署名原作者，未经许可不得公开重新部署；专有 / 明确禁止只读学习。别把「GitHub 上是公开的」等同于 MIT。
八、产物规范
每个子项目根目录：NOTES.md；复杂交互站追加 TEARDOWN.md；对外汇报追加 CLONE_REPORT.md；上线前追加 CLONE_AUDIT.md；RECON/screenshots/ 存原站 vs 克隆对照图。
九、内置脚本
init-clone.mjs（初始化骨架）、recon-site.mjs（侦察采集）、asset-harvest.mjs（素材落地与自托管字体）、network-capture.mjs（API fixtures）、mirror-site.mjs（静态站全量镜像）、route-crawl.mjs（路由地图）、interaction-probe.mjs（交互证据）、sourcemap-hunt.mjs（源码映射）、compare-recon.mjs（对比报告）、visual-diff.mjs（像素差异）、audit-clone.mjs（交付审计）、od-preview-rewrite.mjs（预览路径改写）、dna-scaffold.mjs（设计身份骨架）。
十、能力边界
能高保真做：静态营销页、企业官网、内容型 React / Vue / Next 前端、可直接拿到源码的动画站。能视觉还原但会简化：CMS 后台数据、复杂滚动叙事、多端断点、WebGL / Canvas 特效、第三方嵌入。默认不承诺完整克隆：登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材。内容爆改时优先保留原站信息架构、节奏、动效和视觉语法。旗舰案例为 ./marbles-clone/。