# Lesson 22.2: 视觉校验——让 AI 拥有"眼睛"

## 本课目标

- 掌握使用 `fork_verifier_agent` 进行自动化视觉检查
- 理解 `<mentioned-element>` 块在精确反馈中的作用
- 学习如何通过 `dom:` 和 `react:` 链定位渲染源码
- 建立"反馈-修正-验证"的设计闭环

> **前置知识**：你已经在 Lesson 22 学习了 TDD 和代码审查，在 Lesson 17.2 学习了如何构建 HTML 原型。现在，我们要解决最后一个难题：如何让 AI 知道它画出来的东西对不对？

## 核心内容

### 视觉校验代理 (Verifier Agent)

在传统的代码开发中，我们可以运行单元测试。但在 UI 开发中，"样式是否崩坏"、"按钮是否对齐"很难通过纯代码逻辑判断。

`fork_verifier_agent` 是你的视觉监工：
1. **自动扫描**：它会在后台打开你的 HTML，检查浏览器控制台错误和网络请求失败。
2. **截图对比**：它能拍摄页面截图并进行像素级或语义级分析。
3. **定向检查**：你可以指派具体任务，如 `"检查页面在移动端断点下的间距是否合理"`。

**操作流**：
当你完成原型修改后，代理会报告 `done`。此时你可以主动要求：
`"Fork 一个校验代理，检查这个滑动条是否能正常工作，并给一张截图。"`

### 精确反馈：`<mentioned-element>`

当你在预览界面点击、拖拽或标注某个元素时，cc4pm 会自动生成一个 `<mentioned-element>` 块随你的消息发送。

这个块包含：
- `dom:`：元素的 DOM 祖先链（例如 `div > section > button`）。
- `react:`：React 组件名链（例如 `App > LandingPage > Hero > CTAButton`）。
- `id:`：运行时的唯一标识（注意：这不在源码中，是实时渲染的句柄）。
- `[data-screen-label]`：通过你在元素上标记的标签（如 "01 Title"），代理能立刻知道你在说哪张幻灯片。

**为什么这很重要？**
AI 不需要全文检索"那个红色的按钮"，它通过这些元数据可以直接定位到 `Hero.jsx` 的第 42 行。

### 给幻灯片打标签

为了让反馈更精准，建议在代表"屏幕"或"幻灯片"的高层级元素上添加 `data-screen-label` 属性：

```html
<section data-screen-label="01 欢迎页">
  <!-- 内容 -->
</section>
```

**避坑指南**：
- **1-indexed**：人类习惯从 1 开始计数。标记 "01", "02" 而不是 "0", "1"。
- **描述性名称**：比起 "Screen 1"，"01 登录弹窗" 更有助于 AI 理解上下文。

### 修复循环 (Fix Loop)

1. **发现问题**：你在预览中看到间距太窄。
2. **下达指令**：点击该区域并输入 `"这里的 padding 增加到 24px"`。
3. **AI 修正**：AI 利用 `mentioned-element` 瞬间定位源码并修改。
4. **验证**：AI 调用 `done` 后，`fork_verifier_agent` 自动确认控制台无错。

## 常见问题

**Q: 校验代理说 "Page loads cleanly" 是什么意思？**
A: 这意味着 HTML 没有语法错误，资源（JS/CSS）加载正常，且没有触发 JavaScript 崩溃。这是高保真原型的最低质量门禁。

**Q: 为什么 AI 有时找不到我提到的元素？**
A: 如果你的组件树极其复杂（例如超过 10 层嵌套），或者在源码中使用了大量的动态映射，定位可能会失效。尝试拆分组件（Lesson 17.2）并保持 DOM 结构清晰。

## 相关概念

- **Design Agent Workflow**（Lesson 17.2）— fork_verifier_agent 是设计代理流水线的校验环节
- **Eval-Driven Development (EDD)**（Lesson 22.1）— 视觉校验实现 EDD 的"评估器"角色

## 下一步

请调用 `AskUserQuestion` 展示以下选项，让学习者点击选择；从每条中提炼 1-5 个词作为 label，其余写入 description，不要要求输入数字：

- 进入下一课：Lesson 23 - 自动化工作流
- 回顾原型构建：Lesson 17.2 - AI 原型实验室
- 返回主菜单

---
*阶段 4 | Lesson 22.2/26 | 上一课: Lesson 22.1 - EDD 实战 | 下一课: Lesson 22.3 - 编码原则*