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聊天助手,支持自然语言生成组件、修改样式。采用本地优先架构,数据不出本地,无需云端上传。完全开源免费,支持拖拽式布局、设计令牌管理、一键部署和实时协作。适合设计师、开发者及创业团队。