天都塌了，17K+ Star 的AI开源神器！Onlook 如何颠覆前端开发与设计协作？怎么办

Onlook：设计师的光标，开发者的利器。
一款开源的视觉优先代码编辑器，融合了 Figma 的直观操作与 VS Code 的强大功能，助你在浏览器中实时构建、编辑并部署 React 应用。
GitHub Star 数已突破 **17,000+**，成为前端开发与设计协作的新宠。

项目介绍

Onlook：设计师的光标，开发者的利器。
一款开源的视觉优先代码编辑器，融合了 Figma 的直观操作与 VS Code 的强大功能，助你在浏览器中实时构建、编辑并部署 React 应用。
GitHub Star 数已突破 **17,000+**，成为前端开发与设计协作的新宠。

核心功能

✨ 快速创建 Next.js 应用

• 从文本或图像开始：输入描述或上传图片，Onlook 即可生成初始页面。
• 预设模板：提供多种预设模板，助你快速启动项目。
• Figma 导入：直接导入 Figma 设计稿，自动生成对应的代码结构。
• GitHub 仓库导入：从现有的 GitHub 仓库导入项目，继续开发。

🎨 所见即所得的可视化编辑

• 类 Figma 的 UI：拖拽、调整、编辑元素，直观操作，所见即所得。
• 实时预览：边编辑边预览，所做更改即时反映在页面上。
• 品牌资产与设计令牌管理：集中管理品牌颜色、字体等设计资源。
• 页面与图层导航：轻松浏览和管理页面结构与图层。
• 组件检测与使用：自动检测页面中的可复用组件，提升开发效率。
• 图像管理：集中管理项目中的所有图像资源。

🧠 AI 驱动的开发工具

• 实时代码编辑器：在浏览器中直接编辑代码，实时预览更改效果。
• 检查点保存与恢复：保存项目的关键状态，随时回退或恢复。
• CLI 命令行支持：通过命令行执行各类操作，提升开发效率。
• 应用市场连接：集成各类应用和插件，扩展项目功能。
• 本地代码编辑：支持在本地编辑代码，满足高级开发需求。

🚀 一键部署与协作

• 生成可分享链接：快速生成项目预览链接，方便分享与展示。
• 自定义域名绑定：将项目绑定到自定义域名，提升专业度。
• 实时协作编辑：多位团队成员可同时编辑项目，提升协作效率。
• 评论功能：在项目中添加评论，便于团队沟通与反馈。

技术架构

模块	技术栈/工具	功能与优势
前端框架	Next.js、TailwindCSS、tRPC	提供高性能的全栈开发体验，快速构建响应式界面。
数据库与存储	Supabase、Drizzle ORM	实现高效的数据管理与存储解决方案。
AI 集成	AI SDK、Anthropic、Morph Fast Apply、Relace	提供强大的 AI 能力，支持智能代码生成与编辑。
开发环境与部署	CodeSandboxSDK、Freestyle、Docker	提供灵活的开发与部署环境，支持多种运行时需求。
运行时	Bun、Docker	提供高效的代码执行与容器管理能力。

功能展示

同类项目

项目名称	开源	可视化编辑	AI 集成	实时协作	部署支持	备注
Onlook	✅	✅	✅	✅	✅	集成设计与开发的全能工具
Webflow	❌	✅	❌	✅	✅	商业化平台，功能强大但闭源
Replit Agent	✅	❌	✅	✅	✅	以代码编辑为主，缺乏可视化界面
Figma Make	❌	✅	❌	✅	❌	设计工具，缺乏开发支持
V0	❌	✅	✅	❌	❌	生成式设计工具，功能有限

Onlook 在开源、可视化编辑、AI 集成、实时协作与部署支持等方面表现出色，成为设计与开发协作的理想选择。

总结

Onlook 作为一款开源的视觉优先代码编辑器，成功融合了设计与开发的最佳实践，提供了从项目创建、可视化编辑、AI 驱动的开发工具，到一键部署与实时协作的全流程支持。其强大的功能与灵活的架构，使其在众多同类工具中脱颖而出，成为前端开发与设计协作的首选平台。

项目地址

https://github.com/onlook-dev/onlook