ai-website-cloner-template：使用 AI 程式碼代理人將網站逆向工程為 Next.js 程式碼庫的可重複使用模板

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、React 19、Tailwind CSS v4 與 shadcn/ui 建置。
  • 代理人無關：支援多種 AI 程式碼代理人，包括 Claude Code、GitHub Copilot、Cursor 與 Windsurf。
  • 自動化管線：自動擷取設計代幣並產生元件規格，消除建置過程中的猜測。
  • 平行建構：利用 git worktrees 讓建構代理人同時處理網站的不同區段。

摘要： 一個可重複使用的模板，透過 AI 程式碼代理人將網站逆向工程為 Next.js 程式碼庫，自動化設計擷取與元件重建。

標題： ai-website-cloner-template：使用 AI 程式碼代理人將網站逆向工程為 Next.js 程式碼庫的可重複使用模板

Sources