網站逆向工程：單一指令執行
編者手記
一條指令，六階段 pipeline。
輸入
/clone-website <url>後，AI agent 會自動跑完偵測、地基設定、元件規格、平行重建、組裝、QA六階段。中型網站約 8–15 分鐘、消耗 80 萬至 200 萬 input tokens — 過程全自動，使用者只看最終 codebase。14 個 AI Agent 相容，不限定 Claude。
從 Claude Code、Codex CLI、Cursor 到 Aider、Continue、Amazon Q，同一份
AGENTS.md由sync-agent-rules.sh自動同步為 14 種規則檔。README 標註「Claude Code + Opus 4.6 為最佳」，但架構不鎖定單一 IDE。使用邊界在 README 主體明列，非附注。
作者明確列出三個合法情境（平台遷移、原始碼修復、學習）與三個禁區（釣魚、冒充他人、違反 ToS）。Netcraft 已撰文討論同類工具被用於自動化釣魚的風險；README 中的明確聲明是維持採用信任的條件之一。
功能 Capabilities
六項核心能力，涵蓋 pipeline 編排到 visual diff QA，第一次執行 /clone-website 即可觀察到。
功能總覽
FEATURES & CAPABILITIES · CLONE PIPELINE · TOKEN EXTRACTION
排名 01/06
JCodesMore / ai-website-cloner-template — /clone-website/clone-website：六階段 Pipeline
/clone-website <url1> [<url2> ...] 觸發完整逆向工程流程
指令會依序啟動 偵測（Reconnaissance）→ 地基（Foundation）→ 元件規格（Component Specs）→ 平行重建（Parallel Builders）→ 組裝（Assembly）→ QA 六階段。中型網站約 8–15 分鐘完成、消耗 800K – 2M input tokens。可同時餵多個 URL，agent 自動分組調度。
- ✓ 全自動 6 階段
- ★ 14k Stars
- /clone-website
- Multi-URL
- /
- 06
- Phases
- 6 Stages
- Time
- 8–15 min
- Tokens
- 0.8–2M
排名 02
cloner — Reconnaissance & FoundationPhase 1 偵測，Phase 2 地基初始化
將網站結構與設計語彙寫入 docs/research，再執行 build
Phase 01 偵測：抓取 DOM、視覺斷點、互動狀態，產出研究筆記到 docs/research/。Phase 02 地基：依研究結果初始化 Next.js 16 + Tailwind v4 + shadcn/ui 專案骨架，連 oklch 設計 token 都先填好。
- DOM Recon
- docs/research/
- oklch tokens
- Output
- Research notes
- Stack
- Next.js 16
排名 03
cloner — Parallel BuildersGit Worktrees 平行重建各區塊
hero、navbar、pricing、footer 各自分派至獨立 worktree 並行執行
主代理在 Phase 03 完成 component specs 後，Phase 04 將各區塊重建任務分派至獨立 git worktree，多個 builder 並行執行。Phase 05 組裝代理將所有 worktree 合回主分支，縮短整體建置時間。
- Git Worktrees
- Component Specs
- Parallel Dispatch
- Pattern
- Worktree fan-out
排名 04
cloner — Design Token Extraction從 computed CSS 提取設計 token
字體、顏色、spacing、shadow 寫入 Tailwind v4 theme
agent 讀取 computed style 與 web fonts，將其轉換為 oklch 色彩 token、字體配對、spacing scale，並寫入 Tailwind v4 的 @theme。輸出的 codebase 保留原站視覺規格，同時符合新專案的維護慣例。
- computed CSS
- oklch palette
- Tailwind @theme
- Color
- oklch
- Fonts
- Auto-paired
排名 05
cloner — Asset Downloads圖片、影片、favicon、OG 自動下載分類
存入 public/images、public/videos、public/seo，符合 Next.js 慣例
agent 會掃描 hero 影片、產品截圖、icon、social preview，分類存進 public/images/、public/videos/、public/seo/。Lucide React 預設 icon 也會在重建過程被替換成原站的真實 icon 集合。
- images / videos
- favicon / OG
- Lucide swap
- Folders
- 3 buckets
排名 06
cloner — Visual Diff QAVisual Diff 與響應式斷點稽核
Phase 06 執行像素比對與 RWD 行為驗證
QA 階段執行 視覺差異比對（克隆站對原站截圖）、響應式斷點偵測、互動狀態（hover、focus、open）對齊。差異項目回流至對應 builder 修正，形成自動修復迴圈。
- Visual Diff
- Breakpoint Audit
- State Map
- Stage
- Phase 06
- Loop
- Self-heal
安裝 Setup
三行指令完成 template 下載與啟動，支援 Claude Code 至 Aider 共 14 個 AI agent。
安裝與設定
INSTALLATION · NODE 24+ · 14 AI AGENTS
排名 01/06
cloner — quick install三行指令完成初始設定
git clone → npm install → claude --chrome
複製 README 的範例：git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone，cd my-clone，npm install，再 claude --chrome。--chrome 旗標讓 Claude Code 啟動 Playwright DevTools 通道，agent 才能讀網頁的 computed style 與斷點行為。
- ✓ 5 分鐘上手
- git clone
- npm install
- claude --chrome
- /
- 06
- Steps
- 3 Lines
- Setup time
- ~5 min
- License
- MIT
排名 02
cloner — system requirementsNode 24+，新 Next.js 棧為前提
React 19、TypeScript strict、Tailwind v4、shadcn/ui
版本紅線是 Node 24+ — 因為 Next.js 16 對舊 Node 不友善。整個 template 採 App Router、React 19、TypeScript strict、Tailwind v4 oklch tokens、shadcn/ui（Radix + Lucide）。專案結構同時齊備 src/app/、src/components/、src/lib/、docs/research/。
- Node 24+
- Next.js 16
- React 19
- Tailwind v4
- Strict
- TypeScript
- UI
- shadcn/ui
排名 03
cloner — supported agents14 個 AI Agent 相容
單一 SOP 同步為 Claude / Codex / Cursor / Aider 等 14 套規則檔
支援列表：Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider — 共 14 個 agent 平台。README 推薦「Claude Code with Opus 4.6 for best results」。
- Claude Code
- Codex / Cursor
- Aider / Cline
- 14 Total
- Recommended
- Opus 4.6
- Total
- 14 IDEs
排名 04
AGENTS.md / CLAUDE.md / GEMINI.md規則檔由 AGENTS.md 自動同步
AGENTS.md 為唯一真相來源，其餘規則檔由 sync-agent-rules.sh 產生
AGENTS.md 是通用代理的核心 SOP；CLAUDE.md 與 GEMINI.md 由 bash scripts/sync-agent-rules.sh 自動產生，.clinerules、.windsurfrules、.aider.conf.yml 亦同步對齊。修改一處，14 個目標檔案同步更新，維運成本低。
- AGENTS.md (truth)
- sync-agent-rules.sh
- Auto-regen
- Source
- AGENTS.md
- Targets
- 13 files
排名 05
cloner — DockerDocker 雙模式內建
Dockerfile + Dockerfile.dev，docker compose up 即跑
docker compose up app --build 進 production 模式；docker compose up dev --build 進 dev 模式（port 3001）。對 agency 內部交付特別實用 — 設計師、PM 不用裝 Node 也能 review 重建後的網站。
- Dockerfile
- Dockerfile.dev
- port 3001
- Modes
- prod / dev
排名 06
cloner / scripts兩支 sync 腳本管理規則同步
sync-agent-rules.sh + sync-skills.mjs，將規則檔納入 build artifact 管理
bash scripts/sync-agent-rules.sh 將 AGENTS.md 展開至 13 個目標規則檔。node scripts/sync-skills.mjs 將 /clone-website 指令同步至 14 個平台的 skill／command 目錄。v0.3.1 修正 Windows CRLF，跨作業系統不再出現空行差異。
- sync-agent-rules.sh
- sync-skills.mjs
- CRLF safe
- Latest
- v0.3.1
- Fix
- Windows CRLF
進階用法：調整複製流程的六個配置點
進階用法
排名 01
JCodesMore / ai-website-cloner-template · Multi-URL同時輸入多個頁面 URL
在 /clone-website 後面接多個 URL，會被視為同一站台的不同頁面，共用同一份 design tokens 與元件庫。
指令型式為 /clone-website <url1> <url2> <url3>。Skill 會在 recon 階段把這些頁面歸檔到同一個 specs/ 目錄下，避免重複建立按鈕、卡片、navbar；最後輸出的 Next.js app router 會自動把每個 URL 對應到一個 route。適合電商 landing 群組、SaaS 多頁網站、活動 microsite。
- Multi-page
- Shared tokens
- App Router
- 適用
- 站台級複製
- 輸出
- /app/[slug]
排名 02
JCodesMore / ai-website-cloner-template · --chrome flagclaude --chrome 旗標為必要條件
缺少 --chrome 旗標時，DevTools MCP 無法取得 computed styles，oklch 色票抽取將 fallback 為估算值。
啟動 Claude Code 時請改用 claude --chrome，這會讓內嵌的 Chrome DevTools MCP 啟動真實的渲染環境，把字級、行高、border-radius、box-shadow 全部以 computed value 帶出來。如果 token 抽取結果看起來「太通用」，第一個檢查的就是這個旗標。
- DevTools MCP
- Computed styles
- ✓ accuracy
- 指令
- claude --chrome
- 影響
- Token 精準度
排名 03
JCodesMore / ai-website-cloner-template · npm run checknpm run check 作為驗收門檻
npm run check 串接 lint、typecheck、build 三個關卡，是 QA 階段的基本要求。
Skill 在 phase 6 會自動跑一次 npm run check；任何 TypeScript error 或 ESLint error 都會被拋回主對話，讓 Claude 在送交前自我修復。建議把這條指令也接上 GitHub Actions，作為 PR merge 前的 gate。
- CI gate
- Type-safe
- Self-heal
- 階段
- Phase 6 QA
- 退出碼
- 非 0 即重跑
排名 04
JCodesMore / ai-website-cloner-template · Opus 4.6主控代理建議使用 Opus 4.6
README 明確標註「Claude Code with Opus 4.6 for best results」，原因是 phase 4 builders 的並行容錯需求。
六階段 pipeline 中，phase 4 的元件 builders 需在 worktree 並行情境下完成型別推導與 token 對齊；Sonnet 可執行完成，但複雜頁（含 mega-menu 或浮動側欄）容易出現元件邊界錯位。主控設為 Opus 4.6、子代理降為 Sonnet，可在成本與品質間取得平衡。
- Opus 4.6
- Sub-agents
- Cost mix
- 主控
- Opus 4.6
- 子代理
- Sonnet 可用
排名 05
JCodesMore / ai-website-cloner-template · sync scripts用 sync scripts 維護多代理規則一致性
bash scripts/sync-agent-rules.sh 將 AGENTS.md 的內容同步至 CLAUDE.md、GEMINI.md、Cursor rules、Cline rules 等 14 個目標檔案。
維護多 IDE 共用代理規則庫時，修改一次 AGENTS.md 並執行同步，所有支援的代理即取得一致的 system prompt。node scripts/sync-skills.mjs 將 skills/ 子目錄打包至主 SKILL.md，防止資產散落失聯。
- 14 agents
- AGENTS.md
- DRY rules
- 命令
- sync-agent-rules.sh
- 頻率
- 改規則時
排名 06
JCodesMore / ai-website-cloner-template · Docker dev用 Docker 隔離複製環境
內附雙模式 Dockerfile：開發模式監聽 3001，正式模式打包靜態輸出供 nginx 接管。
複製敏感站台時，建議在 Docker dev 模式啟動服務，避免 node_modules、Chrome 快取、抽取的 assets 污染本機環境。docker compose up dev 掛載 worktree 至容器，npm run dev 在 3001 提供熱更新。完成後切換至 prod stage 產出 image。
- Docker
- Port 3001
- Sandbox
- 模式
- dev / prod
- 用途
- 隔離複製環境
實戰 Use Cases
README 列出三個合法用途與三個禁區。本節延伸為六個實際工作場景，含道德邊界說明。
實戰應用
REAL-WORLD WORKFLOWS · WHO ACTUALLY BENEFITS
排名 01/06
cloner — platform migrationWordPress / Webflow / Squarespace 遷移至 Next.js
作者明列的合法用途之一，將自有網站遷移至現代技術棧
既有客戶網站使用 WordPress 或 Webflow，但後續需轉為 headless、接 MCP、部署 Vercel，對現有網站執行 /clone-website <your-site>，可在短時間取得 Next.js 16 codebase。依專案複雜度，可節省 2–4 週的重寫工時。
- ✓ 作者推薦
- CMS Migration
- Headless Move
- 2–4 週工時
- /
- 06
- From
- WP / Webflow
- To
- Next.js 16
- ROI
- 高
排名 02
cloner — lost source recovery原始碼遺失的救援工程
線上版本還活著，但 repo 早已不知去向
前廠商未留 code、員工離職帶走 repo、舊機房硬碟損壞，線上網站仍運作但缺少原始碼。將線上網址輸入 agent，重建現有外觀為可維護的 Next.js codebase，使線上版本恢復為可修改的工程資產。
- 原始碼救援
- Legacy 接手
- 急件
- Scenario
- No source
排名 03
cloner — learning patterns拆解生產級網站的設計與實作
將生產級設計拆解為可閱讀的元件
以 Linear、Vercel、Stripe 等網站為輸入，agent 將版型拆解為 shadcn/ui 元件、動效拆解為 Framer Motion 片段，輸出結構清晰的 codebase，可直接作為學習素材或開發起點。
- Production Patterns
- RWD 拆解
- 教材級代碼
- Output
- Readable
排名 04
cloner — agency pitchAgency 提案前打樣
以客戶現有網站為基礎產出可點擊的 demo，直接在提案會議中展示
提案前對客戶現網執行 /clone-website，以輸出的 Next.js codebase 為基礎加入目標升級項目，提案時展示可互動的 demo 而非靜態文件。適用於需要說明重建能力的 RFP 競標場景。
- Pitch Deck
- Live Demo
- RFP 競標
- Stage
- Pre-sales
排名 05
cloner — design system seeding用 clone 結果餵養 design system
提取的 oklch token 與字體配對作為品牌 token 初始值
既有品牌網站尚未建立正式 design system，對現網執行 clone，agent 萃取的 oklch palette、font stack、spacing scale 可作為 design system 的起始資料。Figma 設計師從可驗證的真實 token 建立規格，而非從估算值開始。
- Brand tokens
- Figma 接軌
- DS 起點
- Seed
- DS tokens
排名 06
cloner — prohibited uses紅線 — 不釣魚、不冒充、不違 ToS
作者在 README 顯眼位置列出三條禁區
README 明列的禁止用途：釣魚或冒充他人、使用他人設計／LOGO／文案、違反目標網站的服務條款。Netcraft 已發文討論同類工具用於自動化釣魚的趨勢。採用本 template 的團隊建議在交付合約中明確說明使用限於合法情境。
- No Phishing
- No Impersonation
- Respect ToS
- Authority
- README
- External
- Netcraft
社群採用：六個外部觀察點
社群觀察
排名 01/06
Trendshift · #24302 · trending repo發布兩週後收錄至 Trendshift #24302
Trendshift 將其列為 GitHub 趨勢追蹤頁的持續追蹤項目，是外部最早確認的傳播訊號。
Trendshift 演算法綜合 star velocity、討論密度與外部反向連結，將 JCodesMore/ai-website-cloner-template 收錄為第 24302 號條目。社群評論中多次提及其與 Anthropic 官方推廣的 /clone-website workflow 的關聯。
- ★ Trending
- 2026 Q2
- ✓ verified
- /
- 06
- 平台
- Trendshift
- 編號
- #24302
- 類型
- Trending tracker
Editor's choice
排名 02
pasqualepillitteri.it · 2026/04/28 newsroom義大利科技媒體報導：兩週 13,000 Stars
Pasquale Pillitteri 的科技週報以「AI Website Cloner: the Claude Code Skill that hit 13,000 stars in 2026」為標題進行深度解析。
文章重點放在 phase 1 recon 的精準度，與 phase 4 builders 的並行 worktree 機制；並把它定位成「設計師反向工程友善網站」的標準工具。本文同時是少數明確指出 必須搭配 --chrome 旗標 的外部報導。
- Newsroom
- 2026/04/28
- Italy
- 作者
- Pasquale Pillitteri
- 語言
- English
排名 03
INCRYPTED · 上手教學INCRYPTED：從零到部署的 step-by-step 教學
烏克蘭科技媒體 INCRYPTED 發布從安裝到 Vercel 部署的完整教學，定位為新手友善的入門指南。
教學涵蓋 Node 24 安裝、claude --chrome 啟動、第一次跑 /clone-website、Vercel 一鍵部署。文章特別點名 phase 6 的 visual diff 截圖在說服客戶接受成果時極為有效，並提供完整成本拆解。
- Tutorial
- Vercel deploy
- Beginner
- 媒體
- INCRYPTED
- 類型
- Step-by-step
排名 04
Netcraft Blog · 安全研究觀點Netcraft：指出工具可能被用於釣魚的安全研究
英國資安公司 Netcraft 將 ai-website-cloner-template 列入「自動化品牌冒用」範例分析，指出其用於 phishing 的風險。
文章呼籲品牌方部署 visual fingerprinting 與 brand monitoring，並說明 Skill README 已明列禁止用途，但技術防線仍有必要。計劃導入複製功能的工作室，建議閱讀此文以了解合規邊界。
- Security
- Phishing risk
- Compliance
- 媒體
- Netcraft
- 立場
- Critical
排名 05
SkillsLLM · 聚合器收錄SkillsLLM 在 Frontend 分類首頁收錄
Claude Skill 聚合器 SkillsLLM 將 ai-website-cloner-template 列於 Frontend 分類首頁，提供一鍵安裝指令。
條目顯示 README 預覽、安裝指令、使用案例與 Star 趨勢圖。Skill 進入目錄層後，外部使用者可直接透過聚合器找到，不需依賴 GitHub 搜尋。對以 Skill 為主軸的推廣策略而言，此類收錄是有效曝光管道。
- Aggregator
- SEO surface
- 站台
- SkillsLLM
- 分類
- Frontend
排名 06
Mood-Global-Services / How-to-Clone-Website---Claude-Skills代理商的衍生封裝範例
Mood Global Services 將 Skill 封裝為客戶教學文件，加入內部品牌守則與專案 hand-off 範本。
此衍生倉庫展示了 Skill 在代理商情境的雙層封裝做法：上層為客戶閱讀的教學頁，下層為 Skill 原始檔。說明 ai-website-cloner-template 已被有實際接案需求的工作室納入標準資產，而非停留於 demo 用途。
- Derivative
- Agency wrapper
- 擁有者
- Mood Global
- 類型
- Fork / wrapper
將 ai-website-cloner-template 整合至工作流程
行動計畫
ai-website-cloner-template 是可整合進工作室、產品團隊或設計部門的可執行工序。以下四種配置，依角色選擇適合的起點。
01 · 代理商 · Agency Owner
在提案階段輸出可互動的 demo
在 RFP 階段複製客戶現有站點，展示 Next.js 16 + Tailwind v4 重寫成果，以可點擊的 demo 取代靜態文件。記得加上 --chrome 旗標，並以 phase 6 的 visual diff 截圖作為交付佐證。將 README 禁止用途整理為內部合規檢查表。
02 · 獨立開發者 · Indie Builder
用三行指令初始化下一個專案
git clone → npm install → claude --chrome，接著執行 /clone-website <url>。以目標網站為輸入，數分鐘內取得附帶 design tokens 的 Next.js 16 codebase 作為開發起點。
03 · 遷移團隊 · Replatform Squad
WordPress / Webflow 遷移至 Next.js 的工序
大型 CMS 站點需遷移至 Next.js 14/15/16，將各頁 URL 以多頁模式輸入 /clone-website，design tokens 統一收斂至 app/ 結構。Skill 不處理 CMS 接線，CMS 整合部分需另行規劃，但網站外觀層的重建可由 Skill 完成。
04 · 設計負責人 · Design Lead
以真實網站的 token 建立設計系統基準
選取 5–10 個參考網站，執行 phase 1–3 取得 design tokens 與元件清單，作為內部 Design System 的初始資料。與 frontend-design、shadcn/ui MCP 串接後，可縮短從 Figma 規格到 production 的實作距離。