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: 代理會進行截圖並提取設計令牌（design tokens）、資產與互動行為。
  2. Foundation: 它會更新全域樣式、字體與顏色，並下載必要的資產。
  3. Component Specs: 代理會為每個組件撰寫詳細的規格說明，包括精確的計算後的 CSS 值與行為。
  4. Parallel Build: 發送多個構建代理來並行重建各個區塊或組件。
  5. Assembly & QA: 最後將組件合併，並針對原始網站進行視覺差異對比（visual diff），以確保準確性。

Who it’s for

想要將舊有網站遷移到現代技術棧的開發者、需要找回網站前端代碼的開發者，或是想要研究生產環境級別的佈局與動畫的開發者。

Highlights

  • Modern Tech Stack: 使用 Next.js 16, React 19, Tailwind CSS v4, 與 shadcn/ui 建構。
  • Agent Agnostic: 支援廣泛的 AI 編碼代理，包括 Claude Code, GitHub Copilot, Cursor, 與 Windsurf。
  • Automated Pipeline: 自動化設計令牌的提取與組件規格說明書的作成，從而消除建構過程中的猜測。
  • Parallel Construction: 使用 git worktrees 讓構建代理能同時處理網站的不同區塊。