Onlook 是一个开源的、本地优先的视觉编辑工具，专为开发者和设计师打造。它能让你直接在运行中的 React 应用上调整界面，并把改动实时写回代码库。通过直观的界面和 AI 辅助，它让设计和开发之间的协作变得简单，特别适合快速迭代和原型设计。
Onlook 的主要用途
Onlook 是一个视觉化集成开发环境（IDE），主要用于编辑和管理 React 应用的界面。它的目标是消除设计到开发过程中的传统障碍。具体来说，它能帮你做这些事：
- 实时编辑 React 应用界面：在浏览器里直接修改运行中的应用，调整布局、样式或内容，更改会自动写入代码。
- 促进设计与开发协作：为设计师、开发者、产品经理提供一个统一平台，降低技术门槛。
- 快速原型设计：通过 AI 或直观工具快速构建和测试新界面，加速产品迭代。
- 无缝集成现有项目：无需迁移代码，可直接与现有的 React 项目（如基于 Next.js 或 TailwindCSS）集成。
- 开源与本地优先：所有操作在本地设备进行，数据不上传云端，确保隐私和安全。
它很适合个人开发者、小型团队或需要快速构建高质量界面的场景。
Onlook 的核心功能
实时视觉编辑
你可以在浏览器里直接编辑运行中 React 应用的 DOM，修改布局、颜色、文本或组件样式，结果会实时显示并写回代码。比如调整按钮样式或测试新布局。操作很直观，类似 Figma 的拖拽工具，支持右键点击元素跳转到对应代码位置，也支持撤销和回滚。
代码与 GitHub 集成
视觉编辑的更改可以生成代码，并通过 GitHub 创建拉取请求。配置一次仓库，就能把改动推到指定分支。设计师改完界面，开发者可以直接在 GitHub 上审查合并代码，无需手动编写 CSS 或 JSX。它支持 Next.js 和 TailwindCSS 项目，所有操作在本地完成。
AI 辅助设计
集成了 AI 功能，可以根据你的描述生成布局、样式、组件或内容，还能优化现有设计。例如，输入“创建一个现代风格的登陆页面”，AI 就能生成兼容 React 和 TailwindCSS 的代码，让你快速测试多种风格。
项目管理与仪表盘
提供仪表盘来管理项目、查看编辑历史和跟踪更改。你可以创建新项目、导入现有 React 项目，或从内置的演示项目开始。仪表盘会显示项目的最新更新和更改详情，支持管理多个应用的 UI 编辑任务。
兼容性与灵活性
支持主流 React 框架（如 Next.js）和样式库（如 TailwindCSS、ShadCn），无需额外组件或复杂迁移。通过简单的配置（如更新 next.config.js）即可启用，支持本地开发环境和已部署的网站。
社区与开源贡献
Onlook 是托管在 GitHub 上的开源项目，用户可以查看源代码、报告问题或贡献功能。自 2024 年 7 月发布以来，已获得超过 6800 个 GitHub 星，社区活跃，提供详细的贡献指南。
跨平台支持
提供桌面应用程序（支持 Apple Silicon 和 Windows）以及浏览器扩展，方便在不同设备上编辑。桌面应用免费下载，浏览器扩展支持快速启动编辑模式，所有设计都坚持本地优先。
Onlook 的特点与优势
它直观易用，提供类似 Figma 的视觉编辑界面，设计师无需写代码就能调 UI，开发者也能方便地审查 AI 生成的代码。作为开源工具，代码透明，社区可自由审查和贡献。本地优先的设计确保了数据隐私。
