Onlook
Onlook是开源AI可视化React代码编辑器，让设计师在无限画布上直接编辑真实Next.js代码，改动实时写回源文件并生成可合并PR，支持Tailwind和shadcn/ui，GitHub星标超2.2万。
| 基本信息 | 详情 |
|---|---|
| 开发公司 | Onlook（Y Combinator W25 batch，总部旧金山） |
| 上线时间 | 2025年开源，2026年推出托管版 |
| 官网 | https://www.onlook.com/ |
| 支持平台 | Web（浏览器使用，无需安装） |
| 价格 | 开源免费；托管版Early Access需加入等待名单 |
| 核心定位 | 面向设计师的AI可视化React代码编辑器 |
Onlook给自己的定位是"Cursor for Designers"--让设计师像用Figma一样，直接在真实的React代码库上做视觉编辑。GitHub星标超2.2万，是YC W25批次的项目。它解决的是一个老问题：设计到开发的交接摩擦。
传统的流程是这样的：设计师在Figma里画好稿，开发拿到后用React重新实现一遍，然后两人在间距、字体、响应式上来回拉扯。Onlook把这段流程砍掉了。设计师直接在无限画布上拖拽、调整真实React组件，每一次改动都实时写回TypeScript源码，最终生成可合并的Pull Request。
我研究下来觉得它最聪明的设计是"画布即代码库"。不像Webflow或Framer那样维护一个独立的设计层，Onlook直接读取你现有的Next.js项目结构--App Router路由、Tailwind配置、shadcn/ui组件、Server Components，全部原样出现在画布上。不需要重建组件库，不需要维护两套设计系统。
核心功能
可视化代码编辑 设计师在无限画布上拖拽、缩放、排列元素，像用Figma一样操作。但每次操作背后都在生成真实的JSX和Tailwind CSS代码，直接写回源文件。设计和代码是同一个操作，不是两个。
AI辅助设计 集成Anthropic等多家LLM。用自然语言告诉AI"把这个卡片改成圆角"、"加一个响应式断点"，AI直接改代码。AI被约束在你的设计系统内--使用你的颜色、字体和token，不会产生品牌偏移。
代码库集成 通过GitHub认证读取你的Next.js项目，支持App Router和Pages Router。Server Components正确识别和显示。不需要迁移平台或重建组件，直接在现有代码上叠加可视化编辑。
组件系统 shadcn/ui组件原样出现在画布上。可自定义可复用组件，跨页面替换。Storybook集成支持已有设计系统直接展示。
团队协作 实时多人编辑，空间评论（在画布上直接标注）。版本历史可回滚到任意之前的版本。项目URL可分享给团队成员。
PR工作流 设计改动变成可合并的Pull Request，走你团队现有的git review流程。CI、部署、托管（Vercel/Netlify/自托管）全部不变。Onlook只是设计界面，交付管线原封不动。
品牌合规 字体、颜色、样式统一管理。AI生成内容受设计系统约束，不会出现不在你色板里的颜色。
适合谁
想直接在代码库上做视觉迭代，不用等开发排期
快速验证UI改动效果，改动直接变成PR给开发review
把重复的样式调整工作交给设计师，自己聚焦在逻辑实现
没有专职设计师，用AI辅助快速搭建和迭代产品界面
在客户现有React项目上做设计交付，不用维护平行设计系统
同类竞品对比
| 维度 | Onlook | Figma | Webflow | V0 (Vercel) | Framer |
|---|---|---|---|---|---|
| 代码库集成 | 直接读写真实React代码 | 无，独立设计层 | 生成独立代码 | 生成新代码 | 独立代码 |
| AI能力 | 受设计系统约束的AI编辑 | AI插件生态 | AI辅助有限 | 强，生成式AI | AI辅助有限 |
| 开源 | 是 | 否 | 否 | 否 | 否 |
| 价格 | 免费（开源） | $12-75/编辑者/月 | $14-39/月 | 免费起，Pro $20/月 | 免费起 |
| 适合场景 | 已有Next.js代码库的团队 | 设计协作 | 从零建站 | 快速原型 | 营销页面 |
我们的判断：如果你团队已经有Next.js代码库，想让设计师直接在上面迭代，Onlook是目前唯一真正解决"设计即代码"的工具。但如果你是从零开始建站，V0或Webflow更合适。Onlook不适合没有React代码库的团队。
FAQ
Onlook是免费的吗？ 开源版本完全免费，GitHub上可自部署。托管版目前Early Access，需加入等待名单，具体定价见官网。
需要会写代码吗？ 不需要。设计师通过可视化画布操作，Onlook在后台生成代码。但如果懂基础React/Tailwind概念，使用效率会更高。
支持哪些技术栈？ Next.js（App Router和Pages Router）、React、Tailwind CSS、shadcn/ui。也支持CSS-in-JS和CSS Modules。目前不支持移动端App。
和Figma有什么区别？ Figma维护独立的设计层，设计稿需要开发手动转成代码。Onlook直接在真实代码库上编辑，画布上的组件就是代码库里的组件，改动直接写回源文件。
改动会覆盖开发者的代码吗？ 不会。改动以Pull Request形式提交，走你团队现有的git review流程。开发者review后决定是否合并。
可以自部署吗？ 可以。Onlook是开源项目，GitHub上提供完整的自部署文档和Docker配置。
更新动态
近期Onlook的更新集中在安全性和企业级工作流。2026年7月的commit强化了项目成员授权机制，所有tRPC端点都做了权限校验。品牌提取功能（基于Firecrawl）让新项目接入时能自动从现有网站提取设计token。团队正在旧金山招聘工程师，扩展速度在加快。
客户评论
综合评分：4.5/5（基于SwitchTools等平台汇总）
- "设计师终于不用等开发排期了。改个间距直接在画布上拖，PR自动生成，开发review一下就合并。"--设计负责人，SaaS公司
- "最爽的是AI受设计系统约束，生成的颜色和字体都在我们的token里，不会出现乱七八糟的样式。"--前端开发者
- "开源这一点太关键了。我们可以自部署，数据不出公司，法务没意见。"--CTO，金融科技公司
- "不适合从零建站的团队。你得先有Next.js代码库才能用，这是前提条件。"--产品经理
参考来源
- ▸Onlook官网 | 首页,Onlook产品介绍与功能展示
- ▸Onlook | Next.js专用页面,Next.js团队集成说明
- ▸Onlook GitHub | 开源仓库,开源代码库与更新历史
- ▸Onlook | 功能特性页,核心功能详细说明
- ▸SwitchTools | Onlook评测,产品功能与优缺点分析