Cursor新功能上线，我竟然不敢和产品经理分享！

作者

Cursor又有新功能啦！

就在凌晨1点，我准备关掉电脑去睡觉时，屏幕左下角忽然跳出一个弹窗。

cursor 功能更新.jpg

Cursor这次又更新了什么新玩意儿呢？我好奇地去查阅了一下官方文档。

你可能感兴趣：Trae和Cursor的对比，哪个更能打动你？

哇，这个功能真是太厉害了！

这次推出的Visual Editor for Cursor Browser，算是打破了“设计”与“编码”之间的界限，让Cursor不仅仅是个编辑器，简直就是一个“能直接写代码的浏览器”！

核心价值

这个更新解决了前端开发中一个大难题——“在浏览器里调整好样式后，还得手动回去改代码”。

现在，你可以像在Figma或Webflow那样，直接拖拽、点击、调整UI，一切搞定后只要点一下“应用”，Cursor的Agent就会自动把这些视觉上的变化转化成完美的代码，直接写进你的项目里，实现真正的“所见即所得（Design to Code）”。

如何体验

首先，确保你的版本是最新的：

image.png

打开Cursor -> 右上角设置 -> 工具&MC -> 浏览器自动化 -> 选择浏览器标签：

image.png

接着启动项目，会看到一个弹窗：

cursor-brower.jpg

点一下“打开”，就能在Cursor里启动前端项目的预览了：

cursor 功能更新-预览.jpg

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

最实用的就是选择元素后和AI对话，这样上下文就能更加具体，以后修改UI也方便多了！

其实简单的修改，我们根本不需要和AI交流，直接在界面上动手修改就行！

一旦开启选择元素模式，我们可以在预览界面上拖拽修改UI、调整文案、改动布局，就像设计一样，完全所见即所得。

image.png

Cursor内置的浏览器还包含一个设计侧边栏，可以直接在Cursor中修改选中元素的各种属性，比如位置、布局、内边距、颜色等等，实时进行可视化调整，实现设计与编码的同步。

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

根据官方文档，这个新功能适合在以下场景使用：

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

我年纪大了不能熬夜，就先给大家抛个砖，感兴趣的朋友快去试试吧，晚安！

我的专栏《转型AI工程师》正在预热，第一篇文章可以免费阅读，感兴趣的朋友可以看看：https://xiaobot.net/post/8e8e0693-00a0-4220-bf3e-dec50a17294d

来源：知乎
原文标题：Cursor 又推出新功能，这个功能我都不敢和产品经理说
原文链接：https://zhuanlan.zhihu.com/p/1983304610186825880
声明：
文章来自网络收集后经过ai改写发布，如不小心侵犯了您的权益，请联系本站删除，给您带来困扰，深表歉意！

相关阅读

大家在看

《Claude Code：AI 编程工具的革命性转变 – 深度对比 Trae 与 Cursor》深入探讨Cursor的应用：从需求到开发的全流程解析深入探讨Cursor的应用：从需求到开发的全流程解析Cursor：如何在短短21个月内实现1亿美元年收入的惊人飞跃Cursor：如何在短短21个月内实现1亿美元年收入的惊人飞跃从$200美金会员到调试高手：如何在10天内逆转1小时编码的Bug困境从$200美金会员到调试高手：如何在10天内逆转1小时编码的Bug困境产品经理必看：掌握Cursor的实用指南产品经理必看：掌握Cursor的实用指南难以置信！Cursor新收费模型，一个月只需40刀，你准备好了吗？难以置信！Cursor新收费模型，一个月只需40刀，你准备好了吗？小白必看！轻松掌握Cursor安装与配置全攻略小白必看！轻松掌握Cursor安装与配置全攻略从热爱到决断：我与 Cursor 续费的告别之旅为何Cursor的Tab键如此卓越，令人爱不释手？为何Cursor的Tab键如此卓越，令人爱不释手？AI能否取代程序员？飘哥深度解析！AI能否取代程序员？飘哥深度解析！

《Cursor新功能上线，我竟然不敢和产品经理分享！》有18条评论

发表评论