企业官网建设流程全解析

凌晨 1 点，我正要关电脑睡觉，屏幕左下角突然弹出一个弹窗：

Cursor 又上新功能了？带着好奇我仔细看了下文档：https://cursor.com/cn/docs/agent/browser#browser

我去，这个功能很重磅啊！

这次更新的 Visual Editor for Cursor Browser 是一个打破“设计”与“编码”边界的重磅功能，它让 Cursor 不仅仅是编辑器，更是一个“能直接写代码的浏览器”。

核心价值

它解决了前端开发中最大的痛点——“在浏览器里调好了样式，还得手动回代码里改”。

现在，我们可以像在 Figma 或 Webflow 里一样直接拖拽、点击、调整 UI，然后点击 "Apply"，Cursor 的 Agent 就会自动把这些视觉变更翻译成完美的代码并写入你的项目，实现了真正的“所见即所得（Design to Code）”。

如何体验

首先确认版本是最新的 2.2 14 版本。

打开 Cursor -> 右上角设置 -> Tools&MCP -> Browser Automation -> 选择 Browser Tab:

然后启动项目，会看到一个弹窗：

点击 open 以后，就可以在 Cursor 里启动预览前端项目：

右上角的功能按钮：选择元素、截图、打开开发者模式。

最有用的就是「选择元素」后和 AI 对话，这无疑让上下文更加具体，以后修改 UI 更方便了！

简单的修改甚至我们都不需要和 AI 聊，直接上手在界面上改！

开启选择元素模式后，我们可以直接在预览界面上拖拽修改 UI、调整文案、布局结构等等，就和做设计一样所见即所得。

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

根据官方文档，这个新功能主要用在这些场景，大家可以去试试：

1. 测试应用

2. 可视化地编辑布局和样式

3. 执行无障碍审计

4. 将设计转换为代码等

现在我们复制图片给 AI 生成的代码还有瑕疵，通过这个功能我们不难预测，不远的将来，设计稿直接转生产代码将不再是难题，future is coming !

我的专栏《转型 AI 工程师》正在预热中，第一篇文章已发布，感兴趣的朋友可以点击左下角「阅读原文」或者扫描二维码了解详情：