工具简介
Onlook 是面向 React 项目的可视化设计与代码编辑工具,尝试让设计修改直接落到真实组件和样式中。它更像设计师与前端开发者之间的代码界面,而不是只输出静态稿的画布。
核心能力
- 在应用预览中选中元素并调整布局、样式与组件内容。
- 将视觉修改映射回 React 项目代码。
- 结合 AI 描述修改需求或生成界面内容。
- 通过 Git 项目工作流继续审查和维护改动。
适合场景
适合快速调整已有 React 页面、探索 UI 方向,以及希望设计迭代能与代码同步的团队。使用前可拿一个非关键页面试验代码改动是否符合现有组件规范。
使用前须知
这是面向代码项目的设计/开发工具,效果会受框架结构、组件封装和样式体系影响。AI 或可视化操作生成的改动仍需检查响应式布局、可访问性、状态覆盖和代码质量。