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