• 聞樂 發(fā)自 凹非寺
• 量子位 | 公眾號 QbitAI
  

看到一個網(wǎng)站設(shè)計得賊好看，想復(fù)刻一個同款？

現(xiàn)在不用打開F12一行行抄CSS了！GitHub上有個2萬Star的項目專門干這事兒——

ai-website-cloner-template，一行命令，像素級克隆任意網(wǎng)站。

視頻地址：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g

給它一個URL，它會自動完成全站逆向解析：

采集頁面元素精確計算樣式、遍歷滾動/點擊/懸停等全量交互邏輯、提取標(biāo)準(zhǔn)化設(shè)計Token；

再調(diào)度多Agent基于Git工作樹并行完成組件分塊重建，最終輸出一套可直接本地運行的完整Next.js工程。

沒錯，出來的是一個完整的前端工程。

產(chǎn)物內(nèi)置標(biāo)準(zhǔn)化路由、模塊化組件、嚴(yán)格TypeScript類型定義，執(zhí)行npm run dev即可啟動開發(fā)服務(wù)。

而且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://某個你盯了好久的網(wǎng)站

完事兒了。

接下來你什么都不用管，看著AI自己干活就行。

它甚至還支持批量操作，一條命令同時丟多個URL進(jìn)去：

/clone-website https://站點A.com https://站點B.com https://站點C.com

多個站會并行處理，各自隔離互不影響。

兼容性方面，項目里有一個AGENTS.md文件，充當(dāng)所有AI編碼工具共享的“單一事實來源”。

Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI……各個平臺的配置文件都是從這一個文件自動同步生成的。

所以體驗基本一致，都用同一條/clone-website命令。

想給新的平臺加支持也很方便，改完AGENTS.md跑一下同步腳本就行：

bash scripts/sync-agent-rules.sh

用起來就是這么“樸實無華”，但AI在背后跑的流水線卻不簡單。

AI全站復(fù)刻工作流

第一階段，全域采集。

AI會先對目標(biāo)網(wǎng)站做一次全面體檢。自動滾動整個頁面，模擬鼠標(biāo)懸浮和點擊，把視口寬度拉到不同尺寸看響應(yīng)式表現(xiàn)，把整站的視覺狀態(tài)和交互行為全部錄下來。

同時提取設(shè)計Token，比如配色體系用了哪些色值、標(biāo)題正文分別什么字體什么字重、間距體系有沒有規(guī)律、圓角和陰影的參數(shù)分別是多少。

這里所有數(shù)值都是用getComputedStyle()從瀏覽器里拿到的真實計算值。

（限制：站點私有業(yè)務(wù)JS、登錄態(tài)受限動態(tài)內(nèi)容、第三方嵌入組件無法完整捕獲還原。）

第二階段，基礎(chǔ)搭建。

設(shè)計Token到手之后，AI把項目的全局樣式一把更新掉，字體文件、CSS變量、顏色系統(tǒng)、Tailwind配置全部寫好。

同時把原站用到的所有靜態(tài)資源下載回來，圖片、視頻、favicon、OG圖，按目錄分好落盤。

跑完這一步，整個項目的底色就已經(jīng)跟原站對齊了，后面建組件的時候不用再操心全局風(fēng)格的事。

第三階段，組件規(guī)格書。

這一步是整條流水線里最硬核的部分。

AI會把頁面拆成一個個獨立區(qū)塊，比如導(dǎo)航欄、hero區(qū)、功能介紹卡片、定價表、頁腳，然后為每一個區(qū)塊寫一份詳細(xì)的組件規(guī)格文件，存到相關(guān)目錄下。

規(guī)格書里寫的東西非常具體，每個元素精確的CSS計算值、所有狀態(tài)之間怎么過渡（持續(xù)時間、緩動函數(shù)）、在不同響應(yīng)式斷點下布局怎么變、以及完整的文案內(nèi)容。

第四階段，并行構(gòu)建。

規(guī)格書寫完，AI開始派活兒。

它會為每個組件開一個獨立的git worktree，然后調(diào)度多個builder智能體同時施工。

比如一個在建導(dǎo)航欄，一個在建hero區(qū)，一個在搞頁腳，各干各的，互不干擾。

第五階段，組裝質(zhì)檢。

所有組件建完之后，AI把各個worktree的代碼合并回主分支，拼成完整頁面，路由和布局全部接好。

然后自動跑一遍npm run check進(jìn)行ESLint檢查、TypeScript類型檢查、生產(chǎn)環(huán)境構(gòu)建，全部都得通過。

五步跑完，你拿到的是一個Next.js 16+shadcn/ui+Tailwind CSS v4+TypeScript嚴(yán)格模式的完整前端工程，你可以直接改、直接部署。

那這個工具該用在什么地方？

作者給了三個正當(dāng)用途：

• 平臺遷移
• 你自己的網(wǎng)站之前WordPress、Webflow或者Squarespace搭的，現(xiàn)在想遷到Next.js技術(shù)棧，又不想從零重寫，可以用它先生成一版基礎(chǔ)代碼再在上面改。
• 源碼恢復(fù)
• 網(wǎng)站還在線上跑著，但代碼倉庫丟了，可能之前的開發(fā)跑路了，也可能老技術(shù)棧年久失修誰也不想碰了，可以用它把活的站逆向回一套現(xiàn)代化的代碼。
• 學(xué)習(xí)拆解
• 想研究某個網(wǎng)站是怎么實現(xiàn)特定的布局效果、滾動動畫或者響應(yīng)式方案的，用它生成代碼之后逐組件去讀，比自己在F12里翻來翻去高效太多。

當(dāng)然了，作者也強調(diào)：不能用它來釣魚、要重視版權(quán)、部分網(wǎng)站的服務(wù)條款也要事先核查！

總之，好工具歡迎大家使用，但要合理使用！！！

項目地址：https://github.com/JCodesMore/ai-website-cloner-template