截图标注：把要改的元素精确指给 AI 编程工具
选中元素，添加备注，复制一份包含标注截图和实际样式的引用，然后粘贴到你现在使用的 AI 编程工具中。
更新于
Ag
- Ink
- Amber
- Paper
“把第二个按钮调大一点。”这条指令说明了要改什么，却没说明改哪里，所以你的 AI 编程工具只能猜你指的是哪个按钮。SuperchargeInspect 让它不必再猜。选中元素，写一条描述修改内容的备注，然后复制一份引用，其中包含备注、标注截图以及该元素的实际样式。只需一份引用，你就能把元素本身、它的外观以及你想要的修改一并交给工具。
四步工作流程
按 Alt+Shift+E 或点击工具栏按钮即可开始检查，然后通过鼠标悬停或方向键在页面上移动。整个流程共四步。
- 选中元素。将鼠标悬停到元素上，或用方向键移动，然后按 Enter 锁定。
- 添加备注。再次按 Enter 即可编写备注。用文字描述修改内容，例如“把这个按钮改成全宽”。引用会将该备注标记为唯一的修改要求。
- 复制引用。按 Ctrl+Enter（macOS 上为 Cmd+Enter）。剪贴板中的同一项内容会同时包含文本引用和带标注的 PNG。
- 粘贴。粘贴到你的 AI 编程工具中，由它决定使用哪一部分。
上方的示例卡片运行的正是同一流程。点击某个部分将其锁定，然后点击“复制引用”。演示会复制文本引用和带标注的 PNG，与扩展的做法完全相同。
引用包含哪些内容
文本引用是便于快速浏览的纯文本。在简短的标题和一行安全说明之后，它会列出你的备注和来源 URL，然后是元素及其定位提示和可见文本，可见文本会被标记为参考数据。接着是视口尺寸和滚动位置、元素的边界，以及实际样式：声明的 font-family 栈、颜色值、各边的内边距和外边距、gap、圆角半径和 display。最后附上页面最终生成的该元素标记的简短摘录。
带标注的截图是可见区域的裁剪图，下方附有页脚：你的备注、来源、元素以及一行简短的样式信息。
安全说明会将页面文本标记为参考数据，因此页面文本无法伪装成指令。只有你的备注才算作请求。
粘贴到 AI 编程工具
由你的 AI 编程工具决定使用文本、图片还是两者。并非所有工具与操作系统的组合都经过认证。
| AI 编程工具 | 粘贴方法 |
|---|---|
| Claude Code | 文本：在终端中粘贴。图片：按 Ctrl+V，在 iTerm2 中按 Cmd+V，在 Windows 或 WSL 上按 Alt+V。 |
| Codex CLI | 文本：在终端中粘贴。图片：按 Ctrl+V 或 Ctrl+Alt+V，或使用 codex -i path/to/image.png。 |
| Codex 桌面版或 IDE 输入框 | 如果合并粘贴缺少某种格式，请附加已保存的 PNG 并粘贴文本。 |
| OpenCode TUI | 当两者同时存在时，Ctrl+V 会优先粘贴图片。如需完整元数据，请同时使用“仅复制文本”。 |
| OpenCode 桌面版或网页版 | 通过输入框的图片附件或粘贴添加图片，文本则粘贴到文本输入框中。 |
| ChatGPT 网页版 | 粘贴到输入框中，或附加已保存的 PNG。 |
| Claude 网页版 | 粘贴到输入框中，或附加已保存的 PNG。 |
如果粘贴后只保留了一种格式，请在“更多复制方式”菜单中使用“仅复制文本”“仅复制图片”或“保存 PNG”。
引用的局限性
复制的引用是一份观察快照。它记录的是页面显示的内容，而不是构建页面的代码。Inspect 无法还原源文件、组件名称或作者编写的 CSS 规则。字体值是声明的 font-family 栈，即页面所请求的字体列表。接收工具决定保留哪些格式。通过 SSH、在远程容器中或在托管编程环境中，本地图片不会随粘贴一起传输。请先保存 PNG，再按远程工具接收文件的方式附加。保存的 PNG 是不带页脚的干净裁剪图，因此你的备注会随粘贴的文本一起传递。
隐私
Inspect 不发起任何网络请求，无需账号，也从不向任何 AI 服务发送内容或提交提示词。在你自己粘贴或保存 PNG 之前，你检查的任何内容都不会离开你的设备。它会在会话存储中记住你在每个页面上最后选择的元素，关闭浏览器后即会清除。