Design Mode（设计模式）

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

开启

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

落入聊天

点击一个元素。DevAgent 会捕获：

• 该元素的 HTML（outerHTML 及一小片邻域）。
• 它计算后的 CSS——颜色、字体、间距。
• 该元素的裁剪截图。
• 如果有 dev-mode 的 source map，还包括源文件/行号。

所有这些会作为一个附件一并送入活动的 agent 终端，然后你输入想要修改的内容。

使用结果

agent 编辑源码，DevAgent 热重载，你再次点击进行验证。这一循环最精简的形式就是招牌配方 用 Design Mode 修复 UI 缺陷。