Onlook
比Figma更实用，是给设计师的Cursor
直接在运行中的React应用上拖拽改样式、AI生成组件，修改自动同步到代码库里，无需反复切工具
核心功能
可视化编辑
像用Figma一样在画布上拖拽组件、改颜色调间距，所有操作所见即所得
AI聊天助手
用自然语言描述需求，自动生成组件和页面，也可让它帮忙改样式修布局
代码实时同步
画布上的每一次改动都会自动写入React和TailwindCSS代码库，不丢任何细节
Figma导入
直接把Figma设计稿导入并转换为可运行的React组件，保持设计还原度
一键部署
项目完成后一键生成可分享链接或绑定自定义域名，对外展示不折腾
检查点回溯
随时保存项目快照，试错了能一键恢复，大胆尝试不同方案
产品特色
- 01
开源免费，完全不用花一分钱
采用Apache 2.0协议，代码完全开放，任何人可免费下载使用甚至二次开发
- 02
设计师的Cursor，精准解决协作痛点
由十年经验设计师和亚马逊前工程师联合打造，真正站在双边视角设计工具
- 03
#1 Trending GitHub，社区热捧
GitHub超8500星，登顶趋势榜榜首热度甚至超过DeepSeek，社区非常活跃
- 04
本地优先，代码永远在自己手里
不像Figma那样走云端，所有操作在本地完成，数据不上传，隐私安全有保障
- 05
AI驱动，一句话搞定组件
无需写样板代码，让AI按照你的描述直接生成可用组件，开发效率拉满
应用场景
✅ 快速原型
设计师直接在生产环境中拖拽搭建高保真原型，省去在Figma和代码间来回倒腾
✅ 设计协作
开发和设计在同一个界面上协作，改完即时同步到代码，彻底告别反复沟通返工
✅ 设计系统维护
团队集中管理颜色、字体等设计资产，用视觉化方式直接更新，不用进代码里翻找
✅ 创业MVP
创业团队快速验证产品想法，零前端基础也能边画界面边获得可用代码，加速迭代
✅ 教学培训
教师用可视化界面教授React原理，学生边拖拽边看代码变化，学习曲线大幅降低
常见问题
解答您关于"Onlook"的常见疑问，让您更好地使用这款AI工具
-
完全免费开源。本地运行不花一分钱，云端版本提供免费套餐，AI消息每日5条，足以日常使用。
-
目前深度支持React和Next.js配合TailwindCSS。官方计划未来扩展更多框架，但已经是大量项目的主流选择。
-
不需要。下载桌面客户端或运行一行命令即可启动，所有计算都在本地完成，像普通软件一样用。
-
完全可以。可视化操作界面和Figma几乎没有差别，设计师拖拽改样式，代码自动生成，不写一行也能用。
-
没问题。在现有React+TailwindCSS项目根目录运行npx onlook，就能把整个项目接入Onlook编辑器。
立即体验 Onlook
Onlook是一款开源的React可视化编辑器，被誉为“设计师的Cursor”。提供类似Figma的直观画布，支持在浏览器中对React/Next.js应用进行实时编辑，所有修改自动同步为可推送的TailwindCSS代码。内置AI聊天助手，支持自然语言生成组件、修改样式。采用本地优先架构，数据不出本地，无需云端上传。完全开源免费，支持拖拽式布局、设计令牌管理、一键部署和实时协作。适合设计师、开发者及创业团队。