你以为把 UI 问题说清楚 AI 就懂了？今天 VS Code 1.132 把这件事彻底变了

写过前端的人都踩过这个坑——让 AI 帮你改 UI 问题，只能靠文字描述。「那个右上角的按钮」「第二个卡片下面那条线」「登录框左边的图标」，说完了 AI 还是不知道你指的是哪一个。来回几次，耐心先磨没了。

VS Code 1.132（2026-08-05）把这件事彻底变了。现在你可以在内置浏览器里直接点击页面元素，给它加上注释，让 AI 精确知道「这个按钮要改什么」。

问题在哪

以前你跟 AI 说「表单提交按钮颜色不对」，AI 只能靠猜。它生成一版代码，你看效果，发现不对，再反馈，再改。来回四五趟是常事。不是 AI 笨，是你给的信息本身就不精确——文字描述在 UI 问题上天然有歧义。

这个问题在纯代码任务里几乎不存在。你说「帮我把 getUser() 改成 async getUser()」，AI 不会搞错。但在界面上，「不对」到底指哪个元素、什么颜色、哪个状态？纯文字很难表达到位。

解法：点哪指哪，AI 收到完整上下文

VS Code 1.132 在内置浏览器里加了一个「Comment on Elements」功能。按快捷键 workbench.action.browser.addElementCommentToChat 触发元素选取模式，然后直接点击页面上的任意元素——按钮、表单、卡片、div——给每个元素加上注释，再一起发给 Copilot。

关键在于，发出去的不只是文字。AI 收到的是：选中的 HTML 元素、computed CSS 样式、截图、元素路径。四维上下文同时到达，AI 知道你说的是哪个按钮、当前是什么颜色、应该是什么颜色。

举个例子：

「这个提交按钮，文字改成 ‘Save’，不要 ‘Submit’，颜色用主色调 #3B82F6，不要现在的灰色。」

这就是一次完整的上下文传递，不需要来回四五次猜测。

技术演进路径

这套能力不是一蹴而就的：

• 2026-01（v1.109）：VS Code 发布全新内置浏览器，基于 Chrome DevTools Protocol（CDP）和 Chromium，完全替代了原来基于 iframe 的 Simple Browser。持久化存储、OAuth 登录、DevTools 全部支持。
• 2026-03：加入浏览器调试能力，断点、步进、变量检查都可以在 VS Code 里做。
• 2026-05：本地 HTML 文件直接预览，不需要任何扩展。
• 2026-07：浏览器工具 for Copilot 正式 GA（General Availability），AI agent 可以控制浏览器打开页面、截图、点击、输入。
• 2026-08（v1.132）：元素级注释上线，补上了最后一环——人类可以精确告诉 AI「哪个元素具体怎么改」。

也就是说，从「AI 帮你写代码」到「AI 帮你写代码 + 帮你验证 + 帮你按你的意图改界面」，这个闭环在 2026 年 8 月正式形成。

为什么这次不一样

之前的 AI coding 工具擅长的是：代码生成。但在 UI 迭代场景里，瓶颈从来不是「写不出代码」，而是「我不知道我想要什么直到我看到它」。

传统流程是：设计师出图 → 前端还原 → 人工验收 → 反馈修改 → 再一轮。这个循环里，改 UI 是人肉驱动。

AI agent 介入后：AI 生成 → 浏览器预览 → 人标注哪里不对 → AI 改。这里改 UI 的驱动变成了「人看到实际效果后的精确反馈」，而不是「设计师在设计稿上画好、前端照着还原」。

元素级注释让这个反馈环路的精度，从「文字描述」提升到了「视觉指认」。

怎么用

1. 升级到 VS Code 1.132+
2. 打开 Copilot Chat → Agent 模式
3. 打开 Integrated Browser（Ctrl+Shift+P → Browser: Open Integrated Browser）
4. 用快捷键触发元素选取模式：Ctrl+Shift+P → workbench.action.browser.addElementCommentToChat
5. 点击要修改的元素，加上注释，一起发给 Copilot

目前需要 GitHub Copilot 订阅才能使用 agent 模式。不过从工作流的角度，这个能力补上的是整个 AI coding 闭环里最薄弱的环节——从「你猜我想要什么」到「我指给你看」。

下一步：如果你已经在用 Copilot agent 做前端开发，今天试一次这个流程：让 agent 生成一个表单界面 → 你在内置浏览器里点一个元素加上注释 → 发给 agent 改 → 看它改对了没有。这比任何 prompt 教程都直观。