本文詳細介紹一款在GitHub上獲得14.6K星標的開源AI網站克隆器——ai-website-cloner-template的操作使用。內容涵蓋從環境搭建、一鍵克隆命令、多URL並行處理、12種AI編程代理配置，到Docker部署、常見問題排查的完整流程。適合前端開發者、AI編程工具使用者以及需要快速完成網站遷移或重建的工程師閲讀。

目錄

1. 概述
     1.1 項目背景
     1.2 核心特性
     1.3 技術棧
2. 環境準備與安裝
     2.1 系統要求
     2.2 安裝步驟
     2.3 Docker 部署
     2.4 版本選擇
3. 快速上手
     3.1 首次運行
     3.2 理解克隆結果
     3.3 多URL併發克隆
4. 功能操作詳解
     4.1 偵察階段——設計令牌提取
     4.2 基礎階段——腳手架搭建
     4.3 組件規格階段——設計文檔生成
     4.4 並行構建階段——多代理協作
     4.5 組裝與質檢階段——視覺比對
     4.6 定製化階段——二次開發
5. 配置與定製
     5.1 平台同步機制
     5.2 代理規則配置
     5.3 技能腳本同步
     5.4 項目結構定製
6. 使用技巧與最佳實踐
     6.1 提高克隆質量
     6.2 多代理協作優化
     6.3 安全與合規
7. 常見問題與故障排除
     7.1 安裝問題
     7.2 克隆問題
     7.3 Windows 環境特殊處理
8. 實戰案例
     8.1 WordPress 博客遷移到 Next.js
     8.2 從Webflow導出重建品牌官網
9. 總結
   參考文獻

1. 概述

ai-website-cloner-template 是一套可複用的網站逆向工程模板，通過AI編碼代理將任意網站重建為現代化Next.js代碼庫。你只需指定一個目標URL，執行 /clone-website 命令，AI代理就會自動完成從設計分析到代碼生成的完整流程。

1.1 項目背景

傳統網站重建面臨三個核心痛點：

• 手動分析設計令牌（顏色、字體、間距）耗時且容易遺漏
• 從零搭建現代化前端項目框架需要大量重複性配置工作
• 組件拆分和編碼過程依賴人工判斷，質量和一致性難以保證

ai-website-cloner-template 將AI代理、多步流水線和並行構建結合，把整個過程從數週縮短到數分鐘。截止2026年5月，項目已獲得14.6K GitHub星標，5個正式發佈版本，最新版為v0.3.1。

1.2 核心特性

• 一鍵克隆：執行 /clone-website <URL> 即可觸發完整流水線
• 多URL並行處理：單條命令同時克隆多個網站，各自獨立輸出
• 設計令牌精確提取：通過 Chrome MCP 獲取 getComputedStyle() 值、交互模型、響應式斷點
• 並行代理構建：在獨立 git worktree 中並行構建各組件段，最後合併
• 視覺比對質檢：將生成頁面與原始截圖進行像素級比對
• 12平台代理支持：Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider
• MIT 開源協議，可自由用於商業項目

1.3 技術棧

項目基於以下技術構建，克隆結果同樣繼承這套技術棧：

2. 環境準備與安裝

2.1 系統要求

• Node.js 20+（當前v0.3.x要求Node.js 20，即將發佈的v0.4.0將提升至24）
• npm 10+
• 一個受支持的AI編程代理（推薦 Claude Code + Opus 4.7）
• Chrome 瀏覽器（代理執行設計令牌提取時需要）
• 操作系統：macOS / Linux / Windows（Windows需額外注意CRLF換行符問題）

驗證Node.js版本：

node --version
# 期望輸出：v20.x.x（v0.4.0起將要求v24.x.x）

2.2 安裝步驟

克隆倉庫並安裝依賴：

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install

驗證安裝成功：

npm run check
# 依次執行 lint → typecheck → build
# 三條命令均通過則安裝無誤

各檢查項可單獨運行：

npm run lint       # ESLint 代碼風格檢查
npm run typecheck  # TypeScript 類型檢查
npm run build      # 生產構建

安裝AI編程代理（以Claude Code為例，具體安裝方式參考官方文檔）：

啓動代理並附加Chrome瀏覽器權限：

claude --chrome

2.3 Docker 部署

項目提供了完整的Docker支持，適用於CI/CD環境和統一開發環境。

生產模式構建並運行：

docker compose up app --build

開發模式運行（端口3001，支持熱重載）：

docker compose up dev --build

Dockerfile 要點：

2.4 版本選擇

建議始終使用最新版本。如需鎖定特定版本：

git checkout v0.3.1

3. 快速上手

3.1 首次運行

確保在項目根目錄下啓動AI代理後，執行克隆命令：

/clone-website https://example.com

代理將自動執行以下五階段流水線：

流程執行說明：

• 偵察階段：代理通過Chrome瀏覽器訪問目標網站，截取整頁截圖，遍歷DOM元素提取所有計算樣式值，包括顏色、字體族、間距、圓角、陰影等設計令牌，同時記錄交互行為（懸停效果、點擊狀態、滾動動畫）
• 基礎搭建階段：將提取的設計令牌寫入Tailwind配置和CSS變量文件，並下載目標網站的圖片、視頻、favicon等靜態資源到 public/ 目錄
• 組件規格階段：為頁面的每個區塊（導航欄、Hero區、特性區、CTA區、頁腳等）生成詳細的組件規格文檔，包含精確的樣式值、交互模型、多狀態內容和響應式斷點描述
• 並行構建階段：為每個組件區塊創建獨立的git worktree分支，分配獨立的構建代理並行編碼，各代理相互隔離，互不干擾
• 組裝質檢階段：將所有worktree合併到主分支，組裝完整頁面，重新截圖並與原始截圖進行像素級比對，修復偏差

3.2 理解克隆結果

克隆完成後，項目目錄結構如下（與源項目一致）：

my-clone/
  src/
    app/              # Next.js 路由頁面
    components/       # 生成的React組件
   ui/ # shadcn/ui 基礎組件
      icons.tsx       # 目標網站提取的SVG圖標
    lib/utils.ts      # cn() 工具函數
    types/            # TypeScript 類型定義
    hooks/            # 自定義React Hooks
  public/
    images/           # 從目標網站下載的圖片
    videos/           # 從目標網站下載的視頻
    seo/              # Favicon、OG圖片等SEO資源
  docs/
    research/         # 設計檢測輸出和組件規格文檔
    design-references/ # 原始截圖和視覺參考

啓動開發服務器預覽結果：

npm run dev
# 訪問 http://localhost:3000

3.3 多URL併發克隆

v0.3.0起支持在一條命令中同時克隆多個網站：

/clone-website https://site-a.com https://site-b.com https://site-c.com

每個目標網站獨立走完完整的五階段流水線，最終在各自的輸出目錄中生成獨立項目。多個克隆任務在各自的worktree中並行執行，互不干擾。

4. 功能操作詳解

4.1 偵察階段——設計令牌提取

偵察階段是克隆質量的基礎。AI代理通過Chrome MCP完成三項核心操作：

全頁截圖： 自動滾動捕獲整個頁面（含摺疊部分），保存到 docs/design-references/ 目錄。截圖覆蓋桌面端和移動端兩種視口。

設計令牌提取： 遍歷DOM樹中每個可見元素，通過 getComputedStyle() 獲取：

• 顏色系統：主色、輔色、中性色、語義色，含透明度
• 字體系統：族、粗細、行高、字間距
• 間距系統：padding、margin、gap，識別網格響應斷點
• 視覺效果：陰影、圓角、邊框、漸變、模糊

交互掃描： 觸發並記錄以下交互狀態的表現：

• 懸停效果（hover狀態下的顏色、陰影、位移變化）
• 點擊/激活效果（active/focus-visible狀態）
• 滾動觸發動畫（Intersection Observer驅動的入場效果）
• 下拉菜單和模態框的打開/關閉動畫

4.2 基礎階段——腳手架搭建

基於偵察結果，代理自動完成：

• 將設計令牌寫入 Tailwind CSS v4 配置（使用oklch色彩空間）
• 更新全局CSS變量和 layout.tsx 中的字體聲明
• 批量下載目標網站引用的靜態資源（圖片、視頻、SVG、字體文件）
• 生成SEO基礎文件（favicon、OG圖片、webmanifest）

此階段產出的是一個可運行但尚未填充組件的空頁面框架。

4.3 組件規格階段——設計文檔生成

代理分析截圖和DOM結構，識別頁面各部分邊界，為每個部分生成規格文檔，保存在 docs/research/ 目錄下。每份規格文檔包含：

• 組件在頁面的位置層級（第幾屏、與前後組件的關係）
• 精確的CSS屬性值（直接取自 getComputedStyle()）
• 多狀態交互描述（默認、懸停、激活、加載中、空狀態、錯誤狀態）
• 響應式斷點行為：移動端（<768px）、平板端（768-1024px）、桌面端（>1024px）
• 引用的資源路徑（圖片URL、圖標SVG）

4.4 並行構建階段——多代理協作

這是整個流程中最具特色的階段。代理利用git worktree機制：

1. 為每個待構建的組件區塊創建獨立worktree
2. 在每個worktree中啓動獨立構建代理
3. 各代理根據對應的規格文檔編寫React組件代碼
4. 全部完成後，合併所有worktree到主分支

並行構建的時序流程：

流程執行說明：

• 編排代理根據組件數量創建對應數量的worktree，每個worktree分配一個獨立的構建代理
• 各構建代理互不感知彼此的存在，完全根據各自規格文檔編寫代碼，避免了上下文污染
• 所有構建代理完成後，編排代理依次合併worktree，智能處理可能的命名衝突（如兩個組件引用了相同的工具函數）
• 合併完成後清理所有臨時worktree

4.5 組裝與質檢階段——視覺比對

所有組件合併後進入組裝與質檢環節：

1. 在主頁面中引入所有組件，搭建完整的頁面結構
2. 啓動開發服務器，通過Chrome MCP對生成頁面截取全頁截圖
3. 將生成截圖與偵察階段保存的原始截圖進行像素級比對
4. 自動修復明顯偏差（間距不一致、顏色偏差、字體大小差異）
5. 輸出比對報告，標註剩餘差異供人工審核

質檢通過後，項目即可進行 npm run build 生產構建。

4.6 定製化階段——二次開發

克隆完成後，可以在生成的Next.js項目基礎上進行定製開發。項目內置了 /customize 技能，用於在保留克隆基礎的前提下添加自定義修改。

如果你使用其他代理平台，打開項目根目錄下的 AGENTS.md 文件即可獲得完整的項目上下文和開發指引。

5. 配置與定製

5.1 平台同步機制

項目採用兩源一體的同步機制，支持12種AI代理平台：

修改 AGENTS.md 後運行同步腳本，變更會自動傳播到各平台的指令文件：

bash scripts/sync-agent-rules.sh

修改技能定義後運行：

node scripts/sync-skills.mjs

5.2 代理規則配置

各平台的配置文件和指令文件：

5.3 技能腳本同步

除了 /clone-website 主技能，項目還包含兩個輔助技能：

• /build-from-spec — 根據組件規格文檔單獨構建某個組件
• /customize — 在克隆基礎上進行定製修改

這些技能在 Claude Code 中的定義位於 .claude/skills/ 目錄下。修改後運行 node scripts/sync-skills.mjs 即可同步到其他平台。

5.4 項目結構定製

克隆生成的項目結構可以按需調整。以下配置項可在克隆前修改：

包管理： 修改 package.json 添加或替換依賴包
ESLint規則： 編輯 eslint.config.mjs
TypeScript配置： 編輯 tsconfig.json（默認strict模式）
Next.js配置： 編輯 next.config.ts
Tailwind配置： Tailwind v4通過CSS文件配置設計令牌

6. 使用技巧與最佳實踐

6.1 提高克隆質量

• 選擇內容豐富的目標頁面作為克隆源，包含導航欄、Hero、特性區、CTA、頁腳等完整區塊的頁面會產生更好的克隆效果
• 目標網站避免過度依賴客戶端渲染（CSR），SSR/SSG的頁面更容易被正確分析和重建
• 在良好的網絡環境下運行克隆，避免因資源加載超時導致部分資源缺失
• 克隆後務必運行 npm run check 確認TypeScript和ESLint無誤後再進行二次開發

6.2 多代理協作優化

• 每個worktree構建代理應獲得完整獨立的規格文檔，避免代理之間共享文檔造成上下文混淆
• 複雜頁面（超過10個組件區塊）建議分批克隆，先克隆核心頁面再增量添加子頁面
• 合併worktree時如遇衝突，優先保留與原始設計更接近的版本
• 運行 npm run dev 手動驗證各組件之間的過渡動畫和數據流是否正常

6.3 安全與合規

項目README明確列出以下使用邊界：

• 不得將克隆器用於釣魚、仿冒或冒充他人網站
• 不得將他人設計據為己有並聲稱原創
• 不得違反目標網站的服務條款
• Logo、品牌資產和原創文案版權歸屬於原始所有者
• 生成代碼為MIT協議，但目標網站的視覺設計權仍歸原設計者所有

7. 常見問題與故障排除

7.1 安裝問題

7.2 克隆問題

7.3 Windows 環境特殊處理

v0.3.1修復了Windows下CRLF換行符導致的 sync-agent-rules.sh 腳本運行失敗問題。如果你使用更早的版本，需要手動轉換腳本文件的換行符：

dos2unix scripts/sync-agent-rules.sh

或使用Git配置統一換行符：

git config --global core.autocrlf input

項目已包含 .gitattributes 文件處理跨平台換行符一致性，克隆後無需額外配置。

8. 實戰案例

8.1 WordPress 博客遷移到 Next.js

場景： 將運行在WordPress上的個人博客遷移為純靜態的Next.js站點，提升訪問速度和SEO表現。

操作步驟：

• 確保博客首頁包含導航欄、文章列表、側邊欄、頁腳等完整區塊
• 在項目根目錄啓動Claude Code代理：claude --chrome
• 執行克隆命令：/clone-website https://your-wordpress-blog.com
• 等待五階段流水線完成，生成Next.js項目
• 運行 npm run dev 預覽結果，驗證文章列表和導航功能
• 將WordPress導出的Markdown文章放入 src/content/ 目錄
• 對接Vercel進行部署，獲得SSG生成的靜態博客

預期結果： 獲得一個視覺上與WordPress原站一致、技術上為現代Next.js框架、部署在Vercel邊緣網絡的靜態博客。

8.2 從Webflow導出重建品牌官網

場景： 將Webflow搭建的品牌官網導出為可自行維護的代碼，降低平台訂閲成本。

操作步驟：

• 建議先發布Webflow站點到一個測試域名，確保所有頁面和資源均已公開可訪問
• 執行克隆命令：/clone-website https://webflow-site.webflow.io
• 克隆完成後，檢查 public/images/ 確認所有品牌圖片已下載
• 逐頁對比 docs/design-references/ 中的原始截圖與生成頁面
• 對品牌色、Logo尺寸等關鍵視覺元素做精確微調
• 在生成代碼基礎上添加後端API集成（如聯繫表單、新聞動態）
• 部署到Vercel並配置自定義域名

注意事項： Webflow生成的HTML中可能包含大量冗餘的 data-* 屬性和Webflow特有的CSS類名，克隆器會自動清除這些工件，但如有遺漏可手動在代碼中搜索並刪除。

9. 總結

• ai-website-cloner-template 將網站重建從手工勞動轉變為AI驅動的自動化流程，從設計分析到代碼生成在數分鐘內完成
• 五階段流水線（偵察→基礎→規格→並行構建→質檢）是核心工作流，理解每個階段的作用有助於排查問題和優化結果
• 多URL支持和12平台代理兼容性使其適用於團隊協作和CI/CD集成
• 克隆結果是標準的Next.js 16 + shadcn/ui + Tailwind CSS v4項目，可無縫對接Vercel部署和後續開發
• 遵守使用邊界：克隆器是學習和遷移工具，不得用於侵犯他人知識產權
• 適用場景：平台遷移（WordPress/Webflow/Squarespace → Next.js）、丟失源碼的網站重建、學習分析優秀設計的實現細節。不適用於高度動態的SPA應用、依賴後端API實時數據的頁面、以及包含複雜WebGL/Canvas交互的頁面

參考文獻

[1] JCodesMore/ai-website-cloner-template GitHub倉庫：https://github.com/JCodesMore/ai-website-cloner-template

[2] 項目演示視頻（YouTube）：https://youtu.be/O669pVZ_qr0

[3] 項目社區（Discord）：https://discord.gg/QywUSewMdv