Ditto.site 不是截图生成器，它把一个公开 URL 交给浏览器捕获，再编译成可继续修改的 Next.js 或 Vite 项目。官方定位是「确定性」网站克隆器，目标是让同一个输入得到稳定、可复查的代码结果；首页还列出了组件、设计 token、字体、响应式布局和部分交互状态的提取能力。1
它在 Product Hunt 标记为 2026 年 7 月 21 日发布。2 这次我更关心它能不能省掉前端重搭的第一轮时间，而不是「像不像」的截图比赛。
先这样试
- 先用自己的公开落地页，或者
example.com。不要一开始就拿登录、支付、个性化页面测试。 - 本地运行
git clone、npm ci，再安装 Playwright Chromium。 - 先跑单页 Next.js：
npm run clone -- https://example.com/ --out=./output。需要时再切 Vite、CSS 或 multi 模式。官方 README 给出了完整命令和参数。3 - 对照
output/app里的页面、资源、字体和响应式表现，再去改content.ts、组件和 section。数据与交互逻辑最后补，别把第一轮生成结果直接推生产。
它和同类工具怎么分
- 你手里有网址，想保留网页结构并落成真代码：先看 Ditto。
- 你只有截图、Figma 或录屏：
screenshot-to-code更对口，但它的本地路线需要接至少一个模型供应商 key。4 - 你要从自然语言继续迭代成完整应用：v0 的工作流更贴近这个目标；它的免费层含每月 5 美元 credits、每天 7 条消息，Plus 是 30 美元/用户/月。5
价格和边界
Ditto 首页写明自托管免费、MIT 许可；Hosted REST API 和 MCP 也有免费 key。16 但公开页面没有列出按次价格或配额表，接入 Agent 前先用小页面压测。API key 放进环境变量，不要粘进聊天或提交到仓库。官方 README 还明确说：认证、支付、个性化和任意第三方 JavaScript 不会被原样复现；使用目标网站前也要确认自己有权检查、复制和运营相关内容。3
结论：值得试，但只从可控页面开始。 它最适合省掉「从零搭第一版前端」的时间，不适合替你复制一个完整产品。先克隆一页，再核对字体、资源、许可和响应式，最后才决定要不要接 API / MCP。
コメント
ログインするとコメントできます。