開源技能 clone-website：拆解元件規格並並行構建，畫素級克隆網站
開源專案推出網站克隆技能 clone-website，輸入指令即可抓取真實樣式並畫素級復刻網頁。它將頁面拆成 150 行以內的單獨元件規格，並通過 git worktree 讓 Agent 並行構建與視覺比對。這套工程流程解決了 AI 生成前端時靠猜間距、容易糊弄的問題。
clone-website 是一個讓 AI Agent 畫素級克隆任意網頁的開源技能。在對應環境裡輸入 /clone-website 加網址，Agent 就會自動扒取設計樣式與素材，完整重建整個前端頁面。
它是怎麼做到不糊弄的
直接讓大模型克隆一整個網頁，AI 往往會憑感覺猜間距和字號，產出的頁面看著差不多，細節卻處處走樣。這個技能把重點放在了具體的工程規矩上。
首先是強行把任務切碎。只要單個元件的規格描述超過約 150 行，系統就會強制拆分，只給 Agent 喂單個元件以及通過 getComputedStyle() 獲取的真實 CSS 計算值，不讓它憑記憶瞎猜。
在動工前，它會生成一份包含截圖、真實文案、狀態和本地素材路徑的 spec 規格檔案當作施工合同。同時它還會先慢慢滾動頁面，判斷動效是滾動驅動還是點選驅動，避開整段推倒重寫的昂貴錯誤。最後，多個 builder Agent 會在各自獨立的 git worktree 分支裡並行寫程式碼，合併後再與原網站做視覺 diff 比對。
為什麼重要
能抓網頁的工具不少，但普通工具生成的頁面往往需要人工花大量時間微調樣式。我們認為，這個專案的價值在於證明了管束 Agent 的有效路徑：只要把任務拆得足夠小、用真實資料鎖死規格，並在隔離環境裡跑自動化比對，AI 就能做出極高精度的前端復刻。經常需要搭建頁面原型或重構介面的開發者，很值得去參考它的這套工程拆解思路。
來源 (1)
- github.com（在新分頁開啟）原文github.com