Visual Editor

✨ Visual Editor：在 Cursor Browser 中可视化编辑网页应用 ✨

隆重推出 Cursor Browser 全新可视化编辑器！它让您在所见即所得的界面中直观地修改网页应用。告别繁琐的界面与代码反复切换，迎接流畅高效的开发体验！

---

💡 核心亮点

• 所见即所得编辑： 直观地操作网页元素，就像使用设计工具一样简单。
• 智能代码同步： 每次视觉调整都会由智能助手在后台同步更新代码，无需手动介入。
• 快速迭代与预览： 更改即时生效，助您快速搭建原型、微调界面或修复细节。

---

🎯 功能详解

通过 Agent 浏览器控制

Agent 可以控制浏览器来测试应用程序、可视化编辑布局和样式、审计可访问性、将设计转换为代码等等。通过全面访问控制台日志和网络流量，Agent 可以调试问题并自动化全面的测试工作流程。
——摘自 Cursor Docs/Browser

Visual Editor 深度集成于 Agent 浏览器中，为您提供无缝的网页开发体验。

设计侧边栏：实时视觉调整，所想即所得

浏览器包含一个设计侧边栏，可以直接在 Cursor 中修改您的网站。您可以实时进行视觉调整，实现设计与代码的同步。

• 位置和布局： 轻松移动和重新排列页面元素，调整 flex 方向、对齐方式和网格布局。
• 尺寸： 精确调整宽度、高度、内边距和外边距的像素值。
• 颜色： 从设计系统更新颜色或添加新的渐变。通过可视选择器访问颜色 token。
• 外观： 使用可视滑块尝试阴影、不透明度和边框半径。
• 主题测试： 即时在亮色和暗色主题之间测试您的设计。

轻松应用更改：视觉变动即刻转化为代码

当您的视觉调整符合预期时，只需点击“应用”按钮，即可触发一个 Agent，它会将您的视觉更改转化为相应的代码修改。您甚至可以选择网站上的多个元素，并通过文本描述进行更改。 Agent 将并行处理，您的更改会在热重载后立即显示在页面上。

会话持久性：您的工作状态始终在线

浏览器状态在 Agent 会话之间持久保存，这意味着：

• Cookies： 认证 Cookies 和会话数据在不同浏览器会话中仍然可用。
• 本地存储： localStorage 和 sessionStorage 中存储的数据会持久保存。
• IndexedDB： 数据库内容会在会话之间保留。

每个工作区都拥有独立的浏览器上下文，确保不同项目之间存储和 Cookie 状态的隔离。

---

🚀 应用场景

• 网页开发工作流程： 与 Figma 和 Linear 等工具无缝协作，提升您的网页开发效率。
• 辅助功能改进： Agent 可以审计并改进网页的可访问性，帮助您达到 WCAG 合规标准。
• 设计转代码： Agent 可以将设计转化为具有响应式布局的可用代码。
• UI 设计调整： 通过识别视觉差异并更新组件样式来优化现有界面。
• 自动化测试： Agent 可以执行全面的测试套件，并捕获屏幕截图以进行视觉回归测试。

---

🔒 安全保障

Visual Editor 在安全的网页视图中运行，并由作为扩展运行的 MCP 服务器控制。通过多重防护层，确保您免受未经授权的访问和恶意行为的侵害。Cursor 的浏览器集成也经过了多个外部安全审计师的审查。