Cursor 又偷偷更新,这个功能太实用:Visual Editor for Cursor Browser

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

Cursor 又上新功能了?带着好奇我仔细看了下文档:cursor.com/cn/docs/age...

我去,这个功能很重磅啊!

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

核心价值

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

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

如何体验

首先确认版本是最新的:

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

然后启动项目,会看到一个弹窗:

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

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

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

根据官方文档,这个功能可以在这些场景:

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

岁数大了不能熬夜,我就先抛砖引玉,感兴趣的朋友赶紧试试吧,晚安!

我的专栏《转型 AI 工程师》正在预热中,第一篇文章已发布,感兴趣的朋友可以看看:xiaobot.net/post/8e8e06...

相关推荐
kisshyshy几秒前
从0到1彻底理解流式输出:先读懂Vue的“乐高积木”,再拧开LLM的“数据水龙头”
javascript·vue.js·人工智能
谙忆10243 分钟前
WebCodecs 实战:用 ImageDecoder 和 VideoFrame 在浏览器里做硬件加速的帧处理
前端
JerrySir5 分钟前
密码没泄露,2FA 也没失效:Chrome 146 为什么还要让 Cookie“搬不走”?
前端
小蚂蚁i5 分钟前
React Hooks 原理深度解析:从会用到真正懂
前端·react.js
ting94520006 分钟前
纯技术硬核解析:Timbal AI 全栈底层架构、引擎原理与生产级 AI 应用落地实现
人工智能·架构
用户6919026813396 分钟前
Agent 开发 主流 skills推荐
人工智能
意图共鸣8 分钟前
意图共鸣科技7月13日发布《智能体三角模型白皮书》|商用AI智能体的通用构造范式深度解读
人工智能·科技
触底反弹11 分钟前
Vue 实战:手把手教你实现 ChatGPT 同款打字机效果
前端·javascript·人工智能
秦先生在广东12 分钟前
Hallmark:一个拒绝“AI味“的设计技能工具深度解析
人工智能
老金带你玩AI13 分钟前
Codex109天重置23次,明天还要再送一次
人工智能