fmode-voc-projects/docs/_methodology/voc-deep-insight-workflow/templates/aesthetic-checklist.template.md

精美 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 · 薄荷桃）