關於 Onlook
What Is Onlook
Onlook 是跑在瀏覽器裡的視覺化程式碼編輯器。它不把設計稿匯出成另一個設計檔，而是載入你真實的 React 與 Next.js 專案，把元件攤在無限畫布上，每一筆修改都直接寫回程式庫。程式碼是唯一真實來源，畫布上看到的東西就是真實產品，不是產品的照片。
這款 AI 視覺化程式碼編輯器瞄準的正是拖慢網站團隊的那道分界。作為設計轉程式碼工具與 Next.js 編輯器，它把設計與開發之間的落差抹平：設計師在視覺介面裡工作，工程師再照原本的 git 流程把這些修改收進程式庫。Onlook 會讀你的設計 token、字體排印與 Storybook 元件，套用之後，AI 產生出來的修改才會像團隊自己交出的東西。程式碼即真實來源，整條流程也因此站得住腳。
它同時是開源設計工具，這件事也有份量，因為團隊能看清編輯器怎麼運作，並依自己的環境調整，不必信任一個黑盒子。
最大的限制在技術堆疊。Onlook 只跑在採用 Tailwind CSS 樣式的 React 與 Next.js 專案上。用 Vue、Svelte 或純 HTML 的團隊目前用不了。託管版 AI 用量一大，就會撞上免費方案的訊息上限，所以幾乎天天倚賴助理的人，最後仍得付費或自己架伺服器。
Getting Started
- 在 onlook.com 註冊託管版帳號，或 clone 開源程式庫自行架設。
- 連接 GitHub 帳號，匯入既有的 Next.js 與 Tailwind CSS 專案，或在編輯器裡開一個新專案。
- 在無限畫布上選取任一元素，手動修改，或在對話框描述修改內容，交給 AI 寫。
- 對照即時預覽與底層程式碼，確認無誤後透過 git 提交或推送。
- 用內建的版本紀錄退回某一步，或在工作完成後發佈到自訂網域。
產品資訊
快速了解 Onlook 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 與前端團隊合作的設計師：他們在真實元件上取得視覺畫布，不必面對一個會走樣的設計檔，前提是先接上一個 Next.js 程式庫。
- 前端開發者：修改以真實的程式碼變更送達，可以直接審查，不必從靜態設計稿重做一遍。
- 新創裡的小型產品團隊：一個編輯器同時涵蓋設計與交付程式碼，適合沒有專職設計工程師的團隊。
- 正在打底產品的創業者：他們能視覺化地塑造一個真實的 Next.js 網站，同時留住它產生的程式碼。
任務
- 在畫布上即時編輯 React 元件：直接用拖曳、縮放與改樣式處理真實元素，而不是重畫一遍。
- 把視覺調整變成程式碼變更：在對話框描述修改，Onlook 會寫進檔案。
- 讓品牌在各頁面維持一致：集中管理的 token 與字體排印會帶進 AI 產生的每個元件。
- 匯入既有程式庫：把 Next.js 專案帶進來就能開始編輯，不必重建。
- 打樣與發想頁面：先在畫布上草擬版面，再決定要不要進主分支。
情境
- 產品上線前打磨行銷網站：視覺化地調整主視覺區塊的樣式，再把差異送去審查。
- 在真實產品上測試版面想法：直接在實際介面上調整間距與斷點，不必隔著一份設計稿。
- 讓設計師接手 React 專案：畫布上顯示的是團隊自己的元件，他一邊做就一邊認識真實的系統。
主要功能
直接在真實程式碼上做視覺編輯
Onlook 的核心，是把 Tailwind CSS 設計工具與 React 視覺化編輯器擺在同一塊無限畫布上，畫布渲染的是你真實的元件，不是靜態圖片。選取任一元素就能拖曳、縮放、重新排序或改樣式。修改會回到原始檔案，螢幕上搬動的東西就是上線的東西。設計師保有設計工具的自由，也不會斷了與程式庫的連結。
會改你元件的 AI
Onlook 的助理是一款 AI 設計助理，會讀你的元件、設計 token 與 Storybook 設定，再提出符合團隊習慣的修改。元素你可以自己改，也可以把任務交給對話框，讓它寫程式碼。純對話式的產生器不同，你在 AI 處理重複工作時仍握有完整的視覺控制權。
匯入你的程式庫
你可以把 Onlook 指向 GitHub 上既有的 Next.js 與 Tailwind CSS 專案，立刻開始編輯。Onlook 沒有自己的檔案格式，也不必維護第二份設計系統，帶進來的專案就是交出去的專案。
遵循設計系統
編輯器會追蹤品牌的字體、顏色、間距與元件樣式，並在產生內容時套用。每個新元素都繼承同一組 token，頁面自然維持在品牌範圍內，不必再手動巡一遍抓偏差。對設計系統嚴謹的團隊來說，這種一致性比產生速度更關鍵。
即時協作與版本紀錄
團隊能共用專案，同時在同一塊畫布上工作，就像他們在 Figma 裡的做法。修訂紀錄會記下每一筆變更，任何人都能退回較早的版本。有這層安全網，嘗試大膽版面時也比較放心，不怕弄丟好的成果。
可描繪的圖層與快捷鍵
Onlook 讓你在設計上直接描出 div 與文字，即時產生對應的程式碼。常用的快捷鍵沿用其他設計工具的習慣，肌肉記憶可以直接搬過來。當某個區塊的元件樹很密時，圖層面板讓你精準選取巢狀元素。
發佈與自架
完成的成果能送到 GitHub、一個連結或自訂網域。Onlook 以 Apache 2.0 授權開源，團隊也能免費自架，把每筆設計與程式碼變更留在自己的基礎設施上。託管版則加上分支、主題與 SSO 等團隊功能，價格另議。
優缺點
優點
- 程式碼是唯一真實來源，不必另外維護一份要保持同步的設計檔。
- 以 Apache 2.0 開源，提供免費自架選項，跑在自己的伺服器上。
- AI 依你既有的元件與 token 修改，產出的東西看起來就像團隊自己的作品。
- 即時協作與版本紀錄貼合設計與開發原本的合作方式。
缺點
- 只支援採用 Tailwind CSS 樣式的 React 與 Next.js 專案，其他框架目前進不來。
- 免費方案限制 AI 訊息量，助理在未付費的情況下能做的事有限。
- 託管版 Teams 方案沒有公開價格，得先聯絡業務才能比較成本。
- 自架一套實例，需要一點部署網頁應用的技術底子。
常見問題
Onlook 是編輯真實 React 與 Next.js 程式碼的視覺化編輯器。你在畫布上建立、調整樣式與打樣網頁介面，修改進到程式庫，而不是留在獨立的設計檔裡。
相關內容
探索與 Onlook 相關的工具、技能與文章。
Onlook 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。