Onlook 设计师的Cursor
还在为设计稿到代码的转换而头疼?
当Figma遇上AI编程时代。一个革命性工具正在改变前端开发格局。
Onlook —— 被誉为"设计师的Cursor"。这个开源可视化编辑器,已经在GitHub收获了10,395个星标。全球75位开发者疯狂贡献代码。
这不是又一个设计工具的噱头。它直接打通设计与代码的壁垒。让你在浏览器中拖拽元素。同时实时生成可靠的React代码。
可视化编程的新纪元
传统开发流程你懂的。设计师出图。前端切图。反复调试。来回撕逼。
Onlook彻底颠覆了这套陈旧模式。
在Onlook中,你直接操作真实的React组件。拖拽一个div。调整padding。修改颜色。每个操作都会即时反映到代码文件中。
不是生成临时代码。而是直接修改你的源文件。
这种"所见即所得"的体验太爽了。设计师也能直接参与代码编写。前端工程师再也不用对着设计稿猜尺寸。
AI驱动的智能建站
内置AI聊天功能真的很聪明。
你可以用自然语言描述需求:"给导航栏添加一个响应式菜单"。AI会理解你的意图。自动生成对应的React组件和TailwindCSS样式。
更厉害的是AI能理解项目结构。它知道你的组件库。了解你的设计系统。生成的代码完全符合项目规范。
不是那种胡乱拼接的垃圾代码。
支持从文本、图片、Figma设计稿甚至GitHub仓库直接创建项目。AI会分析现有代码风格。保持一致性。
架构设计太精妙了
容器化运行 —— 当你导入项目时,Onlook会在Web容器中加载代码并提供预览链接。编辑器通过iFrame显示实时预览。同时读取和索引容器中的代码。
代码映射 —— 通过代码插桩技术,Onlook能精确定位DOM元素对应的代码位置。点击页面上的按钮。立即跳转到相关的JSX代码。
双向同步 —— 在可视化界面的修改会立即反映到代码中。代码的改动也会实时更新预览。真正做到了设计与开发的无缝衔接。
这套架构理论上支持任何声明式DOM框架。但目前专注于Next.js + TailwindCSS的完美适配。
专业级功能全面覆盖
组件化设计 —— 像Figma一样管理设计组件。但这些组件就是真实的React组件。创建、复用、嵌套都很直观。
设计系统集成 —— 自动识别项目中的设计token、颜色变量、字体样式。在可视化界面中直接使用。保持设计一致性。
实时协作 —— 团队成员可以同时编辑。留下评论。就像在Figma中协作设计稿一样。
版本控制 —— 支持检查点保存和恢复。每次修改都有记录。出问题了可以随时回滚。
本地开发 —— 所有代码都在你的机器上。从不上传到第三方服务器。数据安全完全可控。
技术栈相当前卫
采用现代化技术堆栈。Next.js做框架。Supabase处理数据。Drizzle做ORM。tRPC管理API。Bun作为运行时。
整个项目98.6%都是TypeScript代码,类型安全做得很扎实。
Apache 2.0开源协议。代码完全透明。想了解实现细节?直接去GitHub看源码。
从桌面到Web的华丽转身
项目最初是Electron桌面应用。但团队果断迁移到Web端。
原因很简单。Web的可访问性更强。部署更灵活。协作更方便。
目前Web版本还在快速迭代中。桌面版本的功能正在逐步移植过来。75位贡献者在积极开发。GitHub上197个开放issues显示项目活跃度很高。
对标产品但更开放
市面上类似工具不少。Webflow、Figma Dev Mode、V0、Bolt.new...但这些要么闭源。要么收费昂贵。要么功能受限。
Onlook的优势在于完全开源。你可以自由定制。私有部署。甚至贡献代码影响产品方向。没有厂商绑定。没有数据安全担忧。
社区反响相当热烈。Google的CSS开发倡议者公开点赞。Coinbase的产品负责人转发推荐。微软的计算设计主管也表示认可。日本设计师社区更是掀起了讨论热潮。
这种"设计与开发边界消解"的趋势,Onlook走在了最前沿。当AI能理解设计意图并生成可靠代码时。传统的开发模式确实该升级了。
项目地址:
https://github.com/onlook-dev/onlook
关注公众号:拾黑(shiheibook)了解更多
友情链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
安全、绿色软件下载就上极速下载站:https://www.yaorank.com/