← 返回工具库

AI 与产品构建

Onlook

开源的「设计师版 Cursor」,可视化编辑 React 界面

访问官方网站

工具简介

Onlook 是面向 React 项目的可视化设计与代码编辑工具,尝试让设计修改直接落到真实组件和样式中。它更像设计师与前端开发者之间的代码界面,而不是只输出静态稿的画布。

核心能力

  • 在应用预览中选中元素并调整布局、样式与组件内容。
  • 将视觉修改映射回 React 项目代码。
  • 结合 AI 描述修改需求或生成界面内容。
  • 通过 Git 项目工作流继续审查和维护改动。

适合场景

适合快速调整已有 React 页面、探索 UI 方向,以及希望设计迭代能与代码同步的团队。使用前可拿一个非关键页面试验代码改动是否符合现有组件规范。

使用前须知

这是面向代码项目的设计/开发工具,效果会受框架结构、组件封装和样式体系影响。AI 或可视化操作生成的改动仍需检查响应式布局、可访问性、状态覆盖和代码质量。

官方资料