Cursor又推出新功能了？我好奇心一重，赶紧去仔细看看相关文档：cursor.com/cn/docs/age…
哇，这个功能简直太牛了！
这次更新的Cursor浏览器视觉编辑器，真的是打破了“设计”和“编码”的壁垒，让Cursor不再只是个编辑器，而是一个“可以直接写代码的浏览器”。
核心价值
它解决了前端开发中一个大痛点——“在浏览器里调整好样式后，还是得手动回到代码里去改”。
现在，咱们可以像在Figma或Webflow里那样，直接拖拉、点击和调整UI，然后点击“应用”，Cursor的Agent就会自动把这些视觉上的变动转化为完美的代码，写入你的项目，这才是真正的“所见即所得（Design to Code）”。
如何体验
首先，确保你的版本是最新的：
打开Cursor -> 右上角设置 -> 工具与MCP -> 浏览器自动化 -> 选择浏览器标签：
然后启动项目，屏幕上会出现一个弹窗：
点击“打开”之后，就可以在Cursor里启动前端项目的预览了：
右上角的功能主要有：选择元素、截图和打开开发者模式。
最实用的就是选择元素后跟AI对话，这样上下文会更具体，以后修改UI就方便多了！
简单的调整甚至不需要和AI沟通，直接在界面上操作就行！
开启选择元素模式后，我们可以直接在预览界面拖拽修改UI、调整文字、布局等等，就像设计一样，完全是所见即所得。
Cursor内置的浏览器有一个设计侧边栏，可以直接在Cursor中修改选中元素的Position、Layout、Padding、Color等，实现设计与编码的实时同步调整。
朋友们，这个功能真的是太实用了，我甚至不敢告诉产品经理和设计师！
根据官方文档，这个功能适用于以下场景：
- 测试应用
- 可视化编辑布局和样式
- 执行无障碍审计
- 将设计转换为代码等
年纪大了不能熬夜，我就先抛砖引玉，感兴趣的朋友赶紧试试吧，晚安！
原文链接：https://juejin.cn/post/7582479325283729471
这个功能实在是太好用了，完全不想再手动写代码了！
能直接在浏览器内修改UI真是个大进步，终于不用频繁切换工具了！
用完这个功能，感觉自己像是从设计师变成了程序员，哈哈，真有趣。
在使用选择元素模式时，建议多尝试不同的布局和样式，能激发更多设计灵感。
感觉这个更新有点像Figma，设计师一定会喜欢。
从设计到代码的过程简化了，能不能顺便优化一下其他开发流程呢？
在选择元素模式下，修改UI的操作是不是会影响到后续的代码维护？要注意哦！
建议大家在使用的时候多试试各种功能，可能会发现意想不到的惊喜！
使用这个功能时能否保持代码的整洁性？希望不会造成过多冗余！
建议在使用过程中多保存不同版本，以防修改后出现不可逆的错误。
建议在不同项目中多尝试这个编辑器，看看它在各种场景下的表现如何。
感觉这个功能超级适合设计师，编码也变得简单了！
希望这个功能能进一步优化，减少一些不必要的步骤。