第22章 设计模式——一键把页面元素发给智能体

设计模式

设计模式将 Orca 浏览器转变为一项指向代码的利器。开启该模式后，点击页面上任意 UI 元素，该元素便会作为丰富上下文自动填入智能体对话中，附带其 DOM、计算后的样式以及截图。

设计模式：点击按钮，它便落入智能体对话中

开启模式

点击浏览器工具栏中的设计模式开关。此时，光标变为选取器；悬停时会高亮显示下方的元素。「标注页面元素」操作也可在「设置 → 快捷键」中设为可重新绑定的快捷方式。

放入对话

点击某个元素。Orca 会捕获以下信息：

• 该元素的 HTML（外部结构及局部周边）。
• 其计算后的 CSS——颜色、字体、间距。
• 该元素的裁剪截图。
• 若存在开发模式下的 source map，则附带源文件及行号。

这些信息将作为单个附件发送至当前智能体终端，随后你只需输入希望修改的内容即可。

查看页面标注

使用标注托盘在页面上留存多条笔记，然后再发送给智能体。悬停某条笔记并选择「编辑」，即可在页内更改其评论或意图；操作完成后选择「保存」或「取消」。

提示词发送后，Orca 会自动移除已发送的标注。在发送过程中新增或编辑的笔记则会保留在页面上。

使用结果

智能体修改源码，Orca 热重载，你再次点击验证。这一循环的最精简版本即是核心用法：使用设计模式修复 UI 缺陷。