Skills Atlas · ai-website-cloner-template 使用說明書

Open Source Deep Dive · JCodesMore/ai-website-cloner-template

Skills Atlas — 單一倉庫深讀把任何網站一鍵 Clone
進 Next.js 16。
六週 14,000 Stars 的 Claude Code Skill。

JCodesMore/ai-website-cloner-template 把整個網站逆向工程的流程——偵測、token 提取、元件規格、平行重建、組裝與 QA——壓進一條 /clone-website 指令。指目標 URL，AI agent 自動跑完六階段 pipeline，產出乾淨的 Next.js 16 + Tailwind v4 + shadcn/ui codebase。Tenten 把它的工作流、CLI、實戰場景與道德邊界一次拆解。

GitHub Stars

14k ★

2026 年 3 月底發布，六週內爆衝至 14k Stars，Trendshift 排行榜常駐。

Forks

2.1k forks

社群派生數爆量，被多個工作室與顧問公司納為內部 boilerplate。

技術棧

Next.js 16

App Router · React 19 · TypeScript strict · Tailwind v4 · shadcn/ui。

授權與版本

MIT · v0.3.1

最新 release 為 Windows CRLF 規則同步修正，於 2026 年 5 月驗證。

01 / 編者手記 FROM THE EDITOR · MAY 2026 · WEBSITE CLONER DEEP READ

把網站逆向工程壓成一條指令。

編者手記 EDITOR'S NOTE

ai-website-cloner-template 並不發明新模型，也不靠新演算法。它的天才在於 — 把整段「人會做的事」變成 SOP，再把 SOP 變成 /command。一個 6,000 字的 SKILL.md，承載了 14,000 顆星。

一條指令，六階段 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 已撰文討論「同類工具被用於自動化釣魚」的時刻，這份顯眼的紅線聲明，正是高 Stars 卻能維持公信力的關鍵。

02 / 功能總覽 FEATURES & CAPABILITIES · CLONE PIPELINE · TOKEN EXTRACTION

功能 Capabilities

六個你會在第一次跑 /clone-website 就感受到的核心能力 — 從 pipeline 編排到 visual diff QA。

6 Entries
Pipeline · Tokens · QA
Verified May 2026

01^/06

JCodesMore / ai-website-cloner-template — /clone-website

一條指令，六階段 Pipeline

/clone-website <url1> [<url2> ...] 一發指令，AI 跑完整段逆向工程

指令會依序啟動 偵測（Reconnaissance）→ 地基（Foundation）→ 元件規格（Component Specs）→ 平行重建（Parallel Builders）→ 組裝（Assembly）→ QA 六階段。中型網站約 8–15 分鐘完成、消耗 800K – 2M input tokens。可同時餵多個 URL，agent 自動分組調度。

✓ 全自動 6 階段 ★ 14k Stars /clone-website Multi-URL

Phases 6 Stages Time 8–15 min Tokens 0.8–2M

cloner — Reconnaissance & Foundation

先偵測，再放地基

把網站結構與設計語彙寫進 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

cloner — Parallel Builders

Git Worktrees 平行重建多區塊

把 hero、navbar、pricing、footer 分派到不同 worktree 同時跑

主代理在 Phase 03 寫好 component specs 後，Phase 04 把每個區塊的重建任務派給獨立 git worktree，多個 builder 平行展開。最後 Phase 05 組裝代理把所有 worktree 合回主分支，手寫無法達到的 throughput。

Git Worktrees Component Specs Parallel Dispatch

Pattern Worktree fan-out

cloner — Design Token Extraction

把計算過的 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

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

cloner — Visual Diff QA

Visual Diff +響應式斷點稽核

Phase 06 自動跑像素比對與 RWD 行為驗證

QA 階段同時跑 視覺差異比對（克隆站對原站截圖）、響應式斷點偵測、互動狀態（hover、focus、open）對齊。失敗的差異會回流到對應 builder 修正，整段過程像一條會自我修復的 CI。

Visual Diff Breakpoint Audit State Map

Stage Phase 06 Loop Self-heal

03 / 安裝與設定 INSTALLATION · NODE 24+ · 14 AI AGENTS

安裝 Setup

三行指令把 template clone 下來、跑起來，並選擇你慣用的 AI agent — 從 Claude Code 到 Aider 全部支援。

6 Entries
Node 24+ · 14 Agents
Cross-Platform

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

Steps 3 Lines Setup time ~5 min License MIT

cloner — system requirements

Node 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

cloner — supported agents

14 個 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

AGENTS.md / CLAUDE.md / GEMINI.md

三份規則檔由 SOP 自動同步

AGENTS.md 是真相，其他兩份由 sync-agent-rules.sh 重生

AGENTS.md 是給通用代理的核心 SOP；CLAUDE.md 與 GEMINI.md 由 bash scripts/sync-agent-rules.sh 自動再生，連 .clinerules、.windsurfrules、.aider.conf.yml 都跟著對齊。修一處、十四處同步 — 維運成本壓到極低。

AGENTS.md (truth) sync-agent-rules.sh Auto-regen

Source AGENTS.md Targets 13 files

cloner — Docker

Docker 雙模式內建

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

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

04 / 進階用法 POWER-USER PATTERNS · CLI · CHAIN-WITH

把複製流程，調成自己的節奏。

JCodesMore / ai-website-cloner-template · Multi-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

JCodesMore / ai-website-cloner-template · --chrome flag

claude --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

JCodesMore / ai-website-cloner-template · npm run check

把 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

JCodesMore / ai-website-cloner-template · Opus 4.6

主控請用 Opus 4.6。

README 明確點名「Claude Code with Opus 4.6 for best results」——這不是廣告，是 phase 4 builders 的容錯需求。

六階段管線中，phase 4 的元件 builders 必須在 worktree 並行情境下做型別推導與 token 對齊；Sonnet 雖然能跑完，但複雜頁（含 mega-menu 或浮動側欄）容易在元件邊界對不齊。實務上把主控設成 Opus 4.6，子代理可降為 Sonnet，是成本與品質的甜蜜點。

Opus 4.6 Sub-agents Cost mix

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

JCodesMore / ai-website-cloner-template · Docker dev

用 Docker 隔離複製環境。

Skill 內附雙模式 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

05 / 實戰應用 REAL-WORLD WORKFLOWS · WHO ACTUALLY BENEFITS

實戰 Use Cases

README 列了三條合法路、三條紅線。Tenten 把它擴成六個工作室真會用上的場景，含一條道德邊界。

6 Entries
Migration · Rescue · Learn
Author-Sanctioned

01^/06

cloner — platform migration

WordPress / Webflow / Squarespace 遷移至 Next.js

作者明列的「正當用途」之首 — 把自家網站搬到現代棧

既有客戶網站綁在 WordPress 或 Webflow，但團隊未來要走 headless、要接 MCP、要部署 Vercel — 對著現有網站跑 /clone-website <your-site>，一晚得到乾淨的 Next.js 16 codebase。節省 2–4 週的重寫工時，是中型 agency 最高 ROI 的場景。

✓ 作者推薦 CMS Migration Headless Move 2–4 週工時

From WP / Webflow To Next.js 16 ROI 高

cloner — lost source recovery

原始碼遺失的救援工程

線上版本還活著，但 repo 早已不知去向

前廠商不留 code、員工離職帶走 repo、舊機房硬碟壞掉 — 線上網站還健在但沒源碼可改。把線上網址餵進去，agent 把現有外觀重建成可維護的 Next.js codebase，等於把網站從只能看的鏡像變回能改的工程資產。

原始碼救援 Legacy 接手急件

Scenario No source

cloner — learning patterns

學習頂尖網站的設計與實作

把生產級設計拆成可閱讀的元件

想學「Linear、Vercel、Stripe 這類網站怎麼做出那種感覺」 — 跑一輪 clone，agent 會把版型拆成 shadcn/ui 元件、把動效拆成 Framer Motion 片段。結果是教材級的乾淨 codebase，比看完十支 YouTube 教學更直接。

Production Patterns RWD 拆解教材級代碼

Output Readable

cloner — agency pitch

Agency 提案前打樣

用客戶現有網站做出「升級版」的 mock，會議直接秀

提案會議前對客戶現網跑 /clone-website，得到乾淨的 Next.js 版本當基礎，再加上你想升級的版型／互動，提案時直接放可點擊的 demo 而不是 PDF。對中型品牌的 RFP 競標特別致命 — 跟你競爭的對手還在 PowerPoint。

Pitch Deck Live Demo RFP 競標

Stage Pre-sales

cloner — design system seeding

用 clone 結果餵養 design system

提取出來的 oklch token、字體配對直接成為品牌 token 起點

既有品牌網站從未建立過正式 design system？把現網跑一輪 clone，agent 萃取出的 oklch palette、font stack、spacing scale 自然成為起點 — Figma 設計師可以從可驗證的真實 token 反推 design system，而非從零猜起。

Brand tokens Figma 接軌 DS 起點

Seed DS tokens

cloner — prohibited uses

紅線 — 不釣魚、不冒充、不違 ToS

作者在 README 顯眼位置列出三條禁區

禁止用途：釣魚或冒充他人、把別人的設計／LOGO／文案當自己的、違反目標網站的服務條款。Netcraft 已撰文討論「同類工具被用於自動化釣魚」的趨勢；採用本 template 的團隊應在交付合約裡明確聲明只用於合法情境。

No Phishing No Impersonation Respect ToS

Authority README External Netcraft

06 / 社群觀察 TRENDSHIFT · NEWSROOM · AGGREGATORS · DERIVATIVES

這把複製刀，社群怎麼用？

01^/06

Editor's choice

Trendshift · #24302 · trending repo

兩週內衝上 Trendshift #24302。

Trendshift 把它列為 GitHub 趨勢追蹤頁的常駐成員，是外部最早確認的傳播訊號。

Trendshift 的演算法綜合 star velocity、討論密度與外部反向連結，把 JCodesMore/ai-website-cloner-template 列入 24302 號條目。社群評論集中在「終於有 production-ready 的網站複製範本」，並把 Skill 與 Anthropic 官方推廣的 /clone-website workflow 連結在一起。

★ Trending 2026 Q2 ✓ verified

pasqualepillitteri.it · 2026/04/28 newsroom

義大利媒體：「13,000 顆星只用兩週」。

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

INCRYPTED · 上手教學

INCRYPTED：「三行指令，半小時上線。」

烏克蘭科技媒體 INCRYPTED 寫了一篇從零到部署的教學，把這條 Skill 設定成新手友善的 onboarding 範本。

教學涵蓋 Node 24 安裝、claude --chrome 啟動、第一次跑 /clone-website、Vercel 一鍵部署。文章特別點名 phase 6 的 visual diff 截圖在說服客戶接受成果時極為有效，並提供完整成本拆解。

Tutorial Vercel deploy Beginner

Netcraft Blog · 安全研究觀點

Netcraft：複製刀也是釣魚刀，必看。

英國資安公司 Netcraft 直接把 ai-website-cloner-template 列入「自動化品牌冒用」的範例分析，提醒它有可能成為 phishing 範本工廠。

這篇博客文呼籲品牌方主動部署 visual fingerprinting 與 brand monitoring，並指出 Skill README 已經明確列出禁止用途，但社群仍需要技術防線。對任何要上線複製功能的工作室，這是必讀的紅線文件。

Security Phishing risk Compliance

SkillsLLM · 聚合器收錄

SkillsLLM 把它放進首頁精選。

Claude Skill 聚合器 SkillsLLM 把 ai-website-cloner-template 放在 Frontend 分類首頁，並提供一鍵安裝指令。

SkillsLLM 的條目同步顯示 README 預覽、安裝指令、使用案例、Star 趨勢圖。這代表 Skill 正在進入「目錄階層」，外部使用者不再需要 GitHub 搜尋就能找到。對於想以 Skill 為主軸做 SEO 的維運者，這是重要曝光通道。

Aggregator SEO surface

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

想把複製刀變成正式工序？

Skill 已經開源。
接上真正交付這一段，
是 Tenten 在做的事。

Tenten 是 AI-First 設計與技術顧問公司。我們把 Claude、MCP、Next.js 16、Headless CMS 接進你的網站重生案：用 ai-website-cloner-template 起手，再用我們的設計系統、CMS 接線、上線流程把它推到 production。讓「複製」只是一個 sprint 0，不是專案的全部。

預約 30 分鐘諮詢 → Tenten Awesome List

Tenten 如何把 Cloner 接進生產線

Replatform Sprint

用 Cloner 拆解既有站點，導入 Next.js 16 + Tailwind v4 + Headless CMS 的新工序。

Design Tokens Audit

phase 1–3 的 oklch tokens 進到 Figma & Storybook，建立可治理的設計系統。

Brand Safety Review

把 Netcraft 提到的品牌冒用風險變成內部紅線，Cloner 只用在合法情境。

把網站逆向工程壓成一條指令。

一條指令，六階段 pipeline。

14 個 AI Agent 通吃，不獨佔 Claude。

道德邊界寫在 README，不是腳註。

功能 Capabilities

一條指令，六階段 Pipeline

先偵測，再放地基

Git Worktrees 平行重建多區塊

把計算過的 CSS 變成 token

圖片、影片、favicon、OG 全自動下載

Visual Diff +響應式斷點稽核

安裝 Setup

三行指令啟動全棧

Node 24+，新 Next.js 棧為前提

14 個 AI Agent 通吃

三份規則檔由 SOP 自動同步

Docker 雙模式內建

兩支 sync 腳本維運核心

把複製流程，調成自己的節奏。

一次喂入多個頁面。

claude --chrome 是必要的。

把 check 變成驗收線。

主控請用 Opus 4.6。

用 sync scripts 同步多代理規則。

用 Docker 隔離複製環境。

實戰 Use Cases

WordPress / Webflow / Squarespace 遷移至 Next.js

原始碼遺失的救援工程

學習頂尖網站的設計與實作

Agency 提案前打樣

用 clone 結果餵養 design system

紅線 — 不釣魚、不冒充、不違 ToS

這把複製刀，社群怎麼用？

兩週內衝上 Trendshift #24302。

義大利媒體：「13,000 顆星只用兩週」。

INCRYPTED：「三行指令，半小時上線。」

Netcraft：複製刀也是釣魚刀，必看。

SkillsLLM 把它放進首頁精選。

代理商級的衍生分支。

把複製刀，磨成自家的工序

把它變成提案階段的殺手鐧

用三行指令啟動下一個專案

從 WordPress / Webflow 到 Next.js 的最短路徑

用真實網站餵養設計系統

Skill 已經開源。 接上 真正交付這一段， 是 Tenten 在做的事。

Skill 已經開源。
接上真正交付這一段，
是 Tenten 在做的事。