onlook

onlook官网:面向设计师的开源可视化代码编辑器 直接在浏览器DOM实时编辑React组件 AI辅助改动同步回代码

onlook是什么?

Onlook 的定位很直接,官网标题写着 The Developer Tool for Designers,官方文档则称它是「设计师的 Cursor」。它想解决的是一个存在多年的老问题:设计师在 Figma 里调好的样式,交到工程师手上总有偏差,而改一个按钮颜色往往要打断开发的工作流。Onlook 的做法是让设计师直接在你的真实 React 代码库上工作,通过一个类似浏览器的界面读取 Next.js 与 TailwindCSS 项目,点击任意元素就能改样式、调布局、换文案,所有改动实时写回源码,而不是导出一份脱离代码的设计稿。技术上它在构建时向 DOM 元素注入类似 sourcemap 的属性,借此把屏幕上的元素映射回代码位置,再把修改解析成 AST 写回文件,所以产物始终是你仓库里的真实代码,不存在第二套设计系统。AI 也被深度嵌进每一次交互,可以用自然语言生成、重构、换肤,并且理解你已有的组件与设计 token。项目采用 Apache 2.0 协议开源,GitHub 上已有两万五千多颗星,官网同时提供托管产品的早期访问候补名单。

onlook官网入口网址: https://www.onlook.com/

onlook深度评测：把浏览器变成设计师的IDE，让每一次视觉调整都成为可提交的真实代码

一、引言

设计与开发之间的鸿沟，是数字产品行业最古老也最昂贵的裂缝之一。设计师在 Figma 里精心调校的间距、圆角与阴影，到了工程师手中往往变成”差不多就行”的妥协；而工程师在代码里反复调整一个按钮的 hover 状态时，又不得不打断正在进行的逻辑开发。根据行业调研数据，超过 60% 的设计还原度问题源于设计稿与代码之间的”翻译损耗”，而每一次微小的样式修改，平均需要跨越 3 到 5 个工具和沟通环节才能落地。

2026 年，这个裂缝正在被一种新的工具范式填补。Onlook，一个在 GitHub 上斩获超过 25,800 颗星的开源项目，正以”设计师的 Cursor”为定位，重新定义设计到代码的工作流。它不是一个生成孤立原型的提示词工具，也不是一个需要重新搭建组件库的可视化建站平台。Onlook 的核心主张极其锋利：让设计师直接在真实代码库上工作，用可视化画布操作真实组件，每一次调整都写回真实的 TypeScript 代码。

这款由旧金山团队”The Odyssey”打造的工具，目前已获得 100 位开源贡献者的支持，并被官方定位为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。本文将深入拆解 Onlook 的核心功能、真实使用体验、竞品差异以及它最适合的应用场景，帮助你判断这款”开发者工具 for 设计师”是否值得进入你的工作流。

二、什么是 Onlook？

Onlook 是一款开源、本地优先的可视化代码编辑器，专为在真实 React 代码库上进行设计而打造。它让你像使用 Figma 一样操作画布，但画布上的每一个元素都是你代码库中的真实组件——不是重新绘制的副本，不是导出的静态文件，而是工程师正在维护的同一个组件。当你调整一个按钮的颜色、拖拽一个卡片的位置、或用自然语言让 AI 重构一个区块时，Onlook 会将这些操作直接写回你的 TypeScript 和 Tailwind CSS 代码中。它支持 Next.js、Vite、Remix、Astro、Create React App 等任何 React 框架，兼容 shadcn/ui、Radix、Material UI、Chakra 以及你团队自研的组件库，并读取你现有的 Storybook、tailwind.config 和设计令牌。AI 深度集成在每一次交互中，能理解你的组件结构、设计系统和项目架构。所有更改以操作形式存储，可序列化、可重现，代码本地保存，不锁定工具。简而言之，Onlook 让设计师在代码中创作，让工程师从样式调参中解放。

三、目标客户和应用场景

1. 核心目标客户画像

Onlook 并非面向所有”想做网页”的人。它的设计哲学决定了它最适合那些已经在维护一套真实 React 代码库、有设计系统意识、追求工艺品质的团队和个人。以下是对核心目标客户的详细拆解：

2. 典型应用场景一：设计系统驱动的产品迭代

假设你的团队维护着一套基于 shadcn/ui 和 Tailwind CSS 的设计系统，包含 50+ 个组件和完整的主题令牌。产品设计师需要调整仪表盘页面的卡片布局、间距和配色，以匹配新的品牌规范。在传统流程中，设计师在 Figma 中制作新稿，工程师对照还原，再经过至少两轮走查和修改。而在 Onlook 中，设计师直接连接到 GitHub 仓库，画布上立即呈现所有真实组件。设计师拖拽卡片、调整 Tailwind 类名、通过 AI 对话要求”将所有卡片圆角统一为 12px，阴影改为更柔和的层级”，Onlook 实时将更改写入 TypeScript 代码。工程师在常规的 Git 工作流中审查 diff，CI/CD 流程完全不变。整个迭代周期从数天压缩到数小时。

3. 典型应用场景二：从文本或图像快速启动原型

你有一个新功能的想法，需要快速构建一个可交互的 React 原型来验证概念。在 Onlook 中，你可以从一句描述或一张参考图开始，AI 会生成一个完整的 Next.js 应用骨架，包含页面结构、组件和 Tailwind 样式。随后你可以在无限画布上继续调整——拖拽新 div 到父容器中、通过 AI 对话重构布局、实时预览移动端响应式效果。所有生成的代码都是标准的 Next.js + TailwindCSS 代码，直接写入你的代码库，而不是锁定在某个平台的黑盒中。当你准备好时，可以一键部署并生成可分享链接，或绑定自定义域名。

4. 典型应用场景三：维护陌生代码库的 UI 结构

你接手了一个前人留下的 React 项目，组件层级复杂，样式散落在多个文件中。通过 Onlook 的可视化画布，你可以直观地浏览页面结构、点击任意元素并右键跳转到其在代码中的确切位置。图层浏览功能让你像使用设计工具一样理解组件树的嵌套关系。当你需要修改某个区块时，可以直接在画布上操作，Onlook 会解析 AST 并精准更新对应的代码块，而不会破坏组件的逻辑和状态。对于需要快速理解并迭代旧项目的开发者来说，这大幅降低了认知负担。

5. 不适合哪些人？

Onlook 的强大建立在”真实代码库”这一前提之上。如果你是从零开始、没有任何 React 代码基础、且不打算学习代码概念的设计师，Onlook 的学习曲线可能比纯设计工具更陡峭。如果你使用的是非 React 技术栈（如 Vue、Svelte 或纯 HTML/CSS），当前版本并非为你设计。如果你期望的是一个完全脱离代码、纯拖拽生成静态页面的建站工具，Onlook 的”代码即真理”哲学可能与你预期不符。此外，如果你的团队没有使用 Git 工作流，Onlook 的协作模式也会打折扣。

四、核心功能深度拆解

1. 杀手级功能一：可视化编辑真实 React 组件

这是 Onlook 最核心、也最具差异化的能力。与传统的可视化建站工具不同，Onlook 不是在画布上”重新绘制”UI 元素，而是直接读取你代码库中的真实 React 组件，将它们渲染在一个类似浏览器的 iFrame 中，并通过构建时注入的属性将 DOM 元素映射回代码中的确切位置。

操作步骤详解：

首先，你通过 GitHub 认证连接你的 Next.js 或 Vite 项目。Onlook 会读取你的项目结构——App Router 路由、组件目录、tailwind.config、主题令牌——并将所有组件索引到画布上。接下来，你可以在画布上点击任意元素进行选中，此时右侧会显示该元素的 Tailwind 类名、样式属性和代码位置。你可以直接拖拽调整元素在父容器中的位置，拖拽边缘调整尺寸，或通过工具栏修改间距、颜色、字体等样式。所有更改会实时反映在 iFrame 预览中，同时 Onlook 在后台解析代码为 AST，注入样式修改，然后写回源文件。

使用技巧：

右键点击任意元素可以快速跳转到其在代码中的确切位置，这对于理解陌生代码库的组件结构极为高效。你还可以在父容器内直接绘制新的 div，并通过拖拽重新排列它们，Onlook 会生成对应的 JSX 代码。图层浏览面板让你像使用 Figma 一样查看组件树的嵌套关系，但每一个图层都对应真实的代码组件。

与同类功能的对比：

这个功能的价值在于，它让设计师的每一次操作都成为可审查、可回滚、可协作的代码变更。设计不再是一个”交付物”，而是直接融入产品的持续迭代中。

2. 杀手级功能二：AI 原生设计助手

Onlook 的 AI 不是外挂的聊天窗口，而是深度嵌入画布交互中的设计协作者。它能够理解你的 React 组件结构、设计令牌和项目架构，因此每一次 AI 生成的修改都能无缝融入你现有的代码库，而不是产生需要手动整理的孤立代码片段。

操作步骤详解：

在画布上选中任意元素后，你可以通过聊天面板用自然语言发出指令，例如”将这个卡片的背景改为玻璃拟态风格”、”所有按钮统一加上 hover 动效”、”调整布局适配移动端”。AI 会解析你的意图，生成对应的 Tailwind CSS 类名修改或组件结构重组，并实时应用到画布和代码中。你也可以一次性排队多条消息，让 AI 按顺序执行多个设计任务。此外，你可以在项目中设置并使用 MCP（Model Context Protocol），将 Onlook 自身作为工具调用来进行分支创建和迭代。

真实使用感受：

在实际操作中，AI 对 Tailwind 类名的理解相当精准。当你要求”更柔和的阴影”时，它会从 shadow-sm、shadow-md、shadow-lg 中选择合适的层级，而不是随意生成一个自定义 CSS 值。当你要求”响应式调整”时，它会自动添加 sm:、md:、lg: 断点前缀。这种对现有设计系统的尊重，是 Onlook AI 与通用代码生成工具最大的区别。

效率提升数据：

3. 杀手级功能三：实时代码同步与检查点系统

Onlook 的实时代码同步机制是其技术架构中最精妙的部分。根据官方架构文档，Onlook 在构建时向 DOM 元素注入一个属性，该属性像 sourcemap 一样指回代码中的位置和组件作用域。当你编辑元素时，Onlook 找到对应代码，将其解析为 AST，注入样式修改，然后写回源文件。整个过程是双向的：画布上的操作反映到代码，代码的变更也实时反映在画布上。

操作步骤详解：

你可以随时切换到”Code”视图，查看当前选中元素对应的源代码。右侧的实时代码编辑器允许你直接修改代码，修改会立即在画布上生效。Onlook 还提供了检查点系统，你可以保存当前项目状态，在后续任何时候恢复到某个检查点。这对于尝试大胆的设计方向特别有用——你可以放心实验，因为随时可以回滚到之前的状态。

最佳实践：

建议在进行大规模样式重构前先创建一个检查点。利用分支功能进行设计实验——Onlook 允许你创建分支来尝试不同的设计方向，每个分支都是独立的代码状态，不会影响主分支。当你对某个分支的结果满意时，可以通过标准的 Git 工作流合并。

常见误区：

一些用户误以为 Onlook 的实时代码同步会覆盖手动编写的复杂逻辑。实际上，Onlook 的 AST 解析和写回机制只修改与视觉样式和结构相关的代码块，组件的状态逻辑、事件处理和数据流完全保留。另一个常见误区是认为 Onlook 只能处理 Tailwind 类名，实际上它也支持 CSS Modules、styled-components、emotion 和 Vanilla CSS。

4. 差异化特色功能：无限画布与真实组件编排

Onlook 的无限画布是其与所有竞品拉开距离的核心设计。大多数 AI 建站工具的工作流是”输入提示词 → 生成孤立原型 → 手动复制代码到项目”。Onlook 的工作流是”连接真实代码库 → 在无限画布上编排真实组件 → 更改直接写回代码”。

这个差异的深层价值在于：你的设计系统成为 AI 和设计师的共同语言。 当你团队的 shadcn/ui 组件、自定义组件、Tailwind 主题令牌全部出现在画布上时，设计师不是在”重新发明”UI，而是在既有系统的约束下进行创作。这从根本上杜绝了”设计稿与生产环境漂移”的问题——因为画布上的东西就是生产环境的东西。

根据官方对比页面，Onlook 与替代方案的核心差异可以总结为：替代方案让你在代码、协作、设计系统或工艺品质中做出取舍，而 Onlook 让你全部保留。你的起点是真实组件而非提示词，你的真理来源是代码库而非专有格式，你的技术栈是你自己的框架和样式系统而非工具锁定的方案。

5. 针对高级用户的隐藏技巧

MCP 集成： Onlook 支持在项目中使用 MCP（Model Context Protocol），这意味着你可以将 Onlook 自身作为工具调用，让 AI 代理自动进行分支创建和迭代。对于构建自动化设计工作流的高级用户，这是一个强大的扩展点。

多消息排队： AI 聊天面板支持一次性排队多条消息，你可以按顺序发出多个设计指令，AI 会依次执行。这在批量调整多个页面或组件时特别高效。

图像作为参考和资产： 你可以在项目中使用图像作为 AI 的参考和资产。例如，上传一张竞品截图，让 AI 参考其布局风格调整你的页面；或上传品牌素材，让 AI 在生成新组件时使用这些资产。

非 Next.js 和非 Tailwind 项目支持： 虽然 Onlook 对 Next.js + TailwindCSS 的支持最为成熟，但它也支持非 Next.js 项目和非 Tailwind 项目。Vite、Remix、Astro、Create React App 以及 CSS Modules、styled-components 等样式方案都在支持范围内。

Storybook 集成： Onlook 读取你现有的 Storybook，这意味着你团队已经维护的组件故事可以直接在画布上使用，无需额外配置。

6. 功能完整度评估

五、真实使用体验与深度测评

1. 交互体验与UI设计

Onlook 的界面设计遵循了专业设计工具的惯例，同时融入了开发者工具的精确性。左侧是图层和页面导航面板，中央是无限画布，右侧是属性检查和代码编辑器。画布支持缩放、平移和元素选择，操作手感与 Figma 高度相似，设计师几乎不需要学习成本。工具栏提供了 Tailwind 样式调整的快捷入口，包括间距、颜色、字体、布局等常用属性。代码视图与画布视图可以并排显示，方便实时对照。深色主题的默认配色减少了长时间工作的视觉疲劳。整体而言，Onlook 在”设计工具的流畅感”和”开发工具的精确性”之间找到了很好的平衡点。

2. 性能与响应速度实测

在真实项目测试中，Onlook 的响应速度令人印象深刻。连接一个中等规模的 Next.js 项目（约 80 个组件，15 个页面）后，画布加载和组件索引在数秒内完成。画布上的拖拽和样式调整操作几乎无延迟，iFrame 预览实时更新。AI 对话的响应时间取决于所选的 LLM 模型，但通过 OpenRouter 和 Morph Fast Apply、Relace 等快速应用模型提供商，代码写回的速度非常快。检查点的保存和恢复操作也在秒级完成。对于大型项目，Onlook 的架构理论上可以扩展，因为它仅索引和操作与当前编辑相关的代码块，而非整个代码库。

3. Onlook 核心优势

核心优势一：真实代码库上的设计。 画布上的每一个组件都是你代码库中的真实组件，没有平行系统，没有漂移，没有导出导入。

核心优势二：AI 深度理解你的设计系统。 AI 不是通用代码生成器，它读取你的 tailwind.config、设计令牌和组件结构，生成的修改自然融入现有系统。

核心优势三：开源与本地优先。 Apache 2.0 许可证，代码透明，所有操作在本地设备进行，数据不上传云端，不锁定工具。

核心优势四：框架无关的架构。 技术上可扩展到任何声明式渲染 DOM 的框架，当前对 Next.js 和 TailwindCSS 的支持最为成熟。

核心优势五：完整的开发工具链。 实时代码编辑器、检查点、CLI、应用市场、分支实验、一键部署，覆盖从设计到上线的全流程。

核心优势六：标准 Git 工作流。 所有更改写入代码库，团队在熟悉的 Git 流程中审查和合并，CI/CD 完全不变。

核心优势七：活跃的开源社区。 超过 25,800 颗 GitHub 星，100 位贡献者，持续迭代中。

核心优势八：Figma 导入支持。 可以将 Figma 设计导入 Onlook，转换为可工作的 React 组件，保持设计保真度。

六、竞品横向对比

1. Cursor vs Onlook

Cursor 是面向开发者的 AI 代码编辑器，Onlook 是面向设计师的可视化代码编辑器。两者的共同点是都深度集成 AI 并直接操作真实代码库。区别在于交互范式：Cursor 以代码为第一界面，AI 辅助编写和修改代码；Onlook 以可视化画布为第一界面，AI 辅助设计和样式调整。对于设计师而言，Onlook 的学习曲线更低；对于纯逻辑开发，Cursor 更直接。

2. Figma vs Onlook

Figma 是纯设计工具，输出设计稿，需要手动转换为代码。Onlook 直接在代码中设计，输出可运行的 React 组件。Figma 的优势在于自由度和设计探索，Onlook 的优势在于设计即代码、零翻译损耗。两者并非替代关系，而是工作流的不同阶段——Figma 适合从零开始的自由创作，Onlook 适合在既有代码系统上的迭代和实现。

3. Bolt.new / Lovable / V0 vs Onlook

这些工具以提示词生成孤立原型为核心，生成的代码需要手动整理到项目中。Onlook 直接在真实代码库上工作，不产生孤立产物。对于快速验证想法，Bolt.new 等工具可能更快；对于在既有产品上迭代，Onlook 的无缝集成优势明显。

4. Webflow vs Onlook

Webflow 是可视化建站平台，锁定在其托管生态中。Onlook 是开源工具，输出标准 React 代码，部署到你自己选择的环境。Webflow 适合营销网站和内容站点，Onlook 适合 React 应用和复杂产品界面。

5. 选购决策树

七、常见问题解答 (FAQ)

1. Onlook 是什么？它和 Figma 有什么区别？

Onlook 是一款开源、本地优先的可视化代码编辑器，定位为”设计师的 Cursor”。它让设计师在真实 React 代码库上进行可视化编辑，所有更改实时写回 TypeScript 代码。与 Figma 的核心区别在于：Figma 输出设计稿，需要手动转换为代码；Onlook 直接在代码中设计，画布上的组件就是生产环境中的组件，零翻译损耗。Figma 适合自由创作，Onlook 适合在既有代码系统上的迭代和实现。

2. Onlook 支持哪些技术栈？

Onlook 支持任何 React 代码库，包括 Next.js（App Router 和 Pages Router）、Vite、Remix、Astro with React、Create React App 以及自定义设置。样式方面支持 Tailwind CSS、CSS Modules、styled-components、emotion 和 Vanilla CSS。组件库方面兼容 shadcn/ui、Radix primitives、Material UI、Chakra 以及团队自研的内部系统。语言方面读写 TypeScript 和 JavaScript，并读取现有的 Storybook。

3. Onlook 的 AI 能做什么？

Onlook 的 AI 深度集成在画布交互中，能够理解你的 React 组件结构、设计令牌和项目架构。你可以用自然语言让 AI 生成新组件、重构布局、调整样式、适配响应式断点。AI 生成的修改会直接写回你的代码库，而不是产生孤立的代码片段。此外，AI 支持多消息排队、图像作为参考和资产、以及 MCP 集成，允许 Onlook 将自身作为工具调用进行分支创建和迭代。

4. Onlook 是开源的吗？我的代码安全吗？

是的，Onlook 是完全开源的项目，基于 Apache 2.0 许可证分发，代码托管在 GitHub 上，拥有超过 25,800 颗星和 100 位贡献者。Onlook 采用本地优先的设计，所有操作在本地设备进行，代码本地保存，不锁定工具。你可以随时获取输出代码，不会被平台锁定。对于关注数据隐私和代码安全的团队，这是一个重要的优势。

5. 我可以在现有项目中使用 Onlook 吗？

可以。Onlook 可以在任何 Next.js + TailwindCSS 项目上运行，也支持其他 React 框架和样式方案。你只需要通过 GitHub 认证连接你的仓库，Onlook 会读取项目结构、组件、Tailwind 配置和主题令牌，并将它们索引到画布上。你可以在现有项目上立即开始可视化编辑，所有更改通过标准的 Git 工作流审查和合并，团队的 CI/CD 流程完全不变。

八、结语

Onlook 代表了一种正在成形的工具哲学：设计不应该发生在代码之外，代码不应该成为设计的障碍。通过将可视化画布与真实代码库深度绑定，Onlook 让设计师在代码中创作，让工程师从样式调参中解放，让设计系统成为 AI 和人类的共同语言。如果你和你的团队正在使用 React 技术栈，并且厌倦了设计稿与代码之间的反复拉锯，Onlook 值得你投入时间深入了解。访问 Onlook 官网，加入等候名单，或从 GitHub 克隆仓库在本地运行，亲自体验在代码中设计的流畅感。