Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser

Cursor 又偷偷更新了：Visual Editor for Cursor Browser 超实用！

是的，Cursor（那个基于 VS Code 的 AI 代码编辑器）在2025年12月10-11日左右的2.2 版本中，低调上线了Visual Editor for Cursor Browser这个杀手级功能。很多用户（包括 Reddit 和论坛）都说“又偷偷更新了”，因为它直接嵌入到 Cursor 的内置浏览器中，打开项目后就能用，确实有点“惊喜”感。

这个功能到底是什么？为什么这么实用？

简单说，它把网页应用、代码库 和 视觉编辑工具统一到一个窗口里，彻底桥接了“设计”和“编码”的鸿沟。以前前端开发要切换 Figma/DevTools/代码编辑器，现在全在 Cursor 里一站式搞定。

核心亮点：

• 拖拽编辑布局：直接在渲染的网页上拖拽元素、交换按钮顺序、旋转 section、调整 grid/flexbox，无需手动写代码。
• 实时样式调整：侧边栏有滑块、调色板、字体控件，支持实时预览（比如圆角半径、字母间距、颜色 token），所有变化都映射到真实 CSS。
• 检查组件和 Props：像 Chrome DevTools 一样 inspect 元素，尤其对 React 项目友好，能直接看到组件 props 并修改不同状态变体。
• Point and Prompt（指哪改哪）：点击元素（甚至多选），然后自然语言描述变化（如“把这个按钮背景变红”“让这个卡片更大”“交换这两个卡片的顺序”），AI Agent 自动定位代码并应用修改。
• AI 自动更新代码：视觉改完后，一键让 Agent 把变化写回代码库（支持并行多个提示，秒级响应）。

这不只是“可视化 DevTools”，而是设计到代码的无缝闭环：你视觉上调到满意，AI 负责精准落地，避免手动改代码的错误和上下文切换。

为什么说太实用？（尤其对前端/全栈开发者）

• 效率爆炸：以前调 UI 要来回切窗口、猜组件路径，现在直接在运行的 app 上操作，迭代速度提升几倍。
• 适合设计师协作：设计师可以用自然语言或拖拽表达意图，开发者不用再猜“这个间距到底要多少”。
• 对 React/现代 Web 项目完美：自动识别组件树，修改 props 超级方便。
• 不止自家项目：甚至可以指向任何直播网站（非只限本地运行），inspect 并模拟修改（不过应用变化还是针对你的代码库）。

社区反馈（Reddit、Cursor 论坛）：

• 很多人惊呼“This is awesome”，觉得这是 Cursor 向“AI + 设计工作室”进化的关键一步。
• WIRED 等媒体称它为“给设计师的 AI 编码工具”，直接挑战 Figma 的部分场景。
• 有人说：一旦用上，就回不去传统流程了。

如何启用和使用？

1. 更新到最新 Cursor（2.2+）。
2. 在项目中运行你的 web app（比如 Next.js/React 项目）。
3. 用命令> Open Browser打开 Cursor 的内置浏览器（或直接在侧边栏嵌入）。
4. 浏览器加载你的 app 后，Visual Editor 侧边栏自动出现，开始拖拽/inspect/prompt 吧！

官方博客：https://cursor.com/blog/browser-visual-editor
Changelog：https://cursor.com/changelog（里面有详细描述）

总之，这个更新绝对是 2025 年底的前端神器！如果你在做 web 项目，赶紧试试，感觉会让你爱上“vibe coding + visual”的新范式。太香了🚀 如果你用过了，欢迎分享体验！