Onlook：面向设计师的开源 AI 设计工具

什么是 Onlook？

Onlook 是一款开源的可视化优先代码编辑器，它把 AI 辅助、浏览器内可视编辑和代码生成融合到一个工作流中。你可以在浏览器 DOM 中直接编辑页面元素，实时看到代码同步变化——设计即代码，代码即设计。

项目在 GitHub 上拥有 25.6k+ Star，采用 Apache 2.0 开源协议，由一支活跃的团队持续维护。

Onlook 正在快速迭代中，欢迎贡献者参与，也欢迎通过 Discord 社区与数百名开发者一起协作。

核心功能

🚀 快速创建项目

• 数秒内创建一个 Next.js 应用
• 支持从文本描述或图片草图出发生成项目
• 内置预制模板，快速启动

✏️ 可视化编辑

Onlook 最亮眼的能力是直接在浏览器中可视化编辑网站。选中任何元素即可调整样式、修改布局，所有修改会实时同步到代码。它提供了类似 Figma 的操作界面，但编辑的是真实运行的代码。

• 实时预览应用效果
• 拖拽调整元素位置和层级
• 右键点击任意元素，直接跳转到代码中的对应位置
• Draw-in 新 div，在父容器中自由排列

🎨 设计资产管理

• 管理品牌设计资产和设计 Token
• 创建和导航页面
• 管理项目图片资源
• 自动检测并识别组件

🌿 分支与实验

支持通过分支机制进行设计实验——你可以创建分支尝试不同的设计方案，随时保存和恢复检查点，不用担心破坏现有代码。

🤖 AI 聊天辅助

内置 AI 聊天面板，可以直接通过自然语言描述来创建或修改项目。AI 拥有代码访问权限和编辑工具，能够理解项目结构并执行修改。

🔧 开发工具集成

• 实时代码编辑器，代码与设计并列显示
• CLI 命令执行
• 应用市场集成
• 一键部署，生成可分享链接
• 支持绑定自定义域名

技术架构

Onlook 的技术架构相当精巧：

1. 创建应用时，代码加载到 Web 容器中
2. 容器运行并 serve 代码
3. 编辑器接收预览链接，在 iFrame 中展示
4. 编辑器读取并索引容器中的代码
5. 对代码进行插装，建立 DOM 元素与代码位置的映射
6. 编辑元素时，同时在 iFrame 和代码层面同步修改
7. AI 聊天通过代码访问和工具调用实现理解与编辑

这种架构理论上可以扩展到任何声明式生成 DOM 元素的语言和框架（如 JSX/TSX/HTML），目前专注优化 Next.js + TailwindCSS 的体验。

技术栈

前端与全栈：

• Next.js — 全栈框架
• TailwindCSS — 样式系统
• tRPC — 服务端接口
• Drizzle — ORM 层

AI 与后端服务：

• Supabase — 认证、数据库、存储
• AI SDK — LLM 客户端
• OpenRouter — 模型提供商
• Morph Fast Apply & Relace — 快速应用模型

沙箱与部署：

• CodeSandboxSDK — 开发沙箱
• Freestyle — 托管服务
• Bun — 运行时与打包
• Docker — 容器管理

功能状态一览

如何开始

你可以直接使用托管版 Onlook 在线体验，也可以在本地运行。

Onlook 支持任何 Next.js + TailwindCSS 项目，只需导入现有项目，或从编辑器内从头开始创建即可。

完整文档请访问 docs.onlook.com。

为什么值得关注

在 AI 辅助设计工具领域，Onlook 走出了与众不同的路线：

1. 开源透明 — 代码完全开放，社区驱动，不锁定数据
2. 可视化 + 代码双同步 — 不再需要设计稿转开发的割裂流程
3. AI 原生 — AI 不是附加功能，而是深度嵌入编辑核心
4. React 生态原生 — 专注 Next.js + TailwindCSS，对前端开发者极其友好
5. Figma 替代潜力 — 作为 Figma 的开源替代方案，具备独特竞争力

对于前端开发者、独立开发者、设计系统团队以及对 AI 编程工具感兴趣的读者来说，Onlook 是一个值得持续关注的开源项目。

---

项目地址： https://github.com/onlook-dev/onlook 官方网站： https://onlook.com 加入社区： Discord | Twitter | LinkedIn