ditto.site
ditto.siteは、オープンソースのMITライセンスの決定論的ウェブサイトクローナーであり、LLMの推測に頼ることなく、任意の公開URLをクリーンでコンポーネント化されたNext.jsまたはViteコードに変換します。通常、約5分で完了します。
https://ditto.site/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年07月23日
ditto.siteとは
ditto.siteは、ターゲットページがブラウザでレンダリングする内容から自己完結型のTypeScript Webアプリを生成する決定論的な「ウェブサイトからコードへ」ツールです。サイトのソースリポジトリへのアクセスを必要とせず、公開URLを提供すると、dittoは構造化されたコンポーネントとスタイリング（例：Tailwind）を備えた保守可能なプロジェクト（Next.jsまたはVite）を出力します。このプロジェクトはオープンソース（MIT）であり、セルフホスティング、ホスト型REST API、またはエージェントワークフロー用に設計されたMCPサーバーを介して使用できます。ditto.siteは一貫性のある安定した出力を重視しており、ターゲットコンテンツを検査、コピー、変換、操作する権利がある場合にのみ使用することを意図しています。
ditto.siteの主な機能
ditto.siteは、オープンソースのMITライセンスで提供される決定論的なウェブサイトクローナーです。公開URLを、自己完結型で保守可能なTypeScriptウェブアプリ（Next.jsまたはVite）に数分で変換します。LLMベースの推測に頼るのではなく、ページがブラウザでレンダリングするものをキャプチャする安定したパイプラインを実行し、抽出されたデザインシステム（トークン、フォント、ブレークポイント）、インタラクション（ホバー/フォーカス、ドロップダウン、アコーディオン、モーション）、および本番環境に対応したSEOアーティファクト（メタデータ、JSON-LD、サイトマップ）を含むクリーンでコンポーネント化されたコードを生成します。自己ホスト型のオープンソースツール、ホスト型REST API、またはエージェントワークフロー用のMCPサーバーを介して使用できます。
決定論的クローニングパイプライン: 非決定論的なLLM解釈に依存することなく、高速で安定した再現可能な出力（キャプチャ → 生成 → 検証）を生成します。
URLからアプリコードへの生成: 公開ウェブページを、ブラウザでページがレンダリングする内容に基づいて、新しい自己完結型のTypeScriptプロジェクトに変換します。元のソースリポジトリは不要です。
フレームワーク出力: Next.jsまたはVite: スタックとデプロイのニーズに応じてNext.jsまたはViteを選択し、実行および拡張できる実際のアプリケーションスキャフォールドを出力します。
保守可能でコンポーネント化されたコード: 繰り返されるDOMをコンポーネントに分割し、領域をセクションに持ち上げ、編集可能なコンテンツモデルを抽出することで、「1つの巨大なファイル」を回避します。
デザインシステム抽出: トークン、フォント、ブレークポイント、レイアウト構造、モーション/インタラクションを抽出し、スタイリングを編集可能に保ちながら、ルックアンドフィールを維持します。
複数の統合パス（OSS、API、MCP）: ローカルで実行/自己ホスト（MIT）、ホスト型REST APIを呼び出してジョブをキュー/ポーリングし結果をダウンロード、またはMCPサーバーを介してクローニングをエージェントへのツールとして公開します。
ditto.siteのユースケース
代理店またはスタジオの再構築/移行: 既存のマーケティングサイトをクリーンなNext.js/Viteコードに再作成し、再設計、パフォーマンス作業、またはCMS統合の出発点とします。
競合/市場調査プロトタイピング: 公開されているページ（検査/変換する権利がある場合）の忠実で編集可能なレプリカを生成し、レイアウトパターン、IA、デザインシステムを研究します。
AIアプリビルダーのオンボーディングテンプレート: 新しい顧客に、現在のサイトに一致する実際のコードベースラインを提供し、白紙の状態の問題を保守可能な開始プロジェクトに置き換えます。
「レンダリングされた真実」からのエンジニアリングハンドオフ: 元のソースが利用できない場合、レンダリングされたページから動作するコードベースを生成し、内部ドキュメント、リファクタリング、またはモダナイゼーションを加速します。
エージェント支援サイト生成ワークフロー: MCPを介してdittoをClaude/Cursor/カスタムエージェントに接続し、自動ビルドループが実際のプロジェクトをクローン、変更、反復できるようにします。
SEO対応サイトレプリケーションベースライン: 生成されたメタデータ、JSON-LD、およびサイトマップを、さらなる最適化の前にSEOを維持する再構築の基盤として使用します。
メリット
再現可能なワークフローと自動化に適した、決定論的で一貫性のある出力。
フラットなHTMLダンプではなく、保守可能でコンポーネント化されたNext.js/Vite TypeScriptプロジェクトを生成します。
柔軟な使用法: オープンソースの自己ホスト、ホスト型REST API、またはエージェントツール用のMCP。
デザインシステムトークン、インタラクション、SEOアーティファクトを抽出し、忠実度を維持し、反復を加速します。
デメリット
ターゲットコンテンツを検査/コピー/変換する権利がある場合にのみ適切です。誤用は法的/倫理的な問題を引き起こす可能性があります。
出力の忠実度は、レンダリングされたページからキャプチャできるものに限定されます。複雑なアプリロジック/バックエンドは本質的に再構築されません。
動的コンテンツ、認証フロー、またはサイト固有の統合には、手動でのクリーンアップまたは適応が必要になる場合があります。
ditto.siteの使い方
1) Dittoの使用方法を選択してください: Dittoは、同じ決定論的エンジンを使用する3つのエントリーポイントを提供します。(a) オープンソースのセルフホスト（パイプライン全体をローカルで実行）、(b) ホスト型REST API（URLをPOSTし、ジョブステータスをポーリングしてから出力をダウンロード）、または (c) MCPサーバー（DittoをClaude/Cursorなどのエージェントに接続）。
2) ホスト型REST APIを介してDittoを使用する（最短経路）: https://www.ditto.site/api-key にアクセスしてAPIキーを取得します。ホストされたエンドポイントを使用して公開URLを送信し、ジョブが完了するまでポーリングし、最後に生成されたプロジェクト（デフォルトではNext.js App Router、要求された場合はVite React）をプルします。
3) MCPを介してDittoを使用する（エージェントワークフロー用）: APIキーを取得し、MCP URLとBearerトークンを使用して、Dittoをエージェント/クライアント構成のMCPサーバーとして追加します。設定例：{ "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Dittoをセルフホストする（パイプラインをローカルで実行）: オープンソースリポジトリをクローンし、依存関係をインストールします：`gh repo clone ion-design/ditto.site` の後、`cd ditto.site && npm install`。
5) URLに対してローカルクローンジョブを実行する: リポジトリからクローンコマンドを実行し、ターゲットURLを渡します：`npm run clone -- https://example.com`（クローンする権限のあるサイトに置き換えてください）。
6) Dittoのクローン出力をディスク上のプロジェクトに変換する（展開）: チェックアウトしたリポジトリから公式のアンパッカーを使用します：`npm run unpack -- <clone.json|-> <out-dir>`。これにより、テキストファイルが書き込まれ、バイナリアセット（インラインbase64または$DITTO_API_URL / $DITTO_API_KEYを介してフェッチ）が具体化されます。
7) 生成されたアプリを開いてビルドする: エディタで出力ディレクトリを開きます。Dittoは、抽出されたトークン/デザインシステム、フォント、インタラクション、モーション、ブレークポイント、セクションを含む、コンポーネント化されたコード（単一の巨大なファイルではない）を持つ実際のTypeScriptプロジェクトを出力します。
8) Dittoが何をキャプチャするか（そして何を見逃す可能性があるか）を知る: Dittoは、スナップショット時にブラウザが実際にレンダリングしたものをキャプチャします。後でロードされるコンテンツ（無限スクロール、遅延ロードされた画像、またはインタラクションによってトリガーされるコンテンツ）は含まれない場合があります。クローンする前に、目的のコンテンツが表示されていることを確認してください。
9) 使用法と権利のベストプラクティスに従う: Dittoは、学習、プロトタイピング、および許可されたユースケースを目的としています。著作権、利用規約、およびIPを尊重し、任意のページからコードをクローンして使用する権利があることを確認する責任があります。
ditto.siteのよくある質問
ditto.siteは、公開されているURLを、ブラウザでページがレンダリングするものに基づいて、クリーンでコンポーネント化されたコードベース（Next.jsまたはVite）に変換するオープンソースの決定論的なウェブサイトクローナーです。
ditto.siteに類似した最新のAIツール
GPT Easy Web
GPT Easy Webは、ユーザーがコーディング知識を必要とせずに自然言語の対話と自動化ツールを通じて、簡単にウェブサイトを構築、カスタマイズ、管理できるユーザーフレンドリーなAI駆動のプラットフォームです
AI Website Tool
AIウェブサイトツールは、わずか数回のクリックでビジネスに焦点を当てたコピー、カスタムビジュアル、レスポンシブデザインを自動的に生成することにより、数分でプロフェッショナルなウェブサイトを作成するAI駆動のウェブサイトビルダーです。
Softgen
Softgen.aiは、ユーザーがコーディング要件なしでアイデアを機能的なウェブアプリケーションに変換できるAI駆動のフルスタックプロジェクトジェネレータープラットフォームです
Webifier
Webifierは、NextJS14、TailwindCSS、Shadcnコンポーネントを使用して、テキストプロンプトを完全に機能するReactランディングページに変換するAI駆動のツールです。クリーンでエクスポート可能なコードを生成します
ditto.siteに似た人気のAIツール
Adobe Express
Adobe Expressは、プロフェッショナルデザインのテンプレートとアセットを使用して、驚くべきソーシャル投稿、画像、動画、フライヤーなどを簡単に作成するためのオールインワンのAI駆動のコンテンツ作成アプリです。
Hostinger
Hostinger is a web hosting and domain service provider offering AI-powered tools like Horizons that enables anyone to build, edit, and publish custom web apps and websites without coding through a simple chat interface.
GPT Engineer
GPTエンジニアは、誰でもAIエンジニアとチャットすることでウェブアプリケーションを構築できるAI駆動のソフトウェア開発ツールです。
Manus Shopify Connector
Manus Shopifyコネクタを使用すると、Shopify APIとOAuthスコープアクセス、Shopifyチェックアウトを使用して、Shopifyをバックエンドとするストアフロントを構築し、カタログを管理し、データ駆動型キャンペーンを単一のチャットから生成できます。