web-clone

Readme

# web-clone · 网站复刻方法论

网站复刻 / 克隆方法论。提供「**先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容**」的可移植决策树，
覆盖 **静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站** 三大分支，
并强制核对任何 AI 二手分析里的可执行代码。

**USE WHEN** 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、
reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互 / WebGL / Canvas / Three.js 效果。

> **头号铁律：真源码至上，绝不信 AI 推测的代码。**
> 任何 AI 生成的"复刻分析/施工图"，概念骨架可以参考，但里面的**可执行代码块默认全是臆造的**，
> 必须逐行用真源码核对。实证案例见 [`references/marbles-case.md`](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）

```bash
dsh plugin add Edisonzszs/web-clone
```

安装后本仓库作为 `dsh.bundle` 插件挂载，skill 以 `web-clone` 名称进入会话技能目录；
`references/` 与 `scripts/` 随插件分发，按技能正文中的相对路径调用。

### Claude Code

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

## 能力边界

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

## ⚠️ 许可与合规

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

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

## 许可

MIT License — 详见 [LICENSE](LICENSE)。