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 コマンドで以下のマルチフェーズパイプラインを実行します。

  1. 偵察: エージェントがスクリーンショットを取得し、デザイントークンとインタラクションの振る舞いを抽出します。
  2. 基盤構築: グローバルスタイル、フォント、カラーを設定し、必要なアセットをダウンロードします。
  3. コンポーネント仕様: エージェントが各コンポーネントの詳細な仕様を書き起こし、正確な CSS 値と振る舞いを記述します。
  4. 並列ビルド: 複数のビルダーエージェントが派遣され、個別のセクションやコンポーネントを並行して再構築します。
  5. 組み立てと QA: 最終的な成果物を統合し、元サイトと視覚的に比較して正確性を確認します。

対象者

Next.js 16、Tailwind CSS v4、shadcn/ui などのモダンスタックへウェブサイトを移行したい開発者、または既存のウェブデザインを分解して学びたい人向けです。

ハイライト

  • エージェント非依存: Claude Code、Cursor、Windsurf、GitHub Copilot など幅広い AI コーディングエージェントに対応。
  • ハンドオフ不要: デザイントークン、アセットの抽出とコンポーネント仕様の作成を自動化。
  • 最新技術スタック: Next.js 16、React 19、TypeScript、Tailwind CSS v4 で構築。
  • 並列構築: git worktree を利用し、複数の AI エージェントがサイトの異なるセクションを同時にビルド可能。

Sources