ditto.site favicon

ditto.site

访问网站

ditto：开源确定性网站克隆工具，5分钟生成高质量组件化代码

介绍:

ditto是一款由ion.design开发的开源确定性网站克隆器。它能在5分钟内将任何网页转化为干净、组件化的Next.js或Vite代码。不同于模糊的AI生成，ditto采用确定性引擎，确保输出稳定、一致且高保真。它支持提取设计系统、Token、字体及响应式布局，是AI应用开发者摆脱空白画布、快速构建真实代码起点的理想选择。ditto采用MIT协议，完全开源且支持自托管、REST API及MCP服务器集成。

记录:

2026-07-23

每月访客数:

--K

编程&IT
ditto.site - AI Tool Screenshot and Interface Preview

ditto.site 产品信息

ditto：革命性的开源确定性网站克隆器，重塑网页开发工作流

在现代前端开发中，从零开始搭建页面往往耗时耗力。ditto 的出现彻底改变了这一现状。作为一款由 ion.design 开发的开源确定性网站克隆工具，ditto 能够针对任何目标网址，在短短 5 分钟内交付一套结构清晰、组件化的 Next.js 或 Vite 代码。无论你是需要快速原型开发，还是希望为 AI 应用提供真实的起始代码，ditto 都是不二之选。

什么是 ditto？

ditto 是一款 开源确定性网站克隆器 (Open-source deterministic website cloner)。它的核心理念是“确定性 (Deterministic)”，这意味着它不依赖于大语言模型 (LLM) 进行模糊的推测，而是通过精准读取 DOM、样式和动画，确保输出结果的快速、稳定和一致。

ditto 能够深度解析网页并提取以下核心要素：

  • 设计系统 (Design Systems)
  • 设计令牌 (Tokens)
  • 字体与交互 (Fonts & Interactions)
  • 动效与响应式断点 (Motion & Breakpoints)
  • 页面区块 (Sections)

通过使用 ditto，开发者可以告别空白画布，直接获得一个忠实于原站点的、具备真实代码逻辑的起点。

ditto 的核心特性

1. 极致的确定性与高保真度

与传统的 AI 生成工具不同，ditto 不会“祈祷”模型输出正确结果。根据官方数据显示，ditto 拥有卓越的性能指标：

  • 确定性 (Determinism): 100
  • 保真度 (Fidelity): 96
  • 组件化程度 (Componentized): 92
  • 覆盖率 (Coverage): 88

2. 生成可维护的高质量代码

ditto 输出的代码并非杂乱无章的单个大文件，而是开发者乐于维护的项目结构。它会自动执行以下操作：

  • 将重复的 DOM 节点拆分为独立的组件 (Components)。
  • 将干净的页面区域提升为区块 (Sections)。
  • 提取出可编辑的内容模型 (Content Model)。
  • 生成带有类型定义 (Typed) 和令牌化 (Tokenized) 的生产力代码。

3. 全面的技术栈支持

  • 框架 (Framework): 支持 Next.js 和 Vite。
  • 样式 (Styling): 完美集成 Tailwind v4 和标准 CSS。
  • 语言 (Language): 采用 TypeScript，确保代码健壮性。
  • 路由 (Routes): 支持单页克隆及多页克隆模式。

4. 深度细节捕捉

ditto 不仅仅是克隆视觉效果，它还涵盖了网页的深度细节：

  • 悬停与聚焦状态 (Hover & focus states)
  • 下拉菜单与手风琴折叠组件 (Dropdown menus & Accordions)
  • 声明式动效 (Declarative motion)
  • Web 字体与响应式布局
  • SEO 元数据、JSON-LD 及站点地图 (Sitemaps)

如何使用 ditto

ditto 提供了三种灵活的使用方式，均采用相同的确定性引擎，您可以根据开发习惯自由选择。

方式一：开源自托管 (Open Source)

如果您希望完全掌控流程，可以通过 GitHub 克隆项目并在本地运行整个流水线。ditto 采用 MIT 协议，您可以阅读每一行代码并贡献 PR。

gh repo clone ion-design/ditto.site
cd ditto.site && npm install
npm run clone -- https://example.com

方式二：托管 REST API

无需部署基础设施，直接调用 ditto 的托管 API。您可以发送一个 URL，轮询任务进度，并最终获取完整的项目包。

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

# 关注流水线实时进度并获取结果
curl https://api.ditto.site/v1/clones/$JOB/events?after=0 \
  -H "Authorization: Bearer $DITTO_API_KEY"

方式三：MCP 服务器 (针对 AI Agent)

为您的 AI 代理（如 Claude, Cursor 等）配备克隆工具。通过将 ditto 接入您的构建循环，让 AI 能够直接调用克隆功能。

{
  "mcpServers": {
    "ditto": {
      "url": "https://api.ditto.site/mcp",
      "headers": {
        "Authorization": "Bearer ${DITTO_API_KEY}"
      }
    }
  }
}

应用场景 (Use Case)

  • AI 应用开发者: 为新用户提供忠实的原站代码起点，而非空白页面，加速产品上手过程。
  • 快速原型设计: 5 分钟内克隆现有网站并基于其组件化代码进行二次开发。
  • 技术栈迁移: 将旧站点的视觉和结构快速转化为现代的 Next.js 或 Vite + Tailwind CSS 项目。
  • 设计系统提取: 自动提取现有站点的设计令牌、颜色和组件库，用于构建新的 UI 规范。

常见问题解答 (FAQ)

Q: ditto 是收费的吗？

A: 不，它是免费的！ditto 是完全开源且基于 MIT 协议发布的。您可以免费使用、自托管或调用托管 API。

Q: 生成的代码质量如何？

A: ditto 生成的是开发者真正愿意维护的代码。它会将项目结构化为 app/、components/、sections/ 和 svgs/ 等目录，并提供可编辑的 content.ts 语义数据。

Q: ditto 使用了大模型吗？

A: 没有。ditto 使用的是确定性引擎而非大模型。这保证了克隆过程的极速响应和结果的高度一致性，不会出现 AI 生成中的随机性问题。

Q: 它支持克隆哪些内容？

A: 几乎涵盖了现代网页的所有要素，包括交互式的下拉菜单、动效、Web 字体、响应式布局，甚至是 SEO 相关的 JSON-LD 和元数据。

Q: 如何获取 API Key？

A: 您可以访问 ditto.site 官方网站获取 API key，以开始使用其托管的 REST API 服务。