還在為設(shè)計(jì)稿到代碼的轉(zhuǎn)換而頭疼？

當(dāng)Figma遇上AI編程時(shí)代。一個(gè)革命性工具正在改變前端開(kāi)發(fā)格局。

Onlook?—— 被譽(yù)為"設(shè)計(jì)師的Cursor"。這個(gè)開(kāi)源可視化編輯器，已經(jīng)在GitHub收獲了10,395個(gè)星標(biāo)。全球75位開(kāi)發(fā)者瘋狂貢獻(xiàn)代碼。

這不是又一個(gè)設(shè)計(jì)工具的噱頭。它直接打通設(shè)計(jì)與代碼的壁壘。讓你在瀏覽器中拖拽元素。同時(shí)實(shí)時(shí)生成可靠的React代碼。

可視化編程的新紀(jì)元

傳統(tǒng)開(kāi)發(fā)流程你懂的。設(shè)計(jì)師出圖。前端切圖。反復(fù)調(diào)試。來(lái)回撕逼。

Onlook徹底顛覆了這套陳舊模式。

在Onlook中，你直接操作真實(shí)的React組件。拖拽一個(gè)div。調(diào)整padding。修改顏色。每個(gè)操作都會(huì)即時(shí)反映到代碼文件中。

不是生成臨時(shí)代碼。而是直接修改你的源文件。

這種"所見(jiàn)即所得"的體驗(yàn)太爽了。設(shè)計(jì)師也能直接參與代碼編寫。前端工程師再也不用對(duì)著設(shè)計(jì)稿猜尺寸。

AI驅(qū)動(dòng)的智能建站

內(nèi)置AI聊天功能真的很聰明。

你可以用自然語(yǔ)言描述需求："給導(dǎo)航欄添加一個(gè)響應(yīng)式菜單"。AI會(huì)理解你的意圖。自動(dòng)生成對(duì)應(yīng)的React組件和TailwindCSS樣式。

更厲害的是AI能理解項(xiàng)目結(jié)構(gòu)。它知道你的組件庫(kù)。了解你的設(shè)計(jì)系統(tǒng)。生成的代碼完全符合項(xiàng)目規(guī)范。

不是那種胡亂拼接的垃圾代碼。

支持從文本、圖片、Figma設(shè)計(jì)稿甚至GitHub倉(cāng)庫(kù)直接創(chuàng)建項(xiàng)目。AI會(huì)分析現(xiàn)有代碼風(fēng)格。保持一致性。

架構(gòu)設(shè)計(jì)太精妙了

容器化運(yùn)行?—— 當(dāng)你導(dǎo)入項(xiàng)目時(shí)，Onlook會(huì)在Web容器中加載代碼并提供預(yù)覽鏈接。編輯器通過(guò)iFrame顯示實(shí)時(shí)預(yù)覽。同時(shí)讀取和索引容器中的代碼。

代碼映射?—— 通過(guò)代碼插樁技術(shù)，Onlook能精確定位DOM元素對(duì)應(yīng)的代碼位置。點(diǎn)擊頁(yè)面上的按鈕。立即跳轉(zhuǎn)到相關(guān)的JSX代碼。

雙向同步?—— 在可視化界面的修改會(huì)立即反映到代碼中。代碼的改動(dòng)也會(huì)實(shí)時(shí)更新預(yù)覽。真正做到了設(shè)計(jì)與開(kāi)發(fā)的無(wú)縫銜接。

這套架構(gòu)理論上支持任何聲明式DOM框架。但目前專注于Next.js + TailwindCSS的完美適配。

專業(yè)級(jí)功能全面覆蓋

組件化設(shè)計(jì)?—— 像Figma一樣管理設(shè)計(jì)組件。但這些組件就是真實(shí)的React組件。創(chuàng)建、復(fù)用、嵌套都很直觀。

設(shè)計(jì)系統(tǒng)集成?—— 自動(dòng)識(shí)別項(xiàng)目中的設(shè)計(jì)token、顏色變量、字體樣式。在可視化界面中直接使用。保持設(shè)計(jì)一致性。

實(shí)時(shí)協(xié)作?—— 團(tuán)隊(duì)成員可以同時(shí)編輯。留下評(píng)論。就像在Figma中協(xié)作設(shè)計(jì)稿一樣。

版本控制?—— 支持檢查點(diǎn)保存和恢復(fù)。每次修改都有記錄。出問(wèn)題了可以隨時(shí)回滾。

本地開(kāi)發(fā)?—— 所有代碼都在你的機(jī)器上。從不上傳到第三方服務(wù)器。數(shù)據(jù)安全完全可控。

技術(shù)棧相當(dāng)前衛(wèi)

采用現(xiàn)代化技術(shù)堆棧。Next.js做框架。Supabase處理數(shù)據(jù)。Drizzle做ORM。tRPC管理API。Bun作為運(yùn)行時(shí)。

整個(gè)項(xiàng)目98.6%都是TypeScript代碼，類型安全做得很扎實(shí)。

Apache 2.0開(kāi)源協(xié)議。代碼完全透明。想了解實(shí)現(xiàn)細(xì)節(jié)？直接去GitHub看源碼。

從桌面到Web的華麗轉(zhuǎn)身

項(xiàng)目最初是Electron桌面應(yīng)用。但團(tuán)隊(duì)果斷遷移到Web端。

原因很簡(jiǎn)單。Web的可訪問(wèn)性更強(qiáng)。部署更靈活。協(xié)作更方便。

目前Web版本還在快速迭代中。桌面版本的功能正在逐步移植過(guò)來(lái)。75位貢獻(xiàn)者在積極開(kāi)發(fā)。GitHub上197個(gè)開(kāi)放issues顯示項(xiàng)目活躍度很高。

對(duì)標(biāo)產(chǎn)品但更開(kāi)放

市面上類似工具不少。Webflow、Figma Dev Mode、V0、Bolt.new...但這些要么閉源。要么收費(fèi)昂貴。要么功能受限。

Onlook的優(yōu)勢(shì)在于完全開(kāi)源。你可以自由定制。私有部署。甚至貢獻(xiàn)代碼影響產(chǎn)品方向。沒(méi)有廠商綁定。沒(méi)有數(shù)據(jù)安全擔(dān)憂。

社區(qū)反響相當(dāng)熱烈。Google的CSS開(kāi)發(fā)倡議者公開(kāi)點(diǎn)贊。Coinbase的產(chǎn)品負(fù)責(zé)人轉(zhuǎn)發(fā)推薦。微軟的計(jì)算設(shè)計(jì)主管也表示認(rèn)可。日本設(shè)計(jì)師社區(qū)更是掀起了討論熱潮。

這種"設(shè)計(jì)與開(kāi)發(fā)邊界消解"的趨勢(shì)，Onlook走在了最前沿。當(dāng)AI能理解設(shè)計(jì)意圖并生成可靠代碼時(shí)。傳統(tǒng)的開(kāi)發(fā)模式確實(shí)該升級(jí)了。

項(xiàng)目地址：
https://github.com/onlook-dev/onlook