Cursor 又推出新功能，这个功能我都不敢和产品经理说

<blockquote><div><div><p>凌晨 1 点，我正要关电脑睡觉，屏幕左下角突然弹出一个弹窗：</p><p style="text-align: center;"><img src="https://upload-images.jianshu.io/upload_images/1523592-7e3a55c6f1099e37.png" alt="cursor 功能更新.jpg" loading="lazy" class="medium-zoom-image" width="185" height="259" style="width: 185px; height: 259px;" data-src="https://upload-images.jianshu.io/upload_images/1523592-7e3a55c6f1099e37.png"></p><p>Cursor 又上新功能了？带着好奇我仔细看了下官方文档。</p><p>
</p><p>我去，这个功能很重磅啊！</p><p>
</p><p>这次更新的 Visual Editor for Cursor Browser 是一个打破“设计”与“编码”边界的重磅功能，它让 Cursor 不仅仅是编辑器，更是一个“能直接写代码的浏览器”。</p><h2 data-id="heading-0">核心价值</h2><p>它解决了前端开发中最大的痛点——“在浏览器里调好了样式，还得手动回代码里改”。</p><p>
</p><p>现在，我们可以像在 Figma 或 Webflow 里一样直接拖拽、点击、调整 UI，然后点击 "Apply"，Cursor 的 Agent 就会自动把这些视觉变更翻译成完美的代码并写入你的项目，实现了真正的“所见即所得（Design to Code）”。</p><h2 data-id="heading-1">如何体验</h2><p>首先确认版本是最新的：</p><p style="text-align: center;"><img src="https://upload-images.jianshu.io/upload_images/1523592-953acd7113dbf584.png" alt="image.png" loading="lazy" class="medium-zoom-image" width="250" height="376" style="width: 250px; height: 376px;" data-src="https://upload-images.jianshu.io/upload_images/1523592-953acd7113dbf584.png"></p><p>打开 Cursor -> 右上角设置 -> Tools&MCP -> Browser Automation -> 选择 Browser Tab:</p><p><img src="https://upload-images.jianshu.io/upload_images/1523592-73efe0a439dfd6e6.png" alt="image.png" loading="lazy" class="medium-zoom-image" data-src="https://upload-images.jianshu.io/upload_images/1523592-73efe0a439dfd6e6.png"></p><p>
</p><p>然后启动项目，会看到一个弹窗：</p><p style="text-align: center;"><img src="https://upload-images.jianshu.io/upload_images/1523592-6525db763bc00ee5.png" alt="cursor-brower.jpg" loading="lazy" class="medium-zoom-image" width="223" height="311" style="width: 223px; height: 311px;" data-src="https://upload-images.jianshu.io/upload_images/1523592-6525db763bc00ee5.png"></p><p>点击 open 以后，就可以在 Cursor 里启动预览前端项目：</p><p><img src="https://upload-images.jianshu.io/upload_images/1523592-62376dcac70af9be.png" alt="cursor 功能更新-预览.jpg" loading="lazy" class="medium-zoom-image" data-src="https://upload-images.jianshu.io/upload_images/1523592-62376dcac70af9be.png"></p><p>右上角的功能主要是：选择元素、截图、打开开发者模式。</p><p>
</p><p>最有用的就是选择元素后和 AI 对话，这无疑让上下文更加具体，以后修改 UI 更方便了！</p><p><strong>
</strong></p><p><strong>简单的修改甚至我们都不需要和 AI 聊，直接上手在界面上改！</strong></p><p>
</p><p>开启选择元素模式后，我们可以直接在预览界面上<strong>拖拽修改 UI、调整文案、布局结构</strong>等等，就和做设计一样所见即所得。</p><p><img src="https://upload-images.jianshu.io/upload_images/1523592-e6318dc3f2eb2d75.png" alt="image.png" loading="lazy" class="medium-zoom-image" data-src="https://upload-images.jianshu.io/upload_images/1523592-e6318dc3f2eb2d75.png"></p><p><span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">Cursor 内置浏览器包含一个设计侧边栏，可直接在 Cursor 中修改选中元素的 Position Layout Padding color 等等，实现实时可视化调整下的同步设计与编码。</span></p><p>
</p><p>朋友们，这个功能太实用了，实用到我都不敢告诉产品经理和设计师!</p><p>根据官方文档，这个功能可以在这些场景：</p><ol class=" list-paddingleft-2"><li><p>测试应用</p></li><li><p>可视化地编辑布局和样式</p></li><li><p>执行无障碍审计</p></li><li><p>将设计转换为代码等</p></li></ol><p>
</p><p>岁数大了不能熬夜，我就先抛砖引玉，感兴趣的朋友赶紧试试吧，晚安！</p><p><span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">
</span></p><p><span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">我的专栏《转型 AI 工程师》正在预热中，第一篇文章可以免费阅读，感兴趣的朋友可以看看：https://xiaobot.net/post/8e8e0693-00a0-4220-bf3e-dec50a17294d</span></p></div>

</div></blockquote><p>
</p>