Ditto

Dittoは、公開URLをNext.jsやViteのコンポーネント化コードへ変換するオープンソースのサイトクローンツール。開発者やAIビルダー向けに、再現性が高く保守しやすい出発点を提供します。

Dittoとは何か

Dittoは、公開URLを受け取り、それをバイト安定なコードベースに変換するオープンソースのサイトクローンツールです。この製品は決定論的な再構築を中心に位置づけられており、LLMにレイアウトを推測させるのではなく、元サイトの構造と忠実性を保つ、安定したコンポーネント化されたNext.jsまたはViteの出力を生成することを目指しています。

ホームページでは、DittoはAIアプリビルダー、新しいページを再構築するチーム、そしてフラットな書き出しではなく保守しやすいプロジェクトを求める開発者にとって有用だと説明されています。また、このパイプラインはデザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、セクション、編集可能なコンテンツを実際のプロジェクトファイルへ抽出すると記載されています。

主な機能

決定論的なサイトクローン

公開URLをDittoに指定すると、欠けている部分を推測するのではなく、忠実性を保つことを目的としたバイト安定なコピーを返します。

コンポーネント化されたコード出力

出力は、クリーンでコンポーネント化されたNext.jsまたはViteのコードとして説明されており、1つの大きな生成ファイルではなく、実際のプロジェクト構成になります。

デザインとレイアウトの抽出

サイトでは、Dittoが元ページからデザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、セクションを抽出すると説明しています。

ホスト型REST API

ホスト型APIはシンプルなPOSTとポーリングのワークフローをサポートし、キャプチャ、生成、検証の実行中にジョブイベントを利用できます。

エージェント向けMCPサーバー

エージェントのワークフロー向けにMCPサーバーがドキュメント化されており、ClaudeやCursorなどのツールに接続できる例が示されています。

オープンソースのセルフホスティング

プロジェクトはMITライセンスのオープンソースで、ホームページにはセルフホストのコマンドラインワークフローも表示されています。

Dittoの主な使い方

既存サイトから新規プロジェクトのたたき台を作る
新しいアプリやランディングページの忠実な出発点が必要で、元サイトの視覚構造を実際のコードで保持したい場合にDittoを使います。
保守しやすいコンポーネントとしてサイトを再構築する
公開サイトを再構築またはモダナイズするチームは、コンポーネント化された出力を使って、HTMLを手作業でコピーする代わりにセクション、トークン、再利用可能なUIを分離できます。
エージェントのワークフローでクローン処理を自動化する
エージェントや社内ツールを使うビルダーはMCPサーバーを接続して、アシスタントがより広いビルドループの一部としてクローン処理を開始できるようにできます。
セルフホストしてパイプラインを拡張する
自分のインフラで実行したい開発者は、パイプラインをセルフホストし、コードを確認し、ローカル利用やコントリビューション向けに調整できます。
ローカルインフラの代わりにホスト型APIを使う
管理されたワークフローだけが必要な場合は、ホスト型REST APIを使ってURLを送信し、ジョブを追跡し、クローンツールを自分で動かすことなく生成されたプロジェクトを取得できます。

Pros and Cons

Pros

決定論的な出力が重視されており、LLM生成のサイトクローンに伴う不確実性を減らせるはずです。
コード出力はコンポーネント、セクション、スタイル、編集可能なコンテンツファイルに整理されるため、1つの生成ページよりも保守しやすくなっています。
ワークフローに応じて、セルフホスティング、ホスト型REST API、MCPサーバーのいずれかを選べます。
このプロジェクトはMITライセンスのオープンソースであり、パイプラインの内容を確認・変更できます。
ホスト型APIのドキュメントでは、クローン処理中のイベントストリーミングを含む、具体的なリクエストとジョブの流れが示されています。

Cons

収集された価格ページのURLが404を返すため、提供された証拠では価格やプランの詳細が明確に文書化されていません。
ソースで示されている実装詳細の中心は公開URLとホスト型APIであり、より広いプラットフォーム、認証、またはエンタープライズ導入の制限は明記されていません。
いくつかの統合に関する言及はありますが、証拠にはすべてのワークフローに対応する完全な互換性マトリクスやセットアップガイドは含まれていません。

FAQ

Dittoはどのように使えますか？

Dittoは、オープンソースのセルフホスト型クローラーとして、またはホスト型REST APIを通じて使用できます。サイトには、エージェントのワークフロー向けのMCPサーバーも記載されています。

Dittoは何を出力しますか？

ホームページでは、Dittoは公開URLを受け取り、クリーンでコンポーネント化されたNext.jsまたはViteのコードを生成すると説明されています。LLM駆動ではなく、決定論的であるとされています。

どのフレームワークやスタイリングオプションがサポートされていますか？

サイト上で示されているソースでは、Next.jsとViteが強調されており、再構築された出力にはTailwind v4とCSSが含まれています。ホスト型APIの例でも、Next.jsとTailwindの構成が示されています。

Dittoは無料ですか、有料ですか？

収集された証拠では価格ページのURLが404を返すため、そのページでは料金情報が明確に記載されていません。ホームページではDittoがMITライセンスのオープンソースであること、またAPIキーの仕組みを備えたホスト型APIも提供していることが示されています。

Dittoは誰向けですか？

サイトでは、Dittoは公開URL向けに設計されており、デザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、セクションを抽出できるとしています。緩い見た目の近似ではなく、忠実なコード生成向けに位置づけられています。

Quick Facts

カテゴリ: 開発者向けツール
主な用途: 公開Webサイトをコンポーネント化されたコードにクローンする
出力: Next.jsまたはViteのプロジェクトコード
ライセンス: MIT
利用方法: セルフホストCLI、ホスト型REST API、MCPサーバー
ソースドメイン: ditto.site

Dittoの代替品

ByteAsk

ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。

CreateOS Sandbox

CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。

hob

hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。

Manta AI

Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。

SonOf

SonOfは、リポジトリとPMツールに接続し、コードベースと周辺の製品コンテキストを監査して、承認済みの作業をシニアエンジニアのレビュー付きで公開済みチケットに変えます。

Ghost

Ghostは、チャット、コード生成、コマンドラインでのタスク実行に対応したターミナル向けAIアシスタントです。無料モデルを同梱し、Linux、macOS、Windowsで使えます。オープンソースです。