提交您的產(chǎn)品 
Ai應(yīng)用
Ai資訊
AI生圖
AI生視頻
開源AI應(yīng)用平臺
Onlook
Onlook簡介
Onlook是什么？
Onlook 是一款面向設(shè)計(jì)師的工具，設(shè)計(jì)師的Cursor，支持對 React 網(wǎng)站進(jìn)行可視化編輯并實(shí)時(shí)將修改寫入代碼。其功能包括構(gòu)建網(wǎng)站、調(diào)整布局 / 顏色 / 文本等樣式（如自動布局、字體、邊距等）、管理圖層和樣式變量（顏色 / 文本樣式），支持導(dǎo)入現(xiàn)有項(xiàng)目或新建 React 應(yīng)用，強(qiáng)調(diào)代碼所有權(quán)歸用戶、本地運(yùn)行保障安全、兼容現(xiàn)有構(gòu)建流程且開源。
Onlook核心功能
可視化編輯：設(shè)計(jì)師可以在瀏覽器中可視化編輯 React 和 TailwindCSS 項(xiàng)目，修改實(shí)時(shí)反映在代碼中。
輔助設(shè)計(jì)：幫助用戶構(gòu)建、設(shè)計(jì)和實(shí)驗(yàn)想法，使前端設(shè)計(jì)更具交互性。
實(shí)時(shí)同步：設(shè)計(jì)更改實(shí)時(shí)同步到代碼，無需手動調(diào)整。
本地編輯：所有操作在本地機(jī)器完成，保障代碼安全和隱私。
兼容流程：無需添加新組件或遷移，無縫集成現(xiàn)有開發(fā)流程。
Onlook應(yīng)用場景
快速原型設(shè)計(jì)：在 React 環(huán)境中設(shè)計(jì)和測試界面，快速創(chuàng)建 UI 原型。
協(xié)作：設(shè)計(jì)師在瀏覽器中編輯，開發(fā)人員獲取代碼并集成項(xiàng)目。
維護(hù)設(shè)計(jì)系統(tǒng)：團(tuán)隊(duì)通過 Onlook 更新和維護(hù)設(shè)計(jì)系統(tǒng)。
Onlook使用方法
下載應(yīng)用：訪問官網(wǎng)或下載桌面應(yīng)用，支持 Apple Silicon 和 Windows。
導(dǎo)入或新建項(xiàng)目：導(dǎo)入現(xiàn)有 React 項(xiàng)目或從 Onlook 開始新項(xiàng)目。
調(diào)整設(shè)計(jì)：在可視化界面中調(diào)整布局、色彩、排版等，修改實(shí)時(shí)反映在代碼中。
保存和版本控制：支持版本控制，用戶可隨時(shí)回滾并維護(hù)代碼版本。
常見問題
問：Onlook 與傳統(tǒng)設(shè)計(jì)工具（如 Figma）的核心區(qū)別是什么？
Onlook 不僅是設(shè)計(jì)工具，還能將可視化修改實(shí)時(shí)轉(zhuǎn)化為可運(yùn)行的 React 代碼，直接銜接開發(fā)流程，而傳統(tǒng)工具需手動切圖和編碼。其功能還能輔助生成交互邏輯，減少手動編碼量。
問：用戶是否擁有生成代碼的完全控制權(quán)？
是的。Onlook 強(qiáng)調(diào)代碼所有權(quán)歸用戶所有，支持本地運(yùn)行、版本控制（如 Git 回滾），且平臺從不將代碼部署到生產(chǎn)環(huán)境，用戶可完全自主管理代碼。
問：Onlook 對現(xiàn)有項(xiàng)目的兼容性如何？是否需要遷移組件？
Onlook 可直接導(dǎo)入現(xiàn)有 React 項(xiàng)目（包括使用 Tailwind 樣式的項(xiàng)目），無需添加新組件或修改構(gòu)建流程，兼容原生開發(fā)環(huán)境，降低學(xué)習(xí)和遷移成本。
開源項(xiàng)目：https://github.com/onlook-dev/onlook
