ai-website-cloner-template: AI コーディングエージェントを使ってウェブサイトを Next.js コードベースに逆コンパイルする再利用可能テンプレート
ai-website-cloner-template: AI コーディングエージェントを使ってウェブサイトを Next.js コードベースに逆コンパイルする再利用可能テンプレート
解決する課題
このプロジェクトは、既存のウェブサイトをクリーンでモダンな Next.js コードベースに逆コンパイルできる再利用可能なテンプレートを提供します。WordPress や Webflow から Next.js へのプラットフォーム移行、ライブサイトから失われたソースコードの復元、あるいは本番サイトの構造やデザインを学習したいときに役立ちます。
仕組み
テンプレートは AI コーディングエージェント（Claude Code、Cursor、Aider など）を利用し、/clone-website コマンドで以下のマルチフェーズパイプラインを実行します。
- 偵察: エージェントがスクリーンショットを取得し、デザイントークン、アセット、インタラクションの振る舞いを抽出します。
- 基盤構築: グローバルスタイル、フォント、カラーを更新し、必要なアセットをダウンロードします。
- コンポーネント仕様: エージェントが各コンポーネントの詳細仕様を書き起こし、正確な計算済み CSS 値や振る舞いを記述します。
- 並列ビルド: 複数のビルダーエージェントが割り当てられ、個別のセクションやコンポーネントを並行して再構築します。
- 組み立てと QA: 最終的な成果物をマージし、元サイトとビジュアル差分を比較して正確性を確認します。
対象者
レガシーサイトをモダンスタックへ移行したい開発者、ウェブサイトのフロントエンドコードを復元したい人、または本番レベルのレイアウトやアニメーションを研究したい開発者向けです。
ハイライト
- モダンテックスタック: Next.js 16、React 19、Tailwind CSS v4、shadcn/ui を使用。
- エージェント非依存: Claude Code、GitHub Copilot、Cursor、Windsurf など幅広い AI コーディングエージェントに対応。
- 自動化パイプライン: デザイントークンの抽出とコンポーネント仕様の作成を自動化し、構築時の推測作業を排除。
- 並列構築: git worktree を利用してビルダーエージェントがサイトの異なるセクションを同時に作業可能にします。