hootoolai-ppt

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

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）：

{
  "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": ["第一部分标题", 
  
   
    
       
       
       
        
           
           
           
           
             
           
           
              
             
             
          
        
      
    
  
   
     
     
     
  

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

3. 向用户展示蓝图摘要，明确询问：

• 页数是否合适？
• 框架选择是否正确？
• 风格/主题是否符合预期？
• 是否需要调整任何页面？

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

---

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

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

逐页生成时写入 openspec/changes/<run_id>/slide-status.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。

<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 垂直），避免投屏裁切

.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 格式：

# 演讲者备注

## 第 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 模板