ditto.site

一个开源、确定性的网站克隆工具，输入任意公开 URL 在 5 分钟内输出组件化的 Next.js 或 Vite 项目代码

https://ditto.site/

Visit Website

In-depth Report

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 编程工具链来说，这是一个值得加入工具箱的开源利器。

User Reviews

miYOU

—

content.ts extraction design is good, after clone change text and images and it's usable — not a structure where changing one line takes half a day to find.

Harold_Sanders_2023

—

Large images and inline resources default to referencing the original site address; for migration you still need to self-host, note this.

PhilipMendozaX44

—

Yesterday tried a complex marketing page, component split mostly right, but Accessibility had several semantic tags not handled well.

NathanTurner_8848

—

Don't know if the free hosted API has call limits? For large-scale use self-hosting is reliable.

Phillip.Sullivan369

—

Honestly a bit worried about legal risk — point any public URL and get componentized clone code; what if someone points at a competitor's site?

PatrickWilson_77

—

If the clone result could open directly in StackBlitz for editing, better — download ZIP then unzip is extra steps.

Walter.PerryJr

—

Using ditto to learn competitor page structures is good, but absolutely can't take generated code directly live — still need a manual review.

DrSolineHubert_x

—

UI design outstanding, pixel-RPG style unexpectedly fits the website-clone theme, attracted at first glance.

AAllen_100

—

Ran the API several times, docs fairly clear — POST a URL then poll, integration cost low.

Dylan_Rodriguez369

—

Starred on PH launch day, 418-vote featured product well-deserved, indeed solved a very specific pain point.

MrThaísCastro_x

—

Only supports cloning public pages; logged-in backends or SPA dynamic content can't be captured — a known limitation.

Sophia948

—

Chinese media says this tool is dismantling Webflow and Wix moats; I think that's right — site builders going from platform to channel is a big trend.

RWrightIII

—

ion.design team previously did Ruby, that AI product designer also impressive — this ditto feels like their internal tool open-sourced.

Deborah.Russell5

—

Especially useful for teaching — let students clone a real site to see component splits, far more intuitive than teaching components from scratch.

DMyers_Plus47

—

Determinism is truly a hard need — ran twice output identical, using diff to track page changes is very practical.

JohnRogersK921

—

Tried pointing it at my own portfolio site, generated code clean surprisingly, hover states actually preserved, component split reasonable — not a wall-of-divs output.

Philip.MitchellK

—

If a diff view comparing generated code and original site could be added, maintenance could一眼 see ditto's tradeoffs.

Frank.Hall_2023

—

The MCP server point is smart — directly connect to Claude or Cursor as a tool, no file import back and forth.

orangewolf962

—

Self-hosting depends on PostgreSQL and MinIO, deploy threshold slightly higher than a pure Node service, but docs fairly complete.

刘琪

—

From a design studio view, this tool greatly lowers client site-migration starting cost — previously just restoring the design in a quote took a week.

CFisher_2021

—

Made 200+ pages on Webflow, $1500 annual renewal, want to migrate out and self-maintain — ditto is probably the best solution now.

WalterRobertsZ

—

Price is conscientious, MIT open-source plus free hosted API, small team self-hosting completely enough.

Nash214

—

Looked at repo commit history, under a month 90 commits, team iterates fast, incident postmortems written seriously.

TeresaMartin007

—

Team replied clearly, tool is neutral, compliance responsibility on user. But I still feel technically a basic URL whitelist mechanism should be added.

Stake_Base

—

Tried several landing pages, componentization effect much better than imagined, hover and tokens intact — this open-source sincerity is ample.

FridaNascimento

—

Handy in AI-app-building scenarios — after a new user registers, directly clone the old site's code as a starting point, no blank canvas each time.

bigbear717

—

Curious how component boundary inference is done? DOM-structure semantic analysis or a more heuristic method?

Catherine_Thompson_X7

—

Previously used screenshot-to-code tools, each gen result different, changing back and forth truly崩溃. ditto's deterministic route is the attitude tools should have.

AmberMooreK

—

For old marketing sites with messy CSS, how much can it restore? Want to test the extremes.

AbigailLopez

—

Used several similar tools before, either LLM guesses unstable or output flattened HTML unmaintainable — ditto found a balance.