[JS/TS] 拒绝“像素搬运”！Onlook：一款真正懂 Next.js 的可视化编辑器

做前端的兄弟们，这种场景是不是很眼熟：

设计师站在你身后指点江山：“这个标题字体再大一号，那个按钮往左移 2 像素……哎不对，还是原来的好。”

你只能在 VS Code 改代码，切浏览器看效果，再改，再切。这种低效的“像素搬运”工作，不仅折磨人，还打断写逻辑的思路。

今天给大家推荐的开源项目 Onlook，就是为了终结这种痛苦而生的。简单说，它就像是“设计师专用的 Cursor”，能直接在浏览器里改 UI，并且代码会自动同步到你的本地文件里。

核心原理：DOM 与 AST 的双向奔赴

市面上很多所谓的“可视化生成器”，最大的坑就是生成的代码根本没法看。Onlook 的思路完全不同，它走的是 Local-first（本地优先） 路线。

在 云栈社区（ https://yunpan.plus ） 里，我们经常讨论工具如何服务于工程。Onlook 的实现机制非常硬核：

1. 精准定位：它会给页面元素打上 data-oid 标记。这就像给每个 DOM 节点装了 GPS。
2. 代码关联：当你右键点击页面上的任何元素，选择 "View element code"，IDE 会直接跳转到对应的代码行。

像修图一样写代码

Onlook 深度绑定 Next.js 和 Tailwind CSS。这意味着可视化的本质，变成了对 Tailwind 原子类的增删改查。

• 可视化样式编辑：不用记那些复杂的 class 名，直接在右侧面板调整颜色、间距、字体，代码自动更新。
• 拖拽布局：想加个 div？直接拖进去。想调整层级？直接拖动排序。

更绝的是它的 AI Chat 功能。你可以直接选中一个组件，告诉 AI：“把这一行改成三列布局，增加阴影效果”。Onlook 会理解你的项目上下文，生成符合规范的代码。

硬核玩家：本地部署与调试

如果你是全栈工程师，想研究它是如何实现的，或者想为这个项目做贡献，Onlook 的技术栈也非常值得一看：Bun + Supabase + Docker。

以下是本地运行 Onlook 源码的简要指南（适合想深入研究源码的同学）：

前置要求：

• Bun：用于极速运行单仓库。
• Docker：用于运行 Supabase 后端。
• Node.js：v20.16.0+。

启动步骤：

1. 克隆与安装：

   git clone https://github.com/onlook-dev/onlook.git
   cd onlook
   bun install

2. 启动后端（依赖 Docker）：

   bun backend:start
   # 记下输出的 anon key 和 service role key

3. 环境配置：
   运行交互式脚本 bun run setup:env，填入刚才获取的 Key，以及 CodeSandbox 和 OpenRouter 的 API Key（用于 AI 功能）。

4. 跑起来：

   bun db:push  # 同步数据库结构
   bun db:seed  # 写入测试数据
   bun dev      # 启动开发服务器

访问 localhost:3000，你就拥有了一个完全属于自己的可视化编辑器环境。

总结

Onlook 填补了 Figma 和 IDE 之间的那块空白。它既保留了代码的控制权，又给了非技术人员调整 UI 的能力。

如果你对 前端框架/工程化 感兴趣，或者想寻找提升团队效能的工具，Onlook 绝对值得一试。更多优质的 开源实战 项目解析，请持续关注我们。

🔗 项目地址

• GitHub: github.com/onlook-dev/onlook
• 官方文档: docs.onlook.com
• 前端教程: https://yunpan.plus/f/18

---

关注《云栈大前端》

获取关于前端、移动、全栈领域的开源项目盘点。

🏷️ 相关标签： #Onlook #GitHub #Nextjs #TailwindCSS #前端工程化