コマンド一発でサイトを丸ごとコピー

GitHubで公開されたオープンソースのテンプレート「ai-website-cloner-template」は、複製したいサイトのURLをコマンドに渡すだけで、AIコーディングエージェントがそのサイトの構造・レイアウト・デザインを解析し、再現コードを生成するという仕組みです。スター数はすでに19,000超を記録しており、公開直後から注目を集めています。

注目したいのは、このアプローチの「発想の方向」です。ゼロから設計するのではなく、「参照元を渡して再現させる」という逆算型のやり方を取っています。エージェントが自律的にページを読み取り、構成要素を分解してコードに落とし込む流れで、開発者が最初から手を動かす場面はほぼありません。

TypeScriptで実装されており、内部ではAIコーディングエージェントを活用しています。ドキュメントを読む限り、技術的なカスタマイズ余地もあるため、出力の精度をチューニングしたい人には拡張の幅が残されている設計です。

実用面で使い道が明確なのは、大きく2つのシナリオです。

ひとつは「LPのたたき台を素早く用意したいとき」。デザインの方向性を議論する前に、参照にしたい既存サイトの構成をそのまま再現してベースにするやり方です。「このサービスのLPっぽい感じで」という会話より、実際のコードとして渡せる方が次の作業に入りやすくなります。

もうひとつは「競合サイトの構成を分解して学びたいとき」。セクションの並び、CTAの位置、情報の優先順位といった設計判断が、コードとして可視化されます。デザインをコピーすることが目的ではなく、「なぜこの構成になっているのか」を読み解く材料として使う、という発想です。

使う側として知っておくべきは、出力はあくまで出発点であるという点です。著作権の観点からも、生成されたコードをそのまま公開するのではなく、構成の参照・学習用途や社内のプロトタイプとして扱うのが現実的な使い方になります。ツールの性質上、何を複製対象に選ぶかによって用途の適切さが変わるため、使う目的を最初に明確にしておくことが重要です。

カテゴリがdev（バイブコーディング）であるため、技術ハードルについても整理しておきます。

コードが書けなくても試せる部分は、基本的な複製フローそのものです。Node.js環境があれば、READMEに従ってリポジトリをクローンし、コマンドにURLを渡すところまでは手順通りに進められます。出力されたHTMLやコンポーネント構造を眺めて「このサイトはこう作られているのか」と読み解く使い方も、コーディングスキルがなくても成立します。

コードが書けると広がるのは、エージェントへの指示の精度を上げる部分です。どの要素をどの粒度で再現させるか、出力形式をどう変えるか、特定のフレームワーク（ReactやVueなど）向けに調整するか、といったチューニングはコード理解があると有利です。また、先日のASADASHIで触れたAWSのAIエージェント向けツールキットのような外部エージェントと組み合わせる応用も、ある程度の技術理解が前提になります。