# 完整参考样例

## 示例 1：文字清单转输入输出图

### 用户输入

> 这一页写了战略材料、部门口述、流程资料，最后得到流程骨架、输入输出和待确认缺口。帮我变成图。

### 判断

- 页面级别：`hero`
- 业务问题：输入经过什么处理形成什么输出？
- 图形类型：`input-output`
- 核心处理：沿价值流整理
- 图注：材料按价值流归位，形成可核对的流程证据。

### Manifest 输出

```json
{
  "page": 13,
  "level": "hero",
  "status": "implemented",
  "business_question": "输入经过什么处理形成什么输出？",
  "visual_type": "input-output",
  "caption": "材料按价值流归位，形成可核对的流程证据"
}
```

### 实现输出

```javascript
CoursewareVisuals.mount(
  "#slide-13 .slide-body",
  "input-output",
  [["战略材料", "部门口述", "流程资料"], "沿价值流整理", ["流程骨架", "输入输出", "待确认缺口"]],
  "材料按价值流归位，形成可核对的流程证据"
);
```

## 示例 2：审核条件转治理闸门

### 用户输入

> 来源清楚、Owner 明确、版本可追踪、样本通过后才能发布；否则暂停并转人工。

### 判断

- 页面级别：`hero`
- 业务问题：什么条件通过后才允许继续？
- 图形类型：`governance-gate`
- 不选阶段流，因为审核条件具有阻断能力，不是普通下一步。

### 输出

左侧四项检查，中间“发布审核”闸门，右侧“可发布资产”；未通过路径使用红色虚线转向“暂停并转人工”。图注为“资产只有通过来源、责任、版本和样本检查后才可发布”。

## 示例 3：整套课件页面分级

### 用户输入

> 给这套 40 页企业 AI 培训课件做配图方案，不要每页都塞图。

### 输出节录

| 页码 | 级别 | 业务问题 | 原型 | 处理 |
|---:|---|---|---|---|
| 1 | keep | - | - | 保留封面视觉焦点 |
| 4 | support | 方法包含哪些关键环节？ | stage-flow | 增加四步小型路径 |
| 9 | hero | 从全景如何收敛到试点？ | selection-funnel | 新增主逻辑图 |
| 16 | evidence | 平台如何完成真实操作？ | product-screenshot | 使用真实截图并标焦点 |
| 20 | keep | - | - | 现有数据表已经完整 |

交付时同时给出全课原型分布，避免连续三页重复同一结构。

## 示例 4：交付前视觉检查

### 用户输入

> HTML 课件已经做完了，检查全屏、手机和打印版。

### 执行

```bash
python scripts/audit_courseware_visuals.py http://127.0.0.1:8000 \
  --output-dir outputs/visual-audit \
  --modes desktop,fullscreen,mobile,print
```

### 输出

```markdown
- 检查范围：85/85 页
- 模式：桌面、真实全屏、390×844 移动端、打印媒体
- 结果：P0 1，P1 0，P2 31
- P0：第 27 页全屏右上说明被容器裁切
- 证据：20 张联系表、340 张逐页截图、audit-report.json、audit-report.md
- 未验证项：无
```

## 反例 1：装饰图不等于语义图

页面标题是“资料缺失时必须暂停并转人工”，却放一张人物拿盾牌的生成式插画。它只共享“安全”关键词，无法表示缺失条件、暂停动作、人工接管和结果回写，应改为治理闸门或异常泳道。

## 反例 2：所有页面都画阶段流

“平台由资产层、调用层、记录层、治理层构成”是层级关系，不应画成四个按顺序连接的步骤。使用分层架构，避免暗示不存在的先后顺序。

## 反例 3：自动通过但视觉失败

DOM 数量、SVG 存在和脚本无报错不代表投屏可读。若没有进入真实全屏、没有联系表、没有原图复核，不得声称视觉验收完成。

