Webサイトからコードへのクローン
公開URLを受け取り、ページの単なるスクレイピングではなく、コンポーネント化されたコードとしてクローンしたサイトを生成します。
Ditto
認証するDittoは、公開URLをNext.jsまたはViteのコンポーネント化コードに変換するオープンソースのWebサイトクローンツールです。自己ホスト、API、MCP対応。
概要
Dittoは、決定論的なオープンソースのWebサイトクローンツールです。公開URLを受け取り、クリーンでコンポーネント化されたコードベースへ変換します。ホームページとAPIの例では、出力先としてNext.jsとViteが示されています。
この製品は、白紙の状態ではなく、信頼できる出発点を求めるビルダー向けに位置づけられています。サイトでは、Dittoが忠実度を保ち、デザインシステムやその他のUI詳細を抽出でき、自己ホスト型ツール、ホスト型API、またはMCP接続エージェントワークフローとして使用できると説明されています。
主な機能
フレームワーク向け出力
Next.jsまたはViteプロジェクトとして出力を再構成し、編集して拡張できる実際のコードベースをユーザーに提供します。
決定論的パイプライン
決定論的と説明されており、サイトではLLMベースの推測との違いが明示されています。
UIとレイアウトの抽出
ホームページの説明に従って、デザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、ページセクションを抽出します。
コンポーネント化されたプロジェクト構成
繰り返しのDOMをコンポーネントに分割し、領域をセクションへまとめ、編集可能なセマンティックコンテンツとプロジェクトファイルを出力します。
複数の実行方法
自己ホスト型オープンソース、ホスト型REST API、エージェント向けMCPサーバーという3つのアクセスモードをサポートします。
実用的なユースケース
既存サイトから新規プロジェクトを立ち上げる
開発者は公開サイトのURLをDittoに送信し、Next.jsまたはViteでUIを再構築・拡張するための出発点となるコードベースを取得できます。
クローンパイプラインを自己ホストする
チームは、パイプラインを確認し、ワークフローを社内で完結させたいときに、オープンソースのクローンツールを自分たちのマシンやインフラ上で実行できます。
APIでWebサイトのクローンを自動化する
アプリケーションはホスト型REST APIを呼び出してクローンジョブをキューに入れ、進捗を監視し、ローカルでインフラを構築せずに完了したプロジェクトを取得できます。
エージェントワークフローにクローン機能を追加する
AIエージェントやビルダーループはMCPサーバーに接続し、反復的なワークフローの中で、対象URLをコードに変換するためのツールとしてDittoを使用できます。
生成されたコードベースを確認して調整する
デザイナーやエンジニアは、生成されたコンポーネント、セクション、コンテンツモデル、抽出されたトークンを、さらなる編集のための構造化された土台としてレビューできます。
Pros and Cons
Pros
- オープンソースでMITライセンスのため、コードを確認して自己ホストできます。
- 決定論的アプローチは、クローン処理におけるLLMの推測を避けるものとして位置づけられています。
- ローカルの自己ホスト、ホスト型REST APIアクセス、エージェント向けのMCPサーバー利用という複数のワークフローをサポートします。
- 出力は、コンポーネント、セクション、トークン、プロジェクトファイルを含む構造化された編集可能なものとして説明されています。
- ホームページでは、生成された出力内のNext.js、Vite、Tailwind、TypeScriptの具体例が示されています。
Cons
- 収集された料金ページは404であり、提供された証拠からは料金やプランの詳細を確認できません。
- ソースでは統合やワークフローの詳細が部分的にしか文書化されていないため、収集されたページからは一部のセットアップや出力の制限が見えません。
FAQ
Dittoは何をするものですか？
Dittoは、公開URLを受け取り、コンポーネント化されたコードベースを返すオープンソースのWebサイトクローンツールです。ソースでは、Next.jsまたはViteプロジェクトとして出力でき、自己ホスト型パイプライン、ホスト型REST API、またはMCPサーバー経由で使用できることが示されています。
Dittoはどのように使えますか？
サイトでは、3つの利用方法が示されています。MITライセンスのソースコードを使ってクローンツールを自己ホストする、api.ditto.site のホスト型REST APIにジョブを送信する、またはエージェントワークフロー向けにMCPサーバーへ接続する、という方法です。
どのような出力が生成されますか？
ホームページでは、Dittoはページをクリーンでコンポーネント化されたNext.jsまたはViteコードへ再構成できると説明されています。また、抽出されたデザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、セクションについても言及しています。
Dittoは決定論的ですか？
ホームページでは、Dittoは決定論的であり、ページ構造を推測するためにLLMに依存しないと説明されています。製品ページでは、忠実度を保った出力と、バイト単位で安定したコピーも強調されています。
Dittoの料金はいくらですか？
収集された証拠では /pricing の料金ページが404だったため、提供されたスナップショットには確認済みの料金情報はありません。
Quick Facts
- カテゴリ
- 開発者向けツール
- ソースドメイン
- ditto.site
- ライセンス
- MIT
- 主な出力
- コンポーネント化されたNext.jsまたはViteコード
- アクセス方法
- 自己ホスト、REST API、MCPサーバー
- 主なワークフロー
- 公開URLを指定してクローンされたプロジェクトを生成
Dittoの代替品
EZsite AI
EZsite AIは、URLをフルスタックのReactまたはVue.jsアプリに変換するAIサイトビルダー。ホスティング、独自ドメイン、コード書き出し、バックエンド機能を搭載。
Termo
Termoは、各エージェントが独自の仮想マシンで動作するAIエージェントプラットフォーム。Web閲覧、コード実行、記憶保持、スケジュール実行に対応し、継続的な調査や自動化、軽い開発作業を任せたい個人やチームに最適です。
Orca
Orcaは、コードエージェントでの開発・実装を支援するAgent Development Environment。分離されたworktree上で複数のCLIエージェントを並列実行し、デスクトップとモバイルの連携ワークフローに対応します。
Firebase Studio
Firebase Studioは、Gemini支援のコーディング、アプリプレビュー、クラウドエミュレータを備えたブラウザベースのフルスタック開発用ワークスペースです。既存リポジトリの取り込み、新規アプリの試作、共同作業、ブラウザからのデプロイに対応します。
AI Magicx
AI Magicxは、チャット、画像、動画、音声、音楽、メール、開発タスクを1か所で扱える統合AIワークスペース。複数モデルを使い分ける手間を減らします。
Paper
Paperは、キャンバス、コード、AIエージェントをつなぎ、チームが1つのワークフローで作成・共有・出荷できるデザインツール。デスクトップアプリ、MCP対応のエージェントアクセス、実コンテンツとデザイントークンのワークフローに対応。