ai-website-cloner-template
その他JCodesMore/ai-website-cloner-template
AIで任意のWebサイトをNext.jsプロジェクトにクローンします。
概要
再利用可能なテンプレートで、AI コーディングエージェントを活用して任意のウェブサイトをモダンな Next.js コードベースにリバースエンジニアリングします。URL を指定して /clone-website コマンドを実行すると、エージェントはウェブサイトを検査し、デザイントークンを抽出し、コンポーネントを並列で構築します。
README プレビュー
# AI Website Cloner Template\n\n \n\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. \n\n**Recommended: [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with Opus 4.7 for best results** — but works with a variety of AI coding agents.\n\nPoint it at a URL, run `/clone-website`, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.\n\n## Demo\n\n[](https://youtu.be/O669pVZ_qr0)\n\n> Click the image above to watch the full demo on YouTube.\n\n## Quick Start\n\n> **Important:** Start by making your own copy with GitHub's **Use this template** button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.\n\n1. **Create your own repository from this template**\n\n On the GitHub page for this project, click **Use this template**, then click **Create a new repository**.\n\n Give your new repository a name, choose whether it should be public or private, then click **Create repository**. If GitHub shows an **Include all branches** option, you can leave it off.\n\n This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.\n\n2. **Open your new repository on your computer**\n\n After GitHub creates your copy, open that new repository. Click **Code** and open or clone your new repository with your preferred coding tool.\n\n If you use the terminal, the command will look like this:\n\n ```bash\n git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git\n cd YOUR-NEW-REPOSITORY\n ```\n\n3. **Install dependencies**\n ```bash\n npm install\n ```\n4. **Start your AI agent** — Claude Code recommended:\n ```bash\n claude --chrome\n ```\n5. **Run the skill**:\n ```\n /clone-website [ ...]\n
FAQ (4)
トラブル対応npm auditで報告されたNext.js 16.3.0の重大な未認証RCE脆弱性を修正するにはどうすればよいですか？
Next.js をパッチ適用済みのバージョン 16.3.5 以降にアップグレードしてください。バージョン 16.0.0〜16.3.2 は GHSA-p293-qw3h-jr36 および GHSA-2xp9-vwfh-vxw4 の影響を受けます。両方のパッケージを更新し、ロックファイルを再生成してください:
npm install next@^16.3.5 eslint-config-next@^16.3.5
npm audit fix正確なバージョンで固定したい場合は、package.json に次のように設定してください:
"next": "16.3.5",
"eslint-config-next": "16.3.5"その後、次を実行してください:
rm -rf node_modules package-lock.json
npm install
npm audit
npm run checknpm audit は脆弱性 0 件と報告するはずです。npm audit fix --force だけに頼るのは避けてください。npm が固定した依存範囲外のバージョンをインストールする可能性があるためです。next と eslint-config-next を明示的にバージョンアップすることが、的を絞った修正方法です。
トラブル対応/clone-website が以前にクローンしたページを削除するのはなぜですか？また、ページが上書きされるのを防ぐにはどうすればよいですか？
これは、後続の /clone-website の実行が、以前の実行で生成されたページや出力ファイルをリセットしたり競合したりするために発生します。修正は PR fix: preserve pages across clone runs に含まれています。この修正を含むリリースにアップデートしてから、クローンを再実行してください。このアップデートでは、既存のクローン済みページやユーザーが作成したページが保持され、衝突に強いルートが使用され、research、screenshot、component、asset、downloader の出力がターゲットごとに分離されます。また、同一パスのクエリ状態、Next.js の予約済みルート構文、複数のオリジンにも対応しています。古いバージョンでの一時的な回避策として、個別にコマンドを実行する代わりに、すべてのターゲットを1回の呼び出しでクローンしてください: /clone-website https://example.com/page-a https://example.com/page-b https://example.com/page-c。または、追加のクローン実行の前に、生成されたページをバックアップしてください。
トラブル対応sync-skills.mjs が Cline、Roo Code、または Aider の clone-website スキルファイルを生成しない問題を修正するにはどうすればよいですか？
これは ai-website-cloner-template v0.3.1（コミット 4cd764f）におけるジェネレーターと README の不一致です。scripts/sync-skills.mjs は 9 つのターゲットしか定義していないため、Cline、Roo Code、Aider のファイルが生成されません。
PR fix: complete Cline and Roo skill support を含むリリースまたはコミットにアップグレードしてから、スキルを再生成してください：
git pull
node scripts/sync-skills.mjs
find . -name 'clone-website*' -not -path './node_modules/*'この修正により、ネイティブの Cline ワークスペーススキル、標準に準拠した Roo Code スキル、および Roo Code の /clone-website スラッシュコマンドブリッジが追加されます。また、英語、簡体字中国語、日本語の README も更新されます。
Aider は完全サポート対象プラットフォームのリストから削除されたため、この修正では生成されません。Aider の個別サポートが実装されるまでは、Cline、Roo Code、またはリストに記載されている他のサポート対象エージェントを使用してください。
設定clone-website スキルで、デフォルトの browser MCP の代わりに Playwright MCP を使用するにはどうすればよいですか？
別途バックエンドや .env の設定は必要ありません。clone-website スキルの browser-automation プレフライトは、Chrome MCP、Browserbase MCP、Puppeteer MCP に加え、Playwright MCP（@playwright/mcp）をすでにサポートしています。MCP クライアントで Playwright MCP を設定し、browser-automation ステップで Playwright を使用するようコーディングエージェントに指示してください。同じウェブサイトの抽出とクローン作成のワークフローが、デフォルトの browser MCP の代わりに Playwright 経由で実行されます。