什么是可视化编辑器？

可视化编辑器是 Cursor 浏览器中的一项新功能，可让您直观地编辑 Web 应用程序，同时 AI 代理与您协作更新底层代码。它将您的 Web 应用程序、代码库和可视化编辑工具整合到一个窗口中，缩小了设计与开发之间的差距。您可以拖拽元素、检查组件及其属性，并通过指向和点击来描述更改——所有这些都无需离开您的工作流程。

适用人群

• 前端开发者：希望更快地迭代 UI 布局和样式，无需手动在代码文件中查找。
• 设计工程师：需要通过直接在浏览器中进行实时调整，弥合视觉原型与生产代码之间的差距。
• React 开发者：使用基于组件的架构，需要即时测试不同的状态、属性和样式变体。

主要功能

拖拽式重新排列

可视化编辑器允许您通过直接在 DOM 树中拖拽渲染元素来操作网站的布局和结构。您可以交换按钮的顺序、旋转区块、测试不同的网格配置，而无需切换上下文。一旦视觉设计符合您的想法，告诉代理应用更改——代理会定位相关组件并为您更新底层代码。

直接测试组件状态

使用 React 构建的现代应用程序通过组件属性控制不同的状态。可视化编辑器在侧边栏中显示这些属性，方便您在不同变体之间切换，并查看每种变体的渲染效果。这使您能够即时了解组件在不同条件下的行为。

通过可视化控件调整属性

侧边栏提供滑块、调色板以及您自己的设计系统令牌，用于精细调整样式。每次调整都是完全交互式的：实时取色器预览您的选择，控件让您精确调整网格、弹性布局和排版。更改会立即在浏览器中生效。

指向并提示

点击界面中的任意元素，描述您想要更改的内容。您可以点击一个元素并说“把这个变大”，点击另一个元素并提示“把这个变成红色”，再点击第三个元素并输入“交换它们的顺序”。代理会并行运行，几秒钟内您的更改就会生效。

突出特点

“可视化编辑器将您在设计端和代码端的工作统一起来，帮助您更清晰地表达需求，使执行不再受限于操作技巧。”

这是核心洞察：可视化编辑器不是强迫您手动将视觉想法转化为代码，而是让您通过拖拽、指向和自然语言自然地表达更改。代理负责代码转换，因此您可以专注于设计意图，而不是实现细节。这是迈向未来的一步——代理深度参与应用构建，人类通过将思维与代码更直接连接的界面来表达想法。

值得一试，如果……

您正在构建 Web 应用程序并希望加快 UI 迭代周期。如果您厌倦了在浏览器、代码编辑器和设计工具之间切换来完成简单的布局或样式更改，可视化编辑器提供了一种统一的方法。如果您使用 React 组件并需要测试多种状态，或者您与希望实时看到更改应用的设计师合作，它尤其有价值。