24
// 概要
本プロジェクトは AI coding agents を活用し、Web サイトをモダンな Next.js コードベースへリバースエンジニアリングするための再利用可能なテンプレートを提供します。デザインのトークン、アセット、コンポーネントの仕様を抽出して各セクションを並列的に再構築することで、プロセスを自動化します。このテンプレートは多様な AI プラットフォームに対応しており、アセンブリや視覚的な品質保証のためのツールも内蔵しています。
// 技術解説
AI Website Cloner Template は、AI コーディングエージェントを使用して既存の Web サイトをモダンで保守性の高い Next.js コードベースにリバースエンジニアリングするために設計された専門的なフレームワークです。偵察やデザイントークンの抽出から並列化されたコンポーネント構築に至るまでのマルチフェーズパイプラインを採用することで、レガシーサイトの移行や紛失したソースコードの復元という課題を解決します。このプロジェクトは、計算された CSS 値に基づいて詳細なコンポーネント仕様を生成することで精度を優先しており、生成されるコードが元のサイトのデザインと動作を正確に反映することを保証します。
// 主要ハイライト
01
React 19 と Tailwind CSS v4 を使用したモダンな Next.js 16 スタックへの Web サイト再構築を自動化します。
02
サイトの偵察、アセット抽出、コンポーネント仕様生成を実行するマルチフェーズパイプラインを活用し、AI による推測を最小限に抑えます。
03
ビルダーエージェントを派遣してサイトの各セクションを同時に構築することで、並列化された開発をサポートします。
04
正確な計算済み CSS 値、インタラクションモデル、レスポンシブブレークポイントを抽出することで、元のデザインに対する高い忠実度を確保します。
05
Claude Code、Cursor、GitHub Copilot、Windsurf を含む、さまざまな AI コーディングエージェントとの幅広い互換性を提供します。
06
元のサイトとのビジュアル差分を実行し、クローンされた出力が品質基準を満たしていることを確認する組み込みの QA プロセスが含まれています。
// ユースケース
01
WordPress や Webflow などのプラットフォームからモダンな Next.js スタックへのレガシーサイト移行
02
元のリポジトリが利用できなくなったライブサイトのソースコード復元
03
本番環境のサイトレイアウトやレスポンシブな挙動を分解し、高度な Web 開発技術を学習
// クイックスタート
開始するには、リポジトリをクローンし、npm を使用して必要な依存関係をインストールします。セットアップが完了したら、Claude Code などの好みの AI コーディングエージェントを起動し、/clone-website コマンドに続けてターゲット URL を実行します。その後、エージェントがプロジェクトの定義済みルールに基づいて、偵察および再構築プロセスを自動的に処理します。