# 案例 8：HTML 策略报告交付
## 这个案例解决什么问题
把前面采集到的 VOC 证据，整理成一份能给老板看的“未被满足需求机会报告”。
使用 Claude Code 自带的文件读取、写 HTML 和打开预览能力，直接基于前面已经得到的样本数据和分析结论生成网页交付。
这一课训练你把真实用户声音转成：
- 用户还没被满足的需求
- 哪些需求最影响转化
- 品牌现在能不能承接
- 下一步该做什么动作验证
## 你需要准备什么
- 已有调研报告或原始数据，例如小红书/抖音趋势报告、采集矩阵、问题池、单点深挖结果
- 一个明确业务目标
- 一个重点 VOC 问题
- 已采集到的用户原话、评论区问题或样本观察
- 已整理的采集矩阵、问题池或单点深挖结论
- 页面视觉风格要求
## 换行业怎么填
这篇默认生成茶饮新客转化 HTML 策略报告。换成其它行业时，不要只替换品类名，要把“未被满足需求”换成你的行业真实决策阻力。
| 茶饮案例字段 | 换行业时填写什么 | 示例 |
| --- | --- | --- |
| 18-22 元价格带 | 用户正在犹豫的价格/成本/风险 | 宠物医院绝育价格、轻医美项目价格、家政按小时收费 |
| 值不值、会不会踩雷 | 用户下单前最怕的事 | 怕医生不专业、怕项目翻车、怕阿姨不靠谱 |
| 茶底、甜度、配料表 | 用户需要确认的关键细节 | 医生资质、药品耗材、服务范围、售后规则 |
| 首单怎么点最稳 | 用户第一次购买/预约怎么做最安全 | 第一次选哪个套餐、先做哪个基础项目、到店前要问什么 |
| 券后价/团购规则 | 用户怕看不懂的交易条件 | 团购能不能用、是否有隐形加价、退款规则 |
报告主线建议保留为：
```text
用户原话 -> 用户顾虑 -> 未被满足需求 -> 机会优先级 -> 策略动作 -> 验证计划 -> HTML 交付
```
采集矩阵、样本数和关键词不是没用，但它们更适合放在“证据链/附录”里，用来证明报告不是凭空写的。
如果 Claude Code 在这一步提示要进入 `voc-business-workflow`、`voc-content-plan` 或 `voc-speaking-script`，说明它理解偏了。
直接补一句：
```text
这一步不要调用 VOC workflow、内容计划或口播脚本工具，也不要重新采集。请只读取我当前已有的报告、矩阵和样本结果，然后直接生成 HTML 文件。
```
## 操作步骤
> 截图保存到 `docs/5.30/task/case-guides/screenshots/case-08-html-strategy-report/`
### 第 1 步：输入未被满足需求报告提示词
把业务背景、真实线索、矩阵结论和最终 HTML 要求一次说清楚。重点提醒 Claude Code：不要再进入任何 VOC 工具流程，只基于已有材料生成 HTML 文件。
```text
请基于下面完整 VOC 背景，生成一份老板/运营视角的“未被满足需求机会报告”，并输出青花瓷风格互动 HTML 页面。
重要执行要求：
1. 这一步不要调用 voc-business-workflow、voc-content-plan、voc-speaking-script 或其它 VOC 工具。
2. 不要重新采集小红书或抖音数据。
3. 请直接基于当前已有样本、趋势报告、采集矩阵和下面的分析结论，生成一个本地 HTML 文件。
4. 生成后告诉我 HTML 文件路径，并尽量打开预览。
这份报告不是流程复盘，不要只是按“采集矩阵、市场声音、问题池、单点深挖”顺序罗列。
请把主线改成：
用户原话 -> 用户顾虑 -> 未被满足需求 -> 机会优先级 -> 新客转化策略 -> 验证计划。
业务目标：提升茶饮新客转化。
产品价格带：18-22 元。
平台：小红书、抖音。
核心 VOC 问题：用户判断“值不值”“会不会踩雷”“首单怎么点最稳”。
本轮采集观察：
1. 小红书高赞评论：“波霸奶茶用的什么茶底？我要避雷！！下午喝的，晚上睁眼到天亮”
观察：茶底、成分、身体反应是新客决策的一部分，不是喝完才考虑。
2. 抖音样本：9.9 新品能吸引注意，但热度不等于明确转化。
3. 抖音样本：11.9 单人下午茶太优惠，但本地生活属性、场景习惯会影响转化。
4. 抖音样本：21 元买一送一被评论“划算的”，但新客仍会追问规则、口味和是否有坑。
本轮矩阵结论：
1. 18-22 元不是绝对贵，用户会拿套餐、券后价、自制成本一起比。
2. 首单不只看价格，用户更在意口味稳不稳、会不会踩雷。
3. 评论区是最强的验真场，用户会追问茶底、甜度、怎么买最划算。
4. 抖音更偏首单触发，小红书更偏值不值/会不会踩坑的解释型讨论。
请重点提炼“用户未被满足的确定感需求”，至少包括：
1. 价格确定感：券后到底多少钱，套餐有没有隐藏条件。
2. 点单确定感：第一次来怎么点最稳，怎么少踩雷。
3. 口味确定感：茶底、甜度、配料是否适合自己。
4. 身体反应确定感：下午喝会不会睡不着，低糖/无糖怎么选。
5. 到手体验确定感：外卖会不会冰化、分层、塌口感。
每个需求都要包括：
- 对应用户原话或样本观察；
- 用户真实担心；
- 为什么影响新客转化；
- 品牌/门店现在可以怎么承接；
- 对应内容表达、菜单/套餐表达、评论区回复动作；
- 验证指标。
下一轮补采关键词：
第一优先级：茶饮 券后价、茶饮 首单优惠、茶饮 团购、茶饮 套餐、茶饮 多少钱、茶饮 划算吗。
第二优先级：茶饮 口味 稳不稳、茶饮 甜度、茶饮 茶底、茶饮 配料表、茶饮 无糖、茶饮 低糖、茶饮 下午喝 睡不着。
第三优先级：茶饮 点单、茶饮 怎么点、茶饮 排队、茶饮 外卖、茶饮 冰化、茶饮 塌口感、茶饮 门店体验、茶饮 会不会踩雷。
报告结构请包括：
1. 封面：茶饮新客转化 VOC 机会报告；
2. 一句话结论：用户不是单纯嫌 18-22 元贵，而是缺少第一次购买确定感；
3. 证据墙：小红书/抖音用户原话和样本观察；
4. 新客决策路径：看到内容 -> 看价格 -> 看评论 -> 问规则 -> 决定首单；
5. 未被满足需求地图：价格确定感、点单确定感、口味确定感、身体反应确定感、到手体验确定感；
6. 机会优先级：哪些需求最影响新客转化，哪些先做；
7. 新客转化策略：套餐、券后价、茶底说明、避坑内容、评论区回复；
8. 7 天内容验证计划；
9. 下一轮补采关键词；
10. 附录：采集矩阵、样本数、评论数、原始证据。
HTML 要求：
- 青花瓷视觉风格；
- 有目录跳转；
- 有证据卡片；
- 有未被满足需求地图；
- 有机会优先级图表或卡片；
- 有 7 天验证计划时间线；
- 移动端可读，不要文字重叠。
注意：
1. 不要把采集矩阵放在正文最前面当主线，它应作为证据链或附录。
2. 所有建议要回到证据、用户原话、评论区问题和验证指标。
3. 不要写空泛品牌宣传，要让老板能直接看懂下一步怎么做。
```
截图说明：
### 第 2 步：确认报告主线不是流程复盘
检查 Claude Code 是否先给出“用户不是单纯嫌贵，而是缺少第一次购买确定感”这类核心判断。
如果它一上来要进入 workflow、重新采集、生成口播，或只是罗列采集矩阵、平台、关键词，说明主线偏了，需要补一句：
```text
请不要进入 VOC workflow、内容计划或口播脚本工具，也不要重新采集。
请把采集矩阵放到附录，正文先围绕“未被满足需求”和“新客转化机会”展开，并直接生成 HTML 文件。
```
截图说明：
### 第 3 步：检查证据墙
检查报告是否把用户原话、样本观察和平台差异做成证据卡片。
至少要能看到：
- 小红书评论：“波霸奶茶用的什么茶底？我要避雷……”
- 抖音低价新品能触发注意，但不等于转化
- 21 元买一送一能触发“划算”，但还要解释规则和有没有坑
截图说明：
### 第 4 步：检查未被满足需求地图
确认报告把用户顾虑翻译成需求，而不是停留在“价格/性价比、踩雷、套餐”这些问题名上。
茶饮案例里应至少有这 5 类：
- 价格确定感
- 点单确定感
- 口味确定感
- 身体反应确定感
- 到手体验确定感
截图说明：
### 第 5 步：检查机会优先级
确认报告没有把所有需求都写成同等重要，而是按新客转化影响排序。
推荐优先级：
1. 价格确定感：最先影响是否继续看。
2. 点单确定感：最接近首单转化。
3. 口味/身体反应确定感：影响是否愿意尝试。
4. 到手体验确定感：适合下一轮补采外卖场景。
截图说明：
### 第 6 步：生成 HTML 文件
让 Claude Code 把“证据墙、未被满足需求地图、机会优先级、新客转化策略、验证计划”整理成 HTML 页面，并说明文件位置。
截图说明：
### 第 7 步：参考优秀 HTML 报告优化结构
初版 HTML 生成后，不要急着结束。继续让 Claude Code 按“优秀 VOC 报告”的结构规则优化当前茶饮报告。
这一步不依赖任何外部参考文件，直接把结构规则贴给 Claude Code。
可直接复制：
```text
请继续优化刚才生成的 HTML 报告。
不要重新采集，也不要进入 VOC workflow。
请按下面的优秀 VOC HTML 报告结构规则，直接修改当前 HTML：
1. 封面：
- 用一句大判断带出主题，例如“用户不是嫌 18-22 元贵，而是缺少第一次购买确定感”。
- 首屏要同时出现业务目标、核心结论、数据口径和下一步动作。
- 不要把封面做成普通标题页。
2. 目录：
- 按认知递进组织，而不是按工具流程罗列。
- 推荐顺序：封面 -> 证据墙 -> 新客决策路径 -> 未被满足需求 -> 机会优先级 -> 策略动作 -> 7 天验证 -> 附录。
3. 每个 section：
- 都要有 eyebrow + 大标题 + 副标题。
- eyebrow 用短标签，例如 “EVIDENCE WALL / UNMET NEEDS / PRIORITY / ACTION PLAN”。
- 大标题讲判断，副标题讲为什么重要。
4. 证据墙：
- 把用户原话和样本观察做成证据卡片。
- 每张卡片包含平台、原话/观察、说明它指向哪个顾虑。
5. 未被满足需求章节：
- 这是报告主章节，不要塞到问题池里。
- 每个需求都要包含：用户顾虑、证据、影响转化的原因、品牌可以承接的动作。
6. 机会优先级：
- 不要把所有机会写成同等重要。
- 用 P0/P1/P2 标记优先级，并说明为什么先做。
7. 策略动作：
- 动作要分成内容表达、菜单/套餐表达、评论区回复、门店/外卖动作。
- 每个动作都要绑定验证指标。
8. 附录：
- 采集矩阵、样本数、评论数、补采关键词放在最后。
- 附录用于证明证据链，不要抢正文主线。
请在当前 HTML 上直接修改，输出优化后的 HTML 文件路径。
```
截图说明：
### 第 8 步：参考美学规范优化视觉风格
结构顺了以后，再让 Claude Code 按美学规范把页面从“能看”升级到“能交付”。
这一步同样不依赖外部文件，直接把视觉规范贴给 Claude Code。
可直接复制：
```text
请继续对刚才的 HTML 报告做视觉升级。
不要改报告结论，不要新增虚构数据。
请把当前茶饮 HTML 报告升级为更接近可交付报告的视觉效果。
请按下面的视觉规范直接修改：
1. 页面形态：
- 单文件 HTML，无外部依赖。
- Slide-deck 式 section，每个核心 section 至少接近一屏，有明确视觉重心。
- 页面要能用于现场演示，不只是长文档。
2. 青花瓷风格：
- 主色可以使用瓷蓝、深青、米白、墨色。
- 不要做成单调蓝白，要有深浅层次和可读对比。
- 可以使用细线纹理、瓷器留白、蓝色描边，但不要堆砌花纹影响阅读。
3. 字体和数字：
- 数字、平台名、样本数、价格带使用 mono 字体。
- 标题字重要明显，正文不要过大。
- 每个 section 使用 eyebrow + title + subtitle。
4. 核心模块：
- 封面：大标题 + 核心判断 + 关键数字条。
- 目录：可点击跳转。
- 证据卡片：左侧强调线，卡片内包含平台和原话。
- 未被满足需求地图：用 5 张卡片或一张结构图呈现。
- 机会优先级：用 P0/P1/P2 卡片或矩阵呈现。
- 7 天验证计划：用时间线呈现。
- 附录：采集矩阵和补采关键词用表格呈现。
5. 交互：
- 目录锚点可跳转。
- 卡片 hover 有轻微反馈。
- 可以加入简单进度导航或返回顶部按钮。
6. 响应式：
- 移动端不溢出、不重叠。
- 多列卡片在窄屏自动变成单列。
- 表格在移动端允许横向滚动。
请直接修改 HTML 文件，并告诉我改动后的文件路径。
```
截图说明：
### 第 9 步：让 Claude Code 做一次自检修正
视觉升级后，让 Claude Code 用清单方式自查一次，避免只变漂亮但不适合交付。
可直接复制：
```text
请对刚才的 HTML 报告做一次交付前自检，并直接修正发现的问题。
检查标准：
1. 首屏是否能看懂业务目标、核心判断和下一步动作；
2. 正文主线是否是“用户原话 -> 用户顾虑 -> 未被满足需求 -> 机会优先级 -> 策略动作 -> 验证计划”；
3. 证据卡片是否包含真实用户原话或样本观察；
4. 采集矩阵、样本数、评论数是否放在附录或证据链，而不是正文最前面；
5. 是否有目录跳转、证据墙、需求地图、机会优先级、7 天验证计划；
6. 是否有清晰视觉层级，不是整页文字堆叠；
7. 移动端是否不会文字重叠、卡片溢出；
8. 是否没有调用 VOC workflow、没有重新采集、没有生成口播脚本。
如果有问题，请直接修改 HTML 文件；如果已经满足，请给出最终 HTML 文件路径。
```
截图说明：
### 第 10 步：在浏览器打开首页
打开 HTML 页面，检查首屏是否能看懂：
- 业务目标：提升茶饮新客转化
- 核心结论：用户不是单纯嫌贵，而是缺少第一次购买确定感
- 下一步动作：先补价格、点单和避坑表达
截图说明：
### 第 11 步：检查报告交互模块
测试目录跳转、证据卡片、需求地图、机会优先级、7 天验证计划等互动模块。
截图说明：
### 第 12 步：检查移动端预览
缩窄浏览器或用移动端预览，确认文字不重叠、模块不溢出、截图和图表可读。
截图说明：
## 常见错误
| 问题 | 处理 |
| --- | --- |
| 报告像流程复盘 | 把主线改成“未被满足需求 -> 机会 -> 策略 -> 验证” |
| 跳过证据直接写策略 | 回到用户原话、样本观察和评论区问题 |
| HTML 只有文字 | 使用第 7 步的结构优化提示词，补封面、目录、证据墙、需求地图、机会优先级和验证计划 |
| 页面不好看但不知道怎么改 | 使用第 8 步的视觉升级提示词，按青花瓷风格、卡片、时间线、响应式规则二次升级 |
| 报告没有动作 | 补套餐表达、券后价说明、茶底说明、避坑内容和评论区回复 |
| 只写价格便宜 | 改成“价格确定感”，讲清楚总价、规则、场景和适合谁 |
## 完成标准
- 报告主线是未被满足需求，而不是流程汇总。
- 报告有证据墙、需求地图、机会优先级、策略动作和验证指标。
- 采集矩阵、样本数、评论数在附录或证据链里能查到。
- HTML 已参考优秀报告结构做过二次优化。
- HTML 已参考美学规范做过视觉升级。
- HTML 可打开，视觉风格符合要求。
- 老板能直接看懂下一步怎么做。