# 精美 HTML 报告 · 验收 Checklist（20 条）

> **用法**：生成 HTML 后，逐条打勾。**视觉语言 1-7 + 结构 8-12 + 交互交付 18-20 必须全过**；组件 13-17 至少 4/5 过。
> **评分基准**：
> - 20/20 → 可直发投资路演 / 董事会
> - 18-19/20 → 可对外发给客户 · 强烈推荐
> - 15-17/20 → 内部交付可以 · 还需打磨
> - < 15/20 → 回去走 P6 精美升级流程

---

## 项目信息

- **品类**：<品类名>
- **报告路径**：`reports/<品类>-voc-insight-report.html`
- **文件大小**：___ KB
- **slide 数量**：___
- **章节数量**：___
- **验收日期**：____-__-__
- **验收人**：__________

---

## 🎨 视觉语言（1-7 · 必须全过）

- [ ] **1. 三层背景一致**
  - `--bg-0: #0A0A0A` 底层贯穿
  - `--bg-1: #111111` section 内容 + 卡片
  - `--bg-2: #1A1A1A` 强调 / hover
  - 无其他非标准灰色
  - **检查命令**：搜 HTML 里 `background:#` 次数，应全部落在 3 层内

- [ ] **2. 三层文字灰阶不超过**
  - `--text-1: #F5F5F5` 主文字
  - `--text-2: #A8A8A8` 副文字 / subtitle
  - `--text-3: #6B6B6B` 元信息
  - **禁忌**：不出现 5 种以上灰色值

- [ ] **3. 数字全部 Mono 字体**
  - 点赞数（♥2.3w）✓ Mono
  - 平台名（XHS · DOUYIN）✓ Mono
  - 百分比 / 价格 / 时间戳 ✓ Mono
  - **检查命令**：`grep -o "font-family:var(--font-mono)" <report>.html | wc -l`，应 ≥ 50

- [ ] **4. 字重层次分明**
  - Cover title 900
  - Chapter divider 900
  - Section head 800
  - eyebrow / 强调 700
  - 正文 400
  - **禁忌**：滥用 500/600 中间字重

- [ ] **5. 8px 网格对齐**
  - padding / margin 全部是 `4/8/12/16/20/24/32/40/48/60/80/120`
  - **禁忌**：出现 `13px / 15px / 17px / 23px` 等奇数值
  - **检查命令**：搜 `padding:1[357]px` 和 `padding:2[357]px`，应为 0

- [ ] **6. 圆角风格统一**
  - 全项目只用 `4px / 8px / 12px` 三档
  - 同类组件圆角一致（所有 VOC 卡都 6px / 所有 Hero 都 12px）

- [ ] **7. 品类色唯一识别**
  - 主色在一屏出现 ≥ 5 次
  - 辅色 ≤ 3 个
  - 主色 vs `#0A0A0A` 对比度 ≥ 4.5（https://webaim.org/resources/contrastchecker/ 验证）
  - **对比三个案例报告**：你的主色和肝纯片 `#4A90E2` · 猴菇 `#B87333` · 乳酸菌 `#8FD3B8` 不撞色

---

## 🏗️ 结构 / 布局（8-12 · 必须全过）

- [ ] **8. 每 section 占满 100vh**
  - `.report-section { min-height: 100vh; }`
  - 内容居中 `max-width: 1280px`
  - padding `60px 48px`

- [ ] **9. Cover + Agenda + 8 Divider 特殊处理**
  - Cover 有 `linear-gradient` 背景
  - Chapter Divider 5rem 大标题 · 居中 · 品类色 eyebrow
  - Agenda 2 列 grid · 每条带 chapter number + title + hero line

- [ ] **10. Section Head 三段式齐全**
  - 所有子章节都有 eyebrow（品类色 Mono 大写 · letter-spacing 0.2em）
  - title（1.9rem · 800 字重）
  - subtitle（text-2 · 行高 1.75 · max-width 900px）
  - **检查命令**：搜 `letter-spacing:0.2em` 次数，应 ≥ slide 数

- [ ] **11. title 至少 1 个 `<strong>` 品类色强调**
  - 核心关键词用 `<strong style="color:BRAND_MAIN">...</strong>` 包裹
  - **禁忌**：title 全部素白色，视觉没重音

- [ ] **12. 视觉模块数 ≥ 3**
  - 每子章节除 Section Head 外，至少 3 个视觉模块
  - 可选 VOC 卡组 / StatStrip / CompareTable / Matrix / TheoryBox / InsightHero / DecisionList
  - **禁忌**：整屏只有文字 + 1 组 VOC 卡

---

## 🧱 组件质量（13-17 · 至少 4/5 过）

- [ ] **13. VOC 卡左边 3-4px 品类色 border 统一**
  - 所有 VOC 卡都用 `border-left: 3px solid BRAND_MAIN`
  - 不允许个别卡没 border 或用其他颜色
  - **检查命令**：搜 `border-left:3px solid` 次数，应 ≥ VOC 卡总数

- [ ] **14. VOC 卡顶部 flex 两端**
  - 左：平台大写 Mono + 昵称 + IP（灰 text-3）
  - 右：♥ 点赞数 Mono + 品类色
  - 正文用 `「」` 中文引号包裹

- [ ] **15. StatStrip 数字规范**
  - 2rem 字号 · 900 字重 · Mono · 品类色
  - 下方 label `text-2 · 0.82rem`
  - 可选 delta `Mono · 0.72rem · 品类色`
  - 背景 `BRAND_MAIN0C` · 边框 `BRAND_MAIN33`

- [ ] **16. Matrix 第 4 象限高亮品类色（无人地带纪律）**
  - Ch6 无人地带矩阵，第 4 象限（本品独占）
  - 背景 `BRAND_MAIN0C` · 边框 `BRAND_MAIN33`
  - 文字 `BRAND_MAIN` · 带 `✨ 本品独占` 强调
  - **禁忌**：四格同色，无人地带没凸显

- [ ] **17. DecisionList 每条 P0-P3 + 动词化**
  - 格式：`<strong>P0 · 动词</strong>：具体动作`
  - 动词示例：上架 / 投放 / 合作 / 试水 / 砍掉 / 重构
  - **禁忌**：「提升品牌认知」「加大投放」「优化体验」这类空话

---

## 🎮 交互 / 交付（18-20 · 必须全过）

- [ ] **18. 键盘导航正常**
  - `←` `→` 前后 slide
  - `Space` `PageDown` 下一页
  - `Home` `End` 首尾页
  - hash 锚点自动同步 URL
  - **验证**：随机跳到 #ch5-1，按 → 能顺序前进

- [ ] **19. 单文件无依赖**
  - inline `<style>` CSS
  - inline `<script>` JS
  - 无外部字体 CDN（Google Fonts / Typekit）
  - 无图标库（FontAwesome / Iconfont）
  - 无图表库（Chart.js / ECharts / D3）
  - **验证**：浏览器 DevTools Network 面板打开报告，只有 1 个 HTML 请求

- [ ] **20. 体积 + 内容合理**
  - 文件大小 `300-1200 KB`
  - Coming Soon 数 = 0
  - 空 section 数 = 0
  - 封面数字与 `_merged.json` 一致
  - **检查命令**：`node scripts/tools/_audit-<品类>-voc.js`

---

## 📊 额外加分项（非必须 · 但显功力）

- [ ] **A1. Page Indicator** 右下角固定页码（1 / 38）
- [ ] **A2. 打印友好** `@media print` 深色反白
- [ ] **A3. 移动端降级** `@media max-width: 768px` grid 改单列
- [ ] **A4. 卡片 hover 动画** transition: background .15s
- [ ] **A5. Progress Bar** 比例条（横向）· 用于渠道占比 / 竞品份额
- [ ] **A6. Inline Bar Chart** 纯 div 柱图 · 无依赖
- [ ] **A7. Tag Cloud** 高频词标签云（Mono + 品类色）
- [ ] **A8. Flow Diagram** 决策链用 Unicode 箭头（→）

---

## 🎯 最终评分

### 计分

- 视觉语言 1-7：___ / 7
- 结构布局 8-12：___ / 5
- 组件质量 13-17：___ / 5
- 交互交付 18-20：___ / 3
- **主评分**：___ / 20
- 加分项 A1-A8：+ ___ / 8

### 评级

| 分数 | 评级 | 交付建议 |
|---:|---|---|
| 20/20 + ≥ 4 加分 | 🏆 旗舰级 | 投资路演 / 董事会 · 直发 |
| 18-19/20 | 🥇 A 级 | 客户 / 合作伙伴 · 推荐 |
| 15-17/20 | 🥈 B 级 | 内部交付 · 再打磨 1 轮 |
| 12-14/20 | 🥉 C 级 | 回去走 P6 精美升级完整流程 |
| < 12 | ❌ 不达标 | 检查 `templates/` 是否用错 / 色板是否没改 |

### 未过项说明

| # | 条目 | 原因 | 下次如何修 |
|---:|---|---|---|
| | | | |
| | | | |

---

## 🔗 相关资源

- 精美方法论主文档：`../07-beautiful-html-aesthetics.md`
- 精美升级 prompt：`../prompts/P6-aesthetic-upgrade.prompt.md`
- 视觉模式库（20+ 小组件）：`aesthetic-patterns.template.js`
- 参考报告（三份精美成品）：
  - 🔵 肝纯片 `reports/jiangzhong-liver-voc-validation-report.html`（737 KB · 科技蓝）
  - 🟤 猴菇饮 `reports/jiangzhong-houguyin-voc-insight-report.html`（604 KB · 温润铜）
  - 🟢 乳酸菌儿童 `reports/jiangzhong-lactic-children-voc-insight-report.html`（464 KB · 薄荷桃）