我们很高兴发布 Cursor Browser 的可视化编辑器。它将你的 Web 应用、代码库和强大的可视化编辑工具集成在同一个窗口中。你可以拖动元素、直接检查组件及其 props，并通过指点和点击来描述你想要的更改。现在，产品中的界面变得更加直观、即时，大大缩短了设计与代码之间的距离。

#使用拖放重新排列

可视化编辑器让你可以直接在 DOM 树中拖拽已渲染的元素，调整网站的布局和结构。

这将视觉设计与编码打通。你可以调整按钮顺序、旋转版块，并测试不同的网格配置，而无需在不同视图之间来回切换。当视觉设计达到了你想要的效果时，只需让 Agent 帮你应用它。Agent 会定位相关组件，并为你更新底层代码。

#直接测试组件状态

许多现代应用是用 React 构建的，组件通过属性来控制不同的状态。可视化编辑器可以轻松地在侧边栏中暴露这些 props，让你可以跨组件的不同变体进行修改。

#使用可视化控件调整属性

可视化编辑器侧边栏让你通过滑块、调色板，以及你自己的颜色 Token 和设计系统来精细调整样式。每一次微调都支持实时交互：颜色选择器会即时预览你的选择，还可以精确控制并重新排布网格、Flexbox 布局和排版。

#点选并提示

可视化编辑器还允许你点击界面中的任意元素，然后描述你想要的更改。你可以点选某个元素并说「把这个变大一些」，在另一个元素上提示「把这个变成红色」，在第三个元素上输入「交换它们的顺序」。这些智能体会并行运行，在几秒钟内你的更改就会实时生效。

#提升抽象层级

Cursor 全新的可视化编辑器将你的设计与代码工作统一起来，帮助你更清晰地表达自己的意图，让执行不再受具体操作细节的限制。

在我们设想的未来，Agent 将与在 Web 上构建应用的过程连接得更加紧密，人们会通过把思维与代码更直接联结起来的界面来表达自己的想法。这些特性正是朝这个方向迈出的关键一步。

阅读 Browser 文档。在 Cursor 2.2 中了解所有新功能。