same.new 這玩意兒有多牛。簡單來說，你給它一個(gè)網(wǎng)址，它就能給你“克隆”出一個(gè)一模一樣的網(wǎng)站。注意，這里說的可不是簡單的復(fù)制粘貼 HTML/CSS，人家是把整個(gè)網(wǎng)站的結(jié)構(gòu)、組件、樣式，甚至交互邏輯都給你整出來，生成的是可維護(hù)的代碼！

這不就是傳說中的“像素級復(fù)制”嗎？簡直是前端工程師的福音（也可能是噩夢，哈哈）！

same.new 工作流程大揭秘

same.new 到底是怎么做到這一點(diǎn)的呢？我研究了一下，發(fā)現(xiàn)它的工作流程大概是這樣的：

1. 1.?分析目標(biāo)網(wǎng)站：先看清楚你要“抄”的網(wǎng)站長啥樣。
2. 2.?創(chuàng)建項(xiàng)目結(jié)構(gòu)：搭好架子，準(zhǔn)備寫代碼。
3. 3.?生成組件代碼：把網(wǎng)站拆成一個(gè)個(gè)小零件，分別寫代碼。
4. 4.?樣式適配：給這些小零件穿上“衣服”，讓它們看起來和原網(wǎng)站一樣。
5. 5.?部署：把做好的網(wǎng)站發(fā)布到網(wǎng)上，讓大家都能看到。

下面我就來詳細(xì)說說每一步是怎么做的。

1. 分析目標(biāo)網(wǎng)站：看透你的“心肝脾肺腎”

same.new 要“抄”一個(gè)網(wǎng)站，首先得搞清楚這個(gè)網(wǎng)站的結(jié)構(gòu)。這就像醫(yī)生做手術(shù)前，得先看清楚病人的“心肝脾肺腎”在哪兒。

• ??目標(biāo)識別： same.new 會先訪問你要“抄”的網(wǎng)址，獲取網(wǎng)站的截圖，然后分析這個(gè)網(wǎng)站的設(shè)計(jì)和結(jié)構(gòu)。這一步很可能用了 Puppeteer 或 Playwright 這樣的“無頭瀏覽器”技術(shù)。這些技術(shù)能模擬用戶訪問網(wǎng)站，獲取網(wǎng)頁的 DOM 結(jié)構(gòu)。
• ??組件拆分： 接下來，same.new 會把整個(gè)頁面分解成一個(gè)個(gè)小組件，比如頭部、Logo、搜索框、列表、頁腳等等。這就像把一輛汽車拆成發(fā)動機(jī)、輪胎、座椅等等。這一步可不簡單，same.new 可能會用到以下幾種技術(shù)：
• ??基于視覺的分割： 用計(jì)算機(jī)視覺技術(shù)，分析頁面截圖，識別出不同的區(qū)域和元素。
• ??DOM 樹分析： 分析網(wǎng)頁的 HTML 代碼結(jié)構(gòu)，通過標(biāo)簽、類名等，推斷出組件之間的關(guān)系。
• ??啟發(fā)式規(guī)則： 結(jié)合一些預(yù)定義的規(guī)則（比如常見的導(dǎo)航欄、頁腳等），來輔助組件的識別。

2. 創(chuàng)建項(xiàng)目結(jié)構(gòu)：搭好架子，準(zhǔn)備開工

分析完網(wǎng)站結(jié)構(gòu)，same.new 就要開始搭架子了。它選擇了 Next.js 作為前端框架，還用了一個(gè)叫 shadcn/ui 的組件庫。

• ??Next.js 框架： Next.js 是一個(gè)很流行的 React 框架，它支持服務(wù)端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG），特別適合克隆這種靜態(tài)內(nèi)容為主的網(wǎng)站。
• ??shadcn/ui 組件庫：這是一個(gè)基于 Tailwind CSS 的 UI 組件庫，提供了很多現(xiàn)成的組件，可以直接拿來用，省去了很多寫樣式的時(shí)間。
• ??依賴安裝： same.new 會通過?npm install?安裝項(xiàng)目所需的依賴，比如 Tailwind CSS、postcss、autoprefixer 等。

就像下面這樣：

npm?install?tailwindcss?postcss?autoprefixer

3. 生成組件代碼：給每個(gè)零件寫代碼

搭好架子，接下來就要給每個(gè)組件寫代碼了。這是 same.new 最核心的部分，也是最神奇的地方！

same.new 會為每個(gè)組件創(chuàng)建一個(gè)獨(dú)立的 React 組件文件（.jsx 或 .tsx）。那么問題來了，它是怎么生成這些代碼的呢？我猜可能有以下幾種方式：

• ??模板引擎： 針對不同類型的組件（比如頭部、搜索框），same.new 可能預(yù)先定義好了一些代碼模板，然后根據(jù)實(shí)際情況填充數(shù)據(jù)（比如鏈接、Logo 圖片地址等）。
• ??AI 模型： same.new 可能會用到大型語言模型（LLM）或者專門訓(xùn)練的模型，根據(jù)組件的描述（比如“一個(gè)帶有鏈接和登錄按鈕的頭部導(dǎo)航欄”），生成對應(yīng)的 React 代碼。這就能解釋為什么 same.new 能處理比較復(fù)雜的布局和交互。
• ??混合方法： 結(jié)合模板引擎和 AI 模型，對于常見的組件用模板，對于更復(fù)雜的組件用 AI 生成。

4. 樣式適配：穿上“衣服”，打扮漂亮

組件代碼寫好了，還得給它們加上樣式，讓它們看起來和原網(wǎng)站一樣。same.new 主要用了 Tailwind CSS 來實(shí)現(xiàn)樣式。

• ??Tailwind CSS： Tailwind CSS 是一種“實(shí)用類優(yōu)先”的 CSS 框架，可以通過組合不同的類名來快速構(gòu)建樣式。
• ??顏色主題匹配： same.new 會自動調(diào)整 Tailwind CSS 的顏色配置，讓它和目標(biāo)網(wǎng)站的顏色風(fēng)格一致。這可能是通過分析頁面截圖或 CSS 樣式表來提取顏色信息的。
• ??布局調(diào)整： 通過 Tailwind CSS 的類名（比如?flex,?justify-center,?items-center?等）來調(diào)整組件的布局，讓它和目標(biāo)網(wǎng)站一模一樣。

5. 部署：發(fā)布到網(wǎng)上，讓大家看看

最后一步，就是把做好的網(wǎng)站發(fā)布到網(wǎng)上。same.new 選擇了 Netlify 來部署。

• ??Netlify： Netlify 是一個(gè)很流行的靜態(tài)網(wǎng)站托管平臺，提供了自動構(gòu)建、部署、CDN 等功能。
• ??構(gòu)建配置： same.new 會創(chuàng)建一個(gè)?netlify.toml?配置文件，指定構(gòu)建命令和輸出目錄。
• ??版本控制與部署： same.new 內(nèi)部可能用了 Git 這樣的版本控制系統(tǒng)，每次修改都會創(chuàng)建一個(gè)新的版本，并嘗試部署到 Netlify。

可能遇到的挑戰(zhàn)

same.new 這么厲害，是不是就無敵了呢？當(dāng)然不是，它也會遇到一些挑戰(zhàn)：

• ??動態(tài)內(nèi)容： 如果目標(biāo)網(wǎng)站有很多動態(tài)內(nèi)容（比如用戶登錄狀態(tài)、實(shí)時(shí)數(shù)據(jù)等），same.new 可能就沒辦法完全復(fù)制了。它更擅長克隆靜態(tài)內(nèi)容。
• ??復(fù)雜交互： 對于復(fù)雜的 JavaScript 交互（比如復(fù)雜的表單驗(yàn)證、動畫效果等），same.new 可能需要更高級的技術(shù)來實(shí)現(xiàn)。
• ??反爬蟲機(jī)制： 有些網(wǎng)站有反爬蟲機(jī)制，same.new 可能需要想辦法繞過這些機(jī)制，避免被屏蔽。
• ??版權(quán)問題：?如果直接抄別人的網(wǎng)站,這里面可能會有法律風(fēng)險(xiǎn),所以 same.new 也要考慮版權(quán)的問題.

競品分析

市面上也有其他類似的工具，它們各有優(yōu)缺點(diǎn)。我做了個(gè)簡單的對比：

說了這么多

same.new 確實(shí)是一個(gè)很強(qiáng)大的網(wǎng)站克隆工具。它結(jié)合了多種前端技術(shù)和 AI 模型，實(shí)現(xiàn)了自動化分析、代碼生成、樣式適配和部署。雖然它還不能完美地復(fù)制所有類型的網(wǎng)站，但在克隆靜態(tài)內(nèi)容為主的網(wǎng)站方面，它已經(jīng)做得很出色了。

作為一名開發(fā)者，我既驚嘆于 same.new 的強(qiáng)大，也對它背后的技術(shù)充滿了好奇。未來，隨著 AI 技術(shù)的不斷發(fā)展，我相信這類工具會越來越智能，越來越強(qiáng)大。

好了，今天就跟大家聊到這里。如果你覺得這篇文章對你有幫助，記得點(diǎn)贊、分享、在看三連哦！

引用鏈接

[1]?same.new:?https://same.new/

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級服務(wù)市場：https://www.ijiandao.com/