ditto.site
ditto.site 是一个开源的、MIT 许可的确定性网站克隆工具，可以将任何公共 URL 转换为干净、组件化的 Next.js 或 Vite 代码——通常在大约 5 分钟内完成——无需依赖 LLM 的猜测。
https://ditto.site/?ref=producthunt&utm_source=aipure
产品信息
更新于：2026年07月23日
什么是 ditto.site
ditto.site 是一个确定性的“网站到代码”工具，它根据目标页面在浏览器中的渲染情况生成一个独立的 TypeScript Web 应用程序。您无需访问网站的源代码仓库，只需提供一个公共 URL，ditto 就会输出一个可维护的项目（Next.js 或 Vite），其中包含结构化的组件和样式（例如 Tailwind）。该项目是开源的 (MIT)，可以通过自托管、托管 REST API 或专为代理工作流设计的 MCP 服务器使用。ditto.site 强调一致、稳定的输出，仅适用于您有权检查、复制、转换和操作目标内容的情况。
ditto.site 的主要功能
ditto.site是一个开源的、MIT许可的确定性网站克隆工具，它能在几分钟内将一个公共URL转换为一个独立的、可维护的TypeScript Web应用程序（Next.js或Vite）。它不依赖于基于LLM的最佳猜测，而是运行一个稳定的管道，捕获页面在浏览器中渲染的内容，然后生成干净的、组件化的代码，并提取设计系统（令牌、字体、断点）、交互（悬停/焦点、下拉菜单、手风琴、动画）和生产友好的SEO工件（元数据、JSON-LD、站点地图）。它可以通过自托管的开源工具、托管的REST API或用于代理工作流的MCP服务器使用。
确定性克隆管道: 生成快速、稳定、可重复的输出（捕获 → 生成 → 验证），不依赖于非确定性的LLM解释。
URL到应用程序代码生成: 将公共网页转换为一个全新的、独立的TypeScript项目，基于页面在浏览器中渲染的内容——无需原始源代码仓库。
框架输出：Next.js或Vite: 发出一个真实可运行和扩展的应用程序骨架，您可以根据您的技术栈和部署需求选择Next.js或Vite。
可维护的、组件化代码: 通过将重复的DOM拆分为组件，将区域提升为部分，并提取可编辑的内容模型，避免了“一个巨大的文件”的问题。
设计系统提取: 提取令牌、字体、断点、布局结构和动画/交互，以保持外观和感觉，同时保持样式可编辑。
多种集成路径（OSS、API、MCP）: 本地运行/自托管（MIT），调用托管的REST API来排队/轮询作业并下载结果，或通过MCP服务器将克隆作为工具暴露给代理。
ditto.site 的使用场景
代理或工作室重建/迁移: 将现有营销网站重新创建为干净的Next.js/Vite代码，作为重新设计、性能优化或CMS集成的起点。
竞争/市场研究原型制作: 生成可公开访问页面的忠实、可编辑的副本（当您有权检查/转换时），以研究布局模式、信息架构和设计系统。
AI应用构建器入门模板: 为新客户提供与其当前网站匹配的真实代码基线，将空白画布问题替换为可维护的起始项目。
来自“渲染真相”的工程交接: 当原始源代码不可用时，从渲染页面生成可工作的代码库，以加速内部文档、重构或现代化。
代理辅助网站生成工作流: 通过MCP将ditto连接到Claude/Cursor/自定义代理，以便自动化构建循环可以克隆、修改和迭代真实项目。
SEO就绪的网站复制基线: 使用生成的元数据、JSON-LD和站点地图作为SEO保留重建的基础，然后再进行进一步优化。
优点
确定性、一致的输出，适用于可重复的工作流和自动化。
生成可维护的、组件化的Next.js/Vite TypeScript项目，而不是扁平的HTML转储。
灵活的使用方式：自托管开源、托管REST API或用于代理工具的MCP。
提取设计令牌、交互和SEO工件，以保持保真度并加速迭代。
缺点
仅适用于您有权检查/复制/转换目标内容的情况；滥用可能导致法律/道德问题。
输出保真度受限于从渲染页面捕获的内容；复杂的应用程序逻辑/后端无法固有地重建。
对于动态内容、身份验证流程或特定于站点的集成，可能仍需要手动清理或调整。
如何使用 ditto.site
1) 选择您想如何使用 Ditto: Ditto 提供三个使用相同确定性引擎的入口点：(a) 开源自托管（在本地运行整个管道），(b) 托管 REST API（POST 一个 URL，轮询作业状态，然后下载输出），或 (c) MCP 服务器（将 Ditto 连接到像 Claude/Cursor 这样的代理）。
2) 通过托管 REST API 使用 Ditto（最快路径）: 访问 https://www.ditto.site/api-key 并获取 API 密钥。使用托管端点提交一个公共 URL，然后轮询作业直到完成，最后拉取生成的项目（默认是 Next.js App Router，或根据请求生成 Vite React）。
3) 通过 MCP 使用 Ditto（用于代理工作流）: 获取 API 密钥，然后使用 MCP URL 和您的 Bearer 令牌将 Ditto 添加为代理/客户端配置中的 MCP 服务器。示例配置：{ "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) 自托管 Ditto（在本地运行管道）: 克隆开源仓库并安装依赖项：`gh repo clone ion-design/ditto.site` 然后 `cd ditto.site && npm install`。
5) 针对 URL 运行本地克隆作业: 从仓库中运行克隆命令并传递目标 URL：`npm run clone -- https://example.com`（替换为您有权克隆的网站）。
6) 将 Ditto 的克隆输出转换为磁盘上的项目（解包）: 使用已检出仓库中的官方解包器：`npm run unpack -- <clone.json|-> <out-dir>`。这会写入文本文件并实现二进制资产（内联 base64 或通过 $DITTO_API_URL / $DITTO_API_KEY 获取）。
7) 打开并构建生成的应用程序: 在编辑器中打开输出目录。Ditto 会发出一个真实的 TypeScript 项目，其中包含组件化代码（而不是一个巨大的文件），包括提取的令牌/设计系统、字体、交互、动画、断点和部分。
8) 了解 Ditto 捕获了什么（以及可能遗漏了什么）: Ditto 捕获的是快照时浏览器实际渲染的内容。稍后加载的内容（无限滚动、延迟加载图像或交互触发的内容）可能不会包含在内——请确保您想要的内容在克隆之前是可见的。
9) 遵循使用和权利的最佳实践: Ditto 旨在用于学习、原型设计和授权用例。您有责任确保您有权克隆和使用任何页面的代码，并尊重版权、服务条款和知识产权。
ditto.site 常见问题
ditto.site 是一个开源的确定性网站克隆工具，它能将公共 URL 转换为一个干净的、组件化的代码库（Next.js 或 Vite），基于页面在浏览器中的渲染效果。
与 ditto.site 类似的最新 AI 工具
GPT Easy Web
GPT Easy Web 是一个用户友好的 AI 驱动平台，使用户能够通过自然语言交互和自动化工具轻松构建、定制和管理网站，而无需编程知识。
AI Website Tool
AI Website Tool 是一个AI驱动的网站构建器，只需几次点击即可自动生成以业务为中心的文案、自定义视觉效果和响应式设计，创建专业网站。
Softgen
Softgen.ai 是一个 AI 驱动的全栈项目生成平台，使用户无需编码要求即可将想法转化为功能完备的 Web 应用程序。
Webifier
Webifier是一个AI驱动的工具，可以将文本提示转换为功能齐全的React着陆页，使用NextJS14、TailwindCSS和Shadcn组件生成干净、可导出的代码。
类似 ditto.site 的热门 AI 工具
Adobe Express
Adobe Express 是一款集成了 AI 技术的内容创作应用程序，可轻松制作令人惊艳的社交媒体帖子、图像、视频、传单等，拥有专业设计的模板和素材资源。
Hostinger
Hostinger 是一家 Web 托管和域名服务提供商，提供由 AI 驱动的工具，如 Horizons，使任何人都可以通过简单的聊天界面构建、编辑和发布自定义 Web 应用程序和网站，而无需编码。
GPT Engineer
GPT Engineer 是一个 AI 驱动的软件开发工具，使任何人都能通过与 AI 工程师聊天来构建网络应用程序。
Manus Shopify Connector
Manus Shopify 连接器允许您通过一个聊天构建由 Shopify 支持的店面、管理您的目录并生成数据驱动的营销活动——使用具有 OAuth 范围访问权限的 Shopify API 和 Shopify 结账。