- name
- html-report-generator
- description
- 将任意输入自动分解成 5-15 个独立 HTML 报告页面，每页严格 1017×720px（对齐 PPT 画布 10.59"×7.499" @96dpi），深度拆解 3-6 个子维度，每维度精炼 60-100 字 + 支撑图表。当用户说"生成报告"、"分析内容做成页面"、"做成HTML"、"内容可视化"时立即使用，无需确认直接生成。
HTML 报告生成器 · 主索引
本 skill 拆分为 10 个专项文件，按需读取，不要预加载所有文件。
📂 文件索引
| 文件 | 职责 | 生成时机 |
|---|---|---|
01-canvas.md | 画布尺寸、四区结构、溢出规则 | 每页开始前 |
02-design-system.md | 自创 Tc 模板流程、6种基础模板基因库、主题一致性 | 规划阶段（第零步） |
03-layout.md | 自创 Lc 布局流程、4种基础布局基因库、空间计算 | 每页选布局时（第零步） |
04-color-font.md | 7套配色、字体规则、语义色系统 | 每页设定样式时 |
05-content.md | 反偷懒约束、内容密度、基础SVG图表库（6种） | 写内容时 |
06-workflow.md | 主题拆解规划、渲染验证、质量核查 | 开始和结束时 |
07-special-pages.md | 封面/目录/章节分隔/结尾页规范与HTML模板 | 生成特殊页面时 |
08-svg-extended.md | 扩展SVG图表库（圆环/散点/流程/树状/热力/瀑布/双轴） | 需要复杂图表时（可选） |
09-components.md | 页眉/摘要栏/卡片变体/徽章/图标/数字排版规范 | 每页组件选用时 |
10-diagram-types.md | 业务图谱库：架构图/流程图/层级图/决策图 + 网络查询流程 | 用户要求汇报图谱时 |
⚡ 三条不可逾越的铁律
违反任意一条 → 该页推翻重做，无例外。
铁律 1：画布锁死 1017×720px
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 1017px; height: 720px;
min-width: 1017px; max-width: 1017px;
min-height: 720px; max-height: 720px;
overflow: hidden;
}铁律 2：四区高度必须精确求和 720px
Header 72px ← 页眉
Content 580px ← 主内容（仅左右 padding，上下为 0）
Summary 48px ← 摘要栏（必须有实质内容，不能留空）
Footer 20px ← 页脚
─────────────
总计 720px ✓铁律 3：不得使用 LibreOffice 渲染
必须使用 Chrome/Puppeteer 截图（见 06-workflow.md）。
🚀 完整生成流程
阶段一：规划（生成任何页面前）
1. 读 02-design-system.md → 第零步：分析用户描述，自创 Tc 专属模板
2. 读 03-layout.md → 了解 Lc 自创布局机制
3. 读 06-workflow.md → 拆解主题（8-12维度），规划每页三元组
4. 读 07-special-pages.md → 确认是否需要封面/目录/章节/结尾页阶段二：逐页生成
每页生成时：
├─ 读 01-canvas.md → 确定四区 CSS 骨架
├─ 读 02-design-system.md → 应用 Tc 模板的背景/卡片/页眉 CSS
├─ 读 03-layout.md → 第零步：自创本页 Lc 布局
├─ 读 04-color-font.md → 选配色方案 + 字体
├─ 读 05-content.md → 填内容，选基础SVG图表，反偷懒自查
├─ 读 08-svg-extended.md → 需要圆环/流程/树状等复杂图表时（可选）
├─ 读 09-components.md → 选择页眉变体/摘要栏/卡片变体/徽章
└─ 读 10-diagram-types.md → 用户要求架构图/流程图/层级图/决策图等业务图谱时（可选）
若图谱不在库中 → 执行文件末尾的 WebSearch 查询流程
特殊页面（封面/目录/章节页）：
└─ 读 07-special-pages.md → 使用对应变体模板阶段三：验证与收尾
└─ 读 06-workflow.md → 运行截图验证，对照质量清单📋 报告结构规范
P00 封面页（Cover） → 07-special-pages.md CV变体
P01 目录页（可选） → 07-special-pages.md TC变体
──── 章节分隔（可选） → 07-special-pages.md CD变体
P01+ 内容页 × N → 主流程
──── 章节分隔（可选） → 07-special-pages.md CD变体
PN 结尾页（End） → 07-special-pages.md EP变体🎯 图表选型速查
| 数据特征 | 图表类型 | 文件 |
|---|---|---|
| 趋势/时间序列 | 折线面积图 | 05 图表2 |
| 量级对比（同类） | 横条图/柱状图 | 05 图表1/6 |
| 多维度评分 | 雷达图 | 05 图表3 |
| 时间节点 | 时间轴 | 05 图表4 |
| 进度/计划 | 甘特条 | 05 图表5 |
| 占比/构成 | 圆环图 | 08 图表7 |
| 相关性分析 | 散点图 | 08 图表8 |
| 步骤/决策流 | 流程图 | 08 图表9 |
| 层级/树状 | 树状图 | 08 图表10 |
| 二维密度 | 热力矩阵 | 08 图表11 |
| 累计变化 | 瀑布图 | 08 图表12 |
| 双量级叠加 | 双轴图 | 08 图表13 |
| 系统组件/微服务/网络拓扑 | 分层架构图 / C4上下文图 | 10 一 |
| 跨部门流程/审批/交接 | 泳道图 | 10 二 |
| 转化率/用户路径 | 漏斗图 | 10 二 |
| 流量/预算分配流向 | Sankey桑基图 | 10 三 |
| KPI目标对比 | Bullet子弹图 | 10 三 |
| 市场占比/资产组合 | Treemap树图 | 10 三 |
| 组织/优先级/市场矩阵 | 金字塔/2×2矩阵/同心圆 | 10 四 |
| 风险评估/任务分配 | 风险矩阵/RACI | 10 五 |
| 不在以上列表的图谱 | → 读 10-diagram-types.md 末尾执行 WebSearch | 10 末 |