URLを渡すだけで、AIがWebサイトをNext.jsのモダンなコードベースに再構築する。AI Website Cloner Templateは、2026年3月の公開からわずか1か月でGitHub Stars 11,500超を達成した急成長プロジェクトだ。MITライセンス、開発者はJCodesMore氏。

AI Website Clonerのデモ比較

AI Website Cloner Templateの主要スペック（2026年4月時点）
  • GitHub Stars: 11,500超 / フォーク: 1,670超
  • テックスタック: Next.js 16（App Router）+ React 19 + Tailwind CSS v4 + shadcn/ui
  • 対応AIエージェント: Claude Code（推奨）含む13種
  • 処理方式: 5段階パイプライン（偵察→基盤→仕様→並列ビルド→QA）

この記事ではClaude Codeに特化して解説します。Claude Code全般は Claude Code完全ガイド2026：インストールから本番運用まで をご覧ください。

ツールの概要：単なるスクレイピングではない

AI Website Cloner Templateは、URLを指定するだけでWebサイトをNext.jsコードベースに変換するオープンソーステンプレート。単なるHTMLスクレイピングとは根本的に異なる。

対象サイトのDOM構造・デザイントークン・アセットをAIが自動解析し、セマンティックなHTMLとTailwind CSSによるモダンなコードを生成する。getComputedStyle()で実測値を取得する設計のため、推測ではなく正確なCSS値でコンポーネントを再構築する。スクロール・クリック・ホバー・レスポンシブの4種インタラクションも自動検証される。

Claude Codeベストプラクティスガイドで紹介されている自動モードとの併用が推奨されており、Opus 4.6で最高精度を発揮する。ただしContinueやCursorなど計13種のAIコーディングエージェントに対応しており、特定のツールに依存しない設計だ。

5段階パイプラインの仕組み

/clone-websiteスキルは5段階のパイプラインで構成される。

graph TD A["URL入力"] --> B["1. Reconnaissance
スクリーンショット取得
デザイントークン抽出
インタラクション検証"] B --> C["2. Foundation
フォント・色・グローバルCSS更新
全アセットのダウンロード"] C --> D["3. Component Specs
コンポーネント仕様ファイルを
docs/research/components/ に出力"] D --> E["4. Parallel Build
セクションごとに
git worktreeで独立構築"] E --> F["5. Assembly & QA
worktreeマージ
ビジュアルDiff検証"] F --> G["完成：Next.js コードベース"] style A fill:#4A90D9,color:#fff style G fill:#50C878,color:#fff

第1段階 Reconnaissance（偵察） — Chrome MCPを通じてサイトにアクセス。スクリーンショット取得に加え、スクロール・クリック・ホバー・レスポンシブの4種インタラクションを自動検証。デザイントークン（フォントファミリー・oklchカラー値・spacing値）をgetComputedStyle()で正確に抽出する。

第2段階 Foundation（基盤構築） — 抽出したデザイントークンでTailwind CSS v4の設定を更新。画像・動画・フォント・favicon・OG画像など全アセットをダウンロード。

第3段階 Component Specs（仕様生成） — 各コンポーネントの仕様ファイルをdocs/research/components/に出力。CSS計算値・状態遷移・レスポンシブブレークポイントを網羅。ビルダーエージェントはこの仕様を入力として受け取る。

第4段階 Parallel Build（並列構築） — セクションごとに独立したgit worktreeを作成し、複数のビルダーエージェントが同時に構築。各ビルダーは仕様をインラインで受け取るため、他のセクションとの依存関係がない。

第5段階 Assembly & QA（統合・品質検証） — 全worktreeをマージし、ページの配線を完了。オリジナルサイトとのビジュアルDiffを実行して品質を検証。

3つの主要ユースケース

プラットフォーム移行 — WordPress・Webflow・Squarespaceで運用中のサイトをNext.jsベースに移行する際、手作業でのHTML/CSS再構築が不要になる。AIがレイアウト・フォント・色・間隔を自動抽出し、Tailwind CSSのデザイントークンとして規格化する。

ソースコード喪失時の復元 — サイトは稼働中だがリポジトリが消失・開発者が離脱・レガシースタック。URLさえあればモダンなコードベースを再構築できる。

学習目的の構造分析 — プロダクションサイトのレイアウト・アニメーション・レスポンシブ実装を実コードで解体学習できる。design.mdの設計仕様書と組み合わせれば、AIにUI生成を指示する際の理解が深まる。

インストールと使い方

# リポジトリをクローン
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone && npm install

# Claude Codeで起動（Chrome MCP連携を有効化）
claude --chrome

# クローン実行（複数URL同時指定も可）
/clone-website https://example.com
手順 内容 備考
1. クローン リポジトリをgit cloneで取得 任意のディレクトリ名を指定可
2. 依存インストール npm installで全パッケージ導入 Node.js 24以上が必須
3. AIエージェント起動 Claude Codeの場合はclaude --chrome Chrome MCP連携が有効化
4. クローン実行 /clone-website <対象URL> 複数URL同時指定も可
5. カスタマイズ TARGET.mdで精度・スコープを指定 URL指定のみでも全自動処理可能
テックスタック
Next.js 16（App Router・React 19・TypeScript strict）、shadcn/ui（Radix primitives + Tailwind CSS v4）、Lucide React（クローン時に抽出SVGに自動置換）。Docker対応あり。

他ツールとの比較

項目 AI Website Cloner httrack SingleFile WebCopy
出力形式 Next.js + Tailwind CSS 静的HTML（そのまま複製） 単一HTMLファイル 静的HTML
AI構造解析 あり（13種のエージェント対応） なし なし なし
デザイントークン抽出 あり（oklch値で規格化） なし なし なし
レスポンシブ対応 自動（Tailwind v4） 元サイト依存 元サイト依存 元サイト依存
並列ビルド あり（git worktree） なし なし なし
ビジュアルDiff QA あり なし なし なし
用途 コードベース移行・再構築 オフラインコピー ページ保存 サイトバックアップ

httrack・SingleFile・WebCopyはサイトの「保存」が目的。AI Website Clonerはサイトの「再構築」が目的——根本的にアプローチが異なる。既存サイトをモダンスタックに移行する用途ではこのツール一択だ。OpenHandsのようなAIコーディングエージェントと組み合わせれば、クローン後のカスタマイズ工程もさらに自動化できる。

制限事項・注意点

利用前に確認すべきポイント
  • 禁止用途が明確に定められている — フィッシング・詐称・法律違反目的は禁止。ロゴ・ブランドアセット・オリジナルコピーは元の所有者に帰属
  • スクレイピング禁止サイトへの使用は利用者の責任 — 対象サイトの利用規約を事前に確認すること
  • 生成コードのセキュリティチェックは必須 — 外部スクリプト依存や不要なライブラリが含まれる可能性あり。本番公開前に手動レビューを実施すべき
  • Node.js 24以上が必須 — Next.js 16・React 19・TypeScript strict構成のため古い環境では動作しない
  • Chrome MCPが必要 — 偵察フェーズでChrome MCPを通じてアクセスするため、Claude Code利用時は--chromeフラグでの起動が前提

Browser Useのようなブラウザ自動化ツールと組み合わせれば、クローンしたサイトの動作確認テストも自動化できる。

関連記事: Claude Code完全ガイド2026：インストールから本番運用まで

参照ソース