read2017 商务 HTML PPT
概述
把零散的职场材料整理成可直接汇报的 HTML 演示文稿。最终产物应是一个完整、独立的 .html 文件，可在浏览器中打开、会议投屏、作为文件转发，或截图给同事预览。
默认效果应接近专业咨询汇报、升学/职业规划报告或公司内部策略汇报：深海军蓝商务风、浅灰页面背景、白色信息卡片、结论先行、层级清楚，并附带实用的隐藏演讲备注。
工作流
当信息缺失时，先补齐汇报上下文：
- 汇报主题和业务场景
- 听众是谁，关键决策人是谁
- 目标页数或汇报时长
- 已有材料、关键数据、风险点和期望达成的结果
先重组材料，再写页面：
- 提炼这次汇报要回答的核心业务问题。
- 写出一句话核心结论。
- 把支撑材料归并为 3-5 个章节。
- 删除重复、低价值或过细的过程性信息。
- 优先采用“结论 -> 证据 -> 影响 -> 动作”，不要机械按时间流水账展开。
默认生成以下页面：
- 封面页
- 目录页
- 核心结论或执行摘要页
- 必要时加入章节分隔页
- 默认 5-12 页内容页
- 风险、决策事项和下一步行动页
- 结束页
- 每页隐藏演讲备注
输出完整单文件 HTML：
- CSS 和 JavaScript 全部内联。
- 使用 16:9 固定画布，页面居中展示，非当前页隐藏。
- 使用固定演示外壳：
deck-shell、全屏顶部 3px 进度条、左上角目录按钮、左侧目录抽屉、左右圆形翻页按钮、左下角键盘提示、右下角页码。 - 支持键盘、左右按钮、鼠标点击和滚轮翻页；左右键/按钮直接翻页并显示整页卡片，上下键/空格逐张展示卡片。
- 每次只展示一页幻灯片。
- 多卡片页面默认逐个 reveal；目录页默认全部显示。
- 不依赖外部资源、构建工具或网络。
默认结构
除非用户场景明显不适合，否则使用这个结构：
- 封面：标题、副标题、汇报人、日期
- 目录：4-6 个章节，并标注对应页码
- 执行摘要：一句话结论 + 3 个关键依据
- 当前状态：背景、事实、基线数据
- 关键进展或关键洞察：发生了什么变化，以及为什么重要
- 证据页：指标、对比、趋势、用户/客户反馈或案例细节
- 问题与风险：优先级、影响、责任人、缓解动作
- 建议方案：选项、收益、成本、风险和推荐路径
- 行动计划：时间线、负责人、里程碑
- 需要决策：希望听众批准、拍板或对齐的事项
- 结束页：标题使用“结论”，给出一句话结论和下一次检查点
如果是周报或月报，减少方案论证页，强化进展、阻塞、下阶段计划和需要支持。
如果是项目复盘，强化目标、结果、根因、经验教训和机制改进。
如果是述职或晋升答辩，强化职责范围、业务影响、证据、领导力表现和下一阶段规划。
商务表达规则
- 页面标题要写结论，不要只写“背景”“分析”“问题”这类空标题。
- 面向忙碌管理者写作：句子短、影响量化、诉求明确。
- 区分事实和判断，不要把主观推测写成事实。
- 尽量使用 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”或解释设计的可见文字。
- 翻页导航是否不依赖外部资源。
- 如果条件允许，打开浏览器或渲染截图，检查布局、溢出和可读性。