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。