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

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

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

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

可視化編程的新紀元

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

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

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

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

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

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

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

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

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

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

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

架構(gòu)設計太精妙了

容器化運行?—— 當你導入項目時，Onlook會在Web容器中加載代碼并提供預覽鏈接。編輯器通過iFrame顯示實時預覽。同時讀取和索引容器中的代碼。

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

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

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

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

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

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

實時協(xié)作?—— 團隊成員可以同時編輯。留下評論。就像在Figma中協(xié)作設計稿一樣。

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

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

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

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

整個項目98.6%都是TypeScript代碼，類型安全做得很扎實。

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

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

項目最初是Electron桌面應用。但團隊果斷遷移到Web端。

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

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

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

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

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

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

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

項目地址：
https://github.com/onlook-dev/onlook