html-report-generator（HTML report 生成器）

HTML 报告生成器 · 主索引

本 skill 拆分为 10 个专项文件，按需读取，不要预加载所有文件。

📂 文件索引

⚡ 三条不可逾越的铁律

违反任意一条 → 该页推翻重做，无例外。

铁律 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变体

🎯 图表选型速查