📌 项目地址：onlook-dev/onlook | ⭐ 25,845 颗星 | 🔧 TypeScript | 📜 Apache-2.0
它不是另一个AI生成器
GitHub上25845个star的Onlook，README里列了一长串计划，但今天你能拿到的核心功能很窄：一个针对Next.js + TailwindCSS项目的可视化编辑器。
它和Bolt.new、Lovable、V0这类的“AI从零生成”工具相反。那些工具让你描述需求，出一坨代码然后跑起来；Onlook假设你已经有了Next.js项目，它让你直接在浏览器里双击元素、改样式，改动自动写回本地代码文件。README自己写着“An open-source alternative to …”，它是一个替代品，但不是生成器，是编辑器。
我试完的最大感受：如果把“改样式”这件事从“改代码→刷新→找位置”变成“双击调属性”，省掉的摩擦大到让人愿意换个技术栈。
它为什么锁死Next.js+Tailwind
README的“计划”里有两项打空框的：[ ] Support non-NextJS projects 和 [ ] Support non-Tailwind projects。所以今天它只能处理这一个组合。
理由很直接：可视化编辑器的底层逻辑是——你改浏览器DOM，编辑器解析DOM结构，反写出对应框架的代码。这个过程对框架的约定有强依赖。Next.js的文件路由规则、Tailwind的原子类名（比如text-2xl对应font-size: 1.5rem; line-height: 2rem;）都很好解析。换成Vue的SFC，类名和样式分散在template和style里；换成CSS Modules，类名被hash了，没法反向映射。重写逻辑的工作量指数级上升。
所以如果你项目是Vue/Svelte/Astro，或者用Styled Components写样式，可以关掉页面了。它今天帮不上你。
已上线功能：哪些真的能干活
README把所有功能用checkbox列了，我挑几个真正能提高效率的讲讲。
可视化编辑
双击页面任何元素，右侧弹出Figma风格的面板。改颜色、字体、间距（margin/padding）、宽高、圆角，代码自动同步。我导入一个daisyUI商城demo，改商品卡片的rounded-xl为rounded-3xl，页面马上变，切到IDE看git diff，文件已经被改了。不需要保存、刷新、找元素。
分支迭代
编辑器内置分支功能。我创建一个layout-experiment分支，把卡片网格改成两列瀑布流，主分支main不受影响。改完不满意，在编辑器里直接删除分支。整个流程和Git概念一致，但你不用碰命令行。
多人实时协作
多人同时编辑时，能看到对方光标和修改。类似Google Docs里的实时编辑。对于团队里设计师和开发者一起调样式很有用——但注意评论功能还没上线（[ ] Leave comments），不能留言讨论。
检查点
保存任意时刻的快照，可以随意回退。比手动git commit更轻量。适合快速实验后回滚。
一键部署
生成分享链接，支持绑定自定义域名。我从编辑器点击部署，等了大概30秒拿到一个链接，发给同事看效果。省掉写CI/CD的功夫。
CLI终端
编辑器底部内嵌终端，可以执行npm install、git push等命令。不用切到IDE。
其它已上线的辅助功能
- 从文本或图片创建Next.js应用（
[x] Start from text or image） - 使用预置模板（
[x] Use prebuilt templates） - 管理品牌资产和Token（
[x] Manage brand assets and tokens） - 页面导航和层浏览（
[x] Create and navigate to Pages、[x] Browse layers） - 检测并使用组件（
[x] Detect and use Components） - 实时代码编辑器（
[x] Real-time code editor） - 连接应用市场（
[x] Connect with app marketplace）
计划中但没上线的功能：谨慎期待
README里很多功能是空框：
[ ] Drag-and-drop Components Panel— 拖拽组件面板（可以把按钮、卡片拖到页面上）[ ] Use Images as references and as assets in a project— AI用图片作为参考资产[ ] Leave comments— 项目内评论[ ] Support non-NextJS projects和[ ] Support non-Tailwind projects— 支持其他框架[ ] Advanced AI capabilities中的大部分（设置MCP、让Onlook自我调用等）
尤其AI能力目前只有[x] Queue multiple messages at once（一次发多条指令排队处理），没有图片生成或全自动布局。这些功能在waitlist版的“AI-native designers”产品中可能才有，开源版暂时没有。
两种使用方式：托管版优先
README给两条路：
- 托管版（onlook.com）：新建或导入项目，零安装。我导入本地一个仓库，输入仓库URL授权后，编辑器直接加载了。
- 本地运行：按docs.onlook.com/developers/running文档装。好处是修改直接写入本地文件，Git历史完整。
托管版目前免费。未来可能会收费，看waitlist页面。
谁值得花十分钟试
条件：
- 项目已经是Next.js + TailwindCSS，或者你愿意迁移到这套组合
- 你经常在浏览器和IDE之间来回切换调整样式
- 你希望设计师能自己改样式，不用每次都找开发排队
不适合：
- 项目不是Next.js或不是Tailwind
- 你需要从零生成页面（AI功能还没到位）
- 你需要多人评论审批流程
Onlook的市场定位很精准：只服务Next.js+Tailwind开发者，给他们一个比Figma-to-code更直接的样式修改途径。2.5万star说明这个需求真实存在。
如果你刚好在这个技术栈里，去托管版导入项目，双击一个元素改个颜色，看看它是否自动写入你的代码。这个闭环做得很好。如果不在，关掉页面就好，不用觉得自己错过了什么。