luigiluft/ditto

# Ditto **将它指向任何网站。它会研究真实事物，然后换上你的品牌重新构建。** 以能够变形为所见之物的宝可梦 Ditto（百变怪）命名。Ditto 是一个 Claude Code 技能，它能逆向工程网站的设计、主题、动画甚至 WebGL，然后将其重构为你自己的代码库——不是屏幕截图描边，不是 AI 幻觉生成的代码，而是真实的配方。 大多数“克隆这个网站”的工具只做两件事之一：镜像 HTML（死板复制，在任何 SPA 上都会崩溃），或者让 AI 从屏幕截图*猜测*代码（看似合理，但运行的那一刻就错了）。Ditto 两者都不做。它首先捕获真实的源代码，根据证据对每个发现进行评级，并且只基于它能证明的内容进行构建。 ``` recon → freeze → DNA → recipe → (3D asset) → rebuild → verify ``` ## 为什么会有这个项目 有两个很棒的开源克隆工具，每一个都填补了对方的空白： - **[ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)** (25k★) — 在*重建*方面非常出色：它派遣并行的构建器代理，将内容站点重构为 Next.js + shadcn。但它忽略了 WebGL/Canvas，并且没有品牌重塑或验证环节。 - **[claude-skill-web-clone](https://github.com/Jane-xiaoer/claude-skill-web-clone)** — 在*严谨性*方面非常出色：一种真实源代码优先的方法论，具有可运行的探针、WebGL 逆向工程和可版本化的 design-DNA。但它没有脚手架，没有并行构建器，也无法生成 3D 资产。 Ditto 是统一两者的指挥家，并添加了两者都没有的三个部分： 1. **自有 3D 资产路径。** 当目标包含你不应窃取的专有网格时，Ditto 会从提取的配方中生成一个*等效的*资产（图像转 GLB，约 $0.86）。 2. **品牌重塑模式。** 将目标的设计 DNA 角色映射到*你的*品牌 token 上：他们的结构和编排，你的皮肤。 3. **带评分的验证关卡。** 在四个断点下对克隆与原始版本进行像素差异比对，评分为 1–5，因此“完成”是一个数字，而不是一种感觉。 ## 两个关卡（这是核心所在） **铁律 —— 真实源代码优先。** 任何 AI 编写的“这就是该效果的工作原理”都只是一个*提示*，而不是代码。每个可执行的代码块在被逐行与真实源代码验证之前，都会被视为幻觉。一个很好的例子（[`references/marbles-case.md`](references/marbles-case.md)）：AI 自信地将玻璃弹珠效果描述为*光线步进 + SDF*；而真实的实现是*解析球体射线相交 + 使用 SVG `feDisplacementMap` 折射实时的 DOM*。两者是完全不同的算法。复制错误的算法不仅运行速度会慢很多倍，而且看起来与原版完全不同。 每个技术发现都会获得一个证据标签： | 标签 | 含义 | |---|---| | `SOURCE` | 带有哈希值的真实代码、source map、runtime 转储、帧捕获或网络响应 | | `PARTIAL` | 一个名称或片段 —— 下一个探针的把手，而不是结论 | | `GUESS` | 视觉拟合、一个魔法数字、“看起来是对的” | **未标记的默认为 GUESS。GUESS 级别的代码在升级为 SOURCE 之前不能被实现。** 不要通过调整常量来掩盖算法错误。 **验证关卡。** 在 `visual-diff.mjs` 于真实浏览器中针对原始版本对克隆进行评分之前，克隆就算未完成。完全相同 → `visualScore: 5`；差异极大 → `1`。在 1440 / 768 / 390 分辨率下运行。如实记录任何你无法验证的内容——永远不要声称“应该能用”。 ## 证明：它验证动画，而不仅仅是像素 静态的截图差异比对对运动视而不见。`anim-verify.mjs` 证明**缓动曲线**是 1:1 的 —— 它通过 Web Animations API（`getAnimations()` → `currentTime = t`）确定性地寻址每个动画，对双方的 `translateY`/`opacity` 轨迹随时间变化进行采样，并比较曲线以及真实的时序（`duration`、`easing`、`delay`）。 两个具有**相同起始帧和结束帧**的克隆 —— 静态差异比对会认为它们是相等的：  绿色（原始版本）和蓝色（好的克隆）共享相同的 `cubic-bezier(.28,.11,.32,1) .8s`；红色的克隆使用 `linear .4s`。相同的端点，不同的过程。通过绘制随时间变化的 `translateY`，好的克隆的曲线与原始版本完全重合，而坏的克隆的曲线则出现了偏离：  ``` good → MATCH · curve-err 0.0% · timing dur ✓ easing ✓ bad → DIVERGE · curve-err 10.4% · timing dur ✗ easing ✗ ``` 好的克隆以 0.0% 的曲线误差通过；坏的克隆被捕获了 —— 错误的缓动在帧差异比对中是不可见的，但在曲线中却显而易见。重现它：`examples/anim-demo/` + `node scripts/anim-verify.mjs --original ... --clone ... --selector ".card" --trigger-class play`。 ## 7 个阶段 1. **源代码优先** — 在抓取之前先在 GitHub 上寻找真实的代码（`gh search`，source map 恢复）。如果找到且许可证允许 → 直接跳到重建。 2. **侦察** — `recon-site.mjs` 检测框架（Three / GSAP / Lenis / React / Vue / Next），统计 canvas/video/image 的数量，截取三个视口，然后将复杂度分类为 L1–L6。 3. **冻结** — 选择路线：`mirror-site.mjs`（静态，甚至会下载运行时的 `.glb`/`.wasm`），`network-capture.mjs`（SPA 固定数据），`route-crawl.mjs`（多页面），`interaction-probe.mjs`（滚动/悬停/点击状态）。 4. **DNA** — `dna-scaffold.mjs` 提炼出 `design-dna.json`（design_system / design_style / visual_effects）。用于重写/品牌重塑模式；忠实的克隆使用真实的源代码作为事实依据。 5. **配方** — 内容网站 → 并行构建器调度（按区域规划 → 在 worktree 中的代理 → 顺序合并）。重度 WebGL → 使用证据关卡 + 基线优先重放进行逆向工程。 6. **3D 资产** *（Ditto 的额外补充）* — 生成你自己的等效网格，而不是窃取他们的。配方见 [`references/higgsfield-3d-route.md`](references/higgsfield-3d-route.md)。 7. **验证** — 像素差异比对 + `compare-recon` + `audit-clone`（剥离跟踪器和目标品牌残留物）。对其进行评分，然后发布。 ## 安装 Ditto 是一个 Claude Code 技能。把它放到你的代理寻找技能的地方： ``` # Global（在每个 project 中可用） git clone https://github.com/luigiluft/ditto ~/.claude/skills/ditto # 或者按 project git clone https://github.com/luigiluft/ditto .claude/skills/ditto ``` 侦察/验证脚本使用 Playwright。如果你的机器上还没有它，请在你的克隆项目中安装一次： ``` npm i -D playwright && npx playwright install chromium ``` 加载器还会自动发现已连接的 Playwright MCP server 缓存的 Playwright，因此在许多设置中，你什么都不需要做。 ## 使用 在 Claude Code 中，只需描述任务即可： 或者直接调用该技能并传递一个或多个目标 URL。Ditto 会走完这七个阶段，保留一个关于它发现了什么（带有证据标签）的 `NOTES.md` / `TEARDOWN.md`，并且在验证关卡通过之前不会宣布克隆完成。 **不要**使用它在没有参考的情况下从零开始构建网站，或者用来窃取专有的 3D 网格 —— 这些在设计上就超出了范围。 ## 包含的内容 **引擎**（`scripts/`，可运行的 Node + Playwright）：`recon-site` · `mirror-site` · `asset-harvest` · `network-capture` · `interaction-probe` · `route-crawl` · `sourcemap-hunt` · `dna-scaffold` · `visual-diff` · `compare-recon` · `audit-clone` · `init-clone`。 **外部武器库**，该技能会直接使用它们而不是重新实现：[webappanalyzer](https://github.com/enthec/webappanalyzer)（技术栈指纹识别），[browsertrix-crawler](https://github.com/webrecorder/browsertrix-crawler)（忠实的 WACZ 归档），[webcrack](https://github.com/j4k0xb/webcrack)（反压缩 bundles），[Spector.js](https://github.com/BabylonJS/Spector.js)（实时的 WebGL 检查），[glTF-Transform](https://github.com/donmccurdy/glTF-Transform)（处理 GLB），[snapdom](https://github.com/zumerlab/snapdom)，[css-to-tailwind](https://github.com/hymhub/css-to-tailwind)，[crawlee](https://github.com/apify/crawlee)。 ## 致谢 Ditto 建立在两个优秀的项目之上，两者均为 MIT 许可证： - **[Jane-xiaoer/claude-skill-web-clone](https://github.com/Jane-xiaoer/claude-skill-web-clone)** — 引擎和真实源代码优先的方法论。其中的 `scripts/` 和大部分 `references/` 都来源于此。去给他们的 repo 点个 ★ 吧。 - **[JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)** — 用于内容网站的并行构建器调度模式。也去给他们的 repo 点个 ★ 吧。 ## 许可证 MIT。有关全文和第三方署名，请参阅 [LICENSE](LICENSE)。

标签：AI编程助手, Claude Code, MITM代理, Syscall, UI重构, Web开发, 前端逆向工程, 数据可视化, 特征检测, 网站克隆, 自定义脚本