📌 一句话摘要

本文提出通过将验证流程左移（Agent 操作规则、代码验证、运行时验证、视觉走查、流水线复审），让 AI Agent 在开发过程中自动遵循工程规范，提升交付质量并减少返工。

📝 详细摘要

文章详细介绍了百度 Geek 说团队构建的 AI Agent 质量保障体系，包括：Agent 操作规则（渐进式加载规则、关键时机触发验证 Skill）；代码验证（独立 subagent 执行 code-validation Skill 进行即时 CR，仅审查 changed lines+必要上下文）；运行时验证（visual-verify skill 通过 CDP 连接真实浏览器进行 DOM 断言、截图、控制台检查和记忆机制）；视觉走查（Figma To Verify 流程，使用 VET 抹除动态内容、对齐 DOM 深度、通过子代理复核量化问题并进行标注）；流水线代码审查（将大规模 diff 拆分为小块并发派发给多个 AI 子进程独立审查，产出结构化 review 数据驱动可视化报告、IDE 修复、自动批量修复及闭环标记）。通过三个真实案例（快捷回复功能、RSpack HMR 调试、Figma 视觉走查）展示了问题发现与修复的闭环过程，并强调将这些能力沉淀为可复用的工程资源，提升 RD 与 QA 协作效率。

💡 主要观点

1. Agent 操作规则：将项目工程约定转化为可执行的操作协议，包括渐进式加载规则和关键时机触发验证 Skill，确保 Agent 在特定任务类型下自动加载相应规则并执行代码验证与视觉验证。 通过在项目根目录的 rules 目录维护索引文件，Agent 在执行对应类型任务时动态加载规则，避免依赖一次性 Prompt，确保长期稳定的工程约束得到遵循。
2. 代码验证与运行时验证：使用独立 subagent 执行 code-validation Skill 进行即时代码审查（仅审查 changed lines+必要上下文），并通过 visual-verify skill 在真实浏览器中进行 DOM 断言、截图、控制台检查和记忆机制，实现写代码即时发现并修复问题。 独立 subagent 相当于换位思考的 Reviewer，减少自偏见；visual-verify 结合 contract-lint、dom-assert、annotate-screenshot 和 console-check，能够捕获运行时错误、布局问题和控制台异常，形成闭环的写代码‑验证‑修复流程。
3. 视觉走查（Figma To Verify）：利用 VET 抹除动态内容、对齐不同 DOM 深度、通过子代理复核量化问题并进行标注，将主观的“感觉不像”转化为可量化、可标注、可修复的客户端视觉差异。 VET 将页面中的动态内容替换为纯色色块，聚焦布局和结构差异；通过在设计页建立颜色方案并在开发页手动注入相同颜色来消除 DOM 深度差异带来的噪声；子代理负责复核、量化（getComputedStyle）、标注（SVG 框+数值）和提供排查线索，使视觉问题可定位且可修复。
4. 流水线代码审查与闭环修复：将大规模 diff 拆分为小块并发派发给多个 AI 子进程独立审查，产出结构化 review 数据，驱动可视化报告、IDE 修复、自动批量修复及闭环标记，实现代码审查与修复的全链路自动化。 Phase 0 拆分 diff 保持上下文关联；Phase 1 使用 task.log 管理状态支持断点续传；Phase 2 采用 CLI 子进程并发审查并写入 result JSON 追踪进度；Phase 3‑4 合并结果生成 review.json；后续可驱动可视化报告、唤起 IDE 修复、基于 git worktree 的自动批量修复以及修复结果的闭环标记，形成 CR→修复→标记的完整链路。

💬 文章金句

• 把验证流程左移，通过前置的审查、运行时验证、视觉验证等系统化的能力建设，让 Agent 在开发过程中就能按项目的工程规范完成自检和修复，提高上游交付的质量减少返工。
• 把验证前移到 Agent 写完代码的当下，问题在几分钟内闭环，不用等到后面的环节才暴露。

📊 文章信息

阅读完整文章