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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本地開發(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)行時。

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

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

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

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

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

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

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

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

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

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

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

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