Edisonzszs/web-clone

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 | 项目根资源引用改相对路径，保证嵌套路由下预览/导出仍能加载 |

参考文档

| 文档 | 内容 |
|---|---|
| assessment.md | 复杂度 L1-L6 分级 + 复刻后评分规则 |
| static-mirror.md | 静态构建站全量镜像配方（范例：oryzo.ai，L6 高斯泼溅） |
| complex-playbooks.md | L4-L6 复杂站专用流程 |
| reverse-engineering.md | 按技术支柱逐柱逆向，标行号 |
| effect-extraction.md | 特效提取三件套纪律：证据分级 / no-compensation / baseline-first 闸门 |
| marbles-case.md | marbles 真架构逐项拆解 —— “AI 臆造 vs 真源码”的实证 |
| design-dna.md | design-dna.json 三维结构与完整 schema |
| deliverables.md | NOTES.md / TEARDOWN.md 等产物模板 |

能力边界

- 能高保真做 — 静态营销页、企业官网、内容型 React/Vue/Next 前端、可拿到源码的动画站
- 能视觉还原但会简化 — CMS 后台数据、复杂滚动叙事、多端断点、WebGL/Canvas 特效、第三方嵌入
- 默认不承诺完整克隆 — 登录、支付、下单、搜索推荐、权限系统、服务端业务逻辑、专有 API、受版权限制的素材

⚠️ 许可与合规

本 skill 内置「clone 前必查许可」环节，请务必遵守：

- 无 LICENSE 文件 ≠ 可自由使用。未声明许可默认保留所有权利——仅可本地学习/复刻，须署名原作者，未经许可不得公开重新部署。
- 别把“GitHub 上是公开的”等同于 MIT，核实到底。
- 忠实复刻阶段会落地原站真图、真字体、真品牌色；上线前必须按 NOTES.md 的“部署前须替换清单”替换掉受版权/商标保护的素材。

许可

MIT License — 详见 LICENSE。