兩萬顆星開源利器，直接克隆一個網站
整理版優先睇
用AI逆向工程直接克隆網站，5-10分鐘出一個完整Next.js項目
呢篇文章介紹咗一個叫 ai-website-cloner-template 嘅開源工具，由 JCodesMore 開發，2026年3月首發，而家到 v0.3.1，技術棧係 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4。作者想解決嘅問題係：以前要手撕 HTML、扒 CSS、下載圖片、寫一堆代碼，搞成個禮拜；而家用呢個工具，一句命令 /clone-website 加個 URL，AI 就會自動逆向工程，5-10 分鐘出一個完整嘅 Next.js 項目。
整體結論係：呢個工具係學習優秀網站設計同技術棧遷移嘅神器，但同時要警惕法律風險——克隆網站係雙刃劍，用錯地方會侵權。作者強調合法場景包括自己網站遷移、學習設計、恢復源碼；灰色或違法場景就要避免。適合獨立開發者、創業團隊、前端學習者，唔適合想一鍵複製商業網站上線或唔識 AI 編程助手嘅人。
文章仲詳細講咗 AI 點樣逆向工程：用 Puppeteer 喺三個視口截圖、用 getComputedStyle() 抓 CSS 變量、模擬交互、下載資源、拆區塊，仲有並行多個 builders 一齊寫代碼。最後提醒要從 GitHub 主頁點「Use this template」複製，唔好直接 clone 主倉庫，避免被濫用。
- 一句命令 /clone-website 加 URL，AI 自動逆向工程，5-10 分鐘出完整 Next.js 項目
- 技術棧係 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4，MIT 協議免費
- AI 唔係單純複製貼上，而係讀懂網站、拆解組件、重建結構，並行多個 builders 寫代碼
- 工具係雙刃劍：合法場景包括網站遷移、學習設計、恢復源碼；商業克隆有侵權風險
- 適合獨立開發者、創業團隊、前端學習者；唔適合唔識 AI 編程助手或想違法克隆嘅人
ai-website-cloner-template
GitHub 開源項目，兩萬顆星，MIT 協議，用 AI 驅動嘅網站逆向工程腳手架
一句命令，AI 幫你逆向成 Next.js
ai-website-cloner-template
呢個開源工具由 JCodesMore 開發，2026年3月首發，而家到 v0.3.1，技術棧係 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4，仲有兩萬顆星，MIT 協議免費。
/clone-website
https://你要克隆嘅網站.comAI 接到 URL 之後，就會自動開始逆向工程，唔使你手動寫任何代碼。
5-10 分鐘出一個完整 Next.js 項目
AI 點樣逆向工程？
AI 唔係簡單嘅複製貼上，而係真正讀懂網站，拆解組件，重建結構。過程包括以下動作：
AI 逆向工程步驟
- 用 Puppeteer 喺桌面 / 平板 / 手機三個視口截圖，響應式唔使你人腦補
- 用 getComputedStyle() API 精確抓所有 CSS 變量（顏色→OKLCH、字體、間距、陰影），唔係肉眼估顏色
- 模擬滾動、點擊、hover、模態框、標籤頁，記錄交互行為
- 將所有圖片、字體、圖標、SVG 下載到 public/，代碼裏引用路徑自動更新
- 拆區塊（Header / Hero / Features / Footer）生成組件規格，並行派遣多個 builders 一齊寫
之後只要喺 GitHub 主頁點「Use this template」複製一份到你嘅賬號下（避免直接 clone 主倉庫），裝上 Claude Code / Cursor，喺項目根目錄啟動 AI 智能體，等 5-10 分鐘，npm install && npm run dev 直接跑——配色、字體、間距、交互全對齊原網站。以前要一個禮拜嘅嘢，而家壓到 10 分鐘。
Clone 主倉庫會被濫用
法律邊界同適用人羣
用對係學習神器，用錯係侵權工具
適合嘅人
- 獨立開發者 / 創業團隊 — 想快速學優秀網站嘅設計
- 做技術棧遷移嘅 — Webflow / WordPress 老站遷到 Next.js
- 前端學習者 — 想睇大廠網站點樣實現
- AI 編程愛好者 — 想體驗 Claude Code / Cursor 嘅多 Agent 協作
唔適合嘅人
- 要「一鍵複製商業網站上線」 — 呢個工具唔背法律風險
- 完全唔識用 AI 編程助手 — 需要裝 Claude Code / Cursor
- 唔熟悉 Next.js — 輸出係 Next.js 項目，要識得跑
兩萬粒星開源利器，直接 Clone 一個網站
見到一個網站設計得幾好，想跟住做？自己整 HTML、抄 CSS、下載圖片、寫一大堆 Code——以前搞一個禮拜。
試試 ai-website-cloner-template。2 萬粒星，MIT License 免費。JCodesMore 係一個 AI 驅動嘅網站逆向工程 Scaffold，2026 年 3 月首次推出，而家已經到 v0.3.1，技術棧係 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4。
用法就一句 Command：
/clone-website https://你要克隆的網站.comAI 接到呢個 URL 之後，會自己將網站逆向工程一次：
• 用 Puppeteer 喺 Desktop / Tablet / Mobile 三個 Viewport 截圖，Responsive 唔使你用人腦去估 • 用 getComputedStyle()API 精確咁拎曬所有 CSS Variables（顏色 → OKLCH、字體、間距、陰影），唔係用肉眼估顏色• 模擬 Scroll、Click、Hover、Modal、Tab，將互動行為都記錄低 • 將所有圖片、字體、Icon、SVG 下載到 public/，Code 裏面嘅引用路徑會自動更新• 拆區塊（Header / Hero / Features / Footer）生成組件規格，並行派 Multiple Builders 一齊寫，5-10 分鐘出一個完整嘅 Next.js 項目
AI 唔係「Copy & Paste」，係真係讀得明個網站、拆解組件、重新起個結構。
去 GitHub 主頁撳「Use this template」複製一份去你嘅 Account 下（唔好直接 Clone 主 Repository，項目方強調過避免被人濫用），裝上 Claude Code / Cursor，喺項目 Root Directory 啟動 AI Agent，等 5-10 分鐘，npm install && npm run dev 直接 Run——配色 / 字體 / 間距 / 互動全部對齊原網站。
以前要一個禮拜嘅嘢，AI 幫你壓到 10 分鐘。
⚠️ 一個一定要講嘅點：法律邊界
「Clone 網站」係雙刃劍，用錯地方會侵權。
✅ 合法場景：自己網站搬遷 / 平台技術 Stack 升級（Webflow → Next.js / WordPress → Next.js）、學習優秀網站嘅設計 / 實現、恢復自己唔見咗嘅 Source Code。
⚠️ 灰色場景：復刻商業網站嚟「參考」——法律風險好高，建議先問嚇律師。
❌ 違法場景：直接 Clone 人哋商業網站上線賣、偷人哋設計 / 品牌當係自己。
用啱地方係學習神器，用錯地方係侵權工具。
適合邊啲人？
• 獨立開發者 / 創業團隊 —— 想快速學優秀網站嘅設計 • 做技術 Stack 搬遷嘅 —— Webflow / WordPress 舊站搬去 Next.js • Frontend 學習者 —— 想睇大廠網站點樣實現 • AI 編程愛好者 —— 想體驗 Claude Code / Cursor 嘅 Multi-Agent 協作
唔適合：
• 要「一鍵 Clone 商業網站上線」 —— 呢個工具唔會幫你孭法律風險 • 完全唔識用 AI 編程助手 —— 需要裝 Claude Code / Cursor • 唔熟 Next.js —— Output 係 Next.js Project，要識得 Run
GitHub：https://github.com/JCodesMore/ai-website-cloner-template
#ai-website-cloner #開源 #AI 編程 #Next.js #ClaudeCode #網站 Clone #網站逆向工程 #MIT #免費
兩萬顆星開源利器，直接克隆一個網站
看到一個網站設計得不錯，想照着做？手撕 HTML、扒 CSS、下載圖片、寫一堆代碼——以前搞一週。
試試 ai-website-cloner-template。2 萬顆星，MIT 協議免費。JCodesMore 做的 AI 驅動的網站逆向工程腳手架，2026 年 3 月首發，現在已經到 v0.3.1，技術棧是 Next.js 16 + React 19 + TypeScript + Tailwind CSS v4。
用法就一句命令：
/clone-website https://你要克隆的網站.comAI 接到這個 URL 之後，會自己把網站逆向工程一遍：
• 用 Puppeteer 在桌面 / 平板 / 手機三個視口截圖，響應式不用你人腦補 • 用 getComputedStyle()API 精確抓所有 CSS 變量（顏色 → OKLCH、字體、間距、陰影），不是肉眼估顏色• 模擬滾動、點擊、hover、模態框、標籤頁，把交互行為也記錄下來 • 把所有圖片、字體、圖標、SVG 下載到 public/，代碼裏引用路徑自動更新• 拆區塊（Header / Hero / Features / Footer）生成組件規格，並行派遣多個 builders 一起寫，5-10 分鐘出一個完整 Next.js 項目
AI 不是"複製粘貼"，是真的讀懂網站、拆解組件、重建結構。
去 GitHub 主頁點 "Use this template" 複製一份到你的賬號下（別直接 clone 主倉庫，項目方強調過避免被濫用），裝上 Claude Code / Cursor，在項目根目錄啓動 AI 智能體，等 5-10 分鐘，npm install && npm run dev 直接跑——配色 / 字體 / 間距 / 交互全對齊原網站。
以前要一週的活，AI 幫你壓到 10 分鐘。
⚠️ 一個必須說的點：法律邊界
"克隆網站"是雙刃劍，用錯地方會侵權。
✅ 合法場景：自己網站遷移 / 平台技術棧升級（Webflow → Next.js / WordPress → Next.js）、學習優秀網站的設計 / 實現、恢復自己丟失的源碼。
⚠️ 灰色場景：復刻商業網站"參考"——法律風險高，建議先諮詢律師。
❌ 違法場景：直接克隆別人商業網站上線賣、偷別人設計 / 品牌當自己的。
用對地方是學習神器，用錯地方是侵權工具。
適合誰？
• 獨立開發者 / 創業團隊 —— 想快速學優秀網站的設計 • 做技術棧遷移的 —— Webflow / WordPress 老站遷到 Next.js • 前端學習者 —— 想看大廠網站怎麼實現 • AI 編程愛好者 —— 想體驗 Claude Code / Cursor 的多 Agent 協作
不適合：
• 要"一鍵複製商業網站上線" —— 這工具不背法律風險 • 完全不會用 AI 編程助手 —— 需要裝 Claude Code / Cursor • 不熟悉 Next.js —— 輸出是 Next.js 項目，得會跑
GitHub：https://github.com/JCodesMore/ai-website-cloner-template
#ai-website-cloner #開源 #AI編程 #Next.js #ClaudeCode #網站克隆 #網站逆向工程 #MIT #免費