dittu

本地服务

github.com开发工具462 天前更新

代码仓库访问官网

关于 dittu

dittu 是 MCP 服务和命令行工具，可将浏览器渲染的网站转换为可编辑的 Next.js 或 Astro 前端项目。它适用于需要复现网站外观并检查视觉差异的开发者和编码 Agent；不复制后端行为。

主要功能

01捕获桌面和移动端渲染布局
02保留 CSS 并下载页面资源
03导出预览、Next.js 和 Astro 项目
04重放记录的滚动动画
05通过像素比较评估克隆结果

适用场景

01从网站生成前端参考项目
02将多个页面抓取到项目中
03重构后验证视觉变化

MCP 相关

MCP 服务可注册到编码 Agent，并提供网站克隆与克隆验证能力。Agent 可调用 `clone_website` 和 `verify_clone`。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "manish-tamang-dittu": {
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu"
      ]
    }
  }
}

启动命令npx -y @manishtamang/dittu

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@manishtamang/dittu0.2.0stdio

工具

收录的工具列表 · 更新于 3 天前

参数	类型	必填	说明
url	string	是	要克隆的页面，例如 https://example.com
build	boolean	否	同时运行 npm install、构建并为生成的应用评分（速度较慢；默认值为 false）
pages	integer	否	最多抓取 n 个同站点页面（默认值为 1）
outDir	string	否	输出目录（默认值为 ./dittu-out/<host>）
remove	array	否	要移除的 CSS 选择器（Cookie 横幅、聊天组件）
verify	boolean	否	根据原网站为克隆结果评分（默认值为 true）
waitMs	integer	否	页面加载后额外等待的时间，单位为毫秒
styling	enum	否	css 保留原始样式表（默认值）；tailwind 会在渲染结果相同的情况下，将类规则转换为 Tailwind 工具类，其余部分保留为 CSScss \| tailwind
frameworks	array	否	要生成的项目（默认值为 next + astro）

详细介绍

dittu：克隆任意网站

将任意网站转换为可编辑的 Next.js 或 Astro 项目，并逐像素验证。

布局、CSS、字体、图片和滚动动画。不包括后端。一个 CLI、一个 MCP 服务，以及供编码 Agent 使用的技能。

快速开始 · 工作原理 · 基准测试 · 文档

$ dittu clone https://dub.co/home --build

› Capturing https://dub.co/home
  1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/dub.co/preview
✓ Next.js project → dittu-out/dub.co/next
✓ Astro project → dittu-out/dub.co/astro

Visual match (1 − differing pixels / total)
  preview  /home    1440px   99.95%
  next     /home    1440px   99.95%
  astro    /home    1440px   99.95%
  preview  /home     390px   99.89%
  next     /home     390px   99.89%
  astro    /home     390px   99.89%
✓ All checks ≥ 95% (lowest 99.89%)

快速开始

设置你的 Agent

npx @manishtamang/dittu setup

为它找到的每个 Agent 注册 dittu MCP 服务并安装技能：Claude Code、Cursor、Gemini CLI、Codex。先用 npx @manishtamang/dittu doctor 检查你的设备（在 Linux/WSL 上，你可能需要运行 sudo npx playwright install-deps chromium）。

向 Agent 提出需求

将 https://example.com 克隆为 Next.js 项目，并将定价卡片改造成可复用组件。

Agent 会调用 clone_website，读取评分，重构生成的组件，然后调用 verify_clone，证明视觉效果没有变化。

使用终端

npx @manishtamang/dittu                                        # interactive: banner, then pick URL, frameworks, pages…
npx @manishtamang/dittu clone https://example.com -y           # no questions: preview + Next.js + Astro, scored
npx @manishtamang/dittu clone https://example.com -p 5 --build # crawl 5 pages, build and score the apps
npx @manishtamang/dittu verify dittu-out/example.com --targets next
npx @manishtamang/dittu serve dittu-out/example.com

更新 dittu

npx @manishtamang/dittu@latest setup

dittu 的工作原理

大多数克隆工具会截取页面，然后让大模型重新绘制。dittu 会复制浏览器实际渲染的内容，再检查结果：

捕获：Chromium 加载页面并滚动页面，触发延迟加载的内容和滚动显示效果，然后冻结 JS 计时器，让轮播保持静止。再以 390 px 宽度进行第二次渲染，记录 JS 针对视口计算的布局。
序列化实时 DOM，而非服务器 HTML。Next.js/React 网站会以最终标记形式生成，不包含 hydration 脚本或 RSC 负载。嵌套 HTML 解析器会导致结构变化，因此会进行修复，确保 React 能顺利 hydration。
保留原始 CSS 及其层叠顺序，包括仅存在于 CSSOM 中的 CSS-in-JS 规则。媒体查询、悬停状态和关键帧动画都能正常工作。
从同一会话下载所有资源，并重写 URL。
导出为静态预览、Next.js App Router 项目（JSX）和 Astro 项目，并拆分为多个区块组件。
重放动画：录制的滚动显示效果、Framer Motion 的 animate 调用和循环动画会通过一个 2 KB 的运行时再次运行。
验证：以相同方式在桌面端和移动端截取原始网站与克隆页面的屏幕截图，并进行评分。--build 会为构建后的应用评分，而不只是预览页面。

详情请参阅：docs/architecture.md。

可克隆的网站类型

网站类型	支持情况
营销网站、着陆页、作品集、文档	✅ 通常为 99% 以上
Next.js / React / Vue / Svelte / Astro 构建的网站	✅ hydration 后的 DOM
Tailwind、CSS 模块、styled-components、emotion	✅ 保留原始 CSS
滚动显示效果（AOS、Framer Motion、GSAP、IntersectionObserver）	✅ 已录制并可重放
JS 针对不同视口计算布局	✅ 移动端渲染 → 媒体查询覆盖规则
多页面网站	✅ `--pages N`，重写内部链接，共用页眉/页脚组件
Canvas / WebGL 场景	⚠️ 静态图片
轮播、标签页、菜单、表单	⚠️ 仅复制外观，不复制行为
需要登录或受机器人防护的网站	❌

基准测试

网站	技术栈	桌面端	移动端	构建的应用
dub.co/home	Next.js，重度动画	99.95%	99.89%	Next.js + Astro：相同
nextjs.org	Next.js	99.79%	99.99%	99.78–99.79%
ui.shadcn.com	Next.js + Tailwind	100.00%	100.00%	100.00%
astro.build	Astro	100.00%	100.00%
manishtamang.com (3 pages)	Next.js	99.89–99.99%	99.80–100%	相同

方法和限制：docs/fidelity.md。

常见问题

它会复制后端吗？ 不会。数据获取、身份验证、API 和表单处理都不会复制。你会获得前端，可以随时接入自己的逻辑。

为什么生成的 JSX 里满是 {" "}？ HTML 中内联元素之间的空白会改变布局，但在 JSX 中会被去掉。dittu 会明确保留这些空白，确保克隆结果的渲染效果一致。你可以随意重构，并重新运行 verify 进行检查。

为什么使用普通 CSS，而不是 Tailwind 类？ 只有原始样式表才能达到 99%。Tailwind 转换流程已列入路线图，并由 verify 检查。

95% 的分数真实吗？ 这是整个页面的原始像素一致度，包含高度差异，并在桌面端和移动端进行测量。差异图会保存在分数旁边，供你检查。

我可以克隆任何网站吗？ 从技术上来说，大多数情况下可以。法律相关内容请参阅免责声明。

文档

免责声明

dittu 适用于学习、原型设计、设计参考，以及迁移你拥有的网站。克隆网站并不意味着你拥有其品牌、文案、图片或代码的权利。请阅读 DISCLAIMER.md。

贡献

请参阅 CONTRIBUTING.md。在此代码库中工作的 Agent： AGENTS.md。

许可证

MIT

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。