要把一個還在線上跑的網站搬到 Next.js，而原始碼已經不知道去哪了——這件事我以前的做法是這樣的：開瀏覽器，按 F12，把 DevTools 拉出來，對著每一個區塊一格一格量。這個按鈕的 padding 是多少、那段標題的 font-size 是 28px 還是 30px、hover 上去顏色變成哪個值、捲到一半那條 navbar 是怎麼黏住的。量完一頁，手已經痠了，而這還只是「抄外觀」——抄完還要自己用 React 重寫一遍。

一個中等複雜度的行銷網站，這樣搞兩三天跑不掉。而且抄到後面你會開始懷疑人生：我到底是在開發，還是在當人肉掃描器。

AI Website Cloner Template 這個 13,000 多顆星的開源模板，把同一件事換了一種做法。它的前提跟你我一樣——網站還在、原始碼沒了、想搬到乾淨的 Next.js。差別在於，量 CSS、抄結構、重寫元件這些事，它全部丟給 AI agent 去做。

以前是下載 HTML，現在是「看著重蓋」

先講一個容易搞混的地方。傳統做法裡，如果你不想手動量，還有一招叫 wget 整站打包，把 HTML、CSS、圖檔全抓下來。但抓回來的是一坨糾纏在一起的靜態檔案，class 名稱是壓縮過的亂碼，根本沒辦法當成可維護的程式碼基礎。你省下了量的工，卻換來一堆得從垃圾堆裡考古的時間。

這個模板走的是完全不同的路。它不下載 HTML，它「看」網站——透過瀏覽器自動化工具（Chrome MCP 或 Playwright MCP），AI 會真的把目標網站打開，用 getComputedStyle() 去讀每個元素算出來的精確 CSS 值，截全頁的桌面圖（1440px）和手機圖（390px），捲動、點擊、hover 都掃一遍，把互動行為記錄下來。

差別在哪？wget 給你的是「網站長什麼樣的快照」，這套流程給你的是「一個資深前端工程師看完網站之後，從零重蓋的乾淨 React 程式碼」。一個是考古，一個是重生。

以前一個人從頭做到尾，現在是一群分身並行

手動遷移最折磨的，是它的線性。你得先看完整頁、想好結構、再一塊一塊刻。前面的還沒刻完，後面的只能排隊。

這個模板最有意思的設計決策，就是打掉這個線性。它叫「工頭模式」（Foreman Model）。傳統自動化工具會先把整個網站完整偵察一遍，全部摸清楚了才開始建。工頭不這樣——他檢查完一個區塊，當場就寫好規格、派一個 builder agent 去蓋，然後轉頭去看下一塊。偵察和建構是同時進行的。

更妙的是每個 builder agent 都在自己獨立的 git worktree 分支裡工作，彼此互不干擾。簡單的區塊派一個分身，複雜的拆成好幾個。等大家各自蓋完，工頭再把所有分支合併起來。你原本一個人扛的線性工作，被攤平成一群分身的並行工作。

這裡藏了一個很關鍵的細節：builder 收到的不是「去讀某個檔案、自己看著辦」的模糊指令，而是一份寫死的 .spec.md 規格檔，當作建構合約。規格寫清楚了，分身才不會各蓋各的、合起來變成四不像。

以前憑感覺收工，現在每一步都先驗證能不能編譯

手動抄的時候，你很難說清楚「抄到幾分了」。看起來像就收工，結果上線才發現 RWD 在手機上整個垮掉。

這套流程把驗證寫進了每一步。它的管線分五個階段：偵察（截圖、掃互動行為，產出 BEHAVIORS.md 和 PAGE_TOPOLOGY.md）、基礎建設（搬字型、色彩 tokens、SVG 圖示、把資產全下載到 public/）、元件規格與派遣（逐區塊量精確 CSS、寫規格、派工）、頁面組裝（把元件拼回 page.tsx，處理 scroll-snap、sticky、z-index 這些頁面層級的佈局），最後是視覺 QA——原站跟克隆站並排截圖比對，桌面比一次、手機比一次，發現哪裡不一樣就修，修完再比。

整條管線有一條硬性規則：每一步都要跑 npm run build 驗證，確保專案隨時都是可編譯的。這條規則不能跳過。它把「憑感覺像不像」換成了「機器幫你確認每一步都站得住」。

真正換掉的不是工具，是「程式碼長在哪裡」

如果你去翻這個 repo 的 src/ 目錄，會發現它幾乎是空的——只有一個空白的 Next.js 骨架、一個 button 元件、一個 cn() 工具函數。一個號稱能克隆網站的專案，原始碼竟然是空的，這乍看很荒謬。

但這正是整件事最值得想的地方。真正的「智慧」全部寫在那份 470 行的 SKILL.md 裡——它定義了 AI 要怎麼看網站、怎麼擷取、怎麼分工、怎麼做品管。它甚至不綁定你用哪個 AI 工具：用 AGENTS.md 當唯一指令來源，再用同步腳本生出各家平台的設定檔，Claude Code、Cursor、Windsurf、Gemini CLI、Codex、Copilot 等 13 個平台都能讀。

換句話說，這個專案交付的不是程式碼，是一套寫給 AI 的工作方法論。過去我們寫程式碼來自動化重複勞動，現在我們寫指令來指揮一個會自己寫程式碼的東西。值錢的東西，從「能跑的程式」往上挪了一層，變成「描述得夠清楚、讓 AI 能照著做的規格」。

當然，它有它的邊界，這點得講清楚。這是純前端的視覺克隆，後端邏輯、資料庫、登入驗證它一概不碰，動態資料用 mock 頂著。如果你的網站有複雜的伺服器端邏輯，克隆出來的只是一層外殼。它也很燒 token——每個元件都要先擷取規格再派 builder，克隆一整個網站的帳單不會太可愛。影片、Lottie、Canvas 那種動畫，它只會把原始檔下載下來，不會幫你轉成 React。還有一條紅線：別拿它去做釣魚或冒充網站，Logo 和文案都受著作權保護。

回到最開頭那個量 CSS 量到手痠的下午。如果現在再讓我搬一次站，我不會再開 DevTools 一格一格量了——我會先把那份規格寫清楚，剩下的交給分身。真正要練的技能，已經不是「我會不會刻這個版」，而是「我能不能把要什麼講到 AI 不會誤解」。

原文來源：ai-website-cloner-template (GitHub)