最近逛 GitHub 时发现了一个有意思的项目——Onlook。它自称是 “The Cursor for Designers”，一款开源的 AI 优先设计工具。这个名字起得很妙，因为 Cursor 确实改变了程序员写代码的方式，而 Onlook 似乎想对设计师做同样的事。

什么是 Onlook？

简单说，Onlook 让设计师可以直接在运行的 React 应用上进行可视化编辑。不需要写代码，不需要理解 CSS 优先级，更不需要在 Figma 和代码之间反复同步。

它的核心能力包括：

  • 可视化编辑：选中页面上的任何元素，直接调整样式、布局和内容
  • AI 辅助：用自然语言描述想要的改动，AI 帮你生成对应的代码
  • 代码同步：所有修改都直接写回源代码，保持设计与实现的一致性
  • 实时预览：在真实运行环境中查看效果，告别”设计稿看着好，实现差一截”

技术栈与开源

Onlook 完全开源（Apache 2.0 协议），技术栈也相当现代：

  • 前端：React + TypeScript + TailwindCSS
  • 后端：Supabase 提供数据库和认证
  • 编辑器：基于浏览器的可视化编辑引擎
  • AI 集成：支持多种 LLM 模型

目前 GitHub 上已有 25k stars，对于一个 2024 年中才创建的项目来说，这个增长速度相当可观。

Vibe Coding 的另一面

提到 AI 辅助开发，最近 “vibe coding” 这个词很火。简单说就是：让 AI 写代码，人类负责把控方向和审美。

Onlook 把这个概念延伸到了设计领域。过去设计师和开发者之间存在一道鸿沟：

设计师（Figma）→ 切图/标注 → 开发者（代码）→ 效果偏差 → 反复修改

Onlook 试图填平这道鸿沟：

设计师（直接在应用上编辑）→ 自动生成代码 → 开发者审查合并

这不是要取代开发者，而是让设计师的能力边界扩展到以前只有开发者才能触及的领域。

实际体验如何？

从项目的演示视频和社区反馈来看，Onlook 在以下场景表现不错：

  1. 快速原型：用现有组件快速搭建页面，调整样式
  2. 设计微调：已经上线的页面，做小的样式改动
  3. A/B 测试：快速生成多个版本的设计方案

但在复杂交互逻辑、自定义组件开发等场景，仍需要开发者介入。

对前端开发的思考

作为一个前端开发者，看到这类工具的心情是复杂的。

一方面，它确实能提高效率。设计师可以自己搞定一些简单的改动，减少来回沟通的成本。另一方面，它也在模糊传统的角色边界。

但我觉得不必过度担忧。工具始终是工具，真正有价值的是：

  • 系统设计能力：如何组织组件、状态、API
  • 性能优化：加载速度、渲染性能、 bundle 体积
  • 工程实践：CI/CD、测试、监控、可维护性

这些是目前 AI 和设计工具还难以替代的领域。

结语

Onlook 代表了一种趋势：AI 正在降低创造数字产品的门槛。这对行业来说是好事——更多的人可以把自己的想法变成现实。

对于前端开发者来说，与其担心被取代，不如思考如何拥抱这些工具，把精力投入到更有价值的事情上。

如果你对这个项目感兴趣，可以去 GitHub 看看，或者直接在 官网 体验在线 Demo。

P.S. 另一个值得关注的项目是 Omni Tools——一个自托管的 Web 工具集合，9k+ stars，涵盖图片处理、PDF 操作、视频转换等实用功能。对于需要私有化部署工具的场景，这个项目很实用。