openclaw-voc-skill/docs/5.30/task/case-guides/case-08-html-strategy-report.md

案例 8：HTML 策略报告交付

这个案例解决什么问题

把前面采集到的 VOC 证据，整理成一份能给老板看的“未被满足需求机会报告”。

使用 Claude Code 自带的文件读取、写 HTML 和打开预览能力，直接基于前面已经得到的样本数据和分析结论生成网页交付。

这一课训练你把真实用户声音转成：

• 用户还没被满足的需求
• 哪些需求最影响转化
• 品牌现在能不能承接
• 下一步该做什么动作验证

你需要准备什么

• 已有调研报告或原始数据，例如小红书/抖音趋势报告、采集矩阵、问题池、单点深挖结果
• 一个明确业务目标
• 一个重点 VOC 问题
• 已采集到的用户原话、评论区问题或样本观察
• 已整理的采集矩阵、问题池或单点深挖结论
• 页面视觉风格要求

换行业怎么填

这篇默认生成茶饮新客转化 HTML 策略报告。换成其它行业时，不要只替换品类名，要把“未被满足需求”换成你的行业真实决策阻力。

茶饮案例字段	换行业时填写什么	示例
18-22 元价格带	用户正在犹豫的价格/成本/风险	宠物医院绝育价格、轻医美项目价格、家政按小时收费
值不值、会不会踩雷	用户下单前最怕的事	怕医生不专业、怕项目翻车、怕阿姨不靠谱
茶底、甜度、配料表	用户需要确认的关键细节	医生资质、药品耗材、服务范围、售后规则
首单怎么点最稳	用户第一次购买/预约怎么做最安全	第一次选哪个套餐、先做哪个基础项目、到店前要问什么
券后价/团购规则	用户怕看不懂的交易条件	团购能不能用、是否有隐形加价、退款规则

报告主线建议保留为：

用户原话 -> 用户顾虑 -> 未被满足需求 -> 机会优先级 -> 策略动作 -> 验证计划 -> HTML 交付

采集矩阵、样本数和关键词不是没用，但它们更适合放在“证据链/附录”里，用来证明报告不是凭空写的。

如果 Claude Code 在这一步提示要进入 voc-business-workflow、voc-content-plan 或 voc-speaking-script，说明它理解偏了。
直接补一句：

这一步不要调用 VOC workflow、内容计划或口播脚本工具，也不要重新采集。请只读取我当前已有的报告、矩阵和样本结果，然后直接生成 HTML 文件。

操作步骤

截图保存到 docs/5.30/task/case-guides/screenshots/case-08-html-strategy-report/

第 1 步：输入未被满足需求报告提示词

把业务背景、真实线索、矩阵结论和最终 HTML 要求一次说清楚。重点提醒 Claude Code：不要再进入任何 VOC 工具流程，只基于已有材料生成 HTML 文件。

请基于下面完整 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、重新采集、生成口播，或只是罗列采集矩阵、平台、关键词，说明主线偏了，需要补一句：

请不要进入 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。

可直接复制：

请继续优化刚才生成的 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。

可直接复制：

请继续对刚才的 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 用清单方式自查一次，避免只变漂亮但不适合交付。

可直接复制：

请对刚才的 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 可打开，视觉风格符合要求。
• 老板能直接看懂下一步怎么做。