产品详细介绍

Onlook 是一款专为设计师和前端团队打造的网页编辑与协作工具，它将「设计稿」与「真实代码」打通，让你在真实的 React 网站上直接进行可视化编辑，并将所有修改实时写回代码仓库。它的定位可以理解为：设计师版的 Cursor——把 AI 辅助开发的能力，延伸到界面设计与内容迭代中。

1. 直接在真实组件上设计

传统流程中，设计师通常在 Figma 等工具里做视觉稿，再交给前端实现，过程中容易出现还原度不高、沟通成本大、来回改稿等问题。Onlook 通过直接连接你的线上或预览环境，让你：

  • 在真实页面上选中组件进行编辑，而不是在静态原型上操作；
  • 所见即所得地调整布局、文案、图片等界面元素；
  • 立刻看到在真实数据、真实样式体系下的最终效果。

这意味着你设计的就是最终上线的界面，不再需要额外的“翻译”环节。

2. 修改实时写回代码

Onlook 的核心优势在于，它不仅是一个“所见即所得”的编辑层，更是一个与代码深度集成的工具：

  • 支持与 React 代码库连接，将页面上的修改映射为对应组件、样式或配置的变更；
  • 修改完成后可以直接生成代码变更（如 Git PR），方便开发团队审核与合并；
  • 避免了“设计稿与代码版本不一致”的问题，让设计与实现保持同步。

团队可以真正做到“Ship PRs, not prototypes（发 PR，而不是发原型）”，大幅缩短从想法到上线的周期。

3. AI 驱动的快速迭代

Onlook 内置 AI 能力，帮助你在真实页面上快速尝试不同设计与内容方案：

  • 根据提示自动生成不同风格的界面布局与视觉方案；
  • 批量替换或润色文案，快速做 A/B 测试版本；
  • 在现有组件体系内进行智能调整，保证设计统一性与可实现性。

页面示例中展示了大量不同风格的室内与家具设计（如极简室内、金属质感椅子、粗野主义雕塑等），体现了 Onlook 在真实组件基础上快速生成和切换视觉风格的能力，适合品牌站点、营销落地页、产品展示页等高频改版场景。

4. 面向设计师的开发协作体验

Onlook 让设计师可以更自然地参与到“代码世界”中，而不必真正成为工程师：

  • 通过可视化界面操作，背后自动生成结构化代码修改；
  • 与开发共用同一套组件库和设计系统，减少沟通偏差；
  • 设计师可以发起 PR，开发只需做代码审查与逻辑把关。

对于团队来说，这种方式既保留了工程质量控制，又释放了设计师在真实产品上的创造力。

简单使用教程

步骤一：连接你的 React 网站

  1. 在 Onlook 官网注册并登录账号。
  2. 按指引将 Onlook 与你的代码仓库（如 GitHub）或部署环境连接。
  3. 选择一个需要编辑的 React 项目或指定预览环境 URL，完成基础配置。

步骤二：在真实页面上开始编辑

  1. 打开 Onlook 编辑界面，加载你的目标页面。
  2. 在页面中直接点击想要修改的组件（如标题、图片、卡片、按钮等）。
  3. 使用右侧或浮动面板调整：
    • 文案内容（标题、副标题、按钮文案等）；
    • 图片资源（替换为新的产品图或场景图）；
    • 布局与样式（如间距、对齐方式、部分视觉属性等，具体取决于项目配置）。

步骤三：使用 AI 快速迭代设计

  1. 在选中组件或页面区域后，打开 AI 辅助功能。
  2. 输入你的需求，例如：
    • “生成更具粗野主义风格的室内展示布局”；
    • “把这段文案改成更简洁有力的营销语”；
    • “为这个产品卡片生成 3 个不同风格的标题”。
  3. 预览 AI 给出的多个方案，选择满意的版本一键应用到页面。

步骤四：将修改写回代码并发起 PR

  1. 完成页面调整后，在 Onlook 中查看本次修改对应的代码变更摘要。
  2. 确认无误后，一键生成并提交 PR 到你的代码仓库。
  3. 通知开发同事进行代码审查与合并，上线后即可在生产环境看到你的设计成果。

通过以上简单流程，设计师可以在不脱离真实产品环境的前提下，自主完成从创意、设计到代码变更的完整闭环，大幅提升团队的协作效率与上线速度。