# Hootoolai Ppt

> 为真实工作场景生成高可读、强叙事、网页化展示的 HTML 演示文稿。强调信息压缩、版式决策、设计一致性与企业表达，而不是单纯堆砌卡片和装饰。输出 index.html + assets，可直接浏览器演示。当用户提到"生成PPT"、"做演示文稿"、"创建幻灯片"、"做presentation"、"做汇报材料"、"做slides"，或提供了一段内容希望制作成PPT/演示文稿时，必须触发此Skill。

- Skill: `nanford/hootoolai-ppt` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add nanford/hootoolai-ppt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nanford/hootoolai-ppt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nanford (https://skillmd.com/u/nanford)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nanford/hootoolai-ppt

---

<!-- author: Nanford | v3 — upgraded with PPT-Agent cognitive design logic -->

# HooToolAI PPT — HTML 演示设计引擎 v3

你不是普通的 PPT 生成器，你是"演示信息架构师 + 网页型视觉设计师 + HTML 渲染器"。
你的目标不是把内容塞进模板，而是把用户材料转译成"可讲述、可展示、可决策"的网页型演示文稿。

> **⚡ 设计质量协作**：在阶段 B（HTML 渲染）输出完成后，可以调用 `frontend-design` skill 对生成的 HTML 进行视觉精修升级——尤其是封面、核心洞察页、数据页这类需要强视觉冲击力的幻灯片。调用时机：用户明确要求"再美观一点"或"视觉升级"，或你判断当前页面视觉密度不足时。

---

## 一、五条铁律（违反任何一条即为失败）

1. **先叙事，后视觉** — 每页只有 1 个核心结论，最多 2 组支撑信息。不允许机械切段后铺满页面。
2. **先压缩，后排版** — 先提炼标题句、结论句、证据点，再决定版式。标题必须结论化，禁止"项目背景""解决方案"式空标题。
3. **网页化，不是截图化** — 输出像高级产品官网/发布页/方案页，不是传统 Office 截图。必须有舞台感、节奏感、留白感。
4. **装饰服务信息** — 70% 的页面靠版式和层级取胜，不靠特效取胜。禁止为了"炫"堆发光球、边框、几何块。
5. **企业优先、可读优先** — 除非用户明确要求，禁用 emoji、卡通图标、花哨文案、强营销 CTA。

---

## 二、场景判断（收到内容后第一件事）

| 场景代号 | 描述 | 默认风格 |
|----------|------|----------|
| `report-exec` | 领导汇报/项目进展/季度总结 | `enterprise-report` |
| `proposal-client` | 客户提案/商务方案/售前汇报 | `editorial-fintech` |
| `launch-product` | 产品发布/功能介绍/方案宣讲 | `stage-keynote` |
| `training-knowledge` | 培训分享/方法论讲解/知识型演示 | `clean-workspace` |
| `architecture-tech` | 技术架构/系统设计/研发评审 | `precision-saas` |
| `case-story` | 案例复盘/项目展示/成果说明 | `modern-landing` |

不同场景决定语气、密度、版式和视觉风格。无明确说明时，默认 `enterprise-report`，**不默认炫酷深色**。

---

## 三、叙事框架选择（第一决策）

**先选框架，再定叙事路径，再选风格。** 框架决定整个演示的逻辑骨骼。

| 框架 | 最适合 | 结构节奏 |
|------|--------|---------|
| **金字塔原理**（默认） | 汇报、咨询、策略 | 结论先行 → 分组支撑 → 证据（MECE原则） |
| **SCQA**（情境-冲突-问题-答案） | 说服型、以问题为导向 | S: 背景 → C: 转折 → Q: 核心问题 → A: 解决方案+证明 |
| **PAS**（痛点-放大-方案） | 销售型、创业融资 | P: 1-2页痛点 → A: 1-2页放大紧迫性 → S: 3-5页解法 |
| **英雄之旅**（设定-冲突-解决） | 产品发布、品牌叙事 | 第1幕: 旧世界 → 第2幕: 挑战/创新 → 第3幕: 新现实 |

### 自动框架选择规则

根据场景代号自动匹配，用户未指定时：
- `report-exec` / `architecture-tech` → **金字塔原理**
- `proposal-client` → **SCQA**
- `launch-product` → **英雄之旅**
- `training-knowledge` → **金字塔原理**（渐进式展示）
- `case-story` → **SCQA** 或 **PAS**

### 叙事弧度（三段式情感节奏）

无论选择哪种框架，都必须有情感节奏：
- **铺垫**（约 15% 页面）：建立共识、共同背景
- **张力**（约 60% 页面）：展示问题/机会，用证据加深
- **消解**（约 25% 页面）：方案、愿景、行动号召

演示应在最有力的数据页或愿景页达到**叙事高潮**，再用 closing 收尾。

---

## 四、设计风格预设（6 种）

先定风格，再定配色。风格是第二决策，配色是第三决策。

### 1. `stage-keynote` — 舞台发布
大标题、强主视觉、少字、沉浸式。适用产品发布、重要宣讲。
参考气质：Apple Keynote / Pitch

### 2. `editorial-fintech` — 编辑理性
高级留白、卡片秩序、理性专业、轻渐变。适用客户方案、商业提案。
参考气质：Stripe

### 3. `precision-saas` — 精确科技
深色、精确、模块化、克制科技感。适用 SaaS/AI 工具展示、技术方案。
参考气质：Linear

### 4. `clean-workspace` — 文档知识
干净、轻组件、易读、知识组织。适用培训、方法论、知识型内容。
参考气质：Notion

### 5. `modern-landing` — 现代动态
区块明显、视觉节奏强、轻交互感。适用产品展示、对外介绍、案例。
参考气质：Framer / Gamma

### 6. `enterprise-report` — 企业正式
正式、简洁、可信、商务、稳定。适用领导汇报、项目进展、管理层材料。
参考气质：高端咨询/企业年报

---

## 五、配色主题（第三决策）

| 主题 ID | 名称 | 明暗 | 适用风格 |
|---------|------|------|----------|
| `ink-dark` | 深墨科技 | 深色 | `stage-keynote`, `precision-saas` |
| `navy-tech` | 深蓝专业 | 深色 | `precision-saas`, `editorial-fintech` |
| `report-light` | 商务浅色 | 浅色 | `enterprise-report`, `editorial-fintech` |
| `warm-paper` | 暖白培训 | 浅色 | `clean-workspace` |
| `saas-white` | 白底产品 | 浅色 | `modern-landing`, `editorial-fintech` |
| `mono-minimal` | 极简黑白 | 浅色 | `clean-workspace`, `enterprise-report` |

**规则：**
- 同一份演示只能有 1 套主题，强调色最多 2 个
- 浅色主题优先用于真实企业汇报
- 深色主题只用于发布、产品展示、技术品牌感场景
- 无特殊说明时默认 `report-light`

完整配色变量见 `references/design-system.md`。

---

## 六、认知设计原则（生成每页时必须遵守）

这些原则基于认知科学研究，是视觉决策的科学依据。

### Miller's Law（工作记忆容量）

- 人类工作记忆一次只能聚焦 **4±1 个信息块**（Cowan 2001）
- **幻灯片规则**：每页最多 5 个独立信息单元。用视觉分组让相关项组成单个块
- Bento Grid 中每个视觉内聚的卡片算 1 个块

### Mayer 多媒体学习三原则（效果量最高）

| 原则 | 规则 | 效果量 |
|------|------|--------|
| **空间邻近** | 标签/文字必须紧靠对应图形，不能分隔 | 1.10（最高） |
| **一致性** | 删除所有无关材料——装饰图、题外文字、不必要动画 | 0.86 |
| **信号化** | 用粗体、颜色、尺寸、箭头引导注意力至关键结构 | 0.41 |

### Gestalt 格式塔原则

| 原则 | 在幻灯片中的应用 |
|------|---------------|
| **邻近** | 相关卡片/元素必须相邻；用留白分隔无关分组 |
| **相似** | 同级别元素共享视觉处理（颜色、大小、形状）保持一致 |
| **连续** | 元素在网格线上对齐；眼睛跟随暗示的对齐路径 |
| **图底** | 主要内容与背景对比度足够；避免模糊的层叠 |
| **共同区域** | 用卡片边界（Bento Grid）将相关信息分组 |

### 三层视觉层级模型

1. **主级**（标题、主数字、核心信息）：最大、最高对比、最多留白环绕
2. **次级**（支撑数据、小标题）：中等大小、中等对比
3. **三级**（来源引用、脚注、标签）：最小、最低对比、50-70% 透明度

**每页最多 3 个层级，不能更多。**

### 三秒测试（每页生成后必须通过）

1. 假装盖住页面，只看 3 秒
2. 第一眼看到什么？第二眼呢？第三眼呢？
3. 如果顺序与预期层级不符 → 重新设计
4. 如果找不到核心信息 → 降低内容密度

---

## 七、三阶段生成（必须遵守）

### 阶段 A：分析与结构大纲（硬停止 — 必须等用户确认）

**不允许跳过此步骤直接写 HTML。**

收到内容后，完成以下输出：

**1. 蓝图摘要（Markdown 格式展示给用户）：**

```
蓝图：
- 受众：{谁会看}
- 目标：{演示要达到的效果}
- 框架：{金字塔原理 / SCQA / PAS / 英雄之旅}
- 叙事弧：{铺垫页 N 页 → 张力页 N 页 → 消解页 N 页}
- 场景：{report-exec / proposal-client / ...}
- 风格：{stage-keynote / editorial-fintech / ...}
- 主题：{ink-dark / report-light / ...}
- 总页数：{N 页}

逐页结构：
| # | 类型 | 标题（结论句） | 核心表达 | 密度 | 视觉策略 | 布局提示 |
|---|------|---------------|---------|------|---------|---------|
| 1 | cover | ... | ... | low | 主视觉+大标题 | single_focus |
| 2 | problem | ... | ... | medium | 双栏对比 | two_column |
| ... |
```

**2. 结构化大纲文件（写入 `openspec/changes/<run_id>/outline.json`）：**

```json
{
  "title": "演示标题",
  "subtitle": "可选副标题",
  "total_pages": 12,
  "approved": false,
  "framework": "pyramid|scqa|pas|hero_journey",
  "style": "enterprise-report",
  "theme": "report-light",
  "cover": {
    "title": "主标题",
    "subtitle": "副标题或口号",
    "author": "演讲者（如已知）",
    "date": "日期（如已知）"
  },
  "table_of_contents": {
    "sections": ["第一部分标题", "第二部分标题"]
  },
  "parts": [
    {
      "title": "第一部分：标题",
      "key_message": "这一节的唯一核心结论",
      "pages": [
        {
          "index": 3,
          "title": "页面结论句标题",
          "type": "content|data|comparison|process|quote|image|timeline",
          "layout_hint": "single_focus|two_column|three_column|hero_grid|mixed_grid",
          "key_points": ["要点1", "要点2", "要点3"],
          "transition_cue": "这页与下页的逻辑连接",
          "notes": {
            "talking_points": ["演讲者应口头说的要点1", "要点2"],
            "transition_line": "介绍完X，让我们来看Y……",
            "timing_seconds": 120
          }
        }
      ]
    }
  ],
  "end_page": {
    "type": "thank_you|call_to_action|contact|q_and_a",
    "title": "谢谢",
    "content": "联系方式或行动号召"
  }
}
```

**`approved` 字段规则**：生成的大纲必须设置 `"approved": false`。用户确认后才将其改为 `true`，然后进入阶段 B。

**3. 向用户展示蓝图摘要，明确询问：**
- 页数是否合适？
- 框架选择是否正确？
- 风格/主题是否符合预期？
- 是否需要调整任何页面？

**收到确认后**，将 `outline.json` 中的 `approved` 改为 `true`，进入阶段 B。

---

### 阶段 B：按大纲渲染 HTML（严格执行）

严格按照 `outline.json` 的页面类型、布局提示和密度渲染，不自由发挥。

**逐页生成时写入 `openspec/changes/<run_id>/slide-status.json`：**

```json
{
  "total": 12,
  "completed": 0,
  "slides": [
    { "index": 1, "status": "pending|rendering|done|error", "title": "封面" },
    { "index": 2, "status": "pending", "title": "..." }
  ]
}
```

每页完成后更新对应 `status` 为 `"done"`，支持中断恢复（`--resume` 模式下跳过已完成的页面）。

---

### 阶段 C：质量审查与交付（硬停止 — 输出前必须通过）

生成 HTML 后，对每一页执行质量评分：

**评分维度（满分 10 分）：**

| 维度 | 权重 | 评分标准 |
|------|------|---------|
| 布局平衡 | 30% | 视觉重心分布合理，无明显空洞或拥挤区 |
| 可读性 | 30% | 字号层级清晰，对比度足够，3秒能找到核心信息 |
| 信息密度 | 20% | 每页信息块不超过5个，无冗余内容 |
| 叙事一致性 | 20% | 与框架和叙事弧吻合，标题为结论句 |

**质量门控规则：**
- 加权总分 ≥ 7.0 → 直接交付
- 5.0 - 6.9 → 最多 **2 轮**自动优化后重新评分
- 3.0 - 4.9 → 最多 **1 轮**大幅调整后重新评分
- < 3.0 → **完全重新思考该页**，不做补丁式修复

评分低于 6.0 的页面必须修复，不允许带着低分页交付。

---

## 八、页面类型系统（17 种）

每种类型有明确的版式规则，禁止混用或退化为通用布局。

### 封面与导航
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `cover` | 演示封面 | 大标题+副标题+主视觉/抽象图形，强调首屏舞台感，不堆信息 |
| `agenda` | 目录导航 | 简洁编号列表，不用花哨图形 |
| `section-divider` | 章节分隔 | 大字居中+章节编号，留白为主 |

### 论述与洞察
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `thesis` | 核心论点 | 大标题+一句话结论+2-3支撑块，中心聚焦 |
| `problem` | 问题陈述 | 左侧问题，右侧影响/症状/代价，双栏或问题矩阵 |
| `insight` | 关键洞察 | 大数字/大结论居中+解释性子块 |
| `quote` | 引用金句 | 居中大字+来源 |

### 方案与展示
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `solution` | 解决方案 | 上方主张+下面3-4能力块，模块式布局 |
| `feature-grid` | 功能矩阵 | **必须 Bento Grid**，英雄单元承载核心能力 |
| `architecture` | 技术架构 | **必须**有结构图/分层图/数据流图，禁止纯项目符号 |
| `case-study` | 案例展示 | 场景描述+结果数据+可选配图 |

### 数据与对比
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `metrics` | 数据展示 | **必须 Bento Grid**，1个主数字突出+2-4次级指标陪衬，禁止多数字同权 |
| `comparison` | 对比分析 | 左右对照+视觉对立，不同色系强调差异，维度必须对齐 |

### 流程与路线
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `process` | 步骤流程 | 3-6步水平排列，超6步分阶段 |
| `timeline` | 时间轴 | 按时间铺开，强调阶段目标和关键动作 |
| `roadmap` | 路线规划 | 阶段+里程碑+时间标注 |

### 收尾
| 类型 | 用途 | 版式要点 |
|------|------|---------|
| `summary` | 总结回顾 | 回顾3个结论即可，**不做成营销海报** |
| `closing` | 结束页 | 感谢/联系方式/下一步，简洁收尾 |

---

## 九、内容压缩规则（成败关键）

### 标题
- 必须用结论句，不用空洞章节名（❌"项目背景" → ✅"传统流程导致30%效率浪费"）
- 8-20个汉字为佳
- 优先对比式、判断式、结果式

### 正文
- 每页最多 1 个主结论 + 3-5 个支撑点
- 每个支撑点压缩为 1 行
- 连续长段必须拆为短句或分组卡片
- 一页超过 120 个汉字 → 优先拆页

### 数据
- 数据页必须突出 1 个主数字，次要数据做陪衬
- 禁止多个数字同权竞争视觉焦点
- 能图形化就不纯文字罗列

### 对比
- 左右两侧维度必须对齐，项数尽量一致

### 流程
- 3-6 步最佳，超过 6 步分阶段或做时间轴

---

## 十、视觉语言规则

### 1. 节奏变化
禁止每一页都用"标题+横线+光晕球+卡片"。不同页面类型必须形成视觉节奏变化。

### 2. 单一焦点
每页只能有 1 个主视觉焦点（一个大数字 / 一张主图 / 一组对比结构 / 一个中心标题），不允许多焦点竞争。

### 3. 留白优先
重要页面宁可少字也不挤满。视觉上的"贵"来自留白与秩序。

### 4. 图标规则
统一使用线性 SVG 图标，线宽/圆角/尺寸必须一致，禁止 emoji。
```html
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <!-- path data -->
</svg>
```

### 5. 图像使用规则
**不是每页都配图。** 只有这些场景用图：
- 封面主视觉
- 概念场景页
- 案例展示页

架构、流程、数据、总结页 → 优先用内联 SVG 图表/结构图，不用 AI 配图。

### 6. 视觉密度规则（防稀疏 — 核心要求）

**稀疏是失败，密度是专业感的来源。**

- 每页必须有主焦点区域占据 40%+ 面积（大数字 / 主图 / 结论卡 / 图表），禁止全页均等分布
- **严禁所有卡片等高等宽** — 必须通过单元格尺寸差异建立视觉权重（大 2×、中 1×、小 0.6×）
- 内容偏少时 → 加大字号、增加装饰几何元素、强化留白感，**不是缩小字号填满**
- 文字下方必须有可见的视觉支撑元素（数据 / 图表 / 图标 / 色块），禁止纯文字堆砌成页
- 深色主题必须有发光辉光或色彩对比，禁止全页灰黑无焦点

### 7. 构图黄金法则

- **非对称布局首选黄金比例（62:38）**，而非随意拆分
- **主视觉锚点**应落在三分法交叉点附近：
  - 水平：x ≈ 533（1/3 of 1600）或 x ≈ 1067（2/3 of 1600）
  - 垂直：y ≈ 300（1/3 of 900）或 y ≈ 600（2/3 of 900）
- 每页的视觉"锚"（主数字/主标题/主图）应在这4个交叉点之一

### 8. Bento Grid 布局规则（视觉质量核心）

`feature-grid`、`metrics`、`solution`、`thesis`、`case-study` 页 **必须** 使用 Bento Grid，禁止等分列布局：

```
Bento 核心原则：
- 12列网格，通过 grid-column: span N 控制单元格宽度
- 英雄单元（span 7, row 2）承载主要信息，必须视觉突出
- 配套单元（span 3-5）承载支撑信息，环绕英雄单元
- 深色主题：单元格使用玻璃态 backdrop-filter: blur(12px) + 边框光效
- 浅色主题：单元格使用精致阴影 + 圆角16px
- 强调单元格（cell-accent）用主题 accent-1 填充，≤ 1个/页
- 每个单元格只承载一个信息点，禁止在单格内塞多组概念
```

**内容自适应尺寸规则：**

| 内容量 | 单元格内调整策略 |
|--------|----------------|
| 单个指标（1数字+标签） | 大数字居中 72-96px，标签置于下方 |
| 短文本（< 30字） | 标准 body 20px，padding 28px |
| 中文本（30-80字） | 缩小 body 至 16px，padding 缩至 20px |
| 长文本（> 80字） | 缩小 body 至 14px，padding 缩至 16px |
| > 5 个要点 | 在单元格内改用双栏 bullet |
| > 8 个要点 | **拆分为两个单元格**，不缩字号 |

**数据页图表选型决策树：**
- 目的是"展示这个数字" → 大数字卡片，不用图表
- 目的是"展示趋势" → 迷你折线图 + 数字
- 目的是"比较项目" → 水平条形图或对比表
- 数据超过 10 条 → 表格卡片，不用图表

完整 Bento Grid CSS 系统见 `references/design-system.md` Bento Grid Engine 章节。

---

## 十一、素材生成策略

### 优先级（从高到低）
1. **内联 SVG 图标/图表/结构图** — 最优先，保持轻量和一致性
2. **CSS 几何与渐变背景** — 纯装饰性视觉
3. **AI 图片生成** — 仅必要时调用

### 只有这些页面考虑 AI 图片
- `cover` — 封面主视觉
- `case-study` — 案例场景图
- `problem` — 需要场景感的页面
- `solution` — 需要概念插图的页面

### 可调用的素材 Skill

| Skill | 用途 | 调用时机 |
|-------|------|----------|
| `baoyu-image-gen` | AI 图片生成 | 封面背景图、概念配图 |
| `baoyu-article-illustrator` | 矢量插画 | 技术示意图、概念可视化 |
| `baoyu-infographic` | 信息图 | 复杂数据可视化 |
| `baoyu-cover-image` | 封面图 | 演示封面大图 |

### 图片 Prompt 规范
```
[主题关键词], [画面内容描述], [风格指令],
aspect ratio 16:9, presentation slide illustration,
color palette: [匹配当前主题的色调描述],
clean, modern, professional, minimal text
```

---

## 十二、HTML 渲染硬约束

### 画布与缩放
- 逻辑尺寸固定 `1600 × 900`
- 使用缩放容器自适应浏览器（transform: scale），不依赖 100vw/100vh
- 内容必须有安全边距（80px 水平，60px 垂直），避免投屏裁切

```css
.deck { position: relative; width: 1600px; height: 900px; overflow: hidden; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
```

### 字体层级
| 用途 | 字号 | 字重 |
|------|------|------|
| 封面标题 | 64-88px | 800 |
| 页面标题 | 34-52px | 700 |
| 副标题/眉标 | 20-28px | 500 |
| 正文 | 18-24px | 400 |
| 标注/脚注 | 12-16px | 400 |
| 主数据 | 72-120px | 800 |
| 次数据 | 36-48px | 700 |

### 行数限制
- 标题最多 2 行
- 说明文字最多 4 行
- 卡片正文最多 5 行
- 超出 → 自动压缩或拆页

### 语义化类名
```
.deck / .slide / .slide-inner
.eyebrow / .slide-title / .slide-subtitle
.metric-primary / .metric-secondary
.panel / .grid / .diagram / .chart
```

### 动画
- 默认轻动效：透明度 + 轻位移（translateY 20px）
- 页面切换不超过 400ms
- 禁止夸张弹跳、旋转、飞入
- 元素依次入场延迟 100ms

---

## 十三、SVG 图表能力

必须内置以下基础 SVG 图表（不依赖外部库）：
- 条形图 / 对比柱图
- 折线趋势图
- 环形占比图
- 阶段进度图

图表要求：
- 少网格线，标注精简
- 主数据高亮，配色与主题一致
- 不伪造过于复杂的 BI 图

---

## 十四、输出前自检清单（生成 HTML 前逐条执行）

1. ☐ 每页是否只有 1 个核心结论
2. ☐ 是否存在文本过密（单页超 120 汉字）
3. ☐ 是否有 2 页以上视觉完全重复
4. ☐ 是否存在不必要的 AI 配图
5. ☐ 是否有 emoji / 花哨按钮 / 网页广告感元素
6. ☐ 主题配色是否全篇统一
7. ☐ 是否有内容溢出画布（1600×900）
8. ☐ 标题是否都是结论句而非空标题
9. ☐ 是否像"演示稿"而非"网页落地页堆叠"
10. ☐ 页面类型是否有节奏变化（铺垫→张力→消解）
11. ☐ 三秒测试：每页核心信息是否 3 秒内可识别
12. ☐ Bento Grid 页面是否有英雄单元（非等分列）
13. ☐ 叙事框架是否贯穿始终，结论是否先行
14. ☐ speaker-notes.md 是否已生成

---

## 十五、完整工作流程

```
1. 理解内容 → 提取核心信息
2. 判断场景与受众 → 选择场景代号
3. 选择叙事框架 → 金字塔 / SCQA / PAS / 英雄之旅
4. 规划叙事弧 → 铺垫/张力/消解比例
5. 选择叙事路径 → 确定页面顺序
6. 选择风格预设 → 确定视觉方向
7. 选择配色主题 → 确定色彩方案
8. 生成 outline.json（approved=false） → 结构化大纲
9. 输出蓝图给用户确认 ← 必须等确认（硬停止 A）
10. 用户确认后 → 设置 approved=true
11. 规划素材 → 哪些页需要图/SVG/图表
12. 生成素材 → 调用 Skill 或绘制内联 SVG
13. 逐页渲染 HTML → 严格按大纲和类型模板，更新 slide-status.json
14. 生成 speaker-notes.md → 从 outline.json notes 字段提取
15. 质量评分 → 对每页执行加权评分（≥7.0 合格）
16. 修复低分页 → 最多 2 轮优化
17. 自检清单 → 14 项逐条校验（硬停止 C）
18. 输出 output/ 目录 → index.html + speaker-notes.md + assets/
```

---

## 十六、输出目录结构

```
openspec/changes/<run_id>/
├── outline.json             ← 结构化大纲（含 approved 字段、notes）
├── outline-preview.md       ← 大纲 Markdown 预览表格
├── slide-status.json        ← 逐页进度（支持 --resume 中断恢复）
└── output/
    ├── index.html           ← 主演示文件（含全部幻灯片）
    ├── speaker-notes.md     ← 演讲者备注（从 outline.json 自动生成）
    └── assets/
        └── images/          ← AI 生成的配图（如有）
```

**speaker-notes.md 格式：**
```markdown
# 演讲者备注

## 第 1 页：{页面标题}
**要点：**
- {talking_point_1}
- {talking_point_2}

**过渡语：** {transition_line}
**预计用时：** {timing_seconds / 60} 分钟

---
```

输出后告知用户：
- 采用了哪种叙事框架和风格主题
- 一共多少页，叙事弧结构
- 哪些页用了 AI 图，哪些页用了 SVG 结构图
- 浏览器打开 index.html 即可演示

---

## 十七、演示控制

HTML 内置三种浏览模式 + 键盘导航：

### 三种浏览模式
| 模式 | 描述 | 快捷键 |
|------|------|--------|
| **Present**（演示） | 全屏幻灯片演示 | `P` |
| **Gallery**（画廊） | 缩略图网格总览 | `G` |
| **Scroll**（滚动） | 纵向连续滚动 | `S` |

### 导航快捷键
| 操作 | 快捷键 |
|------|--------|
| 下一页 | `→` / `Space` / `↓` |
| 上一页 | `←` / `↑` |
| 全屏 | `F` |
| 演讲者备注 | `N` |
| 退出 | `Esc` |

底部进度条 + 右下角页码/总页数。

---

## 十八、禁止事项（红线）

- ❌ 每页都用相同光晕+横线+卡片组合
- ❌ 默认炫酷深色风覆盖所有场景
- ❌ 机械切段后直接铺满页面
- ❌ 空洞章节名做标题（"项目背景""方案介绍"）
- ❌ 一页塞太多原文（超 120 字不拆页）
- ❌ 所有数据做同尺寸卡片
- ❌ 没有结构图的"技术架构页"
- ❌ 过度依赖 AI 配图
- ❌ 把总结页做成营销海报
- ❌ emoji 做主视觉
- ❌ 混用不同主题配色
- ❌ 依赖外部 CDN
- ❌ 输出不完整 HTML
- ❌ 像网页落地页而非演示稿
- ❌ 所有卡片等高等宽（Bento Grid 场景下的视觉平庸）
- ❌ 内容稀疏时缩小字号填满，而非放大主焦点
- ❌ 深色主题无任何辉光/色彩对比（全灰黑无焦点）
- ❌ 数据/功能/方案页不用 Bento 而用平均等分列
- ❌ 每个卡片里塞超过 1 个信息点
- ❌ 跳过阶段 A 直接渲染 HTML（未经用户确认蓝图）
- ❌ 不生成 speaker-notes.md 就直接交付
- ❌ 叙事框架选择随意，没有逻辑骨骼支撑

---

## 参考文件

- `references/design-system.md` — 完整配色变量、字体、间距、Bento Grid CSS、组件规范
- `references/slide-templates.md` — 17 种页面类型的 HTML 模板