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，可以通过文本或图像提示词来生成或编辑组件。

Who it’s for

它专为使用 Next.js 和 TailwindCSS 的 AI 原生设计师和前端开发人员设计，他们希望在不离开代码库的情况下以视觉化方式进行原型设计并构建用户界面。

Highlights

• Visual-to-Code Sync: 直接在浏览器 DOM 中编辑元素，更改会实时反映在代码中。
• AI-Driven Creation: 从文本或图像提示词开始生成 Next.js 应用和组件。
• Figma-like Interface: 包括具有图层浏览、品牌资产管理和组件面板的视觉编辑器。
• Developer Tooling: 特色是并排的代码编辑器、CLI 命令执行和检查点 (checkpoint) 保存/恢复。
• Rapid Deployment: 能够快速生成可分享的链接并连接自定义域名。