Onlook

Onlook 是一款专为 React 应用打造的开源、AI 优先的可视化编辑器。该团队位于旧金山，由设计师 Daniel Farrell 和工程师 Kiet Ho（前 Amazon、前 ServiceNow 员工）于 2024 年创立，并入选了 Y Combinator 2025 年冬季训练营。他们致力于解决一个明确的痛点：Figma 设计稿与生产环境 React 代码之间痛苦的交接鸿沟。Onlook 既不是一款导出资源的设计工具，也不是生成代码让你手动粘贴的代码生成器，它允许设计师在可视化画布中直接操作运行中的 Next.js 应用，同时所有的编辑操作都会实时写入磁盘上实际的 JSX 文件中。

该工具可运行于任何 Next.js 和 TailwindCSS 项目。核心功能包括类似 Figma 的拖拽式图层面板、能够理解现有组件树的 AI 聊天界面、用于设计实验的分支与版本控制、多用户评论，以及用于工具链扩展的 MCP（模型上下文协议）集成。其桌面应用和 Web 沙盒均运行相同的开源核心（采用 Apache 2.0 许可证），因此自托管团队可以获得完整的功能集，且不受供应商锁定。到 2026 年中，其 GitHub 仓库的星标数已突破 25,900，拥有超过 2,000 个分支（fork）以及来自不断壮大的贡献者社区的 1,637 次提交。

2026 年 6 月的 Onlook 实际功能解析

Onlook 的技术机制值得深入了解，因为这正是它区别于市场上其他所有可视化编辑器的地方。在构建时，Onlook 会将 data-oid 属性注入到你的 JSX 中，在运行应用的每个 DOM 节点与生成该节点的具体源代码行之间建立持久映射。当设计师在可视化画布中移动组件、更改颜色或调整容器大小时，该工具会使用 diff-match-patch 流结合 HMR（热模块替换）将更改应用到磁盘上的文件中。没有导出步骤，也没有复制粘贴。代码库会在几秒钟内反映出视觉上的编辑。

AI 聊天层通过 OpenRouter 运行，这意味着 Onlook 可以根据任务路由到 GPT-4o、Claude 3.5 Sonnet 或其他模型。与通用的聊天机器人集成不同，这里的 AI 拥有你实际组件树的上下文，并能对特定文件进行针对性编辑。你可以要求“让首屏区域更极简”或“减少移动端的内边距”，AI 会编辑正确的 JSX，而不是凭空捏造的近似代码。

v0.2 发布系列当前的功能亮点包括：用于导航组件层级的图层面板、用于更改布局的拖拽功能、通过可视化控件（拾色器、间距、排版）编辑 CSS 属性、在不触及主分支的情况下进行设计实验的分支功能、带有内联评论的多用户协作，以及为使用自定义集成扩展编辑器的团队提供的 MCP 工具调用支持。免费托管层允许每天进行 200 次 MCP 调用，并提供无限项目和 AI 聊天功能。

“绝对令人惊叹的 AI 设计工具！！我已经使用 Onlook 桌面版几个月了” - Michael Thiel，Product Hunt，2025 年 8 月

Onlook 与 Vercel 的 v0 以及 Bolt.new 的定位对比

这三款工具经常被相提并论，但它们在架构层面解决的是不同的问题。了解它们之间的区别可以避免使用时的挫败感。

v0 by Vercel 通过文本提示或屏幕截图生成 UI 组件。你描述你的需求，v0 生成干净的 React 和 Shadcn 代码，然后你将其粘贴到项目中。它没有可视化画布，也不与你现有的代码库连接。v0 的每一次生成都是从零开始的。v0 针对从头创建组件进行了优化，而不是用于迭代你已经运行的实时应用。它输出供你集成的代码；而 Onlook 则是编辑已经存在的代码。

StackBlitz 推出的 Bolt.new 根据提示词搭建整个全栈应用，在浏览器中的 WebContainer 内运行，并带有内置的代码编辑器面板。Bolt 一次性处理前端、后端和数据库模式，这使得它在为全新想法制作原型时非常迅速。与 v0 一样，它不连接现有项目，也不提供类似 Figma 的可视化画布进行点击编辑。Bolt.new 是一个全栈生成器；而 Onlook 是现有代码库的可视化设计层。

机制上的区别在于：v0 和 Bolt.new 通过提示词生成新代码。Onlook 则通过与实时应用保持同步的可视化画布来编辑现有代码。这是一种截然不同的工作流，适用于产品生命周期中的不同阶段：即在应用搭建完成后，团队需要在没有开发者持续参与的情况下对视觉效果进行迭代。

Cursor 是开发者最常提及的对比对象。Cursor 是一个带有 AI 内联建议和聊天的 VS Code 分支，专为开发者编写和审查代码的编码工作流而构建。Onlook 则面向那些从不打开代码编辑器的设计师。两者可以在同一个项目中完美共存：开发者使用 Cursor 处理逻辑，设计师使用 Onlook 处理视觉布局。

可视化编辑工作流的真实体验

实际的日常体验在很大程度上取决于你使用的版本。Web 沙盒通过 CodeSandbox SDK 和 Bun 在云容器中运行项目，这意味着无需本地设置，但也没有离线模式，并且依赖于 Onlook 的基础设施。桌面应用（支持 Mac 和 Windows）连接到本地开发服务器，速度更快且支持离线工作，但需要先在本地运行 npm 或 bun。

在典型的落地页迭代场景中：设计师在 Onlook Web 应用中打开项目，在画布中看到实时的 Next.js 渲染效果，左侧是图层面板。设计师点击某个区块，将其拖拽到新位置，然后使用拾色器调整主 CTA 按钮。每一次点击都会在底层的 JSX 文件中产生可见的差异（diff）。AI 聊天则处理更繁重的工作：“在首屏下方添加一个三列的功能网格”，它会在上下文中生成新的 JSX 组件，而不是生成一个需要复制到其他地方的通用代码片段。

“Onlook 是一款构建代码的伟大工具……它为你提供了极大的灵活性，让你能以最舒适的方式工作” - Diana Fusther，Product Hunt，2025 年 8 月

分支功能让设计师可以在不提交到主工作树的情况下进行实验，类似于 Git 分支，但在 UI 中呈现为一键式操作。这对于设计审查非常重要：设计师可以将分支链接发送给开发者，开发者可以看到视觉更改以及代码差异，并像处理标准 PR 一样合并或拒绝它。这种协作模式消除了拖慢许多前端团队的“设计-工单-PR”循环。

摩擦出现在哪里：该工具目前处于 Alpha 阶段，这绝不是一句客套的免责声明。文件重命名可能会导致 data-oid 映射失去同步，从而破坏视觉层对该组件的感知，直到你重新运行构建步骤。标准 Tailwind 实用类系统之外的组件库表现可能会不可预测。使用 Next.js 以外框架的团队目前还完全无法使用该产品。

Onlook 是为谁打造的

主要用户是能够熟练使用 Figma 但不想学习 JSX 的设计师。他们需要对运行中的 React 应用进行视觉更改，无论是为了客户审查、快速迭代还是赶交付截止日期，而无需提交工单并等待开发者。Onlook 正是为这类人群量身定制的。

次要用户是希望减少设计师因修改内边距和调整颜色而频繁打扰自己的前端开发者。通过让设计师直接访问视觉层，开发者可以专注于组件逻辑和数据，而设计师则负责处理 CSS 和布局。

第三个用例是 Next.js 项目的独立开发者：非工程师出身的创始人构建自己的 SaaS 落地页，进行可视化迭代，而无需在代码编辑器和浏览器刷新循环之间来回切换。AI 聊天负责繁重的代码生成；画布则处理细节微调。

有合规要求的开源团队和企业可以从 Apache 2.0 自托管选项中受益。在自己的基础设施上运行 Onlook 意味着你的代码库永远不会离开你的网络，这对于受监管的行业至关重要。Figma AI 和 Lovable 并不提供类似的自托管选项。

Onlook 不是什么

Onlook 不支持 Vue、Svelte、Angular，也不支持没有 TailwindCSS 的纯 React 项目。如果你的技术栈不包含 Next.js 和 Tailwind，Onlook 将无法连接到你的项目。这是最常见的期望落差来源，也是其他框架团队面临的真正限制。

Onlook 不是一个全栈脚手架工具。它不会生成后端、配置数据库或连接身份验证流程。如果需要这些功能，请使用 Bolt.new 或 Replit。Onlook 的介入点是在应用架构就绪之后，从那里开始接管视觉设计层。

Onlook 并不像 Cursor 或 GitHub Copilot 那样具备生产级别的稳定性。它确实处于 Alpha 阶段。在紧迫的截止日期前交付客户工作的团队，在依赖它进行发布周期之前，应该在特定的代码库上测试 Onlook 的稳定性。data-oid 注入机制对大多数项目来说运行可靠，但围绕 monorepo（单体仓库）、自定义 webpack 配置和组件库覆盖的边缘情况仍然是已记录的未解决问题。

它也不是一个从零开始制作原型的工具。如果你没有代码库，并且想根据描述生成一个可用的 UI，v0 或 Bolt.new 会让你更快地达成目标。Onlook 的优势在于对已经运行的项目进行编辑和迭代。

“在使用了许多其他流行的工具之后，我真的对它的直观易用印象深刻” - May Zhou，Product Hunt，2025 年 8 月