Onlook

把既有 React 元件放上視覺畫布，直接修改並回寫程式碼的開源編輯器。

  • AI 程式
前往 Onlook 官方網站

這是什麼

Onlook 是以程式碼為基礎的視覺編輯器。它在瀏覽器式畫布中呈現 React 元件，讓使用者選取元素、調整樣式，再將變更寫回專案。

為何推薦

設計調整不必先做一份獨立 mockup。團隊可直接用既有元件與樣式規則工作，工程師再透過原本的 Git 流程檢視差異。

適合誰

使用 React 與 Tailwind CSS，想讓設計和前端工作更貼近同一份程式碼的團隊。

常用情境

  • 在畫布上調整既有頁面的間距、文字與版面
  • 以 AI 協助產生或修改介面元件
  • 將視覺修改保留在原本的 code review 流程

stagewise

將 coding agent、多個程式碼工作區、瀏覽器與終端機整合在同一桌面環境的開源 IDE。

  • agentic-ide
  • multi-workspace
  • local-models

Bolt.new

透過對話建立網站、應用程式與原型的 AI 開發環境。

  • ai
  • app-builder
  • prototype

Claude Code

可在終端機、IDE 與其他工作環境中協助處理程式庫的 AI 工具。

  • ai
  • terminal
  • codebase