概要
このリポジトリは、Claude Codeを活用してWebサイトを自動で解析・複製するためのテンプレートである。従来は手作業で行われていたサイト構造の把握やコード生成を、LLMやビジョンAIの力で自動化。マークアップからスタイリング、レスポンシブ対応まで、一連のプロセスをコード化している。Web開発者やスタートアップが既存サイトをベースに素早くプロトタイプを構築する際に活躍する。
主な機能
- URL入力による自動解析 Chrome MCPを通じてターゲットサイトを検査し、DOMとビジュアルを同時に解析
- AIによる構造認識 Claude Codeがページレイアウトを認識し、セクション構成を自動判定
- HTML・CSS自動生成 抽出した構造情報からセマンティックなMarkupとモダンなスタイルを生成
- レスポンシブ対応の自動化 Tailwind CSSを活用した多デバイス対応を自動実装
- 並列ビルド処理 複数セクションを独立したgit worktreeで同時構築し、自動マージ
- デザイントークン抽出 フォント・色・間隔などの設計要素を自動抽出・規格化
技術スタック
- フレームワーク: Next.js 16（App Router、React 19、TypeScript strict）
- UIライブラリ: shadcn/ui（Radix primitives + Tailwind CSS v4）
- スタイリング: Tailwind CSS v4（oklchデザイントークン）
- アイコン: Lucide React（クローン時に抽出SVGに置き換え）
- 開発環境: Claude Code（Chrome MCP対応）
セットアップ手順
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
Claude Codeを起動：
claude --chrome
クローンを実行：
/clone-website <target-url>
オプションとしてTARGET.mdを編集し、対象ページ・精度レベル・スコープを指定することも可能。URLのみの指定でも全自動処理される。
動作原理
/clone-websiteスキルは複数フェーズのパイプラインで処理される。
- Reconnaissance — スクリーンショット取得、デザイントークン抽出、インタラクション検証（スクロール・クリック・ホバー・レスポンシブ）
- Foundation — フォント・色・グローバル設定の更新、全アセットのダウンロード
- Component Specs — 詳細な仕様ファイルを
docs/research/components/に出力
生成されたコンポーネントは隔離されたworktreeで並列構築され、自動マージされる。
活用シーン
テンプレートの高速プロトタイピング
既存のデザイン参考サイトから自動でコード化されたテンプレートを生成。デザイナー不在の初期段階でも、品質の高いプロトタイプをコード形式で取得できる。
複数サイトのバッチ処理
デザインギャラリーから複数サイトを一度に処理し、HTMLテンプレート集を自動構築。定期的に業界トレンドを反映したテンプレートを更新するワークフロー化が可能。
ローカル環境での安全な運用
オンプレミス実行対応のため、セキュリティ要件の厳しい組織でも安全に導入可能。ソースコードへの直接アクセスが可能なため、企業独自のワークフロー統合が容易。
こんな人におすすめ
- Web開発者 — 単調なマークアップ作業を自動化し、ビジネスロジック実装に時間を割きたい開発者
- スタートアップ創業者 — 開発リソースが限定的な中で、競合レベルのサイト品質を素早く実現したい
- Webデザイナー — デザインカンプから実装コードへの変換ステップを自動化し、修正指示に集中したい
- 企業のIT部門 — セキュリティ要件の厳しい環境で、社内オンプレミス運用が可能な自動化ツールを求める
注意点
生成されたコードはセキュリティチェック実施が推奨される。外部スクリプト依存や不要なライブラリが含まれる可能性があるため、本番公開前に手動レビューと最適化が必要。Browser Useのようなブラウザ自動化ツールと組み合わせると、クローンしたサイトの動作確認テストも自動化できる。