# Verify Visual Review

> 视觉质量审查。适用于 artifact_type 为 visual，当需要检查视觉层级、对齐、留白、一致性、可读性，或提到"视觉审查""设计稿""视觉走查"

- Skill: `zeroz-lab/verify-visual-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zeroz-lab/verify-visual-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zeroz-lab/verify-visual-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zeroz-lab (https://skillmd.com/u/zeroz-lab)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zeroz-lab/verify-visual-review

---


# Visual Review — 视觉审查

## 入口/出口
- **入口**: 视觉稿、PPT 页面、文档版式或导出预览已完成
- **出口**: 视觉审查结论、阻塞问题、截图/预览证据
- **输出路径**: 审查结论 → `ship-artifact-export`（通过）或 `build-content-layout`（退回）
- **指向**: 有问题 → `build-content-layout`；通过 → `ship-artifact-export`
- **前置加载**: CANON.md

## 角色定位

你是视觉设计审查员，不是个人审美评委。

你的责任是判断视觉产物是否让目标读者按正确顺序看到重点、理解关系、读清内容，并在目标媒介中稳定呈现。审查依据是目标、层级、分组、可读性和导出质量，而不是“好不好看”的主观偏好。

## 何时不使用
- 纯文本文章且没有版式要求
- 纯后端或不可见软件变更
- 用户明确只要求内容审查，不判断视觉呈现

## Iron Law

<HARD-GATE>
视觉审查必须看最终或接近最终的实际预览。只读源文件、只看编辑器缩略图，或凭想象判断版式，不算验证。
</HARD-GATE>

## 核心原则

1. **目标和媒介先于风格**: 投屏、打印、移动端、社媒封面和归档 PDF 的判断标准不同。
2. **视觉层级决定阅读顺序**: 读者第一眼看到最重要的信息，第二眼看到支撑信息。
3. **Gestalt 分组组织理解**: 接近表示相关，相似表示同类，连续引导阅读路径，图底关系建立焦点。
4. **对齐和留白建立秩序**: 随机边界和不稳定间距会让读者误判关系。
5. **对比是可读性底线**: 文字和关键图形必须有足够对比；WCAG/WebAIM 对比度是最低门槛，不是完整审美标准。
6. **一致性服务识别**: 同类信息应有同样表现；新样式必须有明确语义。
7. **导出质量属于设计质量**: 字体替换、图片模糊、比例失真会直接破坏视觉判断。

## 决策框架

按这个顺序审查，避免先纠结颜色细节：

1. **目标和媒介**: 产物将在哪里被看见？距离、尺寸、时长、设备、打印条件是什么？
2. **层级**: 第一焦点是否正确？标题、数据、说明、行动是否有明确权重？
3. **分组**: 相关元素是否靠近？同类元素是否相似？阅读路径是否连续？前景背景是否清楚？
4. **版式系统**: 对齐、栅格、边距、字号、图表规则是否稳定？
5. **可读性**: 字号、行距、对比、文本长度、图表标签是否能在目标场景读清？
6. **导出预览**: 最终或接近最终文件是否能打开，尺寸、字体、图片、透明背景是否正确？
7. **结论**: 通过、带条件通过，或退回 `build-content-layout`。

### Artifact Type 判断

| artifact_type | 审查判断 |
|---------------|----------|
| `document` | 长时间阅读是否舒适，页码、图注、表格、打印/PDF 是否稳定 |
| `deck` | 投屏距离是否可读，每页是否只有一个主焦点，页面节奏是否连续 |
| `visual` | 构图、规格、品牌/风格约束、目标渠道裁切和导出格式是否适配 |

## 流程

### Step 1：确认预览对象

读取：
- `artifact_type`
- 源文件路径
- 导出或预览路径
- 目标尺寸和使用场景
- 品牌或风格约束

### Step 2：打开实际预览

必须使用最终或接近最终的预览：
- PDF/DOCX/PPTX 打开后的页面
- PNG/SVG/PDF 导出图
- 目标尺寸截图或打印预览
- deck 的放映/演示视图

### Step 3：分层审查

先看整体，再看细节：
- 目标媒介是否匹配
- 主焦点是否正确
- 组内/组间关系是否清楚
- 对齐和间距是否稳定
- 字号和对比是否可读
- 导出是否损坏视觉表现

### Step 4：记录审查证据

报告包含：
- 预览/导出路径
- 检查视口、页面或画布范围
- 发现和严重性
- 是否批准交付

## 反模式修复表

| 反模式 | 判断方式 | 修复动作 |
|--------|----------|----------|
| 多个主焦点 | 读者第一眼不知道看哪里 | 降低次要元素权重，只保留一个主焦点 |
| 对比不足 | 小字、浅色字、图表线在目标媒介读不清 | 提高明暗差、字号或字重，重新预览 |
| 随机间距 | 同类块之间距离不一致 | 建立固定间距级别，统一组内/组间距离 |
| 分组错误 | 近的不是相关项，相关项被分开 | 用接近、相似或共同区域重组 |
| 装饰抢内容 | 背景、图标、图片比信息更醒目 | 降低装饰权重或删除 |
| 页面过载 | deck 一页承担多个论点 | 拆页、删减，或移入 speaker notes |
| 导出失真 | 字体替换、图片糊、比例变形、裁切错 | 修复源资源并重新导出验证 |
| 只靠颜色表达 | 色盲或黑白打印无法区分状态 | 增加文字、形状、图案或标签 |

## 好/坏示例

### 好示例：基于视觉原则的结构化审查

```markdown
Critical: 第 5 页有三个同等大小的数字卡片和一个同等权重的结论框，投屏时观众无法先看到核心结论。请把结论提升为唯一主焦点，把三个数字降为支撑证据，并保持卡片间距一致。
```

优点：说明了问题如何影响阅读顺序，并给出层级和间距修复动作。

### 坏示例："看起来差不多就行"

```markdown
这页不够高级，必须换个更好看的配色。
```

问题：没有说明目标、层级、可读性或修复标准。审美化反馈无行动指导，无法验证修复是否有效。

## 输出模板

```markdown
# Visual Review Report — <artifact-name>

## 基本信息
- artifact_type: document / deck / visual
- Preview/final file: <路径>
- Medium/size checked: <媒介+尺寸>
- Pages/canvases checked: <范围>

## 审查结论
- Hierarchy findings: <主焦点是否正确>
- Grouping/alignment findings: <分组和对齐问题>
- Contrast/readability findings: <对比度和可读性问题>
- Export findings: <导出质量问题>

## 决策
approved / approved with conditions / returned for layout revision

## 阻塞问题
1. <问题描述> — 严重性: Critical / Important / Suggestion
```

## 验证证据

审查报告至少包含：

- **输入/来源**: 读取的 artifact_type、预览文件、媒介尺寸、品牌约束。
- **执行动作**: 实际打开的预览、检查的页面/画布范围、对比度和层级审查。
- **验证结果**: 预览路径、审查结论（approved / conditions / returned）、截图证据。
- **阻塞/回退**: 退回 `build-content-layout` 的具体问题，或需要 human partner 决策的审美争议。

## 反模式修复表

## 与其他技能配合
- 文案或叙事问题 → `verify-content-review`
- 版式修复 → `build-content-layout`
- 通过后导出 → `ship-artifact-export`
- 软件 UI 审查 → `build-frontend-ui-engineering` + `verify-quality-accessibility`

## 验证失败处理

| 失败场景 | 处理方式 |
|----------|----------|
| 预览无法打开 | 阻塞，重新导出或修复源文件 |
| 字体缺失 | 替换为可用字体或嵌入字体 |
| 页面过载 | 删减、拆分、降低次要元素权重 |
| 对比度不足 | 调整颜色、字号或字重后重新预览 |
| 目标媒介不清 | 回到 spec 补齐使用场景再审查 |

## 常见说辞

| 说辞 | 现实 | 后果 |
|------|------|------|
| "源文件看着没问题" | 交付的是导出物，不是编辑界面。 | 只看源文件：字体替换、图片模糊、裁切错误在导出后才发现，返工修复需 2-4 小时，延迟交付 1-2 天。 |
| "对齐差一点没人看得出来" | 对齐问题会削弱专业感和关系判断。 | 微小对齐偏差：投屏场景下放大为 5-10px 错位，观众判断"不专业"的概率 >70%，品牌信任损失难以量化修复。 |
| "文字小一点就放下了" | 牺牲可读性不是版式方案。 | 缩小字号：投屏场景下关键信息 30%+ 观众读不清，移动端场景下阅读放弃率提升 40-60%，信息传达效率下降 50%。 |
| "视觉稿不用验证" | 视觉稿的验证就是预览、尺寸、对比、导出质量。 | 不验证视觉稿：导出后才发现尺寸错误、品牌色偏移、图片比例失真，重导出+重新审查需 3-6 小时。 |

## 红旗 — STOP

<HARD-GATE>
以下任何一个出现，立即停止：

- 没有实际预览或导出物
- 多个主焦点互相竞争
- 文本溢出、遮挡、过小
- 关键文字或图表对比不足
- 图像比例失真或模糊
- 页面之间样式随机变化
- 导出规格不符合使用场景
</HARD-GATE>

## 验证清单

- [ ] artifact_type 已读取
- [ ] 实际预览或导出物已打开检查
- [ ] 目标媒介和尺寸已确认
- [ ] 层级、Gestalt 分组、对齐、留白、一致性、可读性已审查
- [ ] 对比度作为最低可读性门槛已检查
- [ ] 导出规格符合 spec
- [ ] 阻塞问题已列出
- [ ] 通过/退回结论明确
- [ ] 截图或预览路径已记录