AI Website Cloner Template

URL を渡すだけ — AI エージェントがサイトをピクセル完全に複製する Next.js テンプレート

1 — 概要
何か

AI Website Cloner Template は、任意のウェブサイトを逆引きし、 AIコーディングエージェントがデザイントークン・アセット・コンポーネントを自動抽出・並列ビルドして ピクセル完全なクローンを生成するための Next.js テンプレート。 /clone-website <url> を叩くだけで、 スクリーンショット取得からビジュアル差分確認まで全フェーズが自走する。

5
パイプラインフェーズ
13
対応 AI エージェント
Next 16
フレームワーク
MIT
ライセンス
テックスタック
  • Next.js 16 — App Router / React 19 / TypeScript strict
  • shadcn/ui — Radix プリミティブ + Tailwind CSS v4
  • Tailwind CSS v4 — oklch デザイントークン
  • Lucide React — デフォルトアイコン（クローン時に対象サイトの SVG で置換）
推奨エージェント: Claude Code (Opus 4.6) を claude --chrome で起動するのが最高精度。 Chrome MCP 連携でリアルタイムにページを検査しながらクローンを構築する。
2 — クイックスタート
セットアップ
1
リポジトリをクローン

テンプレートを手元に持ってきて作業ディレクトリへ移動する。

2
依存パッケージをインストール

npm install で Next.js / shadcn/ui / Tailwind v4 一式を取得。

3
AI エージェントを起動

Claude Code 推奨: claude --chrome。他エージェントは AGENTS.md を読んで自動的に設定を取得する。

4
スキルを実行

エージェントに /clone-website <url> と入力。複数 URL も空白区切りで同時指定できる。

5
（任意）カスタマイズ

ベースクローン完成後、自由にデザイン・コンテンツを改変する。

よく使うコマンド 
npm run dev        # 開発サーバー起動
npm run build      # プロダクションビルド
npm run lint       # ESLint チェック
npm run typecheck  # TypeScript 型チェック
npm run check      # lint + typecheck + build をまとめて実行
3 — パイプライン
/clone-website の5フェーズ

スキルは次の順序で自律実行される。各フェーズの成果物が次フェーズへ引き継がれる。

%%{init: { "theme": "base", "themeVariables": { "primaryColor": "#e8f4f7", "primaryTextColor": "#033d52", "primaryBorderColor": "#5da9c0", "lineColor": "#5da9c0", "secondaryColor": "#f0f7fa", "tertiaryColor": "#f5fbfc", "background": "#f7fafb", "mainBkg": "#e8f4f7", "nodeBorder": "#5da9c0", "clusterBkg": "#f0f7fa", "fontSize": "14px" } }}%% flowchart TD A["Phase 1: Reconnaissance スクリーンショット取得 デザイントークン抽出 インタラクション調査"] B["Phase 2: Foundation フォント・カラー更新 globals.css 書き換え アセット一括ダウンロード"] C["Phase 3: Component Specs コンポーネント仕様書生成 docs/research/components/ へ出力 computed CSS 値・状態・レスポンシブ"] D["Phase 4: Parallel Build git worktree で並列ビルダー起動 各セクション独立ビルド エージェントチームが同時並走"] E["Phase 5: Assembly & QA worktree マージ ページ配線 ビジュアル差分確認"] A --> B --> C --> D --> E style A fill:#d4eef5,stroke:#5da9c0,color:#033d52 style B fill:#d4eef5,stroke:#5da9c0,color:#033d52 style C fill:#d4eef5,stroke:#5da9c0,color:#033d52 style D fill:#b8e3ef,stroke:#3d97b4,color:#033d52 style E fill:#9ed5e8,stroke:#2283a0,color:#033d52
Phase 4 — 並列ビルドの仕組み

最も特徴的なのが Phase 4 の並列ビルド。各セクション・コンポーネントに対して 独立した git worktree ブランチ上でビルダーエージェントを起動し、 オーケストレーターが最後にマージする。コンポーネント仕様書にはレンダリング済みの getComputedStyle() 値、インタラクションモデル、レスポンシブブレークポイント、 アセットパスがすべてインラインで渡されるため、推測なしで実装できる。

4 — 対応エージェント
サポートマトリクス
エージェント ステータス 備考
Claude Code 推奨 Opus 4.6 + --chrome フラグで最高精度
Codex CLI 対応
OpenCode 対応
Cursor 対応
Windsurf 対応
Gemini CLI 対応
Cline 対応
Roo Code 対応
GitHub Copilot / Continue / Amazon Q / Augment Code / Aider 対応
真実のソース管理

すべてのエージェント設定は AGENTS.md が唯一の正とする。 変更後は同期スクリプトで各プラットフォーム向けファイルを自動生成する。

何を変えるか真実のソース同期コマンド
プロジェクト指示 AGENTS.md bash scripts/sync-agent-rules.sh
/clone-website スキル .claude/skills/clone-website/SKILL.md node scripts/sync-skills.mjs
5 — プロジェクト構成
ディレクトリツリー 
src/
  app/              # Next.js ルート (App Router)
  components/
    ui/             # shadcn/ui プリミティブ
    icons.tsx       # 抽出 SVG アイコン (React コンポーネント)
  lib/utils.ts      # cn() ユーティリティ
  types/            # TypeScript インターフェース
  hooks/            # カスタム React hooks
public/
  images/           # 対象サイトからダウンロードした画像
  videos/           # 対象サイトからダウンロードした動画
  seo/              # Favicon / OG 画像 / webmanifest
docs/
  research/         # 抽出結果 & コンポーネント仕様書
  design-references/ # スクリーンショット
scripts/
  sync-agent-rules.sh  # エージェント指示ファイル再生成
  sync-skills.mjs      # /clone-website を全プラットフォームへ再生成
AGENTS.md           # エージェント指示 (唯一の真実のソース)
CLAUDE.md           # Claude Code 設定 (AGENTS.md をインポート)
GEMINI.md           # Gemini CLI 設定 (AGENTS.md をインポート)
コードスタイル規約
  • TypeScript strict モード / any 禁止
  • Named exports / PascalCase コンポーネント / camelCase ユーティリティ
  • Tailwind ユーティリティクラスのみ — インラインスタイル禁止
  • インデント 2 スペース / モバイルファーストのレスポンシブ設計
  • エミュレーション中は個人的なデザイン変更をしない — 1:1 で合わせてから改変
公式・関連