文档 / 浏览器 / 设计模式

Design Mode 将 Orca 浏览器变成一个指向代码的工具。打开它，点击渲染页面上的任意 UI 元素，该元素就会作为丰富上下文进入代理聊天——附带其 DOM、计算样式和一张截图。

开启它¶

点击浏览器工具栏中的 Design Mode 开关。你的光标会变成选择器；悬停时会高亮其下方的元素。

放入聊天¶

点击某个元素。Orca 会捕获：

• 元素的 HTML（外层以及一小片相邻区域）。
• 其计算 CSS——颜色、字体、间距。
• 元素的裁剪截图。
• 如果存在开发模式 source map，则包含源文件/行号。

所有这些内容会作为一个附件发送到当前活动的代理终端，然后你输入想要修改的内容。

使用结果¶

代理会编辑源代码，Orca 会热重载，你再点击一次以验证。这个循环最紧凑的版本是核心示例 使用 Design Mode 修复 UI 缺陷。