詳細レポート
-
ditto.site 是一个开源、确定性的网站克隆工具，输入任意公开 URL，5 分钟内输出一份「组件化」的 Next.js 或 Vite 项目代码。与市面上依赖大语言模型「猜」代码的截图转代码工具不同，ditto 采用浏览器真实渲染捕获 + 规则化提取的两段式架构，生成结果字节级可重复，且能保留悬停状态、交互动效、设计 Token 和 SEO 元数据，产出质量远超传统爬虫工具。
-
ditto.site 由设计工作室 ion.design 团队打造，核心开发者为 Samraaj。该项目于 2026 年 6 月 30 日在 GitHub 上首次提交，7 月 21 日在 Product Hunt 正式发布并获 418 票。团队此前已在内部使用 ditto 数月，用于将客户现有网站快速转化为可编辑的代码基线。 团队描述开源动机为「太有用了，不能只留给自己用」。项目采用 MIT 许可证，累计 90 次提交，仓库主要由 TypeScript 编写，依赖 Playwright 进行浏览器捕获、Drizzle ORM 与 PostgreSQL 进行数据管理。
-
ditto 的核心能力非常聚焦：URL 到代码。用户提交一个公开网址后，系统执行「捕获 → 生成 → 验证」三步流水线，最终产出包含以下内容的 TypeScript 项目：完整页面路由基于 Next.js App Router 或 Vite React 的页面结构；组件化代码中重复 DOM 拆分为可复用的 React 组件，页面区域被提取为独立 Section；设计系统方面设计 Token、字体、断点、布局结构均被提取并保留在可编辑状态；交互行为方面悬停/焦点状态、下拉菜单、手风琴、声明式动效等大多数同类工具无法保留；SEO 物料元数据、JSON-LD、站点地图自动生成；以及可编辑内容模型提取出一个 content.ts 文件方便后续修改文本和图片。 产品提供三种使用入口：开源自托管（npm run clone -- <url>）、托管 REST API（POST /v1/clones）、MCP 服务器（可与 Claude、Cursor 等 AI 编程工具集成）。第三种方式特别适合 AI 驱动的开发流水线，在 Agent 工作流中把网站克隆当作一个普通工具调用。 与竞品对比，ditto 最大的差异化在于「确定性」。市面上的 screenshot-to-code 工具（如 v0、Bolt.new）基于 LLM 生成，每次结果不同，且交互动效层几乎为零；而 ditto 的字节级稳定输出使其可以用于 diff 对比和持续集成。OpenAI 的 Operator 等浏览器代理也能做类似事情，但 ditto 的定位更精准，它只做从渲染到代码的转化，不做浏览器自动化操作。
-
ditto.site 目前核心引擎完全开源（MIT），托管 API 需申请 API Key 使用。官网提供 /api-key 路径获取密钥，具体定价层级需通过注册流程确认。对于个人开发者和小团队，自托管版是免费且功能完整的；托管版预计按调用量收费，适合不想自己搭建基础设施的团队。 目标用户覆盖前端开发者（快速原型、竞品页面结构学习）、设计工作室（客户网站迁移重构）、AI 应用构建者（为新客户提供真实代码基线而非空白画布）、Web 教育场景（通过实际页面学习组件拆分）。
-
在 Product Hunt 评论区，社区对 ditto 的评价整体积极。多位用户称赞其组件化输出「不是一堵 div 墙」，悬停状态的保留「让大多数爬虫工具相形见绌」，确定性的输出「意味着第二次运行结果与第一次完全一致，这对 diff 很关键」。 也有开发者提出了对合规边界的担忧。团队创始人 Samraaj 在评论区明确回应工具是中性的，合规责任在用户一方。
-
AI 工具评测网站如 AIPure 和 ExploreAI Tools 均将 ditto.site 收录并给予 8-10 分的高性价比评分。中文科技媒体对其评价为「2026 年建站工具链两个清晰转向」的代表：从 AI 猜测到确定性生成，从平台锁定到通道式工具。中文网站觉醒 AI 的一篇文章指出，ditto 代表的趋势是用户越来越不愿意把内容锁死在某个 SaaS 平台，这种克隆加迁出工具正在拆掉 Webflow、Framer、Wix 的护城河。
-
ditto 面临的最大风险是合规与滥用。将其指向他人网站后用于商业误导、冒充或再分发，可能涉及版权和 IP 侵权。ditto 官方在 README 中明确了仅限拥有授权的内容的使用限制，但技术层面并未内置强制的 URL 白名单或版权校验。 技术局限方面同样不容忽略：无法处理需登录的后台页面；SPA 应用中的动态加载内容可能被遗漏；大型页面的保真度可能打折扣；图片等二进制资源默认引用原站地址而非托管；产出的代码仍需要人工审查后才能用于生产环境。
-
ditto.site 最适合前端开发者、设计工作室和 AI 应用构建者。如果你正在做网站重构、竞品页面结构研究，或者想给 AI 编程助手赋予克隆任意网站的能力，ditto 是一个值得认真考虑的工具。 不适合的场景包括：需要复制复杂应用逻辑和 API 后端的场景、对生产代码零审查要求的团队、以及任何未经授权的网站复制用途。
-
ditto.site 用一个精准的技术选择——确定性而非 LLM——在一个看似拥挤的「截图转代码」赛道中打出了差异化。它没有试图成为万能工具，而是在 URL 到组件化代码这个单点上做到了极致。对于前端开发和 AI 编程工具链来说，这是一个值得加入工具箱的开源利器。
ユーザーレビュー
-
miYOU—content.ts 提取的设计不错，克隆完了改改文本和图片就能用，不是那种改一行要找半天的结构。 -
Harold_Sanders_2023—大图片和内联资源默认引用原站地址，对于迁移场景来说还得自己托管一下，这个要注意。 -
PhilipMendozaX44—昨天试了一个比较复杂的营销页面，组件拆分大体对，但 Accessibility 方面有几个语义标签没处理好。 -
NathanTurner_8848—免费的 hosted API 不知道有没有调用次数限制？如果大规模用的话还是自托管靠谱。 -
Phillip.Sullivan369—说实话有点担心法律风险，指向任意公开 URL 就能拿到组件化的克隆代码，如果有人指向竞争对手的站点怎么办？ -
PatrickWilson_77—如果能直接把克隆结果在 StackBlitz 里打开直接编辑就更好了，下载 ZIP 再解压还是多了几步。 -
Walter.PerryJr—用 ditto 做竞品页面结构学习挺好的，但绝对不能拿生成代码直接上线，还是要人工审一遍才行。 -
DrSolineHubert_x—UI 设计很出彩，像素 RPG 风格跟网站克隆这个主题意外的搭，第一眼就被吸引了。 -
AAllen_100—跑了几次 API 接口，文档写得还算清楚，POST 一个 URL 然后轮询就完事了，集成成本很低。 -
Dylan_Rodriguez369—PH 上线那天就 star 了，418 票的精选产品实至名归，确实解决了一个很具体的痛点。 -
MrThaísCastro_x—只支持公开页面的克隆，登录后的后台或者 SPA 的动态内容抓不到，这算是一个已知的限制吧。 -
Sophia948—中文媒体说这个工具在拆 Webflow 和 Wix 的护城河，我觉得说得挺对的，建站工具从平台变成通道是个大趋势。 -
RWrightIII—ion.design 团队之前做 Ruby 的，那个 AI 产品设计师也很厉害，这个 ditto 感觉是他们内部工具的开源化。 -
Deborah.Russell5—对于教学场景特别有用，让学生把一个真实网站克隆下来看组件拆分，比从头教怎么写组件直观多了。 -
DMyers_Plus47—确定性这个点确实是刚需，跑了两遍输出完全一致，拿来 diff 追踪页面变化很实用。 -
JohnRogersK921—试了一下指向我自己的作品集网站，生成的代码干净得有点意外，hover 状态居然真的保留了，组件拆分也合理，不是那种一堵 div 墙的输出。 -
Philip.MitchellK—要是能加个 diff 视图对比生成的代码和原站就好了，这样维护的时候一眼能看出 ditto 做了哪些取舍。 -
Frank.Hall_2023—MCP 服务器这个点很聪明，直接接到 Claude 或者 Cursor 里当工具用，不用来回导文件了。 -
orangewolf962—自托管的话依赖 PostgreSQL 和 MinIO，部署门槛比纯 Node 服务稍高一点，但文档还算全。 -
刘琪—从一个设计工作室的角度看，这工具能大幅降低客户网站迁移的起手成本，以前报价里光还原设计就要一周。 -
CFisher_2021—Webflow 上做了两百多个页面，每年续费一千五，想迁出来自己维护，ditto 可能是目前最好的方案了。 -
WalterRobertsZ—价格很良心，MIT 开源加免费托管 API，小团队自托管完全够用了。 -
Nash214—看了仓库的提交历史，一个月不到 90 次提交��团队迭代速度挺快，生产事故的复盘也写得很认真。 -
TeresaMartin007—团队回复得很清楚，工具是中性的，合规责任在用户。但我还是觉得技术上应该加一道基本的 URL 白名单机制。 -
Stake_Base—拿几个 landing page 试了一圈，组件化的效果比我想象中好太多，hover 和 token 都完好，这个开源的诚意很足。 -
FridaNascimento—用在 AI 应用构建的场景很顺手，新用户注册完了直接从老站克隆一套代码给他做起点，不用每次都从空白画布开始。 -
bigbear717—好奇组件边界推断是怎么做的？是靠 DOM 结构的语义分析还是有更启发式的方法？ -
Catherine_Thompson_X7—之前用 screenshot-to-code 的工具，每次生成结果都不一样，改来改去真的很崩溃。ditto 这个确定性路线才是做工具该有的态度。 -
AmberMooreK—对老旧营销网站那些 CSS 写得乱七八糟的页面，能还原到什么程度？有点想试试极限情况。 -
AbigailLopez—同类的工具之前用过几个，要么是 LLM 猜的不稳定，要么输出的是 flattened HTML 没法维护，ditto 算是找到了一个平衡点。