打开一个网站，获得一个本地 Next.js 项目

不久之前，我需要恢复一个营销网站的界面，但承包商的源代码早已不见踪影。更准确地说，客户只剩下一个线上链接。以前，我得花一晚上手动复制布局，但这次我发现了一个能在一分钟内完成这件事的项目。而且不是通过 LLM，这让我颇感意外。

ditto.site 是什么

ditto.site — 一个开源的 TypeScript 编译器，可将公开 URL 转换为自包含的项目。默认输出 Next.js App Router，也可按需生成 Vite React。样式支持 Tailwind 或纯 CSS。

我来解释一下作者所说的“克隆”是什么意思。这里没有 git clone：你不需要网站的仓库或源代码，只需要一个可从浏览器访问的链接。工具会打开页面，记录浏览器实际渲染的内容，然后据此编写一个新项目。

作者明确将其系统称为“捕获转代码管道”，并强调编译器不是生成页面的 LLM。同样的捕获副本总是产生逐字节完全相同的输出。顺便说一句，确定性被作为主要特性来营销，这比每次运行结果都不同的神秘神经网络生成要诚实得多。

该项目在 GitHub 上已有 1580 颗星和 214 个分支，MIT 许可证。项目很新，但社区正在快速形成。

如何使用

有三种方式。最简单的是本地 CLI：

git clone https://github.com/ion-design/ditto.site.git
cd ditto.site
npm ci
npx playwright install chromium
npm run clone -- https://example.com/ --out=./output

安装 Chromium 后，npm run clone 命令会打开页面、捕获状态，并将准备好的应用放到 output/<site>/app。我喜欢这个细节：没有 --out 标志时，结果会进入 runs/<site>/<timestamp>/，而符号链接 runs/<site>/latest 始终指向最新的克隆。脚本不需要因为新的时间戳而重写。

也有懒人模式：

npm run clone -- https://example.com/ --serve   # клонирует и сразу поднимает dev-сервер
npm run clone -- https://example.com/ --open    # плюс открывает браузер

第二种方式是 api.ditto.site 上的 REST API。通过表单或 curl 创建密钥并通过邮箱验证，导出到 DITTO_API_KEY，然后启动任务：

curl -sS -X POST "$DITTO_API_URL/v1/clones" \
  -H "authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "url": "https://example.com/",
    "options": {
      "mode": "single",
      "styling": "tailwind",
      "framework": "next"
    }
  }'

响应包含文件映射，每个文件都有路径、大小和 SHA-256。他们的 CLI 解包器有助于将目录树提取到磁盘，整个项目也可以通过 /bundle?format=tgz 作为单个压缩包下载。

第三种方式是 MCP 服务器，说实话这对我来说是最有趣的部分。ditto.site 作为常规 MCP 工具连接到代理，服务器设计得很经济：代理首先只收到任务 ID 和元数据，按需读取文件。类似 clone_website、list_clone_files 和 read_clone_files 这样的工具允许代理自己启动克隆、等待完成，并选择性地读取 package.json 或特定组件。

生成的项目里有什么

输出不仅仅是布局。根据 README，应用包括：

• 恢复的页面和路由模块；
• 捕获的资源、字体、图标、清单和元数据；
• 如果检测到，还包括 robots、sitemap、llms.txt 和 JSON-LD；
• 用于识别交互和动画的小型运行时辅助函数；
• 生成的 AGENTS.md 和 ARCHITECTURE.md 用于项目交接。

我要单独提一下最后一点。作者明确预期人类或 AI 代理之后会在代码上继续工作，并立即说明哪些文件可以安全编辑：src/app/content.ts 和 src/app/components/。对于一个生成器来说，这种程度的关怀很少见。

内部工作原理

管道流程是这样的：URL → 浏览器捕获 → 规范化中间渲染 → 确定性输出 → 应用生成 → 资源实例化 → 可选验证。

捕获会记录 DOM、计算样式、布局框、源 CSS、字体、截图和交互状态。如果可观察，也会捕获可复现的动画。但是，任意的第三方 JavaScript、认证、支付和个性化不会被复现。这是一个合理的限制：工具处理的是浏览器中可见的内容，而不是服务端逻辑。

仓库有扎实的架构：编译器、搭配 MCP 服务器的 Hono REST API、带有迁移的 Drizzle schema、任务队列 worker、S3/R2 的制品存储。你可以通过 docker compose 在本地启动所有服务，配合 Postgres 和 MinIO，或者用一条命令运行不需要数据库的简化内联模式。本地 API 也有 MCP 端点 localhost:8787/mcp。

我喜欢有 verify 和 asyncVerify 选项：生成的项目可以通过验证，你会得到确认它至少能构建并与原始页面渲染相似。

适用场景

第一个场景很明显：当没有源码时恢复网站。废弃的着陆页、丢失的承包商源码、需要迁移到现代技术栈的旧页面。工具在这里几分钟就能解决问题。

第二个场景是原型设计。客户展示“我想要这里这样的”，然后丢过来一个链接。与其抽象讨论，你几分钟就能得到一个带有 Next.js 结构的可工作项目，然后在其中讨论差异。对于自由职业者根据别人的参考估算工作量，这加快了起步。

第三个场景是通过 MCP 实现自动化。可以给代理分配任务：“克隆这个网站为 Next.js 应用，等待完成，读取生成的文件”。“仅需文件”格式节省了代理的上下文，作者显然考虑到了这一点。

另一面和游戏规则

有一些注意事项。CLI 目前在仓库内部，没有发布到 npm，所以 npx ditto 不起作用——你需要克隆整个仓库。这不是一行命令就能加到 CI 的东西，但作者诚实地警告了这一点。

然后是伦理问题。README 不断提醒你：只在有权复制和转换内容的地方使用工具。网络钓鱼、品牌仿冒、认证绕过和大规模抓取他人网站被明确禁止，项目有一个单独的文件 RESPONSIBLE_USE.md。这很合理：技术本身是中性的，但值得将其应用于你自己的项目或获得所有者许可后再使用。

还有一点。在俄语和英语中，“克隆”这个词听起来很大胆，但实际上它只是对页面可见部分的重建。不要期望工具能提取服务端代码、数据库或业务逻辑——它在 README 中诚实说明了这一点。

谁应该试试

如果你做着陆页、将网站迁移到新技术栈，或者想给 AI 代理一个干净的工具来处理 Web 界面，可以看看 ditto.site。从本地 CLI 开始，它不需要密钥：npm run clone -- https://example.com/ --serve，几分钟后你就有了一个运行在恢复项目上的开发服务器。如果你想将其接入你的流水线，REST API 和 MCP 服务器已经内置。对于经常收到“做成这样”的设计师或技术负责人来说，这个工具看起来是对一个非常普遍痛点的诚实回应。