Claude CodeでWebサイトを丸ごとクローン — AI Website Cloner Templateが話題に

URLを渡して /clone-website と打つだけで、既存Webサイトをピクセルパーフェクトに再現する Claude Code スキルテンプレート 「AI Website Cloner Template」 が公開され、X上で大きな反響を呼んでいる。

何が起きたのか

開発者の JCodesMore 氏が GitHub にて ai-website-cloner-template をMITライセンスで公開した。Linus Ekenstam 氏（@LinusEkenstam）がXで紹介したポストは 13.8万インプレッション・1,650ブックマーク を超え、日本語圏でも Tom 氏（@0x__tom）の解説ポストが 7.6万インプレッション・770ブックマーク と急速に拡散している。

技術的な仕組み

このスキルは5段階のパイプラインで動作する：

1. 偵察（Reconnaissance） — Chrome MCP経由でサイトをスクリーンショット撮影し、デザイントークンを抽出。スクロール・クリック・ホバー・レスポンシブの各インタラクションも記録する
2. 基盤構築（Foundation） — フォント、カラー、グローバルスタイルを更新し、全アセットをダウンロード
3. コンポーネント仕様書作成 — getComputedStyle() の正確な値、インタラクションモデル、レスポンシブブレークポイントを含む詳細な仕様ファイルを生成
4. 並列ビルド — git worktree でセクションごとに隔離されたビルダーエージェントを並列実行
5. 組み立て＆QA — worktreeをマージし、オリジナルとのビジュアル差分を実行

スタックは Next.js 16（App Router / React 19 / TypeScript strict）、shadcn/ui、Tailwind CSS v4。各ビルダーエージェントはコンポーネント仕様をインラインで受け取るため、「推測」が入らない設計になっている。

なぜ注目すべきか

Tom氏はポストで「本質はスキルがすごいことじゃない」と指摘している。URLを渡すだけでサイトが再現できるということは、Webデザインの「見た目」の価値が急速にコモディティ化することを意味する。

個人開発者にとって重要なポイントは3つ：

• プロトタイピングの加速 — 競合サイトや参考UIのクローンから始めて、独自の改修を加えるワークフローが現実的になった
• デザイントークンの自動抽出 — フォント、カラーパレット、スペーシングなどを手作業で調べる時間が消える
• git worktree による並列エージェント — Claude Code の複数エージェント機能を活用した実践的なアーキテクチャパターン。自分のプロジェクトにも応用できる

一方で、クローンされる側のサイト運営者にとっては、オリジナルデザインの差別化がより難しくなるという側面もある。「見た目」で勝負する時代から、コンテンツ・体験・信頼で差をつける時代への移行が加速しそうだ。

GitHub

• リポジトリ: JCodesMore/ai-website-cloner-template
• ライセンス: MIT
• デモ動画: YouTube