Onlook

Onlook官网

Onlook 是一款开源的可视化前端编辑工具，专为 React 应用设计，https://onlook.com/ 是其官方网址，代码同样托管在 GitHub。它试图弥合设计师与开发者之间的那道墙：设计师像用 Figma 一样，直接在运行中的 React 应用上点选、拖拽、调整界面，所有修改实时生效并自动转换为规范的 React + TailwindCSS 代码，可直接推送回代码库——设计稿和代码从此是同一份东西。

主要功能

• 实时视觉编辑：在浏览器中直接修改运行中的 React 应用 UI，所见即所得，热重载即时反馈。
• 设计转代码：每次修改自动同步为真实代码，可推送到代码库，无需设计师出标注、开发者再还原。
• 本地优先：所有操作在本地完成，代码不出机器，安全与隐私可控。
• 组件级管理：支持对组件做样式调整与属性修改，复用代码库中已有的设计系统组件与变量，保持可维护性。
• 无缝集成：接入现有 React 项目无需复杂设置或迁移。
• 开源生态：项目完全开源，支持自部署与社区扩展，框架支持持续扩展中。

如何使用Onlook

从官网下载应用或从 GitHub 获取源码，打开后导入现有的 React 项目（支持 TailwindCSS），无需迁移或改造成本。

设计师在画布上像操作设计工具一样点选页面元素，直接调整布局、样式与文案，改动实时预览并自动写入代码；开发者照常走 Git 流程审查这些变更，合并即可上线，双方不再靠截图和标注沟通。

想在设计工具链里补齐其他环节的话，原型阶段可以用墨刀AI，平面与营销物料有稿定AI和美图设计室，3D 素材则可看堆友AI，与 Onlook 的前端可视化编辑形成上下游配合。

使用场景

• 快速 UI 原型：在真实运行环境里做界面设计与测试，原型即代码。
• 设计开发协作：设计师直接改出可用界面，开发者拿到的就是规范代码。
• 设计系统维护：基于现有组件与变量修改，保证设计一致性与代码可维护性。
• 开发者：自己兼设计的前端工程师，用可视化方式快速调整界面细节。

常见问题

Onlook 免费吗？

项目开源免费，可自行部署使用；托管的云端服务如有付费方案，以官网说明为准。

支持哪些技术栈？

目前支持 React 与 TailwindCSS，官方计划扩展到更多前端框架。

修改会破坏代码吗？

所有改动以标准代码形式写入并可走 Git 审查流程，开发者保留完全控制权，不满意的变更直接回滚。

官网网址：

Onlook官网：https://onlook.com/

OpenI AI时代点评

Onlook 抓住了前端协作里最顽固的痛点——“设计稿永远和代码对不上”。它没有做又一个原型工具，而是让设计直接发生在运行中的应用上，输出物就是代码，本地优先加开源的路线也让工程团队敢放心用。对 React + TailwindCSS 技术栈的团队，它几乎是无缝的协作增强器；对其他栈的用户则要再等等框架扩展。局限也明显：复杂业务逻辑与状态管理仍需开发者处理，它解决的是“视觉层”的协作，别指望设计师用它改业务代码。