# Ditto Dittoは、公開URLをコンポーネント化されたNext.jsまたはViteコードに変換するオープンソースのWebサイトクローンツールです。決定論的で編集可能な出発点を提供し、セルフホスト、ホステッドAPI、MCPで利用できます。 - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AIウェブサイトビルダー ## Dittoとは？ Dittoは、決定論的なオープンソースのWebサイトクローンツールです。公開URLを受け取り、クリーンでコンポーネント化されたコードベースへ変換します。ホームページとAPIの例では、出力先としてNext.jsとViteが示されています。 この製品は、白紙の状態ではなく、信頼できる出発点を求めるビルダー向けに位置づけられています。サイトでは、Dittoが忠実度を保ち、デザインシステムやその他のUI詳細を抽出でき、自己ホスト型ツール、ホスト型API、またはMCP接続エージェントワークフローとして使用できると説明されています。 ## Dittoでできること ### Webサイトからコードへのクローン 公開URLを受け取り、ページの単なるスクレイピングではなく、コンポーネント化されたコードとしてクローンしたサイトを生成します。 ### フレームワーク向け出力 Next.jsまたはViteプロジェクトとして出力を再構成し、編集して拡張できる実際のコードベースをユーザーに提供します。 ### 決定論的パイプライン 決定論的と説明されており、サイトではLLMベースの推測との違いが明示されています。 ### UIとレイアウトの抽出 ホームページの説明に従って、デザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、ページセクションを抽出します。 ### コンポーネント化されたプロジェクト構成 繰り返しのDOMをコンポーネントに分割し、領域をセクションへまとめ、編集可能なセマンティックコンテンツとプロジェクトファイルを出力します。 ### 複数の実行方法 自己ホスト型オープンソース、ホスト型REST API、エージェント向けMCPサーバーという3つのアクセスモードをサポートします。 ## 利用シーン ### 既存サイトから新規プロジェクトを立ち上げる 開発者は公開サイトのURLをDittoに送信し、Next.jsまたはViteでUIを再構築・拡張するための出発点となるコードベースを取得できます。 ### クローンパイプラインを自己ホストする チームは、パイプラインを確認し、ワークフローを社内で完結させたいときに、オープンソースのクローンツールを自分たちのマシンやインフラ上で実行できます。 ### APIでWebサイトのクローンを自動化する アプリケーションはホスト型REST APIを呼び出してクローンジョブをキューに入れ、進捗を監視し、ローカルでインフラを構築せずに完了したプロジェクトを取得できます。 ### エージェントワークフローにクローン機能を追加する AIエージェントやビルダーループはMCPサーバーに接続し、反復的なワークフローの中で、対象URLをコードに変換するためのツールとしてDittoを使用できます。 ### 生成されたコードベースを確認して調整する デザイナーやエンジニアは、生成されたコンポーネント、セクション、コンテンツモデル、抽出されたトークンを、さらなる編集のための構造化された土台としてレビューできます。 ## よくある質問 ### 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だったため、提供されたスナップショットには確認済みの料金情報はありません。 ## クイック情報 - **カテゴリ**: 開発者向けツール - **ソースドメイン**: ditto.site - **ライセンス**: MIT - **主な出力**: コンポーネント化されたNext.jsまたはViteコード - **アクセス方法**: 自己ホスト、REST API、MCPサーバー - **主なワークフロー**: 公開URLを指定してクローンされたプロジェクトを生成