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

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

Skills Atlas — 單一倉庫深讀網站逆向工程 Skill：/clone-website 六階段 pipeline，六週 14,000 Stars。

JCodesMore/ai-website-cloner-template 將網站逆向工程的完整流程，包括偵測、token 提取、元件規格、平行重建、組裝與 QA，整合為單一 /clone-website 指令。指定目標 URL 後，AI agent 自動執行六階段 pipeline，產出 Next.js 16 + Tailwind v4 + shadcn/ui codebase。本文拆解其工作流、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 Stars 的 pipeline。

一條指令，六階段 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 中的明確聲明是維持採用信任的條件之一。

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

功能 Capabilities

六項核心能力，涵蓋 pipeline 編排到 visual diff QA，第一次執行 /clone-website 即可觀察到。

6 Entries
Pipeline · Tokens · QA
Verified May 2026

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

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

cloner — Reconnaissance & Foundation

Phase 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

cloner — Parallel Builders

Git 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

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

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 修正，形成自動修復迴圈。

Visual Diff Breakpoint Audit State Map

Stage Phase 06 Loop Self-heal

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

安裝 Setup

三行指令完成 template 下載與啟動，支援 Claude Code 至 Aider 共 14 個 AI agent。

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

規則檔由 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

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

同時輸入多個頁面 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

npm 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

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

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 隔離複製環境

內附雙模式 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 列出三個合法用途與三個禁區。本節延伸為六個實際工作場景，含道德邊界說明。

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 週的重寫工時。

✓ 作者推薦 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 等網站為輸入，agent 將版型拆解為 shadcn/ui 元件、動效拆解為 Framer Motion 片段，輸出結構清晰的 codebase，可直接作為學習素材或開發起點。

Production Patterns RWD 拆解教材級代碼

Output Readable

cloner — agency pitch

Agency 提案前打樣

以客戶現有網站為基礎產出可點擊的 demo，直接在提案會議中展示

提案前對客戶現網執行 /clone-website，以輸出的 Next.js codebase 為基礎加入目標升級項目，提案時展示可互動的 demo 而非靜態文件。適用於需要說明重建能力的 RFP 競標場景。

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 可作為 design system 的起始資料。Figma 設計師從可驗證的真實 token 建立規格，而非從估算值開始。

Brand tokens Figma 接軌 DS 起點

Seed DS tokens

cloner — prohibited uses

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

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

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 號條目。社群評論中多次提及其與 Anthropic 官方推廣的 /clone-website workflow 的關聯。

★ Trending 2026 Q2 ✓ verified

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

INCRYPTED · 上手教學

INCRYPTED：從零到部署的 step-by-step 教學

烏克蘭科技媒體 INCRYPTED 發布從安裝到 Vercel 部署的完整教學，定位為新手友善的入門指南。

教學涵蓋 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 在 Frontend 分類首頁收錄

Claude Skill 聚合器 SkillsLLM 將 ai-website-cloner-template 列於 Frontend 分類首頁，提供一鍵安裝指令。

條目顯示 README 預覽、安裝指令、使用案例與 Star 趨勢圖。Skill 進入目錄層後，外部使用者可直接透過聚合器找到，不需依賴 GitHub 搜尋。對以 Skill 為主軸的推廣策略而言，此類收錄是有效曝光管道。

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

/clone-website：六階段 Pipeline

Phase 1 偵測，Phase 2 地基初始化

Git Worktrees 平行重建各區塊

從 computed CSS 提取設計 token

圖片、影片、favicon、OG 自動下載分類

Visual Diff 與響應式斷點稽核

安裝 Setup

三行指令完成初始設定

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

14 個 AI Agent 相容

規則檔由 AGENTS.md 自動同步

Docker 雙模式內建

兩支 sync 腳本管理規則同步

進階用法：調整複製流程的六個配置點

同時輸入多個頁面 URL

claude --chrome 旗標為必要條件

npm run check 作為驗收門檻

主控代理建議使用 Opus 4.6

用 sync scripts 維護多代理規則一致性

用 Docker 隔離複製環境

實戰 Use Cases

WordPress / Webflow / Squarespace 遷移至 Next.js

原始碼遺失的救援工程

拆解生產級網站的設計與實作

Agency 提案前打樣

用 clone 結果餵養 design system

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

社群採用：六個外部觀察點

發布兩週後收錄至 Trendshift #24302

義大利科技媒體報導：兩週 13,000 Stars

INCRYPTED：從零到部署的 step-by-step 教學

Netcraft：指出工具可能被用於釣魚的安全研究

SkillsLLM 在 Frontend 分類首頁收錄

代理商的衍生封裝範例

將 ai-website-cloner-template 整合至工作流程

在提案階段輸出可互動的 demo

用三行指令初始化下一個專案

WordPress / Webflow 遷移至 Next.js 的工序

以真實網站的 token 建立設計系統基準

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

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