Onlook – 开源AI视觉编辑工具，设计修改自动同步代码

Onlook是什么

Onlook 是个开源的视觉编辑工具，面向 React 应用，说白了就是让设计师和开发协作顺畅一点。你可以直接在浏览器里改一个跑着的 React 应用的 UI，改动立刻可见，还会自动同步成代码推回仓库。它目前支持 React 和 TailwindCSS，后面会继续加框架。塞进现有项目就能用，不用折腾配置，所有操作都在本地完成，数据安全有保障。设计师可以像用 Figma 那样做可视化设计，开发直接拿到改好的代码，效率提上来不少。

Onlook的主要功能

• 实时改设计：浏览器里直接修改运行中的 React 应用 UI，效果当场可见。
• 代码同步：设计改动自动转成代码，可推送到代码库。
• 本地优先：所有操作都在你机器上进行，数据和隐私自己握着。
• 多框架支持：现在支持 React 和 TailwindCSS，之后会扩展更多框架。
• 无缝集成：轻松接入现有 React 项目，不用复杂配置或迁移。支持热重载，设计一改，应用里立刻能看到。
• 团队协作：设计师和开发分工清楚，一方负责视觉，一方接收生成的代码，来回沟通的成本省了不少。
• 组件管理：支持编辑和管理组件，调样式、改属性都能做，代码照样保持可维护。

Onlook的官网地址

• 官网地址：onlook.com
• GitHub仓库：https://github.com/onlook-dev/onlook

Onlook的应用场景

• 快速做 UI 原型：设计师直接在实时的 React 环境里设计和测试，新 UI 原型很快就能搭出来。
• 设计与开发协作：设计和开发之间常见的交接断层在这里被填平了。设计师在浏览器里可视化编辑，开发实时拿到改好的代码合进项目。
• 设计系统维护：团队可以直接复用代码库里现成的设计系统组件和变量，整体更新时设计保持一致，代码也好维护。
• 本地开发与代码控制：作为本地优先的工具，所有操作都跑在你自己的机器上，代码安全性和隐私都不用操心。