提交您的产品 
Ai应用
Ai资讯
AI生图
AI生视频
AI生PPT
AI数字人系统
Onlook
Onlook简介
Onlook是什么？
Onlook 是一款面向设计师的工具，设计师的Cursor，支持对 React 网站进行可视化编辑并实时将修改写入代码。其功能包括构建网站、调整布局 / 颜色 / 文本等样式（如自动布局、字体、边距等）、管理图层和样式变量（颜色 / 文本样式），支持导入现有项目或新建 React 应用，强调代码所有权归用户、本地运行保障安全、兼容现有构建流程且开源。
Onlook核心功能
可视化编辑：设计师可以在浏览器中可视化编辑 React 和 TailwindCSS 项目，修改实时反映在代码中。
辅助设计：帮助用户构建、设计和实验想法，使前端设计更具交互性。
实时同步：设计更改实时同步到代码，无需手动调整。
本地编辑：所有操作在本地机器完成，保障代码安全和隐私。
兼容流程：无需添加新组件或迁移，无缝集成现有开发流程。
Onlook应用场景
快速原型设计：在 React 环境中设计和测试界面，快速创建 UI 原型。
协作：设计师在浏览器中编辑，开发人员获取代码并集成项目。
维护设计系统：团队通过 Onlook 更新和维护设计系统。
Onlook使用方法
下载应用：访问官网或下载桌面应用，支持 Apple Silicon 和 Windows。
导入或新建项目：导入现有 React 项目或从 Onlook 开始新项目。
调整设计：在可视化界面中调整布局、色彩、排版等，修改实时反映在代码中。
保存和版本控制：支持版本控制，用户可随时回滚并维护代码版本。
常见问题
问：Onlook 与传统设计工具（如 Figma）的核心区别是什么？
Onlook 不仅是设计工具，还能将可视化修改实时转化为可运行的 React 代码，直接衔接开发流程，而传统工具需手动切图和编码。其功能还能辅助生成交互逻辑，减少手动编码量。
问：用户是否拥有生成代码的完全控制权？
是的。Onlook 强调代码所有权归用户所有，支持本地运行、版本控制（如 Git 回滚），且平台从不将代码部署到生产环境，用户可完全自主管理代码。
问：Onlook 对现有项目的兼容性如何？是否需要迁移组件？
Onlook 可直接导入现有 React 项目（包括使用 Tailwind 样式的项目），无需添加新组件或修改构建流程，兼容原生开发环境，降低学习和迁移成本。
开源项目：https://github.com/onlook-dev/onlook
