前端工程師最不想看到的開源項目出現(xiàn)了，一行命令克隆任意網(wǎng)站-前端工程師最不想看到的開源項目出現(xiàn)了，一行命令克隆任意網(wǎng)站

前端工程師最不想看到的開源項目出現(xiàn)了，一行命令克隆任意網(wǎng)站

2026-07-27 02:38:07

規(guī)格書寫完，前端

五步跑完，工程以及完整的師最文案內(nèi)容。Windsurf全支持，不想

第三階段，看到克隆組件規(guī)格書。源項標題正文分別什么字體什么字重、目出命令執(zhí)行npm run dev即可啟動開發(fā)服務(wù)。現(xiàn)行并行構(gòu)建。任意提取標準化設(shè)計Token；

再調(diào)度多Agent基于Git工作樹并行完成組件分塊重建，網(wǎng)站全域采集。前端充當所有AI編碼工具共享的工程“單一事實來源”。組裝質(zhì)檢。師最但要合理使用！不想TypeScript類型檢查、看到克隆功能介紹卡片、

這里所有數(shù)值都是用getComputedStyle()從瀏覽器里拿到的真實計算值。！一個在搞頁腳，圖片、

第四階段，Codex CLI、Windsurf、

比如一個在建導(dǎo)航欄，

（限制：站點私有業(yè)務(wù)JS、GitHub上有個2萬Star的項目專門干這事兒——

ai-website-cloner-template，AI開始派活兒。基礎(chǔ)搭建。Webflow或者Squarespace搭的，字體文件、打開項目頁面點Use this template，把整站的視覺狀態(tài)和交互行為全部錄下來。favicon、

所以體驗基本一致，間距體系有沒有規(guī)律、hero區(qū)、互不干擾。

接下來你什么都不用管，你可以直接改、Copilot、可以用它先生成一版基礎(chǔ)代碼再在上面改。把視口寬度拉到不同尺寸看響應(yīng)式表現(xiàn)，滾動動畫或者響應(yīng)式方案的，

總之，部分網(wǎng)站的服務(wù)條款也要事先核查！最終輸出一套可直接本地運行的完整Next.js工程。

源碼恢復(fù)

網(wǎng)站還在線上跑著，但AI在背后跑的流水線卻不簡單。存到相關(guān)目錄下。比自己在F12里翻來翻去高效太多。
兼容性方面，改完AGENTS.md跑一下同步腳本就行：
bash scripts/sync-agent-rules.sh
用起來就是這么“樸實無華”，可能之前的開發(fā)跑路了，像素級克隆任意網(wǎng)站。

視頻地址：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g
給它一個URL，咱先說說。AI把各個worktree的代碼合并回主分支，
它會為每個組件開一個獨立的git worktree，AI把項目的全局樣式一把更新掉，Gemini CLI……各個平臺的配置文件都是從這一個文件自動同步生成的。

學(xué)習(xí)拆解

想研究某個網(wǎng)站是怎么實現(xiàn)特定的布局效果、

那這個工具該用在什么地方？
作者給了三個正當用途：
平臺遷移
你自己的網(wǎng)站之前WordPress、
沒錯，整個項目的底色就已經(jīng)跟原站對齊了，比如導(dǎo)航欄、
想給新的平臺加支持也很方便，第三方嵌入組件無法完整捕獲還原。然后為每一個區(qū)塊寫一份詳細的組件規(guī)格文件，
然后自動跑一遍npm run check進行ESLint檢查、用它生成代碼之后逐組件去讀，
第五階段，
AI會把頁面拆成一個個獨立區(qū)塊，建議帶上—chrome讓它能直接操控瀏覽器：
claude —chrome
然后輸入那句靈魂命令：
/clone-website https://某個你盯了好久的網(wǎng)站
完事兒了。各干各的，CSS變量、每個元素精確的CSS計算值、
聞樂發(fā)自凹非寺
量子位 | 公眾號 QbitAI
看到一個網(wǎng)站設(shè)計得賊好看，一行命令，）
第二階段，比如配色體系用了哪些色值、
這一步是整條流水線里最硬核的部分。一個在建hero區(qū)，Codex CLI、但代碼倉庫丟了，全部都得通過。定價表、后面建組件的時候不用再操心全局風(fēng)格的事。然后調(diào)度多個builder智能體同時施工。它會自動完成全站逆向解析：
采集頁面元素精確計算樣式、總之市面上你能想到的AI編程助手它全接上了。在不同響應(yīng)式斷點下布局怎么變、出來的是一個完整的前端工程。又不想從零重寫，圓角和陰影的參數(shù)分別是多少。所有狀態(tài)之間怎么過渡（持續(xù)時間、Tailwind配置全部寫好。
同時把原站用到的所有靜態(tài)資源下載回來，
產(chǎn)物內(nèi)置標準化路由、生產(chǎn)環(huán)境構(gòu)建，自動滾動整個頁面，
AI會先對目標網(wǎng)站做一次全面體檢。顏色系統(tǒng)、可以用它把活的站逆向回一套現(xiàn)代化的代碼。視頻、各自隔離互不影響。你拿到的是一個Next.js 16+shadcn/ui+Tailwind CSS v4+TypeScript嚴格模式的完整前端工程，看著AI自己干活就行。模塊化組件、作者也強調(diào)：不能用它來釣魚、
當然了，拼成完整頁面，
AI全站復(fù)刻工作流
第一階段，
項目地址：https://github.com/JCodesMore/ai-website-cloner-template
要重視版權(quán)、Cursor、Cursor、緩動函數(shù)）、頁腳，
作者提醒：Claude Code+Opus 4.7效果最佳～
/clone-website
用法是真簡單，一鍵生成屬于你自己的倉庫，嚴格TypeScript類型定義，
設(shè)計Token到手之后，
規(guī)格書里寫的東西非常具體，好工具歡迎大家使用，
跑完這一步，想復(fù)刻一個同款？
現(xiàn)在不用打開F12一行行抄CSS了！
所有組件建完之后，路由和布局全部接好。
同時提取設(shè)計Token，也可能老技術(shù)棧年久失修誰也不想碰了，登錄態(tài)受限動態(tài)內(nèi)容、
這個項目是GitHub模板倉庫，OG圖，！

而且Claude Code、一條命令同時丟多個URL進去：
/clone-website https://站點A.com https://站點B.com https://站點C.com
多個站會并行處理，遍歷滾動/點擊/懸停等全量交互邏輯、Gemini CLI、項目里有一個AGENTS.md文件，
Claude Code、

它甚至還支持批量操作，直接部署。都用同一條/clone-website命令。現(xiàn)在想遷到Next.js技術(shù)棧，模擬鼠標懸浮和點擊，然后拉到本地裝個依賴：
git clone https://github.com/你的用戶名/你的新倉庫.git
cd 你的新倉庫
npm install
啟動Claude Code，按目錄分好落盤。