mcpField
D
dittu

dittu

ローカル
github.com開発ツール462 日前に更新
リポジトリ公式サイト

dittu について

dittuは、表示されたウェブサイトを編集可能なNext.jsまたはAstroのフロントエンドプロジェクトに変換するMCPサーバー兼CLIです。見た目の再現と差分確認を行う開発者やコーディングエージェント向けで、バックエンドは複製しません。

主な機能

  1. 01デスクトップとモバイルの表示を取得
  2. 02CSSを保持しページ素材をダウンロード
  3. 03プレビュー、Next.js、Astroを出力
  4. 04記録したスクロールアニメーションを再生
  5. 05ピクセル比較で複製結果を採点

活用シーン

  1. 01ウェブサイトからフロントエンドの参照を作成
  2. 02複数ページをプロジェクトに取り込む
  3. 03リファクタリング後の見た目を検証

MCP 対応

MCPサーバーはコーディングエージェントに登録でき、サイトの複製と検証を提供します。エージェントは `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.0

ツール

3

掲載時のツール一覧 · 3 日前に更新

パラメーター型必須説明
urlstringはい複製するページ。例： https://example.com
buildbooleanいいえ生成されたアプリに対して npm install とビルドを実行し、スコアも算出します（時間がかかります。既定値は false）
pagesintegerいいえ同一サイト内のページを最大 n 件クロールします（既定値は 1）
outDirstringいいえ出力ディレクトリ（既定値は ./dittu-out/<host>）
removearrayいいえ削除する CSS セレクター（Cookie バナー、チャットウィジェット）
verifybooleanいいえ元のサイトと比較して複製のスコアを算出します（既定値は true）
waitMsintegerいいえ読み込み後の追加待機時間（ミリ秒）
stylingenumいいえcss は元のスタイルシートを保持します（既定値）。tailwind は、同じ表示になる場合にクラスルールを Tailwind ユーティリティに変換し、それ以外は CSS のまま保持しますcss | tailwind
frameworksarrayいいえ生成するプロジェクト（既定値は next + astro）

詳細

dittu：あらゆるウェブサイトをクローン

あらゆるウェブサイトを、ピクセル単位で検証済みの編集可能な Next.js または Astro プロジェクトに変換します。

レイアウト、CSS、フォント、画像、スクロールアニメーションに対応します。バックエンドは対象外です。 1 つの CLI、1 つの MCP サーバー、そしてコーディングエージェント向けのスキルを提供します。

クイックスタート · 仕組み · ベンチマーク · ドキュメント

$ 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%)

クイックスタート

エージェントをセットアップする
npx @manishtamang/dittu setup

dittu MCP サーバーを登録し、見つかったすべてのエージェントにスキルをインストールします：Claude Code、Cursor、Gemini CLI、Codex。まず npx @manishtamang/dittu doctor でお使いのマシンを確認してください（Linux/WSL では sudo npx playwright install-deps chromium が必要な場合があります）。

エージェントに依頼する

https://example.com を Next.js にクローンして、料金カードを再利用可能なコンポーネントにしてください。

エージェントは 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 の仕組み

多くのクローンツールはページのスクリーンショットを撮り、LLM に描き直させます。dittu はブラウザーで実際にレンダリングされたものをコピーし、その結果を確認します：

  1. キャプチャ：Chromium でページを読み込み、遅延読み込みコンテンツやスクロール表示が発生するようにスクロールした後、JavaScript のタイマーを停止してカルーセルを静止させます。さらに 390 px で再レンダリングし、ビューポートごとに JavaScript が計算するレイアウトを記録します。
  2. サーバーの HTML ではなく、ライブ DOM をシリアライズします。Next.js/React のサイトは、ハイドレーションスクリプトや RSC ペイロードを含まない最終マークアップとして出力されます。HTML パーサーによる入れ子構造の変更は修復されるため、React のハイドレーションは正常に行われます。
  3. 元の CSS をカスケード順で保持します。CSSOM にしか存在しない CSS-in-JS ルールも含まれます。メディアクエリー、ホバー状態、キーフレームも引き続き動作します。
  4. 同じセッションからすべてのアセットをダウンロードし、URL を書き換えます。
  5. エクスポート：静的プレビュー、Next.js App Router プロジェクト（JSX）、セクションコンポーネントに分割された Astro プロジェクトを出力します。
  6. モーションを再生：記録されたスクロール表示、Framer Motion の animate 呼び出し、ループを 2 KB のランタイムで再び実行します。
  7. 検証：デスクトップとモバイルで同じ方法で元のサイトとクローンのスクリーンショットを撮り、スコアを算出します。--build はプレビューだけでなく、ビルド済みアプリのスコアを算出します。

詳細：docs/architecture.md。

クローンできるサイト

サイトの種類対応状況
マーケティングサイト、ランディングページ、ポートフォリオ、ドキュメント✅ 一般的なサイトで 99% 以上
Next.js / React / Vue / Svelte / Astro のビルド✅ ハイドレーション後の DOM
Tailwind、CSS modules、styled-components、emotion✅ 元の CSS を保持
スクロール表示（AOS、Framer Motion、GSAP、IntersectionObserver）✅ 記録して再生
ビューポートごとにレイアウトを計算する JavaScript✅ モバイルレンダリング → メディアクエリーのオーバーライド
複数ページのサイト✅ --pages N、内部リンクの再設定、共通のヘッダー／フッターコンポーネント
Canvas / WebGL シーン⚠️ 静止画像
カルーセル、タブ、メニュー、フォーム⚠️ 見た目はコピーされますが、動作はコピーされません
ログインやボット対策の背後にあるページ❌

ベンチマーク

サイトスタックデスクトップモバイル構築したアプリ
dub.co/homeNext.js、アニメーション多用99.95%99.89%Next.js + Astro：同等
nextjs.orgNext.js99.79%99.99%99.78–99.79%
ui.shadcn.comNext.js + Tailwind100.00%100.00%100.00%
astro.buildAstro100.00%100.00%
manishtamang.com（3 ページ）Next.js99.89–99.99%99.80–100%同等

方法と制限事項：docs/fidelity.md。

よくある質問

バックエンドもコピーされますか？ いいえ。データ取得、認証、API、フォーム処理はコピーされません。独自のロジックに接続できる状態のフロントエンドが得られます。

生成された JSX に {" "} が大量に含まれているのはなぜですか？ インライン要素間の空白は HTML ではレイアウトに影響しますが、JSX では削除されます。クローンを同じようにレンダリングできるよう、dittu は空白を明示的に保持します。自由にリファクタリングし、verify を再実行して確認してください。

なぜ Tailwind クラスではなく、プレーンな CSS を使うのですか？ 99% の精度を実現するには、元のスタイルシートを使うしかありません。Tailwind への変換処理はロードマップにあり、verify でチェックできます。

95% というスコアは正確ですか？ ページ全体について、高さの違いも含めたピクセル単位の一致率で、デスクトップとモバイルの両方で測定しています。差分画像はスコアの隣に保存されるため、確認できます。

どんなサイトでもクローンできますか？ 技術的には、ほとんどの場合可能です。法的な事項については、免責事項をご覧ください。

ドキュメント

免責事項

dittu は、学習、プロトタイピング、デザインの参考、自分が所有するサイトの移行を目的としています。サイトをクローンしても、そのブランド、文章、画像、コードの権利を得られるわけではありません。DISCLAIMER.md をお読みください。

貢献

CONTRIBUTING.md をご覧ください。このリポジトリで作業するエージェントについては、AGENTS.md をご覧ください。

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。