凌晨 1 点，我正要关电脑睡觉，屏幕左下角突然弹出一个弹窗：
Cursor 又上新功能了？带着好奇我仔细看了下文档：cursor.com/cn/docs/age…
我去，这个功能很重磅啊！
这次更新的 Visual Editor for Cursor Browser 是一个打破“设计”与“编码”边界的重磅功能，它让 Cursor 不仅仅是编辑器，更是一个“能直接写代码的浏览器”。
核心价值
它解决了前端开发中最大的痛点——“在浏览器里调好了样式，还得手动回代码里改”。
现在，我们可以像在 Figma 或 Webflow 里一样直接拖拽、点击、调整 UI，然后点击 "Apply"，Cursor 的 Agent 就会自动把这些视觉变更翻译成完美的代码并写入你的项目，实现了真正的“所见即所得（Design to Code）”。
如何体验
首先确认版本是最新的：
打开 Cursor -> 右上角设置 -> Tools&MCP -> Browser Automation -> 选择 Browser Tab:
然后启动项目，会看到一个弹窗：
点击 open 以后，就可以在 Cursor 里启动预览前端项目：
右上角的功能主要是：选择元素、截图、打开开发者模式。
最有用的就是选择元素后和 AI 对话，这无疑让上下文更加具体，以后修改 UI 更方便了！
简单的修改甚至我们都不需要和 AI 聊，直接上手在界面上改！
开启选择元素模式后，我们可以直接在预览界面上拖拽修改 UI、调整文案、布局结构等等，就和做设计一样所见即所得。
Cursor 内置浏览器包含一个设计侧边栏，可直接在 Cursor 中修改选中元素的 Position Layout Padding color 等等，实现实时可视化调整下的同步设计与编码。
朋友们，这个功能太实用了，实用到我都不敢告诉产品经理和设计师!
根据官方文档，这个功能可以在这些场景：
- 测试应用
- 可视化地编辑布局和样式
- 执行无障碍审计
- 将设计转换为代码等
岁数大了不能熬夜，我就先抛砖引玉，感兴趣的朋友赶紧试试吧，晚安！
我的专栏《转型 AI 工程师》正在预热中，第一篇文章已发布，感兴趣的朋友可以看看：xiaobot.net/post/8e8e06…
《Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser》 是转载文章，点击查看原文。