PPT Generator — HTML 演示文稿生成器#

触发#

方式示例自然语言"做个PPT"、"生成一个演示"、"做几页幻灯片"、"presentation about X"显式KAIFA## PPT <主题>

三种预设模式#

参数简易标准详尽时长10 min25 min~50 min总页数7-1020-2540-50目录页无有有章节封面无有（每章1页）有（每章1页）结构页Cover+Ending=2Cover+TOC+章封面+Ending同标准

页数公式#

text

简易: total = 2 + Σ每章内容页
标准: total = 2 + 1(TOC) + 章节数 + Σ每章内容页
详尽: total = 2 + 1(TOC) + 章节数 + Σ每章内容页

---

核心流程#

text

PHASE 0: DISCOVERY  → 模式确认 → 大纲打磨 → 锁定
PHASE 1: PLAN       → 分配布局 → 内容要点
     ⛔ APPROVAL
PHASE 2: IMPLEMENT   → 并发生成 slide 片段 → 拼接
PHASE 3: REVIEW      → 一致性检查
PHASE 4: REPORT      → canvas 预览 → 输出文件

---

PHASE 0: DISCOVERY（交互式大纲打磨）#

步骤#

1. 确认模式：用户说了模式→直接用。没说→追问 "简易/标准/详尽？"
2. 确认章节数：用户没说→追问 "几个章节/部分？"
3. 计算页数：套公式，结构页固定扣除，内容页按章节重要性动态分配
4. 出大纲草案：显示每页标题+布局类型，区分结构页和内容页
5. 用户调整：展开/压缩/合并 → 修订 → 再确认 → 锁定

大纲输出格式#

text

📊 大纲草案 — 标准模式
总页数: 22页 (结构7 + 内容15)

结构页:
  p1   封面                                    [cover]
  p2   目录                                    [toc]

第1章 项目概况
  p3   章节封面                                [chapter-cover]
  p4   背景与目标                              [ca-bullets]
  p5   项目范围                                [ca-bullets]

第2章 关键进展 ← 核心
  p6   章节封面                                [chapter-cover]
  p7   三大成果                                [ca-cards-3]
  p8   对比分析                                [ca-bullets-2col]
  ...

  pN   结束页                                  [ending]

需要展开/压缩/调整哪里？

内容分配规则#

• 用户指定的"核心"章节 → 多分配 1-3 页
• 有数据/对比 → 自动插入 chart 页
• "简要提到"的章节 → 1页（不含章节封面）
• 每页内容要点在 Phase 1 细化

---

PHASE 1: PLAN#

基于锁定的大纲，产出两个结构化数据文件：

产出物#

1. master_config.json — 母版配置
2. slides_data.json — 每页的数据定义

master_config.json 结构#

json

{
  "theme_color": "#004D8C",
  "theme_accent": "#009688",
  "header_title": "数据安全合规培训",
  "show_footer": true,
  "footer_text": "内部资料，请勿外传",
  "bg_style": "gradient"
}

slides_data.json 结构#

每页定义： page, type（content_area 或 special 或 chart）, layout（布局模板名）, data（模板变量）。

json

[
  { "page": 1, "type": "special", "layout": "cover", "data": { "title": "...", "subtitle": "..." } },
  { "page": 2, "type": "content_area", "layout": "ca-bullets", "data": { "title": "...", "points": [...] } },
  { "page": 3, "type": "special", "layout": "chapter-cover", "data": { "number": 1, "title": "...", "desc": "..." } },
  { "page": 4, "type": "content_area", "layout": "ca-cards-3", "data": { "title": "...", "cards": [...] } },
  { "page": N, "type": "special", "layout": "ending", "data": { "thanks": "...", "contact": "..." } }
]

🔴 内容设计（强制，不可跳过）#

布局分配完成后、进入实现之前，必须逐页写出完整文字内容。

这是整个流程中最关键的一步。不能只写"标题+1-2句要点"就进入渲染——渲染阶段不增不减文字，只做排版。

内容密度约束

页面类型字数要求说明cover / chapter-cover / ending10-30字极简导航toc30-120字章节标题+简述ca-bullets / ca-cards / ca-image / ca-timeline / ca-architecture100-500字展开阐述

每个 bullet point 可以多句展开，不是每条只能10个字。 参考PPT的平均展开型页面有300-400字。

输出要求

将完整文字内容写入 slides_data.json，每条文字必须是可逐字渲染的最终版本。

⚠️ 前端渲染 = 排版。后端内容 = 定稿。两者的职责不可混淆。

布局选择指南#

页面意图推荐 layout法规/要点罗列ca-bullets对比/并列ca-bullets-2col3 个方案/类型ca-cards-34 个方案/类型ca-cards-4架构图/流程ca-architecture数据展示ca-table案例/截图说明ca-image-left / ca-image-right步骤/时间ca-timeline

输出 Plan 摘要 + 审批闸门。

---

⛔ APPROVAL GATE#

一次性审批，通过后进入 Implement。

---

PHASE 2: IMPLEMENT（母版渲染 + 内容区布局注入）#

渲染管线#

text

master_config.json ──→ PM renders base-template.html
                          → 母版HTML（header + footer + {{content-area}} 占位符）

slides_data.json ──→ For each slide:
  1. 根据 type 选择分支:
     - type=special → 读取 references/specials/{{layout}}.html
     - type=content_area → 读取 references/content-areas/{{layout}}.html
     - type=chart → 读取 references/content-areas/{{layout}}.html
  2. 展开模板中的 {{#each}} {{#if}} {{variable}} → 纯HTML
  3. content_area 类型: 注入到母版的 content-area 占位区，包裹 <section class="slide">
     special 类型: template 已自带 <section class="slide">，直接使用
  4. 按 page 排序 → 拼接所有 <section>

拼接所有 <section> → 注入 {{slides}} 占位 → 完整HTML

并发模型#

text

审批通过后，并发 spawn N 个子 agent：

  ┌─ developer-slide-1  (cover, p1)
  ├─ developer-slide-2  (toc, p2)
  ├─ developer-slide-3  (chapter-cover, p3)
  ├─ developer-slide-4  (ca-bullets, p4)
  ├─ developer-slide-5  (ca-cards-3, p5)
  ├─ developer-slide-6  (ca-architecture, p6)
  └─ developer-slide-N  (ending, pN)
         │
    全部返回 → PM 拼接为完整 HTML

每个子 agent 的 task#

text

基于以下信息生成一页 slide 的 HTML 片段：

页面类型: [special | content_area]
布局模板: [从 references/content-areas/xxx.html 或 references/specials/xxx.html 读取]
母版片段: [master-header + master-footer HTML]
内容数据: { title, points, icon, highlight, cards... }
页码: N

要求：
1. 输出 ONLY <section class="slide" data-page="N">...</section>
2. 展开所有 {{#each}} {{#if}} {{variable}} 为纯HTML
3. content_area 类型：模板只输出 .content-area 内部，需自行构造完整 .ppt-slide 结构（master-header + content + master-footer）
4. special 类型：模板已自带完整结构，直接展开变量
5. 严格使用 CSS 变量，不硬编码颜色
6. 内容精确匹配 data，不删减不压缩，不自行发挥

拼接#

PM 收齐所有 slide 片段后：

1. 读取 assets/base-template.html
2. 将 slide 片段按页码顺序注入 {{slides}} 占位符
3. 注入 icons.svg 内容到 {{icons}} 占位符
4. 写入 output/<slug>-presentation.html

---

PHASE 2.5: PPTX EXPORT（可选）#

基于 PHASE 2 Plan 产出的结构化内容数据，生成可编辑的 .pptx 文件。

执行方式#

bash

python3 scripts/export_pptx.py \
  --input content_data.json \
  --output output/<slug>-presentation.pptx

与 HTML 管线的区别#

维度HTMLPPTX视觉精度高（像素级控制）中（PPTX 排版模型不同）可编辑性低（需改源码）高（原生 PPTX）图表支持Chart.js 交互表格替代（v1，v2 支持原生图表）生成速度并行子 agent单进程顺序适用场景演示预览交付/分享/修改

字体说明#

PPTX 不支持 Google Fonts CDN，会使用系统已安装字体。 推荐安装 Noto Sans SC，否则自动回退到 Microsoft YaHei。

子 agent 失败处理#

• 单个 slide 子 agent 出错 → 重试 1 次（共 2 次尝试）
• 2 次均失败 → 标记该页为占位页（显示"此页生成失败"），继续拼接其余页
• 失败 ≥ 总页数 30% → 停止，标记用户决策
• PM 在拼接前验证所有片段格式（是否以 <section class="slide" 开头）

---

PHASE 3: REVIEW#

#检查项1页数与 Plan 一致？2结构页出现顺序正确（封面→目录→章封面→内容→结束）？3每页布局匹配 Plan？4配色/字体统一（CSS 变量）？5翻页 JS 正常？6内容准确无误？

---

PHASE 4: REPORT#

• canvas 预览 HTML
• 输出文件路径
• 列出遗留问题（如有）

---

设计系统#

详见 references/design-system.md。核心固化：

• 主色 #004D8C + 透明度层级
• 字体 Noto Sans SC，单字体全层级
• 容器 1280×720，Header 85px
• 卡片 rounded-xl + 2px 半透明边框
• 标签 rounded-full pill 样式

模板管理#

操作路径加新 content-area 布局直接创建 references/content-areas/xxx.html加新 special 页面直接创建 references/specials/xxx.html改单个布局直接编辑对应文件改配色/设计系统走 KAIFA##（影响所有模板）改流程走 KAIFA##（编辑 SKILL.md）

文件结构#

text

ppt-generator/
├── SKILL.md
├── assets/
│   ├── base-template.html          # 母版系统（v3: Master + content-area 占位）
│   └── icons.svg
├── references/
│   ├── content-rules.md
│   ├── design-system.md            # 设计令牌 + 布局选择指南
│   ├── content-areas/              # [v3 新增] 内容区布局模板（9个）
│   │   ├── ca-bullets.html         # 单列要点
│   │   ├── ca-bullets-2col.html    # 双列要点
│   │   ├── ca-cards-3.html         # 三列卡片
│   │   ├── ca-cards-4.html         # 四列卡片
│   │   ├── ca-image-left.html      # 左图右文
│   │   ├── ca-image-right.html     # 左文右图
│   │   ├── ca-architecture.html    # 架构/流程图
│   │   ├── ca-table.html           # 数据表格
│   │   └── ca-timeline.html        # 时间线
│   └── specials/                   # [v3 新增] 特殊页面模板（3个）
│       ├── cover.html              # 深蓝全屏封面
│       ├── chapter-cover.html      # 章节标题页
│       └── ending.html             # 结束页
├── scripts/
│   └── export_pptx.py
├── tests/
│   └── test_export_pptx.py
└── requirements.txt

约束#

1. 零外部 CSS 依赖：不引用 Tailwind CDN
2. 唯一外部依赖：Google Fonts (Noto Sans SC)
3. 图标内嵌：使用 assets/icons.svg 内联引用
4. 一个风格：配色/字体写死在 design-system.md，不支持换肤
5. 双轨输出：HTML 预览 + PPTX 可编辑文件
6. 内容灵活性：布局驱动密度（精简/标准/展开），废除全局字数上限
7. v3 母版系统：content-area 模板不含 header/footer，由母版统一提供
8. 内容先行：Plan 阶段产出完整文字内容到 slides_data.json，渲染时不删减