Onlook：开源版「设计师的 Cursor」来了
前言
Cursor 改变了开发者写代码的方式，但在设计师和开发的交接环节，依然存在一道鸿沟：
- 设计师在 Figma 里精心调好的样式，到了开发手上总有偏差
- 改一个按钮颜色，需要完整的开发环境
- “帮忙调一下间距”这类小事，却要打断开发的工作流
Onlook 想解决的就是这个问题。它自称 “The Cursor for Designers”——让设计师可以直接在浏览器里可视化和编辑 React 应用，并且所有修改都会同步回代码。
项目速览
| 属性 | 详情 |
|---|---|
| ⭐ Stars | 24.9k |
| 🍴 Forks | 1.9k |
| 🏷️ 标签 | AI, Cursor, Design-to-Code, React, TypeScript |
| 📜 许可证 | Apache 2.0 |
| 🔗 仓库 | https://github.com/onlook-dev/onlook |
| 🌐 官网 | https://onlook.com |
一句话总结：Onlook 是一个开源的、AI 优先的 React 可视化编辑器，让设计到代码的链路彻底打通。
核心功能
1. 可视化编辑 React 组件
这是 Onlook 的核心能力：
设计师视角：点击元素 → 修改样式 → 实时预览
↓
开发者视角：代码自动更新，组件结构保持不变不同于传统的页面搭建工具，Onlook 直接读取你的 React 源码，理解组件结构，让你能在不破坏代码的前提下进行可视化编辑。
2. AI 驱动的智能修改
内置 AI 助手，你可以像和 Cursor 对话一样，直接在界面上发出指令：
“把这个卡片改成玻璃拟态风格” “所有按钮统一加上 hover 动效” “调整布局适配移动端”
AI 会理解你的意图，并生成对应的 Tailwind CSS 代码。
3. 实时代码同步
所有修改都会实时写回源代码：
- ✅ 支持 Tailwind CSS 类名的智能添加和修改
- ✅ 保留原有的组件逻辑和状态
- ✅ 不会生成难以维护的冗余代码
- ✅ 支持 Next.js、Vite 等主流框架
4. 设计系统感知
Onlook 能理解你的设计系统：
- 自动识别项目中已有的颜色变量
- 推荐符合现有规范的间距和字号
- 确保新增样式与设计语言保持一致
Onlook vs Cursor vs Figma
| 维度 | Onlook | Cursor | Figma |
|---|---|---|---|
| 目标用户 | 设计师 + 开发者 | 开发者 | 设计师 |
| 输入方式 | 可视化 + 自然语言 | 代码 + 自然语言 | 可视化 |
| 输出 | 可运行的 React 代码 | 代码 | 设计稿 |
| 代码关联 | 直接编辑源码 | 直接编辑源码 | 需要手动转换 |
| AI 集成 | 深度内置 | 深度内置 | 有限 |
| 开源 | ✅ 是 | ❌ 否 | ❌ 否 |
关键区别：
- Cursor 是让开发者更高效地写代码
- Figma 是让设计师脱离代码限制自由创作
- Onlook 是桥接两者——让设计师能直接操作代码，但又不用写代码
技术栈解析
Onlook 的架构选择很有意思：
前端框架：React + TypeScript
样式方案：Tailwind CSS
后端服务：Supabase（开源 Firebase 替代）
数据库：PostgreSQL（通过 Supabase）
编辑器核心：自研可视化引擎 + Monaco Editor
AI 层：多模型支持（OpenAI、Claude 等）为什么选择 Supabase？
- 开源：符合整个项目的开源理念
- 实时：内置 WebSocket 支持，方便协作功能
- PostgreSQL：成熟的关系型数据库，支持复杂查询
- 认证即服务：省去自己造登录系统的麻烦
可视化引擎的难点
把 React 组件树映射为可编辑的视觉元素，技术上并不简单：
- AST 解析：需要读懂 JSX 结构
- 样式计算：处理 Tailwind 的复杂类名组合
- 状态管理：确保编辑时不破坏组件逻辑
- 代码生成：修改后的代码要符合原有风格
Onlook 选择了与源码深度绑定的策略，而不是生成新的代码，这保证了可维护性。
使用场景
✅ 适合的场景
- 快速原型：从现有组件出发，快速搭建新页面
- 设计微调：不需要打开 IDE，直接改样式
- 跨职能协作：设计师可以自己改，开发者专注逻辑
- 维护旧项目：可视化理解陌生代码库的 UI 结构
❌ 不适合的场景
- 从零开始的全新设计（先用 Figma）
- 复杂的交互逻辑开发
- 非 React 技术栈的项目
快速上手
安装
# 通过 npm
npm install -g onlook
# 或通过官网下载桌面端
https://onlook.com/download启动
# 在你的 React 项目目录下
onlook
# 或者指定路径
onlook ./my-project使用流程
- Onlook 会扫描你的 React 组件
- 自动启动本地预览服务器
- 在可视化界面中点击任意元素进行编辑
- 所有修改实时同步回源码
项目现状与展望
截至 2026 年 3 月：
- 24.9k Stars 表明社区对这类工具的强烈需求
- 351 个 Open Issues 说明还有很多功能在迭代
- 最后更新：2026 年 2 月，活跃维护中
值得关注的方向
- 更多框架支持：目前主要支持 React，Vue/Svelte 版本可能在规划中
- 团队协作：基于 Supabase 的实时协作功能
- 设计系统导入：从 Figma 直接导入设计 token
- AI 能力增强：更智能的代码理解和生成
总结
Onlook 代表了设计工具演进的一个方向：让设计稿和代码之间的边界越来越模糊。
它不是要取代 Figma 或 Cursor，而是填补两者之间的空白——让设计师能直接操作代码，让开发者不用再当”样式调参工程师”。
对于已经有 React 基础的项目，Onlook 能显著提升设计和开发的协作效率。如果你是全栈开发者或者设计开发者（Design Engineer），这个工具值得关注。
开源、免费、Apache 2.0 协议——这意味着你可以：
- ✅ 个人项目免费使用
- ✅ 公司内部部署
- ✅ 二次开发和定制
相关链接：