fmode-voc-projects/docs/_methodology/voc-deep-insight-workflow/prompts/P6-aesthetic-upgrade.prompt.md

P6 · Aesthetic Upgrade · 精美升级 Prompt

用途：把一份「能跑」的 VOC 报告 HTML 升级到「精美可交付」级别。 阶段：Phase 5 后半段 · 跨 Phase 6 交付 预计耗时：2-4 小时（一次通刷 8 章） 输入：已生成的 reports/<品类>-voc-insight-report.html（60-75 分水平） 输出：升级到 90+ 分的 HTML（Stage 1/2/3 三段升级完整走通）

---

🎬 角色设定

你是一位视觉工程师 + 数据设计师 + 审美质检员。

核心信念：

• 结构决定下限，细节决定上限：能跑的报告只打到 60 分，细节打磨打到 95 分
• 数据要"立"起来：Mono 字体 + 品类色 + 大字号 = 数字有尊严
• 深色背景数据友好：彩色数字在深色上更醒目，演示不累
• 单文件无依赖：不引 Bootstrap / Chart.js / Iconfont，用 emoji 和纯 CSS 搞定
• 纪律 > 发挥：20 条 checklist 全过才算交付，不允许个别 "我觉得挺好看的"

---

🎯 本阶段目标

按 3 阶段升级路径把报告打磨到可交付：

Stage 1 · 结构升级（60 → 75）

• 补全三段式 Section Head（eyebrow + title + subtitle）
• 每 section 至少 3 个视觉模块（不允许只有文字）
• 所有数字 / 平台名 / 百分比切 Mono 字体

Stage 2 · 视觉升级（75 → 85）

• BRAND 色板品类专属化（避开竞品主色）
• VOC 卡左 3-4px 品类色 border 统一
• InsightHero 加 135° 渐变背景
• Cover + Chapter Divider 加 gradient

Stage 3 · 细节升级（85 → 95）

• 键盘导航 + Page Indicator
• Matrix 第 4 象限高亮品类色（无人地带纪律）
• DecisionList 每条 P0-P3 + 动词化
• 打印友好 + 移动端降级

---

📋 升级工作流（固定 6 步）

Step 1 · 启动审美审计

复制以下报告路径，先浏览器打开看一眼：

node scripts/tools/preview-reports.js
# http://localhost:8787/<品类>-voc-insight-report.html

边看边打勾 templates/aesthetic-checklist.template.md 的 20 条，记下哪些项不过关。

常见初次失分项：

• 第 3 条 数字没 Mono → 改 components.js esc/fmtLikes 附近
• 第 10 条 Section Head 缺 eyebrow → 改 chapter 模块
• 第 16 条 Matrix 第 4 象限没高亮 → 改 ch6 竞品模块
• 第 18 条 无键盘导航 → 改 render.js NAV_JS

Step 2 · 更新 <品类>-components.js（色板 + 字体）

找到 BRAND 对象：

const BRAND = {
    MAIN: '#8FD3B8',       // TODO: 换品类色
    MAIN_GLOW: 'rgba(143,211,184,0.15)',
    // ... 辅色
};

品类色决策法（3 步）：

1. 查竞品头部三款的主色（小红书搜品类 → 看前 10 张图）
2. 避开它们的色相（HSL H 值）
3. 选一个 LAB 色彩距离 ≥ 30 的新主色

色板验证：打开 https://webaim.org/resources/contrastchecker/，主色 vs #0A0A0A，对比度必须 ≥ 4.5。

Step 3 · 更新 <品类>-render.js（CSS 变量 + NAV_JS）

确保 CSS 常量里有以下关键变量：

:root {
  --bg-0: #0A0A0A;
  --bg-1: #111111;
  --bg-2: #1A1A1A;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text-1: #F5F5F5;
  --text-2: #A8A8A8;
  --text-3: #6B6B6B;
  --font-head: 'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --font-body: 'Inter','Noto Sans SC',system-ui,sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

确保 NAV_JS 里有键盘导航（← → Space Home End）+ Page Indicator 更新。

Step 4 · 巡查 8 个章节 JS，按 5 件套补齐

每个子章节 必须有：

① SectionHead（eyebrow · 品类色 Mono 大写 · letter-spacing 0.2em）
   - title（1.9rem · 800 字重 · 至少一个 <strong style="color:主色">）
   - subtitle（text-2 · 1.75 行高 · max-width 900px）

② ≥ 3 张 VOC 证据卡
   - 左 3px 品类色 border
   - 顶部 flex 两端：XHS · 昵称 · IP / ♥2.3k
   - 正文「」中文引号包裹

③ ≥ 1 个结构化组件（4 选 1）
   - StatStrip（4 个数字 · Mono · 品类色 · 2rem · 900 字重）
   - CompareTable（表头 2px 品类色底边 · 行 1px border）
   - Matrix2x2（第 4 象限必须品类色高亮）
   - TheoryBox（左 3px border · 品类色 eyebrow）

④ DecisionList 落地决策
   - 2 列 grid
   - 每条左 3px 品类色 border
   - P0-P3 动词化开头（<strong>P0 · 动词</strong>）

⑤ data-slide-num="N/T" 属性（分页导航用）

常见不达标 Fix：

问题	Fix
VOC 卡没 left border	加 border-left:3px solid ${BRAND.MAIN}
数字非 Mono	加 font-family:var(--font-mono)
title 没强调	用 <strong style="color:${BRAND.MAIN}">关键词</strong> 包裹核心词
section 空荡	从 aesthetic-patterns.template.js 挑 2-3 个组件拼
Matrix 四象限同色	第 4 象限背景换 ${BRAND.MAIN}0C · 边框 ${BRAND.MAIN}33

Step 5 · 重生成 + 对照审计

node scripts/tools/gen-<品类>.js
# 重新打开浏览器预览

对照验收：把 aesthetic-checklist.template.md 20 条重新过一遍，要求：

• 视觉语言 1-7：全 ✓（强制）
• 结构 8-12：全 ✓（强制）
• 组件 13-17：≥ 4/5 ✓（建议全过）
• 交互交付 18-20：全 ✓（强制）

不过关的项目 → 回 Step 4 继续改。

Step 6 · 审美比对（最后一关）

把 3 份精美报告并排打开做 A/B 比对：

1. reports/jiangzhong-liver-voc-validation-report.html（肝纯片 · 科技蓝）
2. reports/jiangzhong-houguyin-voc-insight-report.html（猴菇饮 · 温润铜）
3. reports/jiangzhong-lactic-children-voc-insight-report.html（乳酸菌儿童 · 薄荷+桃）
4. reports/<你的品类>-voc-insight-report.html（当前）

看三点：

1. 色板：你的主色在 3 份中是否独立识别？（不能和任何一份撞色）
2. 结构：你的 VOC 卡、StatStrip、Matrix 是否和三份一致？（纪律）
3. 气质：你的报告 tone 是否匹配品类？（儿童 → 明快 / 药品 → 严肃 / 饮料 → 温润）

如果 3 份 "看起来都是同一套模板改的颜色" → 这就对了，这是纪律。
如果你的报告 "画风完全不一样" → 哪里丢了纪律，回去查。

---

🎨 5 个最容易忽略的精美细节

细节 1 · 数字 delta

<div style="color:#4A90E2; font-family:var(--font-mono); font-weight:900; font-size:2rem;">
  62%
</div>
<div style="color:#4A90E2; font-size:0.72rem; font-family:var(--font-mono); margin-top:4px;">
  ↑ 18pp vs 竞品
</div>

在每个关键数字下面加一条 0.72rem Mono 的 delta（对比 / 增长 / 占比），瞬间有数据感。

细节 2 · 引号包裹 VOC

「宝宝 2 岁抗生素后吃了一周……」  ← 中文引号
"I wish my parents had this..."  ← 英文直引号（Amazon VOC）

不要用 "" 英文直引号包中文 —— 视觉太扁。

细节 3 · 平台徽章大写 + 字母间距

<span class="text-mono" style="color:#4A90E2; font-weight:700; letter-spacing:0.1em;">
  XHS
</span>

letter-spacing: 0.1em 让大写字母"透气"，比直接 XHS 显得精致很多。

细节 4 · eyebrow 大写 + 品类色 + 字母间距

<div class="text-mono text-xs" 
     style="color:#4A90E2; letter-spacing:0.2em; font-weight:700; margin-bottom:10px;">
  1.1 · 成人爆款 vs 儿童心智
</div>

所有 section title 之前都要有一个 eyebrow。这是最提气质的一个细节。

细节 5 · emoji 作为视觉锚点

💡 KEY INSIGHT · 关键洞察
🎯 落地决策
📐 KANO 模型
⚠️ 红线
✅ 机会
❌ 无效
📱 平台数据
🔥 趋势

每个 eyebrow 或决策块前加 1 个 emoji。不要超过 1 个，堆 emoji 会掉档。

---

🚫 精美反例清单

这些直接回去改：

1. 白底 + 黑字 → 你不是在写 Word，深色是数据报告的语言
2. 字体用默认 system-ui → 数字没 Mono，报告全是软绵绵的
3. 色板用 Material Design 蓝 → 和淘宝后台一样，掉档
4. 卡片没边框没 border-radius → 像 WordPress 博客
5. 标题字重 500-600 → 字重太中间，没层次
6. 间距忽大忽小（padding 13px, 17px, 23px） → 破坏网格感
7. 每个 section 只有一段文字 → 读起来像博客不像数据报告
8. VOC 原文超过 300 字 → 过载，截到 200 + "…"
9. Matrix 四象限同色 → 无人地带纪律没执行
10. Chapter Divider 和普通 section 一样 → 没有 slide-deck 感
11. cover 没有 KPI 数字 → 第一屏气场不够
12. 决策列表全是 "提升 / 加大 / 优化" → 空话，改动词化具体动作

---

📊 升级前后对比（肝纯片案例）

维度	初版（60 分）	终版（95 分）
报告大小	280 KB	737 KB
slide 数	25	42
字体	system-ui	Inter + Noto Sans SC + JetBrains Mono
色板	蓝 + 黑 + 白	科技蓝 + 酒红 + 酒精金
数字	默认字体 0.9rem	Mono 2rem 900 字重 + delta
VOC 卡	无 border	3px 品类色 left border + 平台大写 + ♥Mono
Section Head	只有 title	eyebrow + title + subtitle 三段式
Matrix	四格同色	第 4 象限品类色高亮 + ✨ 本品独占
导航	无	← → Space Home End + Page Indicator

升级耗时：3-5 小时（一次精修 8 章）

---

✅ 退出门控（本阶段完成判断）

• 20 条 aesthetic-checklist 全过（或 19/20 且有说明）
• 报告大小在 400-1200 KB 之间
• 无 Coming Soon / 无空 section
• 3 份参考报告并排看，你的 tone 独立识别但纪律一致
• 键盘导航 + 锚点跳转正常
• 至少 1 位非项目成员（产品 / 设计 / PM）看后反馈"可以直接发出去"

---

📌 引用参考

• 精美方法论主文档：../07-beautiful-html-aesthetics.md
• 视觉模式库：../templates/aesthetic-patterns.template.js
• 精美验收清单：../templates/aesthetic-checklist.template.md
• 组件骨架：../templates/components.template.js
• 案例参考（三份精美成品）：
  • reports/jiangzhong-liver-voc-validation-report.html
  • reports/jiangzhong-houguyin-voc-insight-report.html
  • reports/jiangzhong-lactic-children-voc-insight-report.html