AI 網站複製器模板

1. 專案概覽

ai-website-cloner-template 是一個開源的 GitHub 模板，讓 AI 編碼代理只需一個目標 URL，就能將任何現有網站重建為乾淨、現代的 Next.js 應用程式——解決了無需手動逆向工程其標記、樣式和資產即可重建網站 UI 的問題。

2. 背景與定位

此專案的建立是為了將「複製這個網站」從耗時數日的手動逆向工程任務，轉變為引導式、高度自動化的 AI 工作流程。與其讓開發者手動複製 HTML/CSS、尋找字型和圖示、並目測像素差異，此模板封裝了一個可重複的五階段流程——偵察、基礎建設、元件規格、平行建置和品質保證——由 AI 代理逐步執行，產出結構化、型別安全的 Next.js 程式碼庫，而非一次性抓取的靜態快照。

與一般的網頁抓取或「下載此頁面」工具相比，此專案不僅僅是捕捉靜態 HTML——它驅動 AI 代理進行設計代碼提取（字型、顏色、斷點）、資產下載（圖片、影片、SVG 圖示），以及使用 TypeScript 搭配 shadcn/ui 和 Tailwind CSS 進行元件層級的重建，然後透過與原始網站的視覺比對來驗證結果。它也是代理無關的，對 Claude Code 提供一級支援，並為其他十多種 AI 編碼代理提供設定，而非綁定於單一廠商的工具。

3. 功能類別

🔍 偵察工具 — 3 項核心能力：全頁截圖捕捉、設計代碼提取、互動/狀態對應。目的：在撰寫任何程式碼之前，建立對來源網站的準確理解。
🏗️ 基礎建設 — 涵蓋字型和顏色設定、全域 Tailwind/Next.js 設定，以及大量資產下載（圖片、影片、SVG）。目的：建立後續元件建置所依賴的基礎專案架構。
🧩 元件規格 — 為每個元件產生包含計算後 CSS 值、響應式狀態和互動行為的文件。目的：為建置階段提供明確、機器可讀的規格以供實作。
⚙️ 平行建置 — 將元件建置分散到隔離的 git worktree 中，以便 UI 的多個部分可以同時實作。目的：加速大型、多元件網站的重建。
✅ 組裝與品質保證 — 整合已建置的元件，並與原始網站進行視覺比對。目的：在複製被視為完成之前，捕捉版面、間距和樣式上的回歸問題。

4. 重點特色

AI 代理驅動的流程 — 結構化的五階段流程（偵察 → 基礎 → 規格 → 建置 → 品質保證）以可重複的工作流程取代臨時的手動複製。
多代理相容性 — 可與 Claude Code（建議搭配 Opus 等級模型）、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro 和 OpenCode 搭配使用。
現代化、型別安全的輸出 — 產出 Next.js 16 + React 19 + TypeScript（嚴格模式）程式碼庫，而非原始抓取的 HTML。
設計系統保真度 — 將真實的設計代碼（字型、顏色、斷點）提取到 Tailwind CSS v4 中，使用 oklch 色彩值，並在 shadcn/ui + Radix 原語上建置 UI。
自動化資產處理 — 自動下載圖片和影片並提取 SVG 圖示，並以 Lucide React 作為任何遺失預設圖示的後備。
視覺比對驗證 — 品質保證階段將完成的複製與原始網站進行比較，以驗證準確性，而非依賴目測。

5. 依角色劃分的使用案例

一般開發者 — 快速建立現有網站設計的現代化、可維護的 Next.js 版本，而非從零開始建置版面。
專案經理 / 技術負責人 — 評估將舊版網站遷移到當前技術棧（Next.js、TypeScript、Tailwind），並透過更快、結構化的概念驗證路徑進行。
學生 / 自學者 — 透過讓代理將生產環境網站拆解為可檢查的元件，來研究其如何實作特定的版面、動畫和響應式行為。

（不直接適用於 DevOps/SRE、安全工程或資料/研究科學工作流程，因此省略。）

6. 開始使用

找到你需要的內容 — 閱讀 README 以及在執行偵察階段後於 docs/research/ 下產生的文件，以了解提取輸出和元件規格。

安裝 / 整合

# 1. 在 GitHub 上點擊「Use this template」來建立你自己的儲存庫，然後：
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install

# 2. 啟動 AI 編碼代理（以 Claude Code 為例，--chrome 啟用瀏覽器存取）
claude --chrome

# 3. 在代理工作階段中執行複製技能
/clone-website <target-url>

# 日常腳本
npm run dev     # 啟動開發伺服器
npm run build   # 生產建置
npm run check   # 合併執行 lint、型別檢查和建置

貢獻 — 複製（fork）儲存庫，在功能分支上進行變更，並依照專案 MIT 授權、開放貢獻的模式，對 JCodesMore/ai-website-cloner-template 開啟拉取請求（pull request）。

7. 專案結構

src/
  app/              # Next.js 路由
  components/       # React/TypeScript UI 元件
  hooks/, types/, utils/
public/
  images/, videos/  # 下載的網站資產
  seo/              # SEO 相關資產
docs/
  research/         # 偵察輸出與元件規格
.cline/ .kiro/ .roo/ # 特定平台的 AI 代理設定

關鍵項目：docs/research/ 存放偵察和規格階段產出的工件（截圖、設計代碼、元件規格），供後續階段使用；平台特定的點目錄（.cline/、.kiro/、.roo/ 等）讓同一個模板可以由不同的 AI 編碼代理驅動，而無需更改核心專案。

8. 相關生態系

上游依賴：Next.js 16、React 19、TypeScript、Tailwind CSS v4、shadcn/ui、Radix UI 原語、Lucide React 圖示、Node.js 24+。
可整合的 AI 編碼代理：Claude Code、Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro、OpenCode。
互補用途：複製完成後，可自然地與標準的 Next.js 部署平台（例如 Vercel）搭配使用。

9. 授權

MIT 授權。

✅ 可自由使用、複製、修改、合併、發布和散布此程式碼，包括用於商業專案。
✅ 使用此模板遷移你自己的舊版網站，或學習網站是如何建置的。
❌ 請勿將此工具用於欺騙目的、冒充他人或任何違法活動——專案指南明確禁止此類行為。
ℹ️ MIT 按「現況」提供軟體，不附帶任何保證；在重新散布的副本中，需保留原始授權和版權聲明。

10. 常見問題

問：使用此工具需要付費的 AI 編碼代理訂閱嗎？
答：你需要能存取受支援的 AI 編碼代理（建議使用 Claude Code，並搭配 Opus 等級模型）；其他大多數受支援的代理，如 Cursor 或 Gemini CLI，也都可以使用，各自有其定價方案。

問：如果我只是想要一個靜態副本，而不是完整的 Next.js 重建呢？
答：此模板專門設計用於輸出結構化的 Next.js/TypeScript 程式碼庫，而非靜態 HTML 快照——如果你只需要原始 HTML，更簡單的抓取工具可能更適合。

問：使用此工具複製任何網站是否合法？
答：你需對所複製內容的合法性負責；此專案明確禁止欺騙或冒充用途，因此請僅複製你擁有、獲得許可或用於個人學習的網站。

問：我應該查看哪個目錄來了解 AI 代理提取了什麼？
答：在偵察階段後查看 docs/research/——其中包含後續建置階段使用的設計代碼、截圖和元件規格。

問：我可以使用 Claude Code 以外的代理嗎？
答：可以——此模板內建了十多種代理的設定（Codex CLI、Cursor、Windsurf、Gemini CLI、GitHub Copilot 等），不過 Claude Code 搭配 Opus 等級模型是建議的組合。

11. 快速連結

儲存庫：https://github.com/JCodesMore/ai-website-cloner-template
授權：MIT（請參閱儲存庫中的 LICENSE 檔案）
貢獻：對儲存庫的預設分支開啟拉取請求
社群/討論：使用儲存庫的 GitHub Issues/Discussions 標籤

12. 總結

ai-website-cloner-template 將網站複製轉變為結構化、由 AI 代理驅動的流程，輸出現代化、型別安全的 Next.js 程式碼庫，而非抓取的 HTML 傾印。它對於將舊版網站遷移到當前技術棧的開發者和團隊、復原已部署網站的原始碼，或研究生產環境版面如何建置的人來說最有價值——任何想要忠實、可維護的重建，而無需手動逆向工程每個元件的人。