JCodesMore/ai-website-cloner-template

Clone any website with one command using AI coding agents

What it solves

このプロジェクトは、既存のウェブサイトをクリーンでモダンな Next.js コードベースにリバースエンジニアリングするための再利用可能なテンプレートを提供します。プラットフォームの移行 (例: WordPress や Webflow から Next.js への移行) や、稼働中のサイトから失われたソースコードを復元し、あるいは、本番環境のウェブサイトがどのように構造化され、スタイリングされているかを学ぶために設計されています。

How it works

このテンプレートは、AI コーディングエージェント (Claude Code, Cursor, または Aider) を使用して、/clone-website コマンド経由で多段階パイプラインを実行します：

  1. Reconnaissance: エージェントがスクリーンショットを撮り、デザイン・トークン、アセット、インタラクション動作を抽出します。
  2. Foundation: グローバルスタイル、フォント、カラーを更新し、必要なアセットをダウンロードします。
  3. Component Specs: エージェントが各コンポーネントの詳細な仕様書を作成します。これには、正確な計算済みの CSS 値と動作が含まれます。
  4. Parallel Build: 複数のビルダーエージェントが、個々のセクションやコンポーネントを並列に再構築します。 n5. Assembly & QA: 最終的なパーツを統合し、元のサイトとの視覚的な差分 (visual diff) を行い、正確性を確保します。

Who it’s for

レガシーサイトをモダンなスタックに移行したい開発者、ウェブサイトのフロントエンドコードを復元する必要がある人、または本番環境レベルのレイアウトとアニメーションを研究したい開発者向けです。

Highlights

  • Modern Tech Stack: Next.js 16, React 19, Tailwind CSS v4, および shadcn/ui で構築されています。

  • Agent Agnostic: Claude Code, GitHub Copilot, Cursor, および Windsurf を含む、幅広い AI コーディングエージェントを支持します。

  • ‘Automated Pipeline’: デザイン・トークンの抽出とコンポーネント仕様書の作成を自動化し、建立

  • Parallel Construction: git worktrees を使用して、ビルダーエージェントがサイトの異なるセクションを同時に作業できるようにします。