Onlook
Onlook 是一個開源、本地優先的視覺編輯器，允許您實時編輯 React 應用程序並將更改寫回代碼，類似於 Figma，但直接集成到您的代碼庫中。
https://onlook.dev/?ref=aipure&utm_source=aipure
產品資訊
更新時間：2025年02月16日
什麼是 Onlook
Onlook 是一款專為彌合 React 應用程序中設計和開發之間的差距而設計的開發工具。它提供了一個類似 Figma 的界面，讓您可以在視覺上編輯 React 應用程序，同時自動生成並更新相應的代碼。Onlook 特別為使用 Tailwind CSS 的 React 應用程序構建（計劃支持其他框架和樣式），作為桌面應用程序在本地機器上運行，確保您的代碼安全和私密。
Onlook 的主要功能
Onlook 是一個用於 React 應用程序的開源視覺編輯器，允許設計師和開發者直接在瀏覽器 DOM 中進行實時編輯，並即時將更改寫回代碼。它與 React + TailwindCSS 項目集成，使用戶能夠在不編寫代碼的情況下視覺化編輯佈局、樣式、組件和文本，同時保持版本控制並保留所有代碼在本地。
視覺實時編輯: 使用類似 Figma 的界面直接在瀏覽器中編輯 React 組件、佈局和樣式，實時查看更改
代碼生成: 根據視覺更改自動生成並寫入可靠的 React 代碼，並將其放置在代碼庫中需要的位置
設計系統集成: 使用代碼庫中現有的設計系統組件和變量，實現與當前設置的無縫集成
本地優先架構: 所有代碼都保存在您的設備上，從不離開您的機器，確保在使用現有構建過程時的安全性和隱私
Onlook 的使用案例
快速 UI 原型設計: 設計師可以快速在實時 React 環境中原型設計和測試新的界面設計
設計-開發協作: 團隊可以通過在同一環境中使用視覺工具和代碼輸出來橋接設計和開發之間的差距
設計系統維護: 團隊可以通過視覺化方式輕鬆更新和維護設計系統，同時自動生成相應的代碼
優點
開源並由社區積極支持
無需代碼遷移 - 可與現有的 React 項目配合使用
本地優先的方法確保安全性和隱私
設計師熟悉的類似 Figma 的界面
缺點
目前僅支持 React 和 TailwindCSS
仍處於 Alpha 發布階段
需要設置本地開發環境
如何使用 Onlook
下載和安裝: 從 onlook.dev/download 下載 Onlook 桌面應用程序的 Apple Silicon 或 Windows 版本
設置您的 React 項目: 在您的 React 項目的根文件夾中運行 'npx onlook' 以將 Onlook 鏈接到您的項目
啟動您的項目: 在本地打開您的 React 項目（通常在 http://localhost:3000）
打開 Onlook Studio: 打開 Onlook 桌面應用程序並指向您的運行項目的本地 URL
開始編輯: 使用視覺編輯器直接在您的實時 React 應用程序中修改布局、顏色、文本、樣式等
進行更改: 使用類似 Figma 的界面編輯您的應用程序的設計元素，包括字體、邊框、填充、邊距等
審查代碼更改: Onlook 會自動將您的視覺更改轉換為 React 代碼
發布更改: 使用 '發布代碼' 選項將您的更改提交到您的代碼庫中，通過 GitHub
Onlook 常見問題
Onlook 是一個開源、以本地為主的桌面應用程式，可以讓您視覺化編輯 React 應用程式，並實時將變更寫回代碼，類似於 Figma，但專門用於 React 應用程式。
Onlook 網站分析
Onlook 流量和排名
3K
每月訪問量
#5689004
全球排名
-
類別排名
流量趨勢：Sep 2024-Jan 2025
Onlook 用戶洞察
00:00:18
平均訪問時長
1.47
每次訪問的頁面數
58.91%
用戶跳出率
Onlook 的主要地區
IN: 49.62%
US: 30.79%
VN: 12.91%
DE: 6.68%
Others: 0%
与 Onlook 类似的最新 AI 工具
Gait
Gait 是一個集成 AI 辅助代碼生成和版本控制的協作工具，使團隊能夠高效地追蹤、理解和共享 AI 生成代碼的上下文。
invoices.dev
invoices.dev 是一個自動化發票平台，直接從開發者的 Git 提交生成發票，並具有 GitHub、Slack、Linear 和 Google 服務的集成能力。
EasyRFP
EasyRFP 是一個 AI 驅動的邊緣計算工具包，通過深度學習技術簡化 RFP（請求提案）回應並實現實時田間表型。
Cart.ai
Cart.ai 是一個 AI 驅動的服務平台，提供全面的業務自動化解決方案，包括編碼、客戶關係管理、視頻編輯、電商設置和定制 AI 開發，並提供 24/7 支持。
类似 Onlook 的热门 AI 工具
GitHub Copilot Chat
GitHub Copilot Chat 是一個 AI 驅動的編碼助手，提供自然語言交互、實時代碼建議和上下文支持，直接在支持的 IDE 和 GitHub.com 中提供。
CopilotForXcode
CopilotForXcode 是一個 Xcode 源代碼編輯器擴展，將 GitHub Copilot、Codeium 和 ChatGPT 集成在一起，在 Xcode 中提供 AI 驅動的代碼建議、聊天協助和 prompt-to-code 功能。
DeepSeek
DeepSeek 是一家先進的 AI 公司，開發了強大的語言模型，用於編程、內容創作和一般對話，在開源和商業應用中均表現出一流的性能。
OpenAI o1 in the API
OpenAI o1 是一個新的 '推理' 模型系列，通過 API 可訪問，擅長複雜問題解決任務，具有增強的推理能力，提供兩個變體：o1-preview 和 o1-mini。