Onlook 是一个开源的、本地优先的视觉编辑工具，专为开发者和设计师打造。它能让你直接在运行中的 React 应用上调整界面，并把改动实时写回代码库。通过直观的界面和 AI 辅助，它让设计和开发之间的协作变得简单，特别适合快速迭代和原型设计。

Onlook 的主要用途

Onlook 是一个视觉化集成开发环境（IDE），主要用于编辑和管理 React 应用的界面。它的目标是消除设计到开发过程中的传统障碍。具体来说，它能帮你做这些事：

它很适合个人开发者、小型团队或需要快速构建高质量界面的场景。

Onlook 的核心功能

你可以在浏览器里直接编辑运行中 React 应用的 DOM，修改布局、颜色、文本或组件样式，结果会实时显示并写回代码。比如调整按钮样式或测试新布局。操作很直观，类似 Figma 的拖拽工具，支持右键点击元素跳转到对应代码位置，也支持撤销和回滚。

视觉编辑的更改可以生成代码，并通过 GitHub 创建拉取请求。配置一次仓库，就能把改动推到指定分支。设计师改完界面，开发者可以直接在 GitHub 上审查合并代码，无需手动编写 CSS 或 JSX。它支持 Next.js 和 TailwindCSS 项目，所有操作在本地完成。

集成了 AI 功能，可以根据你的描述生成布局、样式、组件或内容，还能优化现有设计。例如，输入“创建一个现代风格的登陆页面”，AI 就能生成兼容 React 和 TailwindCSS 的代码，让你快速测试多种风格。

提供仪表盘来管理项目、查看编辑历史和跟踪更改。你可以创建新项目、导入现有 React 项目，或从内置的演示项目开始。仪表盘会显示项目的最新更新和更改详情，支持管理多个应用的 UI 编辑任务。

支持主流 React 框架（如 Next.js）和样式库（如 TailwindCSS、ShadCn），无需额外组件或复杂迁移。通过简单的配置（如更新 next.config.js）即可启用，支持本地开发环境和已部署的网站。

Onlook 是托管在 GitHub 上的开源项目，用户可以查看源代码、报告问题或贡献功能。自 2024 年 7 月发布以来，已获得超过 6800 个 GitHub 星，社区活跃，提供详细的贡献指南。

提供桌面应用程序（支持 Apple Silicon 和 Windows）以及浏览器扩展，方便在不同设备上编辑。桌面应用免费下载，浏览器扩展支持快速启动编辑模式，所有设计都坚持本地优先。

它直观易用，提供类似 Figma 的视觉编辑界面，设计师无需写代码就能调 UI，开发者也能方便地审查 AI 生成的代码。作为开源工具，代码透明，社区可自由审查和贡献。本地优先的设计确保了数据隐私。