设计师的下一个 Cursor？26k Star 的 AI 设计工具来了
做设计最崩溃的瞬间是什么？甲方说「这里改一下」——你改了，代码跑偏了，设计师和开发互相甩锅。这种割裂，本质上是创意表达和代码实现之间的那条鸿沟，一直没被真正填平过。
今天想安利一个开源项目，叫 Onlook。它给自己的定位很有意思——「The Cursor for Designers」，设计版的 Cursor。听起来有点狂，但用下来，我觉得它真的在往这个方向走。
设计稿直接变成代码，不用求开发
Onlook 是一个 AI 驱动的可视化设计工具，专注于 Next.js + TailwindCSS 项目。它的核心交互很直接：在画布上拖拽、编辑、调整样式——就像 Figma 那样，但每一步操作都会实时反映到代码里。
你不需要懂代码，也能「所见即所得」地做设计；开发也不用等你出图再自己敲，直接看代码就行。双方从一开始就在同一套语言里工作，返工大幅减少。
AI 加持的设计 workflow，有意思在哪
Onlook 集成了 AI 对话能力。你可以直接用自然语言描述需求，比如「帮我把 Banner 那块改成深色背景」，AI 会理解你的意图，直接改代码。
更关键的是 MCP 支持——你可以把 Onlook 本身作为一个工具接进更大的 AI workflow 里，做自动化设计迭代。懂技术的团队可以玩出很多花样。
此外还有：
- 图层管理：类 Figma 的层级面板，拖拽、显示/隐藏都很顺
- 实时预览：改完马上看到效果，不用手动刷新
- 分支设计：想试两套方案？开两个分支互不干扰
- 部署一条龙：设计完直接分享链接，或者接自定义域名
技术栈也挺有意思
Onlook 的架构值得多说一句。它不是另起炉灶的封闭工具，而是把自己嵌进你已有的 Next.js 项目里。读代码 → 解析 → 映射到 DOM → 编辑 → 回写代码，整个链路是打通的。
所以它理论上可以支持任何声明式 DOM 框架（JSX/TSX/HTML），只不过目前官方聚焦 Next.js + TailwindCSS。技术团队可以基于这个架构做定制开发。
适合谁用
- 设计师：想自己验证设计效果，不求人开发
- 独立开发者：想快速出 UI 界面，有设计 sense 但不深度懂 CSS
- 设计团队：和开发之间总在「图对代码」的损耗里挣扎
当然，它不是 Figma 的替代品——复杂品牌设计、组件库管理这些，Figma 依然更强。但如果你在用 Next.js 做产品，想让设计流程更顺滑，Onlook 值得一试。
GitHub 开源免费，Star 数已经 26.5k，说明社区认可度相当高。官网有托管版，也支持本地跑，文档挺全的。
评论区
登录后可评论。