指针即上下文Design Mode 把 Orca 浏览器变成一个 pointer-to-code 工具：点一下页面上的任意元素，元素就以「DOM + 计算样式 + 截图」的富上下文掉进 Agent 聊天——不用复制粘贴、不用描述「左边那个蓝色按钮」。
工作流程
- 打开 Design Mode：浏览器工具栏的开关
- 悬停：光标变成选择器，元素被高亮
- 点击：Orca 捕获并打包进 Agent 终端，作为一个附件：
| 捕获内容 | 说明 |
|---|---|
| HTML | 元素 outerHTML + 一小圈邻居 |
| 计算 CSS | 颜色、字体、间距 |
| 截图 | 元素的裁剪截图 |
| 源码定位 | dev-mode source map 可用时的文件:行 |
- 下达指令：你在终端里输入想改什么（「把按钮改成主色调」）
- 验证：Agent 改完源码，Orca 热重载，你再点一下确认
这就是「修复 UI bug 的 Design Mode」配方里最紧凑的一版循环。
为什么它比截图粘贴强
- Agent 拿到的是精确的 DOM 与计算样式，而不是一张图——它知道元素的 class、父级结构、实际生效的 CSS
- 有 source map 时直接定位到源码文件与行号，改动命中率大幅提升
- 你不需要写选择器、不需要开 devtools 手工拷贝
典型使用场景
- 修 UI bug：间距、颜色、对齐不对 → 点一下，描述预期，验证热重载
- 对齐设计稿：把设计稿上的元素点给 Agent 对比
- 响应式问题：配合视口仿真，点出移动端布局的问题元素
落地练习：修一个真实的 UI
- 在任意前端仓库的工作树里
npm run dev起本地服务，浏览器打开 - 打开 Design Mode，悬停一个按钮或卡片
- 点击，检查 Agent 终端收到的 HTML / CSS / 截图上下文
- 输入一个明确的修改指令（如「背景色改为主色 #E2B719，圆角 12px」）
- Agent 改完热重载后，再次点击验证
怎么判断做对了？——你能说出 Design Mode 传给 Agent 的四种内容，并完整走完一轮「点击 → 指令 → 热重载 → 验证」。
卡住了怎么办？ 点不到元素：确认 Design Mode 开关已激活（光标变化）；Agent 拿到上下文没反应：检查 source map 是否可用（构建工具 dev 模式默认开）。
小结
- Design Mode = 浏览器内的元素选择器，点击即捕获
- 捕获：HTML + 计算样式 + 截图 + 源码定位
- 闭环：点击 → 指令 → 热重载 → 再点击验证
- 适合修 UI bug、对齐设计稿、排查响应式问题
下一节，浏览器 Profiles 与响应式仿真。