JCodesMore/ai-website-cloner-template

Clone any website with one command using AI coding agents

解決する課題

AIコーディングエージェントに既存のウェブサイトをクリーンでモダンなNext.jsアプリケーションに再作成できるようにするためのURLを提供します。WordPressからNext.jsへの移行、ライブサイトから失われたソースコードの回復、またはプロフェッショナルサイトの構築方法を学ぶ際に特に役立ちます。

動作方法

このプロジェクトは、AIコーディングエージェントがマルチフェーズのパイプラインを実行するためのテンプレートと手順(「スキル」)を提供します:

  1. 調査:エージェントはスクリーンショットを撮影し、デザイントークンとインタラクション動作を抽出します。
  2. 基盤構築:フォント、色、グローバルスタイルを設定し、必要なアセットをダウンロードします。
  3. コンポーネント仕様:各コンポーネントの正確なCSS値と動作を含む詳細な仕様ファイルを作成します。
  4. 並列ビルド:複数のビルドエージェントが並列で個々のセクションやコンポーネントを作成します。
  5. 統合と品質保証:各パーツを最終ページに統合し、視覚的差分比較で元のサイトと照合します。

対象ユーザー

  • レガシーなウェブサイトをモダンなスタックに移行したい開発者
  • 元のソースコードにアクセスできなくなったサイト所有者
  • 本番レベルのレイアウトやアニメーションを分解して学びたい学習者

特徴

  • 広範なエージェント対応:Claude Code、Cursor、Windsurf、GitHub Copilot、Gemini CLIなどに対応。
  • モダンなテクノロジースタック:Next.js 16、React 19、Tailwind CSS v4、shadcn/uiを使用してコードを生成。
  • 高精度getComputedStyle() を使用して視覚的な正確な再現を保証し、推測を避けます。
  • 自動化ワークフロー:対応するAIエージェント向けに専用の /clone-website コマンドを含みます。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト