设计师专属的 Cursor —— 一款开源、视觉优先的代码编辑器一个开源的、基于可视化编辑的代码编辑器，专为设计师而优化，旨在通过 AI 与浏览器内 DOM 的直接编辑功能，让用户能够在代码编辑器中进行设计和编码。
使用 AI 在 Next.js + TailwindCSS 中构建网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时用代码进行设计。这是 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。
🧰 项目概况
- 项目定位：Onlook 是一个可视化优先（visual‑first）的编辑器，可以直接在浏览器中操作 React+Next.js/TailwindCSS 项目，效果即时反映在代码里，相当于 Figma+VS Code 的融合体
- AI+视觉编辑结合：你可以用 AI 生成页面，使用聊天式提示修改样式、布局或内容，并能在“设计模式”中拖拽元素，同时在“预览模式”中即时观察效果。这些变更会同步回代码 。
- 技术栈与架构：
- 前端：Next.js + Tailwind + tRPC
- 数据：Supabase（Auth/Storage）、Drizzle
- AI：Anthropic、Morph Fast Apply、Relace 等模型
- 运行：Bun、CodeSandbox SDK、Docker
- 历史演进：
- 初始是 Electron 桌面客户端；
- 后迁移到 Web 版，避免用户下载体积较大，使用 iframe + 沙箱方式呈现 编辑器与项目代码
功能亮点
- 秒建项目：可从文本提示、图片、Figma 或 GitHub 仓库快速启动一个 Next.js 应用
现阶段状态与社区反馈
- 趋势与社区热度：Onlook 是 YC W25 项目，GitHub 上一度登顶趋势榜，星标超 17k，社区反馈热烈
- 接收用户反馈：在 Hacker News 和 Discord 上活跃，创始团队积极回应 bug 报告和改进建议 。
- 仍在开发中：Web 版为 alpha/beta 阶段，已有如「无法滚动预览」、「AI 应用失败」等小问题，同时下一步将支持导入已有项目、页面搭建、版本控制等功能
总结
Onlook 是一款面向设计师与开发者的开源视觉编辑工具，支持实时的 AI 驱动模版创建、拖拽编辑、代码同步和云部署。目前处于早期 Web 版，预计将对 Figma 与开发 IDE 的集成使用者特别有吸引力。
Github: https://github.com/onlook-dev/onlook
油管：https://youtu.be/t1bjekPWvPE
