北京
- 聞樂 發自 凹非寺
- 量子位 | 公眾號 QbitAI
看到一個網站設計得賊好看，想復刻一個同款？
現在不用打開F12一行行抄CSS了！GitHub上有個2萬Star的項目專門干這事兒——
ai-website-cloner-template，一行命令，像素級克隆任意網站。
視頻地址：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g
給它一個URL，它會自動完成全站逆向解析：
采集頁面元素精確計算樣式、遍歷滾動/點擊/懸停等全量交互邏輯、提取標準化設計Token；
再調度多Agent基于Git工作樹并行完成組件分塊重建，最終輸出一套可直接本地運行的完整Next.js工程。
沒錯，出來的是一個完整的前端工程。
產物內置標準化路由、模塊化組件、嚴格TypeScript類型定義，執行npm run dev即可啟動開發服務。
而且Claude Code、Codex CLI、Cursor、Copilot、Gemini CLI、Windsurf全支持，總之市面上你能想到的AI編程助手它全接上了。
作者提醒：Claude Code+Opus 4.7效果最佳～
/clone-website
用法是真簡單，咱先說說。
這個項目是GitHub模板倉庫，打開項目頁面點Use this template，一鍵生成屬于你自己的倉庫，然后拉到本地裝個依賴：
git clone https://github.com/你的用戶名/你的新倉庫.git
cd 你的新倉庫
npm install
啟動Claude Code，建議帶上—chrome讓它能直接操控瀏覽器：
claude —chrome
然后輸入那句靈魂命令：
/clone-website https://某個你盯了好久的網站
完事兒了。
接下來你什么都不用管，看著AI自己干活就行。
它甚至還支持批量操作，一條命令同時丟多個URL進去：
/clone-website https://站點A.com https://站點B.com https://站點C.com
多個站會并行處理，各自隔離互不影響。
兼容性方面，項目里有一個AGENTS.md文件，充當所有AI編碼工具共享的“單一事實來源”。
Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI……各個平臺的配置文件都是從這一個文件自動同步生成的。
所以體驗基本一致，都用同一條/clone-website命令。
想給新的平臺加支持也很方便，改完AGENTS.md跑一下同步腳本就行：
bash scripts/sync-agent-rules.sh
用起來就是這么“樸實無華”，但AI在背后跑的流水線卻不簡單。
AI全站復刻工作流
第一階段，全域采集。
AI會先對目標網站做一次全面體檢。自動滾動整個頁面，模擬鼠標懸浮和點擊，把視口寬度拉到不同尺寸看響應式表現，把整站的視覺狀態和交互行為全部錄下來。
同時提取設計Token，比如配色體系用了哪些色值、標題正文分別什么字體什么字重、間距體系有沒有規律、圓角和陰影的參數分別是多少。
這里所有數值都是用getComputedStyle()從瀏覽器里拿到的真實計算值。
（限制：站點私有業務JS、登錄態受限動態內容、第三方嵌入組件無法完整捕獲還原。）
第二階段，基礎搭建。
設計Token到手之后，AI把項目的全局樣式一把更新掉，字體文件、CSS變量、顏色系統、Tailwind配置全部寫好。
同時把原站用到的所有靜態資源下載回來，圖片、視頻、favicon、OG圖，按目錄分好落盤。
跑完這一步，整個項目的底色就已經跟原站對齊了，后面建組件的時候不用再操心全局風格的事。
第三階段，組件規格書。
這一步是整條流水線里最硬核的部分。
AI會把頁面拆成一個個獨立區塊，比如導航欄、hero區、功能介紹卡片、定價表、頁腳，然后為每一個區塊寫一份詳細的組件規格文件，存到相關目錄下。
規格書里寫的東西非常具體，每個元素精確的CSS計算值、所有狀態之間怎么過渡（持續時間、緩動函數）、在不同響應式斷點下布局怎么變、以及完整的文案內容。
第四階段，并行構建。
規格書寫完，AI開始派活兒。
它會為每個組件開一個獨立的git worktree，然后調度多個builder智能體同時施工。
比如一個在建導航欄，一個在建hero區，一個在搞頁腳，各干各的，互不干擾。
第五階段，組裝質檢。
所有組件建完之后，AI把各個worktree的代碼合并回主分支，拼成完整頁面，路由和布局全部接好。
然后自動跑一遍npm run check進行ESLint檢查、TypeScript類型檢查、生產環境構建，全部都得通過。
五步跑完，你拿到的是一個Next.js 16+shadcn/ui+Tailwind CSS v4+TypeScript嚴格模式的完整前端工程，你可以直接改、直接部署。
那這個工具該用在什么地方？
作者給了三個正當用途：
- 平臺遷移
- 你自己的網站之前WordPress、Webflow或者Squarespace搭的，現在想遷到Next.js技術棧，又不想從零重寫，可以用它先生成一版基礎代碼再在上面改。
- 源碼恢復
- 網站還在線上跑著，但代碼倉庫丟了，可能之前的開發跑路了，也可能老技術棧年久失修誰也不想碰了，可以用它把活的站逆向回一套現代化的代碼。
- 學習拆解
- 想研究某個網站是怎么實現特定的布局效果、滾動動畫或者響應式方案的，用它生成代碼之后逐組件去讀，比自己在F12里翻來翻去高效太多。
當然了，作者也強調：不能用它來釣魚、要重視版權、部分網站的服務條款也要事先核查！
總之，好工具歡迎大家使用，但要合理使用！！！
項目地址：https://github.com/JCodesMore/ai-website-cloner-template
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
