web-clone · 网站复刻方法论
网站复刻 / 克隆方法论。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，
覆盖 静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站 三大分支，
并强制核对任何 AI 二手分析里的可执行代码。
USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、
reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互 / WebGL / Canvas / Three.js 效果。
头号铁律：真源码至上，绝不信 AI 推测的代码。
任何 AI 生成的"复刻分析/施工图"，概念骨架可以参考，但里面的可执行代码块默认全是臆造的，
必须逐行用真源码核对。实证案例见 references/marbles-case.md。
它解决什么问题
复刻翻车很少是结构错，而是这几样：
| 常见翻车 | 本 skill 的硬门槛 |
|---|
| 用系统字体"近似"原站字体 | 必须真浏览器网络栈抓下真字体并自托管 |
| 图片没下，用渐变/SVG 占位顶替 | 必须按 asset-manifest.json 落地本地真图 |
颜色靠目测（#0a0a0a 冒充 rgb(17,17,17)） | 必须照抄 recon 的 computed 值 |
| 默认原生滚动了事 | 原站用 Lenis/GSAP 就上同款，snap/sticky 逐个对齐 |
| 只截首屏就说"做完了" | 路由图 + 交互探针 + 像素 diff 三重验收 |
scripts/audit-clone.mjs --recon --strict 会机器校验上述前三条，有硬伤 exit 2。
安装
DeepSeek Harness（DSH）
dsh plugin add Edisonzszs/web-clone
安装后本仓库作为 dsh.bundle 插件挂载，skill 以 web-clone 名称进入会话技能目录；
references/ 与 scripts/ 随插件分发，按技能正文中的相对路径调用。
Claude Code
git clone https://github.com/Edisonzszs/web-clone.git ~/.claude/skills/web-clone
Codex / Cursor / 其他支持 SKILL.md 的 agent
克隆到对应的 skills 目录即可，本仓库根目录就是 skill 根（SKILL.md 在根）。
OpenDesign
作为插件 skill 安装；脚本会被 stage 到项目内 .od-skills/<插件目录>/scripts/，
文中 node scripts/xxx.mjs 按该路径解析，产物（RECON/、assets/）仍写到项目根。
环境要求
- Node.js — 跑
scripts/*.mjs
- 系统浏览器 — Chrome / Edge / Chromium 任一即可
脚本内置基于 Chrome DevTools Protocol 的零依赖控制层，直接复用系统已装浏览器。
不需要 npm install playwright，也不会下载 Chromium。
浏览器路径可用 OD_BROWSER_EXECUTABLE_PATH 指定。
内置脚本
| 脚本 | 作用 |
|---|
init-clone.mjs | 初始化克隆项目骨架和 NOTES.md |
recon-site.mjs | 全程滚动侦察：框架/资源/DOM/console、关键区块计算色、@font-face、三档截图 |
asset-harvest.mjs | 真浏览器抓下真实用到的图片/字体/媒体（含防盗链 CDN），生成自托管 fonts.css + 素材清单 |
mirror-site.mjs | 静态构建站（Astro/Vite SSG/Hugo）1:1 镜像部署资产，含运行时 fetch 的 .sog/.buf/.wasm/.riv |
network-capture.mjs | 捕获 XHR/fetch 响应，给 SPA/SaaS 做本地 fixtures |
route-crawl.mjs | 爬站内链接做路由地图，解决"多页面站只复刻首页" |
interaction-probe.mjs | 自动跑 scroll/hover/click/canvas drag，留交互前后状态证据 |
sourcemap-hunt.mjs | 从 JS chunk 里挖 source map |
dna-scaffold.mjs | 生成 design-dna.json 设计身份骨架（视觉复刻/内容爆改模式用） |
compare-recon.mjs | 原站 vs 克隆站对比，生成 CLONE_REPORT.md |
visual-diff.mjs | 截图像素差异，输出 visual score 和差异图 |
audit-clone.mjs | 交付前审计：追踪脚本、品牌残留、TODO、外链风险 + 字体/图片/颜色保真硬门槛 |
od-preview-rewrite.mjs | 项目根资源引用改相对路径，保证嵌套路由下预览/导出仍能加载 |
参考文档
能力边界
- 能高保真做 — 静态营销页、企业官网、内容型 React/Vue/Next 前端、可拿到源码的动画站
- 能视觉还原但会简化 — CMS 后台数据、复杂滚动叙事、多端断点、WebGL/Canvas 特效、第三方嵌入
- 默认不承诺完整克隆 — 登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材
⚠️ 许可与合规
本 skill 内置「clone 前必查许可」环节，请务必遵守：
- 无 LICENSE 文件 ≠ 可自由使用。未声明许可默认保留所有权利——仅可本地学习/复刻，须署名原作者，未经许可不得公开重新部署。
- 别把"GitHub 上是公开的"等同于 MIT，核实到底。
- 忠实复刻阶段会落地原站真图、真字体、真品牌色；上线前必须按
NOTES.md 的"部署前须替换清单"替换掉受版权/商标保护的素材。
许可
MIT License — 详见 LICENSE。
