文档 / 配方 / 使用 Design Mode 修复 UI 错误

Design Mode 将“那个按钮看起来不对” → “修复提交”的循环缩短到一分钟内。

步骤¶

1. 打开 worktree 的浏览器窗格。导航到存在 bug 的页面。
2. 开启 Design Mode。
3. 点击有问题的元素。它会作为富附件出现在 agent 聊天中。
4. 输入你想修复的内容：“这个 padding 太紧了，增加到与上方卡片一致。”
5. agent 会编辑源代码。热重载会刷新浏览器。
6. 再次点击该元素以验证——如果仍然不对，重复操作。
7. 当结果正确时，提交。

为什么快¶

无需截图，无需在 DOM 中翻找，无需复制选择器。agent 会获取 HTML、计算后的 CSS，以及你所指向的精确元素的裁剪图像——这正是人工审查者所需的上下文。