天都塌了,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 驱动的开发工具,到一键部署与实时协作的全流程支持。其强大的功能与灵活的架构,使其在众多同类工具中脱颖而出,成为前端开发与设计协作的首选平台。

项目地址

GitHub - onlook-dev/onlook: The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值