サイトを開く — ディスク上にNext.jsプロジェクトを生成

不久、私はマーケティング 网站のソースコードが承包業者とともに消えてしまったため、そのインターフェースを復元する必要に迫られました。正確には、クライアントに残されていたのは本番環境のリンクだけでした。以前であれば、一晩かけてレイアウトを手でコピーしていたところですが、今回はそれを1分で行ってくれるプロジェクトを見つけました。そしてLLM経由ではない，这才是出乎我意料的地方。

ditto.siteとは

ditto.site — 公開URLを取得して自己完結型のプロジェクトに変換するオープンソースのTypeScriptコンパイラです。デフォルトではNext.js App Routerを出力し、リクエストに応じてVite Reactもサポート。スタイルはTailwindまたはプレーンCSSで提供されます。

「クローニング」という言葉の意図を明確にしましょう。ここにAPIはありません：サイトのリポジトリやソースコードは不要です。ブラウザからアクセス可能なリンクだけで十分です。ツールはページを開き、ブラウザが実際にレンダリングした内容を記録して、その）から新しいプロジェクトを作成します。

著者は明示的に自分のシステムを「キャプチャ・トゥ・コード・パイプライン」と呼び、コンパイラはページを作成するLLMではないことを強調しています。同じキャプチャされたコピーは常にバイト単位で同一の出力を生成します。ところで、決定論性はここでメインの機能としてマーケティングされており、各実行で異なる神秘的なニューラルネットワーク生成よりもそちらの方が正直です。

このプロジェクトはGitHubで既に1580スターと214フォークを獲得しており、MITライセンスです。プロジェクトは新しいですが、周囲のコミュニティは急速に形成されています。

使い方

3つの方法があります。最もシンプルなのはローカルCLIです：

git clone https://github.com/ion-design/ditto.site.git
cd ditto.site
npm ci
npx playwright install chromium
npm run clone -- https://example.com/ --out=./output

Chromiumをインストールした後、npx ditto clone <url>コマンドでページを開き、状態をキャプチャして、dist/ディレクトリに готовуюアプリケーションを配置します。このディテールが好きでした：--latestフラグなしでは、結果はdist/<timestamp>/に入り、symlink dist/latestは常に最新のクローンを指します。スクリプトは新しいタイムスタンプのために書き直す必要はありません。

怠惰なモードもあります：

npm run clone -- https://example.com/ --serve   # клонирует и сразу поднимает dev-сервер
npm run clone -- https://example.com/ --open    # плюс открывает браузер

2番目の方法はREST APIで、ditto.site/apiにあります。フォームまたはcurlでメール認証を通じてキーを作成し、API_KEY環境変数にエクスポートして、タスクを起動します：

curl -sS -X POST "$DITTO_API_URL/v1/clones" \
  -H "authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "url": "https://example.com/",
    "options": {
      "mode": "single",
      "styling": "tailwind",
      "framework": "next"
    }
  }'

応答には各ファイルのpath、size、SHA-256を含むファイルマップが含まれています。彼らのCLIアンパッカーはディレクトリツリーをディスクに抽出するのを助け、プロジェクト全体を単一アーカイブとしてditto.site/api/v1/tasks/<task_id>/downloadでダウンロードすることもできます。

3番目の方法はMCPサーバーで、正直なところこれが私にとって最も興味深い部分です。ditto.siteは通常のMCPツールとしてエージェントに接続し、サーバーは経済的に設計されています：最初期にはエージェントはタスクIDとメタデータのみを受信し、必要に応じてファイルを読み取ります。clone、wait、read_file、read_componentなどのツールにより、エージェントはクローンを起動し、完了を待ち、pages/または特定のコンポーネントを選択的に読み取ることができます。

生成されるプロジェクトに含まれるもの

出力は単なるレイアウトではありません。READMEによると、アプリケーションには以下が含まれます：

• 復元されたページとルートモジュール；
• キャプチャされたアセット、フォント、アイコン、マニフェスト、メタデータ；
• HTML、CSS、JavaScript、JSON-LD（検出された場合）；
• 認識されたインタラクションとアニメーション用の小さなランタイムヘルパー；
• プロジェクトの引き渡し用の生成されたREADMEとSPEC。

最後の点は別途強調する価値があります。著者は人間またはAIエージェントがコードを引き続き作業することを明確に想定しており、どのファイルが編集可能か（pages/とcomponents/）をすぐに含めています。これはジェネレーターとしては珍しいレベルの配慮です。

内部的な動作

パイプラインは次のようになっています：URL → ブラウザキャプチャ → 正規化された中間レンダリング → 決定論的出力 → アプリケーション生成 → アセット具体化 → オプションのバリデーション。

キャプチャはDOM、計算済みスタイル、レイアウトボックス、ソースCSS、フォント、スクリーンショット、インタラクション状態を記録します。観察可能な再現可能なアニメーションもキャプチャされます。ただし、任意のサードパーティJavaScript、認証、支払い、パーソナライゼーションは再現されません。これは論理的な制限です：ツールはサーバーサイドロジックではなくブラウザで表示されるものに対して動作します。

リポジトリは堅実なアーキテクチャを持っています：コンパイラ、Hono REST APIとMCPサーバーが並んでおり、Drizzleスキーマとマイグレーション、タスクキューワーカー、S3/R2用のアーティファクトストレージ。你はdocker composeでPostgresとMinIOを使用してローカルで全てをスピンアップしたり、データベースなしで1コマンドでインラインモードを実行したりできます。ローカルAPI用のMCPエンドポイントもditto.site/api/mcpにあります。

--validateと--screenshotオプションがあるのが気に入っています：生成されたプロジェクトはバリデーションを通過し、元のものと少なくとも同様にビルドおよびレンダリングされるという確認が得られます。

便利な場面

最初のシナリオは明白です：ソースがない場合のサイトの復元。放棄されたランディングページ、丢失された承包業者ソース、モダンなスタックに移動する必要があるレガシーページ。ツールはここで数分で問題を解決します。

2番目のシナリオはプロトタイピングです。クライアントが「ここみたいにして」と言ってリンクをドロップします。抽象的な議論ではなく、数分でNext.js構造を持つ動作するプロジェクトが手に入り、その後その中で違いについて議論できます。他の人のリファレンスから作業範囲を見積もるフリーランスの人にとって、これは開始をスピードアップします。

3番目のシナリオはMCP経由の自動化です。エージェントに「Next.jsアプリとしてこのサイトをクローンし、完了を待ち、生成されたファイルを読み取る」というタスクを依頼できます。「必要なファイルのみ」形式はエージェントのコンテキストを節約し、作成者はこれを明確に考えていました。

もう一つの面とルール

caveatsがあります。CLIは現在リポジトリ内に存在し、npmに公開されていないため、npm install dittoは動作しません—リポジトリ全体をクローンする必要があります。これは1行でCIに追加できるものではありませんが、作成者は正直にこれについて警告しています。

次に倫理の問題があります。READMEはあなたにツールを使用する権利がある場所でのみコピーして変換するコンテンツに対してツールを使用することを常に思い出させます。フィッシング、ブランドのなりすまし、認証バイパス、他の人のサイトの大量キャプチャは明示的に禁止されており、プロジェクトには別のドキュメントがあります。技術は中立ですが、自分のプロジェクトまたは所有者の許可を得て適用する価値があります。

もう一つ。ロシア語でも英語でも、「クローニング」という言葉は大きく聞こえますが、実際にはページの 表示される部分の 再構築です。ツールがサーバーサイドコード、データベース、ビジネスロジックを引き出すことを期待しないでください—READMEで正直に明記されています。

試してみるべき人

ランディングページの構築、サイトの新しいスタックへの移行、ウェブインターフェースを 操作するためのAIエージェントにクリーンなツールを提供したい場合は、ditto.siteを試してみてください。ローカルCLIから始めることをお勧めします。キーを必要としません：npx ditto clone <url>、数分で復元されたプロジェクトでdevサーバーが実行されます。パイプラインに組み込みたい場合は、REST APIとMCPサーバーがすでに 含ま れています。「ここみたいに作って」という 要求 に 常に対応す必要があるデザイナーやテックリードにとって、ツールは一般的な課題への正直な解決策となり得ます。