AI 網站克隆模板 - 一鍵復刻任何網站

解決什麼

當你需要將現有網站從 WordPress/Webflow 等平臺遷移到現代技術棧,或者原始碼丟失但網站仍線上時,傳統做法是手動重寫每個元件。這個模板通過 AI 編碼代理自動化整個流程:輸入目標 URL,AI 自動截圖、提取設計 token(顏色/字型/間距)、分析互動行為(懸停/點選/響應式),生成詳細的元件規格文件,然後並行構建所有元件,最終輸出完整的 Next.js 專案。整個過程從數天縮短到幾小時。

為何火

3 萬+ stars 的核心原因是抓住了"AI 編碼代理"這個新範式的實用場景。不同於簡單的網頁截圖轉程式碼工具,它提供了完整的工程化流程:多階段管道(偵察→基礎→規格→並行構建→組裝)、Git worktree 隔離構建、精確的 getComputedStyle() 值傳遞給 AI、自動下載資源並更新路徑。專案支援 15+ 主流 AI 編碼工具(Claude Code/Cursor/Windsurf 等),開發者可以用熟悉的工具鏈完成複雜任務,而不是學習新的專用工具。

核心功能

• 一鍵克隆命令:在 AI 代理中執行 /clone-website <URL> 即可啟動全流程
• 多狀態捕獲:自動模擬滾動、點選、懸停,捕獲所有互動狀態和響應式斷點
• 精確規格生成:提取真實 CSS 計算值(非估算),包含多狀態內容、動畫引數、資源路徑
• 並行構建系統:每個元件在獨立 Git worktree 中由專門的 builder agent 構建,互不干擾
• 資源自動化:下載所有圖片/影片/SVG 到 public/,替換 Lucide 圖示為提取的 SVG
• 現代技術棧:Next.js 16 App Router、React 19、Tailwind CSS v4(oklch 色彩空間)、shadcn/ui

安裝

# 1. 在 GitHub 點選 "Use this template" 建立自己的倉庫(不要直接 clone)
# 2. Clone 你的新倉庫
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO

# 3. 安裝依賴
npm install

# 4. 啟動 AI 代理(以 Claude Code 為例)
claude --chrome

# 5. 在代理中執行
/clone-website https://example.com

# 開發模式
npm run dev  # 或用 Docker: docker compose up dev

適合誰

• 平臺遷移需求者:需要將自有網站從 Webflow/Squarespace 遷移到 Next.js 的開發者
• 原始碼恢復場景:網站線上但程式碼庫丟失、開發者離職、或技術棧過時的團隊
• 前端學習者:想通過拆解真實生產網站學習佈局、動畫、響應式設計的實現方式
• AI 工具愛好者:已訂閱 Claude Code/Cursor 等 AI 編碼工具,想探索實際工程應用

不適合:釣魚網站製作、品牌冒充、違反目標網站 ToS 的爬取行為(README 明確禁止)。

社群評價

暫無足量社群公開討論,以下為基於專案本身的中立評估:

從 GitHub 資料看,該專案在 4 個月內獲得 3 萬 stars 和 4000+ forks,增長速度極快,說明擊中了"AI 輔助開發"的熱點需求。34 個 open issues 中多數是功能請求(如支援更多 AI 工具、Vue/Svelte 版本),而非嚴重 bug,表明核心流程相對穩定。Discord 社群活躍,但需注意專案明確要求使用者用 "Use this template" 而非 fork,避免 PR 汙染主倉庫,這種設計體現了作者對模板定位的清晰認知。

潛在爭議點:依賴 AI 代理的黑盒能力,輸出質量受模型版本影響(README 推薦 Opus 4.8);法律灰色地帶(雖然宣告禁止侵權,但技術上可克隆任何公開網站)。

選型對比

vs 商業工具(Webflow/Framer 匯出):

• 商業工具通常只能匯出自家平臺的專案,且程式碼質量參差不齊(冗餘 class、內聯樣式)
• 本專案可處理任意網站,輸出乾淨的 React 元件和 Tailwind 類名,但需要 AI 代理訂閱成本

vs 傳統爬蟲(Puppeteer + 手動重寫):

• 傳統方案需手動分析 DOM、提取樣式、重構元件,耗時數天
• 本專案自動化整個流程,但依賴 AI 理解能力,複雜互動(如 WebGL/Canvas)可能失敗

vs 截圖轉程式碼工具(Screenshot to Code):

• 截圖工具基於視覺推斷,精度有限且不保留語義結構
• 本專案直接讀取 DOM 和計算樣式,保留真實 CSS 值和 HTML 結構,但不適合純視覺稿

已知坑

1. AI 代理依賴:必須配合 Claude Code/Cursor 等工具使用,不是獨立 CLI。中國大陸使用者訪問部分 AI 服務需要網路代理
2. 複雜互動侷限:README 未明確說明對 WebGL、Canvas、複雜 JavaScript 動畫的支援程度,可能需要手動調整
3. 法律風險:雖然技術上可行,但克隆他人網站前需確認版權和 ToS,商業使用需額外注意品牌資產歸屬
4. 模型版本敏感:推薦 Opus 4.8,使用其他模型(如 GPT-4)可能效果不佳,且 AI 能力隨版本迭代波動
5. 資源完整性:動態載入的資源(懶載入圖片、CDN 字型)可能遺漏,需檢查 public/ 目錄完整性
6. 模板倉庫管理:必須用 "Use this template" 建立新倉庫,直接 clone 會導致後續更新衝突