ai-website-cloner-template 衝上 GitHub 20k Star:克隆只是入口,核心是五階段多 Agent + Git worktree 並行流水線
2026 年 6 月 28 日,開源模板 ai-website-cloner-template 在 GitHub 累積 2 萬 Star。

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、需登入的動態內容和第三方嵌入元件無法完整還原,目標站台服務條款與版權問題使用者須自行確認。


