眼睛掌控：闭合Agentic设计循环
Source: Dev.to
Source:
紧密反馈循环在 LLM 辅助编码中的力量
让 LLM 真正用于编码——除了仔细审查输出之外——的关键是 紧密的反馈循环。
- 可单元测试的代码 对 LLM 来说容易完成。
- 描述验收标准，让模型编写测试，然后遵循 TDD 直至任务完成。
- 进行审查，查找漏洞和边界情况，必要时重复。
- 甚至可以使用 PR 上的代码审查机器人自动化此循环的部分环节。让机器人“相互较量”直至满意，然后让人工介入进行验证。
我的背景
- 开发者近 10 年。
- 涉及多个技术栈和语言。
- 客户已为我的工作申请专利。
我并不是在炫耀——我分享这些是因为 前端设计是使用语言模型进行编码时最让人沮丧的单一环节，而这并非因为我的技术水平不足。
为什么前端反馈循环会感觉失效
典型交互
| 你 | AI |
|---|---|
| “把模态框居中并加一点内边距。” | 更改代码 |
| “已经居中了，但内边距太大了。” | “你想要多少内边距？” |
| “少一点。大概减半。另外关闭按钮现在离边缘太近了。” | 更改代码 |
| “内边距好一些了，但你把关闭按钮的位置弄坏了。” | “能描述一下关闭按钮哪里有问题吗？” |
| 你放弃了，打开 CSS 文件，约 30 秒内手动修复。 |
我很少能走到第 5 步。因为我懂 CSS，手动编辑样式比不断提示模型更快，而模型往往给出 非现代或非整体 的解决方案。
(我看到的
!important标记在 Claude 和 Cursor 那里比我合作过的所有初级开发者加起来还多。奖励作弊是大语言模型的真实问题。)
截图有帮助——但仍不足
你可以把截图粘贴到聊天中，这比纯文字描述要好，但仍需：
- 注意到有什么地方不对。
- 记得截屏。
- 每次手动粘贴。
人仍然是瓶颈。
Source:
Claude Code + --chrome Flag: Closing the Loop
Claude Code 的 --chrome 标志将模型连接到浏览器扩展，为其提供以下工具：
- 截取屏幕截图。
- 调整视口大小。
- 点击并滚动。
- 将交互记录为 GIF（非常适合文档或分享进度）。
新工作流
You: "Make the contact form button more prominent."
AI: changes code, takes screenshot, notices a double‑border issue it just introduced.
AI: "Done. I also fixed the double‑border problem where the preview container meets the button area."或者，如果你发现了问题：
You: "The preview tab has a double border."
AI: navigates to the page, clicks the preview button, takes a screenshot, and fixes it.上下文为王——视觉反馈是最有价值的 UI 上下文。
入门指南
-
安装 Claude in Chrome 扩展。
-
在 Chrome 中登录
claude.ai。 -
使用以下命令启动 Claude Code
claude --chrome
浏览器工具会自动可用。
注意： 需要运行开发服务器（Claude 无法为你刷新浏览器）。只要在启动会话时已经登录，带身份验证的页面也能正常工作。热重载在此设置下表现出色——这正是其核心目的。
Real‑World Example: Democracy Direct
Democracy Direct 是我正在构建的公民参与工具。用户可以查找他们的代表并撰写信件。主要界面是 ContactFlow 组件，该组件需要一次 UI 大改造。
旧布局
- 所有内容垂直堆叠：
- 用户信息字段（顶部）→ 编辑器 → 预览 → “发送信件” 按钮 → 单独的 “打印 & 邮寄” 区块（地址字段、格式检查复选框）。
- 问题：
- 编辑器和预览堆叠 → 需要大量滚动。
- 操作按钮埋在底部。
- 打印选项始终可见（大多数用户使用数字流程）。
- 在移动端，需要滚动穿过整封信才能找到 “发送”。
新布局
- 两列布局，右侧为侧边栏。
- 视图模式按钮（编辑 / 预览 / 打印预览）取代了堆叠的编辑器/预览。
- 操作按钮始终固定在底部（为空时禁用，而不是隐藏）。
- 打印格式选项仅在打印预览模式下出现。
- “通过联系表单发送” 成为核心操作——不可能被错过。
移动端调整
- 侧边栏（“您的信息”）通过 CSS
order实用工具 出现在 编辑器 上方。 - 用户在滚动到信件之前先填写信息。
- 操作按钮在移动端堆叠为 2 列网格。
截图发挥作用的关键时刻
| 情境 | 为什么截图有帮助 |
|---|---|
| 移动端重新排序 – 侧边栏在移动端必须出现在编辑器上方，而在桌面端则在旁边。 | Claude 将视口尺寸调至 375 px，截取截图，确认 CSS order 实用工具生效。 |
| 双重边框 – 将 “ 包裹在容器中导致出现双重边框。 | Claude 在截图中发现该问题，报告后在同一次回复中完成修复。 |
| 移动端按钮布局 – 需要在移动端实现合理的 2 列网格，同时在桌面端保持一行。 | 每次修改后调整视口并截屏，使 Claude 能快速收敛，避免了“按钮在移动端显示怪异”的反复讨论。 |
要点
紧密的视觉反馈回路——例如通过 Claude Code 的 --chrome 标志实现的——可以将令人沮丧、受限于人工的 UI 迭代过程转变为快速、基本自动化的工作流。人类仍然负责指引方向，但模型能够 实时看到 并 操作 UI，显著减少获得精致前端所需的来回步骤次数。
技术。 这只是把之前开放的反馈回路闭合了。LLM 在能够自行验证输出时表现良好。对大多数代码而言，这意味着测试；对 UI 而言，这意味着截图。
结果是减少了“你说的奇怪间距是什么意思”的讨论轮次，增加了实际迭代的次数。对于一个 UI 直接影响用户是否能够成功联系其代表的公民参与工具来说，这一点尤为重要。
Democracy Direct 是一个致力于让公民参与更易获得的开源项目。请前往 GitHub 查看。