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

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

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

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

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

給它一個(gè)URL，它會(huì)自動(dòng)完成全站逆向解析：

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

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

沒錯(cuò)，出來的是一個(gè)完整的前端工程。

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

而且Claude Code、Codex CLI、Cursor、Copilot、Gemini CLI、Windsurf全支持，總之市面上你能想到的AI編程助手它全接上了。

作者提醒：Claude Code+Opus 4.7效果最佳～

/clone-website

用法是真簡單，咱先說說。

這個(gè)項(xiàng)目是GitHub模板倉庫，打開項(xiàng)目頁面點(diǎn)Use this template，一鍵生成屬于你自己的倉庫，然后拉到本地裝個(gè)依賴：

git clone https://github.com/你的用戶名/你的新倉庫.git
cd 你的新倉庫
npm install

啟動(dòng)Claude Code，建議帶上—chrome讓它能直接操控瀏覽器：

claude —chrome

然后輸入那句靈魂命令：

/clone-website https://某個(gè)你盯了好久的網(wǎng)站

完事兒了。

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

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

/clone-website https://站點(diǎn)A.com https://站點(diǎn)B.com https://站點(diǎn)C.com

多個(gè)站會(huì)并行處理，各自隔離互不影響。

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

Claude Code、Cursor、Windsurf、Codex CLI、Gemini CLI……各個(gè)平臺(tái)的配置文件都是從這一個(gè)文件自動(dòng)同步生成的。

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

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

bash scripts/sync-agent-rules.sh

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

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

第一階段，全域采集。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那這個(gè)工具該用在什么地方？

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

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

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

總之，好工具歡迎大家使用，但要合理使用?。。?/p>

項(xiàng)目地址：https://github.com/JCodesMore/ai-website-cloner-template