ai-website-cloner 是什麼？一行命令克隆網站的開源模板怎麼用

2026 年 6 月 28 日，開源模板 ai-website-cloner-template 在 GitHub 累積 2 萬 Star。一個 URL 丟進去，/clone-website 指令跑完五個階段後，吐出一套可直接執行 npm run dev 的 Next.js 16 + shadcn/ui + Tailwind CSS v4 + TypeScript 嚴格模式前端專案。和單一 LLM 補全不同，這套系統把頁面切成獨立元件，為每個元件各開一個 Git worktree，再調度多個 builder agent 同時施工，導覽列、hero 區、頁尾可以在三個 worktree 裡平行推進、互不干擾。

採集先跑：AI 自動滾動頁面、模擬懸停與點擊、切換視口，用 getComputedStyle() 拿到真實計算值，把色彩體系、字型字重、間距、圓角、陰影轉成設計 Token，並同步下載靜態資源，讓整個專案底色對齊原站。吃資源最多的是第三階段，組件規格書：AI 把頁面拆成導覽列、hero 區、功能卡片、定價表、頁尾等獨立區塊，每塊各自產生一份規格書，記錄精確 CSS 計算值、所有狀態轉場的時長與緩動函數、響應式斷點行為和完整文案。規格書到位後，多個 builder agent 同時在各自 worktree 施工，完成後合併回主分支，跑 npm run check 須通過 ESLint、TypeScript 型別檢查和生產環境建置才算收工。相容性由一份 AGENTS.md 統一管理：Claude Code、Codex CLI、Cursor、Copilot、Gemini CLI、Windsurf 的設定檔全從它自動同步，新增平台只需改完後執行 bash scripts/sync-agent-rules.sh。作者指出 Claude Code 搭配 Opus 4.7 效果最佳，但這屬作者自述口徑，非獨立驗證。

對工程師讀者而言，真正可借鑑的不是「克隆」本身，而是規格書驅動的拆分方式：先把任務完整建模成可供 agent 獨立執行的規格單，再用 worktree 隔離讓多個 agent 同時推進。這套模式理論上可以移植到任何規模較大的前端拆解場景。AGENTS.md 單一來源跨工具同步，也在試圖回應 AI 編程工具碎片化的現實，配置越來越多份，一致性越來越難維持。作者列出的合法場景包括平台遷移（WordPress、Webflow、Squarespace 搬到 Next.js）、原始碼恢復（程式庫遺失但站台仍在線）和學習拆解特定版面動畫；私有業務 JS、需登入的動態內容和第三方嵌入元件無法完整還原，目標站台服務條款與版權問題使用者須自行確認。