嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
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 驱动的开发工具，到一键部署与实时协作的全流程支持。其强大的功能与灵活的架构，使其在众多同类工具中脱颖而出，成为前端开发与设计协作的首选平台。
