onlook-dev/onlook

What it solves

Onlook 解決了視覺設計與前端開發之間的摩擦。它允許設計師和開發者在瀏覽器中以視覺化方式編輯實時連接的網站 UI，同時自動將這些更改同步回底層的 Next.js 和 TailwindCSS 代碼，從而消除手動將 Figma 設計轉換為代碼的需求。

How it works

Onlook 將項目的代碼加載到 Web Container 中，並在 iFrame 中提供應用程序。編輯器會對代碼進行索引並進行插樁 (instruments)，以在瀏覽器中的 DOM 元素與源代碼中的特定位置之間建立直接映射。當用戶在編輯器中進行視覺化更改時，Onlook 會更新 iFrame 中的元素，並同時修改對應的代碼。它還集成了與代碼訪問權限的 AI chat，可以透過文字或圖片提示詞來生成或編輯組件。

Highlights

• Visual-to-Code Sync: 更改在代碼中實時同步。直接在瀏覽器 DOM 中編輯元素，直接對應應用的應用。

• AI-Driven Creation: 透過文字或圖片提示詞生成 Next.js 應用程序和組件。 ext{- }Figma-like Interface: 包含一個具有圖層瀏覽、品牌資產管理和組件面板的視覺化編輯器。

• Developer Tooling: 特徵徵於一個並排的代碼編輯器、CLI 命令執行和檢查點 (checkpoint) 保存/恢復。

• Rapid Deployment: 能夠快速生成可分享的鏈接和連接自定義域名。