onlook
设计师的AI编程工具：可视化操作直接生成Next.js+TailwindCSS代码
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
设计师的AI编程工具：可视化操作直接生成Next.js+TailwindCSS代码
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
想象一个场景：产品经理指着界面上的一个圆角按钮说"这个蓝色能不能再浅一点"，设计师以前需要等前端开发排期，现在只需要在画板上拖动一下——这个改动的代码瞬间同步到 Next.js 源文件。这不是科幻，而是 Onlook 正在做的事。
Onlook 是一个开源的 AI 优先设计工具，被称为"设计师的 Cursor"。它的核心定位是：让设计师在不写代码的情况下，直接编辑 React 应用的 DOM 结构和样式，代码会通过 AI 自动生成并写入仓库。2024 年由前 Figma 工程师创立，目前在 GitHub 拥有超过 25,000 颗星。
传统设计工具（Sketch、Figma、Adobe XD）止步于设计稿，而 Onlook 的野心是打通设计和代码之间的"最后一公里"。它的灵感来源是 Cursor 和 v0.dev，但 Onlook 更强调可视化操作——设计师不需要写 prompt，直接在界面上拖拽、调整属性，AI 会理解操作意图并生成代码。
项目采用 monorepo 架构，核心由以下几个包组成：
如果把 Cursor 比作程序员的 IDE（集成开发环境），Onlook 就是设计师的 IDE。就像程序员在 VS Code 里写代码、调试、运行一条龙，设计师现在有了自己的"全栈工具链"：画板操作 → AI 理解 → 代码生成 → Git 提交。所有流程在一个工具内闭环。
Onlook 的技术栈组合颇为讲究：
关键技术亮点在于DOM 到代码的双向同步。当设计师在可视化画板上调整一个 div 的 padding，Onlook 会解析 DOM 变更，推断出 TailwindCSS 类名或 CSS 属性的变化，再通过 AI 模型理解上下文（比如"这个 div 是容器还是卡片"），最终生成语义正确的代码片段。
目前阶段：尚在开发中（🚧 标注）
官方明确表示 Onlook 仍在 active development 阶段，功能不完整。主要使用门槛：
好消息是官方提供了 Docker Compose 一键部署方案，有 Dockerfile 和 docker-compose.yml，部署难度降到了"简单"级别。
Onlook 的定位引发了一些讨论：
Onlook 代表了一种新趋势：AI 时代的设计-开发协作工具。传统流程是"设计稿 → 设计交接 → 开发实现"，Onlook 试图把中间环节压缩为"设计操作 → AI 生成代码 → 自动同步"。
这个方向的核心价值在于：
作为开源项目，Onlook 的 Apache-2.0 许可证允许商业使用，这对于想要私有化部署或自建设计-开发流水线的团队很有吸引力。
一句话总结：Onlook 是专为 Next.js + TailwindCSS 开发者/设计师打造的 AI 可视化编程工具，通过双向 DOM 同步让设计操作直接转化为代码片段，是 AI 时代设计-开发协作的新探索。