# Business HTML Ppt

> 生成适合职场汇报的商务风单文件 HTML 演示文稿，适用于工作汇报、业务复盘、项目进展、方案提案、周报月报、OKR 复盘、述职晋升、管理层汇报和客户汇报。当用户想把零散职场材料变成专业 PPT、幻灯片、HTML PPT、浏览器演示文稿、汇报 deck，或需要带目录、演讲备注、商务视觉和键盘翻页的职场演示文稿时使用。

- Skill: `read2017/business-html-ppt` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add read2017/business-html-ppt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/read2017/business-html-ppt/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: read2017 (https://skillmd.com/u/read2017)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/read2017/business-html-ppt

---


# 商务 HTML PPT

## 概述

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

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

## 工作流

1. 当信息缺失时，先补齐汇报上下文：
   - 汇报主题和业务场景
   - 听众是谁，关键决策人是谁
   - 目标页数或汇报时长
   - 已有材料、关键数据、风险点和期望达成的结果

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

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

4. 输出完整单文件 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` 代码块。

本地文件建议命名为：

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

## 质量检查

结束前检查：

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