---
name: html-report-generator
description: 整合所有前置 Skill 输出，AI 生成结构化 REPORT_DATA JSON，注入 report_template.html 模板，输出完整可渲染的 13 屏幻灯片 HTML VOC分析报告。
version: 2.1.0
author: nkkj-BrainHack
---

# html-report-generator

## 功能用途

将品类分析、竞品分析、VOC 洞察、社媒数据整合，AI 生成与 `report_template.html` 完全匹配的 `REPORT_DATA` JSON，并填充模板 `{{placeholder}}` 变量，输出可直接在浏览器打开的 13 屏幻灯片 HTML 报告。

**核心业务场景：**
- 工作坊成果交付（一键生成可演示的 HTML 报告取代手动 PPT）
- B端客户线索分析报告（竞品对标 + 品类机会矩阵 + VOC 洞察）
- 品牌内部经营复盘报告（定期数据注入模板自动生成）

## 调用链（Workflow）

```
上游: category-landscape → 市场全景数据
上游: competitor-discovery / competitor-pricing-analysis → 竞品数据
上游: review-pain-point-extraction / review-highlight-extraction → VOC 数据
上游: social-trend-analysis / tiktok-category-voc → 社媒数据
上游: user-persona → 用户画像数据
本步: html-report-generator(all inputs) → 生成 REPORT_DATA JSON + 填充 placeholders → 输出 HTML
```

## 入参规则

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| industryName | string | ✅ | 行业名称，如「香薰家居」「宠物用品」 |
| coverBrandEnglish | string | ✅ | 封面英文品牌标识，如「HOME FRAGRANCE」 |
| reportDate | string | ✅ | 报告日期，格式 'YYYY年MM月' |
| categoryLandscape | object | ✅ | category-landscape 输出 |
| competitorData | object | ✅ | competitor-discovery + pricing + comparison 汇总输出 |
| reviewAnalysis | object | ✅ | review-pain-point-extraction + highlight-extraction 汇总输出 |
| socialVocData | object | ❌ | social-trend-analysis + tiktok-category-voc 汇总输出 |
| userPersona | object | ❌ | user-persona 输出 |
| strategyData | object | ❌ | 短/中/长期策略建议（可手动补充或由 voc-proposal 输出提取） |

## 模板文件

**模板路径**: `workflows/templates/report_template.html`

### 需填充的 `{{placeholder}}` 变量

| 占位符 | 说明 |
|--------|------|
| `{{industryName}}` | 行业名称 |
| `{{coverBrandEnglish}}` | 英文品牌标识 |
| `{{totalReviews}}` | 分析的评论总条数 |
| `{{categoryCount}}` | 品类数量 |
| `{{competitorCount}}` | 竞品品牌数量 |
| `{{competitorNames}}` | 竞品品牌名称（逗号分隔） |
| `{{reportDate}}` | 报告日期 |
| `{{REPORT_DATA_JSON}}` | 完整 REPORT_DATA JSON 对象 |

### REPORT_DATA JSON 结构（AI 生成目标）

```json
{
  "metrics": [{"value": 125000, "prefix": "$", "suffix": "", "label": "品类月销售额", "sub": "美元/月"}],
  "coreFindings": [{"text": "品类处于高速成长期", "highlight": "增长率+35%", "highlightClass": "text-sage"}],
  "coreValues": ["6大核心品类全面扫描", "竞品定价策略深度拆解"],
  "categories": [{"name": "Reed Diffuser", "weeklySales": "3.2万件", "weeklyRevenue": "$96万", "avgPrice": "$29.9", "brands": "245", "growth": "+35%", "chinaRatio": "62%", "highlight": true, "revenueNum": 960000, "growthNum": 35}],
  "competitors": [{"name": "NEST", "positioning": "高端溢价", "positionBadge": "badge-gold", "priceRange": "$35-68", "igFollowers": "28万", "tiktokFollowers": "12.5万", "skuNote": "12款", "strategyNote": "礼品定位", "pros": "✅ 品牌溢价强", "cons": "❌ 价格偏高", "radarData": [90,85,80,75,60]}],
  "vocAnalysis": {"totalReviews": 1500, "painPoints": [{"icon": "🌸", "name": "香味持续时间短", "pct": 32, "gradient": "linear-gradient(90deg,#C4868B,#a06066)", "quote": "Scent fades after 3 days..."}], "highlights": [{"name": "香味品质好", "pct": 68, "color": "#8FA68A"}], "scenes": [{"name": "客厅日常", "pct": 40}]},
  "categoryMatrix": [{"name": "Reed Diffuser", "marketSize": "大", "growth": "⬆️高", "socialHeat": "🔥高", "competition": "中等", "chinaRatio": "62%", "recommendation": "优先布局", "badgeClass": "badge-sage"}],
  "tiktokHeat": [{"name": "#reeeddiffuser", "plays": 125000000}],
  "seasonalNotes": [{"icon": "🎄", "title": "Q4旺季", "desc": "11-12月圣诞/新年送礼需求激增2.5倍"}],
  "strategy": {"shortTerm": [{"title": "Listing优化", "desc": "核心关键词植入标题+bullet前2条"}], "midTerm": [{"title": "PPC广告", "desc": "核心词精准投放，ACOS目标<30%"}], "longTerm": [{"title": "产品迭代", "desc": "基于VOC痛点开发长效缓释配方"}]},
  "vocPriorities": [{"text": "香味持续性改良", "badgeClass": "badge-rose"}, {"text": "礼品包装升级", "badgeClass": "badge-gold"}],
  "conclusion": {"topCategory": {"emoji": "🏆", "title": "最优先品类", "name": "Reed Diffuser", "desc": "高增长 + 高社媒热度 + 中等竞争强度"}, "socialDividend": {"emoji": "📱", "title": "社媒红利", "name": "TikTok测评内容", "desc": "对比评测视频互动率最高但产出最少"}, "differentiator": {"title": "差异化突破口", "subtitle": "长效缓释技术 + 礼品化包装", "desc": "覆盖品类80%用户痛点，建立技术护城河"}, "keyActions": [{"emoji": "🎯", "title": "精准卡位", "desc": "Reed Diffuser 黄金价格带"}, {"emoji": "📝", "title": "VOC驱动", "desc": "差评痛点驱动产品迭代"}, {"emoji": "📱", "title": "社媒种草", "desc": "TikTok对比测评内容"}]}
}
```

## 输出格式

返回对象包含：
- `htmlContent`: 完整 HTML 字符串（直接写入 `.html` 文件即可使用）
- `reportDataJson`: 纯 REPORT_DATA JSON（可调试复查）
- `templateVars`: 填充后的 `{{placeholder}}` 变量表
- `reportStats`: 报告统计 `{totalSlides, dataCompleteness, generatedAt}`

## 依赖要求

- 纯 AI 综合生成，无外部 API 调用
- 模板文件: `workflows/templates/report_template.html`（部署时需同步模板）
- 依赖全部前置 Skill 的输出数据

## 工作坊记忆集成

当处于 VOC 工作坊流程中时，本技能支持从记忆文件自动读取参数（v2 schema）：

| 参数 | 记忆来源 | 字段路径 |
|------|---------|---------|
| industryName | `memory/brand-context.json` | 从 `.categoryKeywords` 推断 |
| coverBrandEnglish | `memory/brand-context.json` | `.brandName` |
| reportDate | 自动生成 | 当前日期 |
| categoryLandscape | `memory/stage-1-output.json` | `.categoryLandscape`（含healthScore） |
| competitorData | `memory/stage-2-output.json` | `.{competitorDiscovery, competitorComparison, pricingAnalysis}` |
| voiceClassification | `memory/stage-3-output.json` | `.voiceClassification`（三维情感） |
| brandVsCompetitor | `memory/stage-3-output.json` | `.brandVsCompetitor` |
| keywordCloud | `memory/stage-3-output.json` | `.keywordCloud` |
| painPointInsight | `memory/stage-4-output.json` | `.painPointInsight`（显性+隐性+权重） |
| highlightInsight | `memory/stage-4-output.json` | `.highlightInsight`（亮点+Listing建议） |
| featureSatisfaction | `memory/stage-4-output.json` | `.featureSatisfaction`（四象限+缺口） |
| scenarioDashboard | `memory/stage-4-output.json` | `.scenarioDashboard`（高频+失败+新兴） |
| socialVocData | `memory/stage-4-output.json` | `.{socialTrend, competitorBsr, crossChannelInsight}`（可选） |
| userPersona | `memory/stage-4-output.json` | `.userPersona` |
| actionableInsights | `memory/stage-5-output.json` | `.actionableInsights`（来自voc-proposal） |
| overallHealthScore | `memory/stage-5-output.json` | `.overallHealthScore`（来自voc-proposal） |

**HTML报告需包含13屏**（升级自原9屏）：
1. 封面
2. 执行摘要 + 综合健康度评分（五维雷达图）
3. 品类全景（市场规模+健康度+价格带）
4. 品牌六维画像（雷达图）
5. 竞品对比矩阵（多维表格+漏洞卡片）
6. 用户声音分类（情感分布条+三栏明细）
7. 痛点深度洞察（权重排行表+痛点卡片）
8. 卖点植入方案（亮点→Listing建议+竞品对比）
9. 功能满足度（四象限矩阵+缺口卡片）
10. 使用场景看板（场景卡片+满意度排行）
11. 用户画像（3-5个画像卡片）
12. 行动计划（P0/P1/P2优先级+30天时间线）
13. ROI估算（投入产出对比表）

**执行完毕后**，将 HTML 文件路径写入 `memory/stage-5-output.json`（htmlReport 部分）。

参考规范：`workshop/voc-report-schema-spec.md` 全文。

## 对应工作坊环节
Day2 下午 14:00-14:30「虾做报告」— 输出《HTML可演示报告》（13屏完整报告）