星标数：27221★ Fork数：2145 《onlook-dev/onlook：开源可视化代码编辑器，用 AI 在代码上设计》

Onlook 是一款面向 AI 原生设计师的设计工具，目前处于早期访问阶段。它让基于代码库的设计变得轻松，帮助你用 AI 在代码中打造出色的体验。

这是一个开源、以视觉为先的代码编辑器，也是孕育出 Onlook 托管产品的起点（基于 Next.js + Tailwind 构建）。在浏览器中通过可视化编辑器直接编辑 DOM，用代码进行实时设计，可用于构建网站、原型和设计稿。它是 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等工具的开源替代方案。

Onlook 可以运行在任何 Next.js + TailwindCSS 项目上：既可以将现有项目导入 Onlook，也可以在编辑器中从零开始。使用 AI 聊天创建或编辑项目，随时右键点击元素即可跳转到代码中的对应位置；还可以绘制新的 div 并通过拖放重新排列，将代码与站点设计并排预览，以及用编辑器工具栏调整 Tailwind 样式、直接操作对象和试验布局。

主要特点

• 数秒内创建 Next.js 应用：支持从文本或图片起步，也可使用预置模板
• 可视化编辑应用：类 Figma 界面、实时预览、管理品牌资产与 tokens、页面创建与导航、图层浏览、组件检测与使用、通过 Branching 试验设计方案
• 开发工具：实时代码编辑器、检查点保存与恢复、通过 CLI 运行命令、连接应用市场
• 快速部署：生成可分享链接、绑定自定义域名
• 团队协作（部分功能）：支持实时编辑
• 先进 AI 能力（部分功能）：可一次性排队多条消息

快速开始

使用托管应用或在本地运行：
https://onlook.com
https://docs.onlook.com/developers/running-locally

工作原理

1. 创建应用时，将代码加载进 web 容器
2. 容器运行并提供代码服务
3. 编辑器接收预览链接，通过 iFrame 展示
4. 编辑器读取并索引容器中的代码
5. 对代码做插桩处理，将元素映射到代码中的位置
6. 编辑元素时，先在 iFrame 中修改，再同步到代码
7. AI 聊天也拥有代码访问权限和工具，用于理解与编辑代码

完整文档见 docs.onlook.com，架构详解见其 Architecture Docs。

技术栈

• 前端：Next.js、TailwindCSS、tRPC
• 数据库：Supabase、Drizzle
• AI：AI SDK、OpenRouter、Morph Fast Apply、Relace
• 沙箱与托管：CodeSandboxSDK、Freestyle
• 运行时：Bun、Docker

本项目以 Apache 2.0 许可证发布。

📊 本项目 GitHub 星标数：27221。最后更新：2026-07-22，发布：2025-07-17。项目地址：https://github.com/onlook-dev/onlook