Ditto

什么是 Ditto？

Ditto 是一款开源的确定性网站克隆工具。它接收一个公开 URL，并将其转换为干净的、组件化的代码库，主页和 API 示例展示了 Next.js 和 Vite 作为输出目标。

该产品面向希望获得忠实起点而非空白画布的开发者。网站称 Ditto 能保留还原度、提取设计系统及其他 UI 细节，并可作为自托管工具、托管 API 或通过 MCP 连接的代理工作流使用。

Ditto 能做什么？

网站转代码克隆

接受公开 URL，并生成组件化代码形式的克隆站点，而不是对页面进行扁平抓取。

面向框架的输出

将输出重建为 Next.js 或 Vite 项目，让用户获得可编辑、可继续构建的真实代码库。

确定性流水线

被描述为确定性流程，网站明确将其与基于 LLM 的猜测方式进行对比。

UI 与布局提取

根据主页文案，提取设计系统、令牌、字体、交互、动效、断点和页面区块。

组件化项目结构

将重复的 DOM 拆分为组件，把区域提升为区块，并输出可编辑的语义内容和项目文件。

多种运行方式

支持三种接入方式：自托管开源版、托管 REST API，以及供代理使用的 MCP 服务器。

使用场景

“基于现有网站快速启动新项目”

开发者可以将公开网站 URL 发送给 Ditto，得到一个可作为起点的代码库，用于在 Next.js 或 Vite 中重建或扩展 UI。

“自托管克隆流水线”

团队可以在自己的机器或基础设施上运行这款开源克隆工具，以便检查流水线并将工作流保留在内部。

“通过 API 自动化网站克隆”

应用可以调用托管 REST API 来排队克隆任务、监控进度，并在无需本地搭建基础设施的情况下获取完成的项目。

“将克隆功能加入代理工作流”

AI 代理或构建循环可以连接到 MCP 服务器，并在迭代工作流中将 Ditto 作为把目标 URL 转换为代码的工具。

“审查并优化生成的代码库”

设计师或工程师可以审查生成的组件、区块、内容模型和提取的令牌，将其作为后续编辑的结构化基础。

常见问题

Ditto 是做什么的？

Ditto 是一款开源网站克隆工具，可接受公开 URL 并返回组件化代码库。来源显示它可以输出 Next.js 或 Vite 项目，并可通过自托管流水线、托管 REST API 或 MCP 服务器使用。

我可以如何使用 Ditto？

网站显示了三种使用方式：使用 MIT 许可的源代码自托管克隆工具、向 api.ditto.site 的托管 REST API 提交任务，或连接 MCP 服务器用于代理工作流。

它会生成什么样的输出？

主页说明 Ditto 可将页面重建为干净的、组件化的 Next.js 或 Vite 代码。还提到了提取设计系统、令牌、字体、交互、动效、断点和区块。

Ditto 是确定性的吗？

主页将 Ditto 描述为确定性的，并表示它不依赖 LLM 去猜测页面结构。产品页还强调其保真输出和字节级稳定副本。

Ditto 的价格是多少？

在已收集的证据中，/pricing 页面返回了 404，因此当前提供的网站快照中没有确认的定价信息。