ditto.site
ion-design · コーディング
ditto.siteは、MITライセンスのオープンソースのウェブサイトクローンで、公開URLを動作するコンポーネント化されたNext.jsまたはVite Reactプロジェクトに変える。言語モデルにマークアップを推測させるのではなく、ブラウザが実際にレンダリングした内容を取得し、決定論的なコードベースを出力する。所要時間は通常5分ほどだ。パイプライン全体を自分でホストすることも、ホスト版REST APIを呼ぶことも、MCPサーバー経由でエージェントに組み込むこともでき、どの場合も費用はかからない。文句のつけようがない。
ditto.site について
ditto.siteとは
ditto.siteは、空白のキャンバスではなく実際に保守できる出発点を求める開発者向けの、URLからコードへのツール兼Next.jsコード生成ツールである。公開中のページを指定すると、レンダリング結果から新しいプロジェクトを書き出すので、元のソースコードも既存リポジトリも要らない。出力は巨大な単一ファイルではない。繰り返し現れるDOMをコンポーネントに分割し、きれいな領域をセクションとして切り出し、型とトークンが付いたコードを渡してくれるので、そのまま作業を続けられる。
中心にある考え方は決定論だ。多くのAIウェブサイトクローンはページをLLMに送って、それらしい結果になることを期待する。ditto.siteは代わりにキャプチャからコードへのパイプラインを走らせるので、同じ凍結済みキャプチャからは常にバイト単位で安定したアプリが生まれる。推測はない。プロジェクトによれば、ページの背後にあるデザインシステムも抽出する。トークン、フォント、インタラクション、モーション、ブレークポイント、セクションまで含む。
主な限界は範囲だ。権利のある公開URLをクローンするもので、本質的に開発者向けツールなので、npmコマンドの実行、APIキーの管理、JSONファイルマップの展開に慣れている必要がある。誰にでも向くものではない。ビジュアルエディタとホスティングを備えた完成品を求めるなら、これはそうではない。
はじめ方
- ditto.siteのサイトでメールアドレスを使ってホスト版APIキーを申請するか、リポジトリをクローンして自分のマシンでパイプラインを動かす。
- メールを確認し、一度だけ使える
dtto_live_...キーをコピーして、DITTO_API_KEYのような環境変数に保存する。 - REST APIのエンドポイントに公開URLをPOSTする。好みのオプション、たとえばframeworkの
nextやstylingのtailwindを指定する。 - ジョブが成功するまでポーリングし、返ってきたファイルマップを公式ツールでプロジェクトディレクトリに展開する。
- 新しいプロジェクト内でいつものインストールと開発のコマンドを実行し、その上に作り始める。
AIツール情報
ditto.siteの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：レイアウトを一から手作業で組み直すのではなく、実際のNext.jsやVite Reactの出発点が必要なときに向く。
- AIアプリ開発者：最初の一手として設計されたツールなので、新しいプロジェクトごとに空白画面ではなく忠実なコード基盤を渡せる。
- 既存サイトを評価するチーム：自分が所有する、または再利用を許可されたページの構造を、保守できるコンポーネントとして表したいときに役立つ。
タスク
- ランディングページをNext.jsコードに変える：デザイントークンとレスポンシブレイアウトが揃った、コンポーネント化された出力が得られる。
- 参考デザインからプロトタイプを作る：気に入ったページをキャプチャし、手作業で再現するのではなく生成されたプロジェクトを編集する。
- 社内のエージェントワークフローを組む：MCPサーバーをClaude、Cursor、または自前のビルドループに接続し、エージェントが必要に応じてクローンできるようにする。
シーン
- 新しいクライアント案件を始める：退屈な骨組みの段階を飛ばし、実際のサイトを写したコードから始める。
- 古い公開ページを作り直す：リファクタリングの前に構造とデザインシステムを抽出する。
- デザインをコンポーネントライブラリへ移す：公開中のページからトークン、フォント、セクションを一度に引き出す。
主な機能
決定論的なキャプチャからコードへのパイプライン
ditto.siteはページにLLMを向けて運任せにはしない。ブラウザがレンダリングした内容を取得し、その凍結済みキャプチャをプロジェクトへコンパイルするので、同じ入力からは毎回バイト単位で安定した出力が得られる。同じ入力、同じ出力。この一貫性は、結果の上に作り込むときや、変更後に再生成するときに効いてくる。
コンポーネント化されたNext.jsとViteの出力
ツールは繰り返し現れるDOMをコンポーネントに分割し、きれいな領域をセクションとして切り出し、単一の一枚岩のファイルではなく本物のプロジェクトを出力する。巨大ファイルを解きほぐす必要はない。既定ではNext.js App Routerを指定でき、自分のスタックに合うならVite Reactも選べる。結果は型とトークンが付いているので、普段のワークフローにそのまま収まる。
3通りの動かし方
自分が作るやり方に合う入口を選べる。リポジトリをクローンしてMITライセンスのもとでパイプライン全体をセルフホストする、公開URLをホスト版REST APIにPOSTしてインフラを省く、MCPサーバーを接続してどのエージェントでもクローンをツールとして使えるようにする。どれも土台は同じ決定論的エンジンだ。どれが合うかは自分の環境次第である。
デザインシステムの抽出
マークアップだけでなく、ditto.siteはページからデザインシステムを引き出す。デザイントークン、ウェブフォント、ホバーとフォーカスの状態、ドロップダウン、アコーディオン、宣言的なモーションだ。さらにブレークポイントとセクション、SEOメタデータ、JSON-LD、サイトマップも取得する。これにより、静的スナップショットではなく、スタイリングに使える編集可能な素材が手に入る。
エージェントとAPIの統合
api.ditto.siteのホスト版エンドポイントはRESTでクローンジョブを処理し、アプリの相対パスをキーにしたファイルマップを返す。api.ditto.site/mcpのMCPサーバーを使えば、Claude、Cursor、自作のビルドループにクローンをツールとして直接渡せる。環境を自動化するチームにとって、クローンをパイプラインに組み込む最短の道だ。
MITでのオープンソース
プロジェクト全体がMITライセンスで、オープンに開発されているので、すべての行を読み、PRを送り、進化の方向を形作れる。セルフホストならキャプチャと生成コードは自分のマシンに残るので、データの扱いに厳しいチームにも合う。ペイウォールもない。中核エンジンを隠す有料プランは存在しない。
メリットとデメリット
メリット
- MITライセンスで無料かつオープンソース。主要機能を閉じ込める有料プランがない。
- 決定論的な出力により、同じキャプチャから安定して再現できるコードが得られる。
- ページを1つの手に負えないファイルではなく、コンポーネントとセクションに分割する。
- 入口が柔軟。セルフホスト、REST API、エージェント向けMCPサーバー。
- 実際に編集できるデザイントークン、フォント、モーション、ブレークポイントを抽出する。
デメリット
- 開発者向けなので、npm、APIキー、JSON出力の展開に慣れている必要がある。
- 扱えるのは公開URLのみで、特定のサイトをクローンする権利があるのは自分の責任だ。
- ビジュアルエディタも組み込みホスティングもないので、非開発者にとって完全なサイトビルダーの代わりにはならない。
よくある質問
公開URLを自己完結型のNext.jsまたはVite Reactプロジェクトに変える。ブラウザがレンダリングした内容を取得し、トークン付きでコンポーネント化されたコードにコンパイルして、その上に作れるようにする。
関連コンテンツ
ditto.siteに関連するツール、スキル、記事を探す。
ditto.siteの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。