凌晨 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 等等，实现实时可视化调整下的同步设计与编码。

朋友们，这个功能太实用了，实用到我都不敢告诉产品经理和设计师!

根据官方文档，这个功能可以在这些场景：

1. 测试应用
2. 可视化地编辑布局和样式
3. 执行无障碍审计
4. 将设计转换为代码等

岁数大了不能熬夜，我就先抛砖引玉，感兴趣的朋友赶紧试试吧，晚安！

我的专栏《转型 AI 工程师》正在预热中，第一篇文章已发布，感兴趣的朋友可以看看：xiaobot.net/post/8e8e06…