前端返工最常见的浪费，不是不会改，而是“那个按钮旁边的一块”始终说不清。Orca 设计模式让你直接点中页面元素，把可定位的 UI 上下文送给 Agent，再用热重载当场验证改动。
一、痛点：改个 UI 描述半天说不清
只靠文字描述 UI，开发者与 Agent 往往看到的是两套坐标系。你说“右边的卡片再紧凑一点”，它还要判断是哪张卡片、哪个容器、要改字体还是间距；即使附一张整页截图，也缺少元素结构与源码位置。结果是一轮回答先猜对象，下一轮再纠正范围，真正改样式反而只占很少时间。
更有效的输入应该同时回答四件事：点的是哪个元素、它在什么 HTML 邻域里、浏览器最终计算出了什么样式、代码可能落在哪个文件。Orca 设计模式把这些上下文合并成一次选择，减少的是定位歧义，不是把设计判断交给工具。
二、Design Mode 是什么：指哪打哪到代码
Design Mode 是 Orca 内置 per-worktree 浏览器的一项功能。打开后，浏览器里的光标变成拾取器；悬停到页面元素上，目标会高亮。点击不是普通的网页交互，而是在明确告诉 Orca：“我要讨论和修改的是这个元素。”
这一步把页面与活动 agent 终端连起来。Orca 不只发送一个模糊坐标，而是整理元素本身、周边结构、实际样式和视觉证据，再作为一个附件送到当前 Agent。你随后只需补充想改成什么样，Agent 面对的就是带上下文的具体需求。
三、怎么开启
先进入目标 worktree 对应的内置浏览器，确保页面就是当前任务要修改的版本。然后在浏览器工具栏点击 Design Mode toggle。看到光标变为拾取器后，把它移到目标区域；悬停高亮能帮助你确认选中范围，再点击真正需要调整的元素。
这里要先选对 worktree，因为 Orca 的浏览器是 per-worktree 的，附件会送入活动 agent 终端。若你同时跑着多个分支，先确认页面和活动 Agent 属于同一个工作区，后续修改、热重载与复验才能围绕同一份源码进行。
四、点一个元素，Orca 抓走了什么
一次点击会收集四组信息。第一组是该元素的 HTML，包括 outer HTML 与邻域，让 Agent 看见它自身以及周围结构。第二组是浏览器计算后的 CSS，覆盖颜色、字体和间距；这比只看样式表片段更接近页面最终呈现。
第三组是围绕该元素的裁剪截图，保留视觉结果，方便核对结构信息与肉眼所见是否一致。第四组是源码定位：如果项目提供 source map，附件还会包含对应源文件与行号；如果没有 source map，就不能凭空保证行号。HTML、计算 CSS、截图以及条件成立时的源文件与行号，会被合成一个附件送入活动 agent 终端。
附件送达后，你再输入明确目标，例如说明希望调整颜色、字体或间距。这里不必重新解释“是哪一个”，因为点击已经完成对象定位；文字重点应放在期望结果和验收标准上。
五、典型工作流：点 → 改 → 热重载 → 再点
完整闭环从页面开始，也回到页面结束。第一步，在目标 worktree 的内置浏览器打开 Design Mode，悬停确认高亮范围，点击要改的元素。第二步，Orca 抓取元素 HTML、计算后的 CSS、裁剪截图，并在有 source map 时附上对应源码文件与行号，把它们作为一个附件发给活动 Agent。
第三步，在同一终端补充具体需求，让 Agent 根据附件修改源码。第四步，代码改动触发 Orca 热重载，页面显示新结果。第五步，回到页面再次开启或保持拾取状态，重新点击同一目标，检查新的 HTML、计算 CSS 和截图是否符合预期；若有偏差，就基于这次新附件继续修正。
“再点”不是多余动作。第一次点击建立改动前的证据，热重载展示实现结果，第二次点击则把改动后的真实状态重新交给 Agent。这样每一轮都有同一种输入格式，讨论从“我感觉还不对”变成围绕实际元素、样式与画面的复验。
六、搭配 Claude / Antigravity 做前端
在 Agent picker 中选择 Claude Code 或 Antigravity，都可以把 Design Mode 附件送入当前工作流。Claude Code 属于 Orca 的深度集成 Agent；Antigravity 由 Orca 自动配置 hooks 与状态。做前端时，关键是保持角色和上下文一致：当前 Agent 接收页面附件、按你的文字目标改源码，Orca 负责热重载，你负责回到页面再次点击验收。
如果要并行比较不同方案，可以让不同 Agent 位于独立 git worktree，分别接收各自页面里的元素上下文；最终仍应回到每个 worktree 的页面核对结果，再选择要保留的改动。想系统了解多 Agent 分工，可继续看 Orca 三 Agent 并行实战。
用 Orca 做前端，先把 Claude 或 Antigravity 成品号备好：
延伸阅读
主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网
评论(0)