Cursor又有新功能啦！
就在凌晨1点，我准备关掉电脑去睡觉时，屏幕左下角忽然跳出一个弹窗。
Cursor这次又更新了什么新玩意儿呢？我好奇地去查阅了一下官方文档。
哇，这个功能真是太厉害了！
这次推出的Visual Editor for Cursor Browser，算是打破了“设计”与“编码”之间的界限，让Cursor不仅仅是个编辑器，简直就是一个“能直接写代码的浏览器”！
核心价值
这个更新解决了前端开发中一个大难题——“在浏览器里调整好样式后，还得手动回去改代码”。
现在，你可以像在Figma或Webflow那样，直接拖拽、点击、调整UI，一切搞定后只要点一下“应用”，Cursor的Agent就会自动把这些视觉上的变化转化成完美的代码，直接写进你的项目里，实现真正的“所见即所得（Design to Code）”。
如何体验
首先，确保你的版本是最新的：
打开Cursor -> 右上角设置 -> 工具&MC -> 浏览器自动化 -> 选择浏览器标签：
接着启动项目，会看到一个弹窗：
点一下“打开”，就能在Cursor里启动前端项目的预览了：
右上角的功能主要有：选择元素、截图、打开开发者模式。
最实用的就是选择元素后和AI对话，这样上下文就能更加具体，以后修改UI也方便多了！
其实简单的修改，我们根本不需要和AI交流，直接在界面上动手修改就行！
一旦开启选择元素模式，我们可以在预览界面上拖拽修改UI、调整文案、改动布局，就像设计一样，完全所见即所得。
Cursor内置的浏览器还包含一个设计侧边栏，可以直接在Cursor中修改选中元素的各种属性，比如位置、布局、内边距、颜色等等，实时进行可视化调整，实现设计与编码的同步。
朋友们，这个功能简直太实用了，实用到我都不敢告诉产品经理和设计师呢！
根据官方文档，这个新功能适合在以下场景使用：
- 测试应用
- 可视化编辑布局和样式
- 执行无障碍审计
- 将设计转化为代码等
我年纪大了不能熬夜，就先给大家抛个砖，感兴趣的朋友快去试试吧，晚安！
我的专栏《转型AI工程师》正在预热，第一篇文章可以免费阅读，感兴趣的朋友可以看看：https://xiaobot.net/post/8e8e0693-00a0-4220-bf3e-dec50a17294d
这功能简直是为我们工程师量身定做的，实用到不敢告诉产品经理，哈哈！
能在Cursor里修改元素，真的是太方便了！有没有人分享一下使用体验？
我觉得这个功能真的是提升效率的利器，设计师和开发者幸福了。
这个功能真的是设计师和开发者的福音，效率提升太明显了！
Cursor的这个更新让设计师和开发者的工作流程变得流畅很多，值得一试！
我也想试试这个功能，感觉会对我的项目有很大帮助，大家有推荐的使用场景吗？
我能想象到产品经理知道这个功能后的表情，简直是个“威胁”啊，哈哈！
我最近在使用Cursor，发现这个功能特别适合快速原型设计，大家可以试试！
这个功能让我想起了Figma，能否在设计和开发之间更好地衔接？希望能多一些案例分享。
可视化编辑真的太酷了！代码生成的准确性如何？有没有试过的朋友分享一下？
我试过类似的工具，感觉自己的设计思路会不会被限制呢？