繁中
English繁中

視覺、人工智慧驅動的React應用程式編輯器

作者: /

設計師的Cursor-一個開源、視覺優先的代碼編輯器一個開源、基於視覺編輯的代碼編輯器，專為設計師優化，旨在使用戶能夠通過AI和直接編輯瀏覽器中的DOE功能在代碼編輯器中進行設計和編碼。
使用人工智慧在Next.js + Tailwind CSS中構建網站、原型和設計。通過可視化編輯器直接在瀏覽器DOE中編輯。實時使用代碼進行設計。這是Bolt.new、Lovable、V0、Replit Agent、Figma Make、WebFlow和其他產品的開源替代品。

項目概述

  • 項目定位Onlook是一個視覺優先的編輯器，可以直接在瀏覽器中操作React+ Next.js/Tailwind CSS項目。效果瞬間體現在代碼中，相當於Figma+VS Code的融合
  • AI+視覺編輯組合：你可以使用AI生成頁面，使用聊天風格的提示修改樣式、布局或內容，你可以在「設計模式」下拖放元素，同時在「預覽模式」下觀察效果。這些更改將同步回代碼。
  • 技術棧和架構：
    • 前端：Next.js + Tailwind + tPPC
    • 數據：Supplement（Auth/Storage），Drizzle
    • 人工智慧：Anthropic、Morph Fast Apps、Relace等模型
    • 運行：Bun、CodeSandbox SDK、Docker
  • 歷史演變：
    • 最初，它是電子桌面客戶端;
    • 後來，它遷移到Web版本以避免大量用戶下載，並使用iframe +沙箱來呈現編輯器和項目代碼

功能亮點

  1. 二建項目：您可以從文本提示、圖片、Figma或GitHub存儲庫快速啟動Next.js應用程式

當前狀態和社區反饋

  • 趨勢和社區受歡迎程度：Onlook是JC W25項目。它曾在GitHub上名列前茅，星級超過17k，社區反饋熱烈。
  • 接收用戶反饋：創始團隊活躍在Hacker News和Discord上，積極回應錯誤報告和改進建議。
  • 仍在開發中：Web版本處於Alpha/Beta階段，存在「無法滾動預覽」、「AI應用失敗」等小問題。同時，下一步將支持導入現有項目、頁面構建、版本控制等功能。

總結

Onlook是一款面向設計師和開發人員的開源視覺編輯工具，支持實時人工智慧驅動的模板創建、拖放編輯、代碼同步和雲部署。目前處於早期Web版本，預計它對Figma和開發IDE的綜合用戶特別有吸引力。

Github： https://github.com/onlook-dev/onlook
輸油管：

返回頂端