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