商务 HTML PPT

概述

把零散的职场材料整理成可直接汇报的 HTML 演示文稿。最终产物应是一个完整、独立的 .html 文件，可在浏览器中打开、会议投屏、作为文件转发，或截图给同事预览。

默认效果应接近专业咨询汇报、升学/职业规划报告或公司内部策略汇报：深海军蓝商务风、浅灰页面背景、白色信息卡片、结论先行、层级清楚，并附带实用的隐藏演讲备注。

工作流

1. 当信息缺失时，先补齐汇报上下文：

- 汇报主题和业务场景 - 听众是谁，关键决策人是谁 - 目标页数或汇报时长 - 已有材料、关键数据、风险点和期望达成的结果

1. 先重组材料，再写页面：

- 提炼这次汇报要回答的核心业务问题。 - 写出一句话核心结论。 - 把支撑材料归并为 3-5 个章节。 - 删除重复、低价值或过细的过程性信息。 - 优先采用“结论 -> 证据 -> 影响 -> 动作”，不要机械按时间流水账展开。

1. 默认生成以下页面：

- 封面页 - 目录页 - 核心结论或执行摘要页 - 必要时加入章节分隔页 - 默认 5-12 页内容页 - 风险、决策事项和下一步行动页 - 结束页 - 每页隐藏演讲备注

1. 输出完整单文件 HTML：

- CSS 和 JavaScript 全部内联。 - 使用 16:9 固定画布，页面居中展示，非当前页隐藏。 - 使用固定演示外壳：deck-shell、全屏顶部 3px 进度条、左上角目录按钮、左侧目录抽屉、左右圆形翻页按钮、左下角键盘提示、右下角页码。 - 支持键盘、左右按钮、鼠标点击和滚轮翻页；左右键/按钮直接翻页并显示整页卡片，上下键/空格逐张展示卡片。 - 每次只展示一页幻灯片。 - 多卡片页面默认逐个 reveal；目录页默认全部显示。 - 不依赖外部资源、构建工具或网络。

默认结构

除非用户场景明显不适合，否则使用这个结构：

1. 封面：标题、副标题、汇报人、日期
2. 目录：4-6 个章节，并标注对应页码
3. 执行摘要：一句话结论 + 3 个关键依据
4. 当前状态：背景、事实、基线数据
5. 关键进展或关键洞察：发生了什么变化，以及为什么重要
6. 证据页：指标、对比、趋势、用户/客户反馈或案例细节
7. 问题与风险：优先级、影响、责任人、缓解动作
8. 建议方案：选项、收益、成本、风险和推荐路径
9. 行动计划：时间线、负责人、里程碑
10. 需要决策：希望听众批准、拍板或对齐的事项
11. 结束页：标题使用“结论”，给出一句话结论和下一次检查点

如果是周报或月报，减少方案论证页，强化进展、阻塞、下阶段计划和需要支持。

如果是项目复盘，强化目标、结果、根因、经验教训和机制改进。

如果是述职或晋升答辩，强化职责范围、业务影响、证据、领导力表现和下一阶段规划。

商务表达规则

• 页面标题要写结论，不要只写“背景”“分析”“问题”这类空标题。
• 面向忙碌管理者写作：句子短、影响量化、诉求明确。
• 区分事实和判断，不要把主观推测写成事实。
• 尽量使用 MECE 分组。
• 当信息适合结构化展示时，把长段 bullet 改成表格、时间线、指标卡或决策矩阵。
• 中文输入默认输出中文商务表达；英文输入默认输出英文。
• 避免口号化、夸张表达、玩笑、emoji 和泛泛而谈的套话。

HTML 设计规则

生成 HTML 时遵循 references/html-deck-spec.md 中的页面契约和视觉规范。

核心约束：

• 16:9 幻灯片，每个逻辑页面对应一个 section.slide，并包在固定 deck-shell 结构中。
• 必须有目录页，并确保目录章节和左侧目录抽屉一致；页脚只放页码，不显示章节名。
• 顶部进度条固定在视口最上方，高 3px，使用深海军蓝渐变，不要在底部再放进度条。
• 左上角必须有目录按钮，点击后打开全高左侧大纲，支持跳转页面。
• 左右两侧必须有圆形翻页按钮；左下角保留淡化的键盘提示；右下角显示 current / total。
• 视觉采用深海军蓝商务风：浅灰背景 #f5f6fa、主色 #2d3a6e、正文深石墨、白色卡片、克制阴影、12px 卡片圆角。
• 信息密度适合投屏汇报，不要做满屏长文。
• 详细说明文字必须适合投屏阅读，正文说明默认不小于 18px。
• 页面大标题不要设置过窄 max-width；右侧仍有空间时不要提前换行。
• 复用 CSS 类表达卡片、网格、KPI、时间线、图表、标签、提示块和表格。
• 动效保持克制，卡片使用逐步 reveal，切页和卡片出现要有轻量动画。
• 截图单页也应该能看懂这一页在讲什么。

输出格式

当用户需要最终交付物时，优先：

• 在当前工作区写出完整 HTML 文件，并返回文件路径。
• 只有当用户明确要求“直接给我代码”时，才在聊天中输出 fenced html 代码块。

本地文件建议命名为：

html-ppt/<topic-slug>/index.html

质量检查

结束前检查：

• HTML 是否包含封面、目录、核心结论、行动/下一步和结束页。
• 每页是否有明确标题和单一主信息。
• 页面上是否没有“如何使用本 deck”或解释设计的可见文字。
• 翻页导航是否不依赖外部资源。
• 如果条件允许，打开浏览器或渲染截图，检查布局、溢出和可读性。