Onlook 开源可视化编辑器发布：用 AI 直接在 Next.js 代码上做设计
决策简报
Brief- 发生了什么
- Onlook 在 GitHub 上开源了一款面向设计师和视觉工程师的可视化代码编辑器，支持在 Next.js + TailwindCSS 项目中用 AI 直接编辑浏览器 DOM 并同步修改代码。
- 为什么重要
- GitHub 相关变化会影响 AI 产品团队的技术选型和发布判断。
- 影响谁
- MCP
- 建议动作
- 升级或复核变更版本
- 地区可用性
- 暂未验证地区可用性差异。
关键事实
- Onlook 在 GitHub 上开源了一款面向设计师和视觉工程师的可视化代码编辑器，支持在 Next.js + TailwindCSS 项目中用 AI 直接编辑浏览器 DOM 并同步修改代码。 [src-skill-radar]
- 使用 Next.js 和 TailwindCSS 的前端开发者现在可以用可视化编辑器直接拖拽调整浏览器中的 DOM 元素，代码会同步更新，相当于把 Figma 式的操作界面叠在真实代码上；支持 MCP 和分支管理意味着团队可以把设计迭代直接接入现有开发流程。 [src-skill-radar]
由事件证据自动生成。
Onlook 是一款开源的可视化优先代码编辑器，目标用户是 AI 原生设计师和视觉工程师。它支持在浏览器 DOM 中直接进行可视化编辑，同时保持代码实时同步，目前专注支持 Next.js 和 TailwindCSS 技术栈，但架构上可扩展到任何声明式 DOM 语言或框架。核心功能包括：通过文字或图片生成 Next.js 应用、Figma 式界面操作、拖拽组件面板、分支管理实验设计、实时预览、AI 对话编辑代码，以及使用 MCP 工具调用。技术栈采用 Next.js、TailwindCSS、tRPC、Supabase、Drizzle、AI SDK、OpenRouter、Morph Fast Apply、CodeSandbox SDK、Freestyle、Bun 和 Docker。
摘要依据：已读全文详摘依据上方标注的来源范围整理，内容以原文为准。
来源
- Skill Radar（GitHub 趋势）
Trending hands-on MCP servers, agent skills, and AI-coding tools discovered from GitHub search momentum.
- GitHub：onlook-dev/onlook
留言
登入后即可留言，和其他 builder 交换实测心得。
还没有留言，抢头香。