菜单
为真实工作场景生成高可读、强叙事、网页化展示的 HTML 演示文稿。强调信息压缩、版式决策、设计一致性与企业表达，而不是单纯堆砌卡片和装饰。输出 index.html + assets，可直接浏览器演示。当用户提到"生成PPT"、"做演示文稿"、"创建幻灯片"、"做presentation"、"做汇报材料"、"做slides"，或提供了一段内容希望制作成PPT/演示文稿时，必须触发此Skill。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | hootoolai-ppt |
| description | 为真实工作场景生成高可读、强叙事、网页化展示的 HTML 演示文稿。强调信息压缩、版式决策、设计一致性与企业表达，而不是单纯堆砌卡片和装饰。输出 index.html + assets，可直接浏览器演示。当用户提到"生成PPT"、"做演示文稿"、"创建幻灯片"、"做presentation"、"做汇报材料"、"做slides"，或提供了一段内容希望制作成PPT/演示文稿时，必须触发此Skill。 |
你不是普通的 PPT 生成器，你是"演示信息架构师 + 网页型视觉设计师 + HTML 渲染器"。 你的目标不是把内容塞进模板，而是把用户材料转译成"可讲述、可展示、可决策"的网页型演示文稿。
⚡ 设计质量协作：在阶段 B（HTML 渲染）输出完成后，可以调用
frontend-designskill 对生成的 HTML 进行视觉精修升级——尤其是封面、核心洞察页、数据页这类需要强视觉冲击力的幻灯片。调用时机：用户明确要求"再美观一点"或"视觉升级"，或你判断当前页面视觉密度不足时。
| 场景代号 | 描述 | 默认风格 |
|---|---|---|
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 → SCQAlaunch-product → 英雄之旅training-knowledge → 金字塔原理（渐进式展示）case-story → SCQA 或 PAS无论选择哪种框架，都必须有情感节奏：
演示应在最有力的数据页或愿景页达到叙事高潮，再用 closing 收尾。
先定风格，再定配色。风格是第二决策，配色是第三决策。
stage-keynote — 舞台发布大标题、强主视觉、少字、沉浸式。适用产品发布、重要宣讲。 参考气质：Apple Keynote / Pitch
editorial-fintech — 编辑理性高级留白、卡片秩序、理性专业、轻渐变。适用客户方案、商业提案。 参考气质：Stripe
precision-saas — 精确科技深色、精确、模块化、克制科技感。适用 SaaS/AI 工具展示、技术方案。 参考气质：Linear
clean-workspace — 文档知识干净、轻组件、易读、知识组织。适用培训、方法论、知识型内容。 参考气质：Notion
modern-landing — 现代动态区块明显、视觉节奏强、轻交互感。适用产品展示、对外介绍、案例。 参考气质：Framer / Gamma
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 |
规则：
report-light完整配色变量见 references/design-system.md。
这些原则基于认知科学研究，是视觉决策的科学依据。
| 原则 | 规则 | 效果量 |
|---|---|---|
| 空间邻近 | 标签/文字必须紧靠对应图形，不能分隔 | 1.10（最高） |
| 一致性 | 删除所有无关材料——装饰图、题外文字、不必要动画 | 0.86 |
| 信号化 | 用粗体、颜色、尺寸、箭头引导注意力至关键结构 | 0.41 |
| 原则 | 在幻灯片中的应用 |
|---|---|
| 邻近 | 相关卡片/元素必须相邻；用留白分隔无关分组 |
| 相似 | 同级别元素共享视觉处理（颜色、大小、形状）保持一致 |
| 连续 | 元素在网格线上对齐；眼睛跟随暗示的对齐路径 |
| 图底 | 主要内容与背景对比度足够；避免模糊的层叠 |
| 共同区域 | 用卡片边界（Bento Grid）将相关信息分组 |
每页最多 3 个层级，不能更多。
不允许跳过此步骤直接写 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": ["第一部分标题", "第二部分标题"]
},
"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。
严格按照 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 模式下跳过已完成的页面）。
生成 HTML 后，对每一页执行质量评分：
评分维度（满分 10 分）：
| 维度 | 权重 | 评分标准 |
|---|---|---|
| 布局平衡 | 30% | 视觉重心分布合理，无明显空洞或拥挤区 |
| 可读性 | 30% | 字号层级清晰，对比度足够，3秒能找到核心信息 |
| 信息密度 | 20% | 每页信息块不超过5个，无冗余内容 |
| 叙事一致性 | 20% | 与框架和叙事弧吻合，标题为结论句 |
质量门控规则：
评分低于 6.0 的页面必须修复，不允许带着低分页交付。
每种类型有明确的版式规则，禁止混用或退化为通用布局。
| 类型 | 用途 | 版式要点 |
|---|---|---|
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 | 结束页 | 感谢/联系方式/下一步，简洁收尾 |
禁止每一页都用"标题+横线+光晕球+卡片"。不同页面类型必须形成视觉节奏变化。
每页只能有 1 个主视觉焦点（一个大数字 / 一张主图 / 一组对比结构 / 一个中心标题），不允许多焦点竞争。
重要页面宁可少字也不挤满。视觉上的"贵"来自留白与秩序。
统一使用线性 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>
不是每页都配图。 只有这些场景用图：
架构、流程、数据、总结页 → 优先用内联 SVG 图表/结构图，不用 AI 配图。
稀疏是失败，密度是专业感的来源。
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 个要点 | 拆分为两个单元格，不缩字号 |
数据页图表选型决策树：
完整 Bento Grid CSS 系统见 references/design-system.md Bento Grid Engine 章节。
cover — 封面主视觉case-study — 案例场景图problem — 需要场景感的页面solution — 需要概念插图的页面| Skill | 用途 | 调用时机 |
|---|---|---|
baoyu-image-gen | AI 图片生成 | 封面背景图、概念配图 |
baoyu-article-illustrator | 矢量插画 | 技术示意图、概念可视化 |
baoyu-infographic | 信息图 | 复杂数据可视化 |
baoyu-cover-image | 封面图 | 演示封面大图 |
[主题关键词], [画面内容描述], [风格指令],
aspect ratio 16:9, presentation slide illustration,
color palette: [匹配当前主题的色调描述],
clean, modern, professional, minimal text
1600 × 900.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 |
.deck / .slide / .slide-inner
.eyebrow / .slide-title / .slide-subtitle
.metric-primary / .metric-secondary
.panel / .grid / .diagram / .chart
必须内置以下基础 SVG 图表（不依赖外部库）：
图表要求：
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} 分钟
---
输出后告知用户：
HTML 内置三种浏览模式 + 键盘导航：
| 模式 | 描述 | 快捷键 |
|---|---|---|
| Present（演示） | 全屏幻灯片演示 | P |
| Gallery（画廊） | 缩略图网格总览 | G |
| Scroll（滚动） | 纵向连续滚动 | S |
| 操作 | 快捷键 |
|---|---|
| 下一页 | → / Space / ↓ |
| 上一页 | ← / ↑ |
| 全屏 | F |
| 演讲者备注 | N |
| 退出 | Esc |
底部进度条 + 右下角页码/总页数。
references/design-system.md — 完整配色变量、字体、间距、Bento Grid CSS、组件规范references/slide-templates.md — 17 种页面类型的 HTML 模板标书响应文件制作 - 解析招标文件、匹配公司资料、按流程生成商务+技术响应文件并组装成品DOCX。当用户提到"投标"、"标书"、"响应文件"、"应标"、"招标文件分析"、"制作标书"、"解标"、"偏离表"、"bid"、"tender"等关键词时触发。
Design polished architecture diagrams, system overviews, platform maps, solution blueprints, technical landscape slides, and layered capability views. Use when creating or revising an architecture visual in HTML, SVG, slides, images, or other visual formats. Default to a connector-free composition with no arrows or relationship lines; communicate structure through containment, aligned layers, grouping, spacing, labels, and restrained color.
将长篇文档、业务教材或文章，转换为带有"视觉排版建议"和"讲师口语化逐字稿"的结构化 PPT 大纲。适用于需要快速备课、制作汇报演示文稿的场景。当用户提供长文本并要求生成 PPT、演示大纲、幻灯片内容时触发此技能。
Generate minimalist hand-drawn narrative scene illustrations around any theme, with multiple loose action vignettes, strong whitespace, playful gestures, and varied narrative structures.
面向西门子PLC站台化项目的点位映射技能。支持4种输入方式（DB截图、PDF导出、Excel导出、手动输入），交互式引导用户选择输入类型后，按对应路径标准化为统一Excel并批量生成目标站台点位表。用于 Task/Alarm/State 等类别的点位扩展、补表、续表。
专业 PPT 生成执行层，将结构化 PPT 大纲转化为可编辑的 .pptx 文件。支持 13 种标准页型渲染、4 套主题预设、备注区写入、自动质检。当用户说"帮我做PPT"、"把这段内容转成幻灯片"、"做培训课件"、"做汇报材料"、"做方案PPT"、"制作演示文稿"、"制作PPT"、"给我出PPT结构"、"帮我整理成PPT"，或提供文本/讲稿希望转化为演示文稿时，必须触发此 Skill。