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）的開發者，或希望拆解並學習現有網頁設計的人士。

重點特色

• 代理無關：支援多種 AI 編碼代理，包括 Claude Code、Cursor、Windsurf 與 GitHub Copilot。
• 免交接：自動提取設計代幣、資產，並產生元件規格。
• 現代技術棧：使用 Next.js 16、React 19、TypeScript 與 Tailwind CSS v4 建置。
• 平行化建構：利用 git worktrees 讓多個 AI 代理同時建構網站的不同區段。