一份学术汇报真正困难的部分，不是“生成几十页”，而是保证内容准确、模板统一、图片清晰，并且每一页都没有文字重叠和裁切。
最近，我根据三份台风分析报告、七张天气图和一套PPT 模板，制作了一份 41 页的 HTML 学术汇报。
生成初稿并不难。真正耗时的是后面的细节：章节页标题没有居中、英文副标题与正文重叠、图片路径失效、内容容器越过页脚、手机上出现黑边，以及动画尚未完成时截图显示空白。
这些问题具有很强的重复性。因此，我把整个流程整理成了一个可以直接复用的 Codex Skill：academic-html-ppt。
项目地址：
https://github.com/0183ty2512/academic-html-ppt
一、这个 Skill 解决什么问题
academic-html-ppt 用于把研究报告、课程作业、论文材料、图片和院校 PPT 模板转换成可以在浏览器中演示的 HTML PPT。
它适合以下场景：
-
- 课程汇报与天气过程个例分析；
-
- 论文答辩、开题报告和组会汇报；
-
- 包含大量天气图、实验图或技术图表的研究演示；
-
- 需要复用学校、实验室或机构模板的汇报；
-
- 已有 HTML 幻灯片，但存在重叠、裁切或图片失效问题；
-
- 需要生成后逐页检查，而不是只交付一份未经验证的代码。
-
它不是简单的“PPT 排版提示词”，而是一套从材料整理到浏览器验收的完整工作流。
二、它包含哪些能力
1. 从材料包中识别真正的约束
Skill 会先检查目录中的：
-
- Markdown、Word 或文本报告；
-
- 制作要求和提示词；
-
- 图片、天气图和路径图；
-
- 现有 HTML 草稿；
-
- 学校或机构提供的
.pptx 模板。 -
它要求先读制作提示词，再处理内容。页数、章节结构、图片使用比例、术语和模板风格都被视为硬约束。
如果不同报告中的数据不一致，优先使用依据更充分的版本，并保留“约”“可能”“显著”等不确定性表达，避免为了让幻灯片看起来完整而编造精确数字。
2. 复用院校模板的视觉系统
当材料中包含 PPTX 模板时，Skill 会识别并保留：
-
- 主色与辅助色；
-
- 页眉、页脚和校训；
-
- 中文与英文字体风格；
-
- 封面、目录、章节页和图文页布局；
-
- 校徽及其他真实模板资产。
-
PPTX 本质上是一个压缩包，内部的 ppt/media/ 保存了图片资源。但文件名通常只是 image1.png、image7.png，所以不能只凭名称判断哪张是校徽，必须实际查看后再使用。
3. 生成固定 16:9 的 HTML 幻灯片
每一页都在 1920×1080 的固定画布上制作，然后整体缩放到浏览器窗口。
这样做有三个好处：
-
- 电脑、投影仪和手机看到的是同一套版式；
-
- 页面不会因为窗口变窄而重新排列；
-
- 可以精确检查标题、图片、正文和页脚的位置关系。
-
生成的 HTML 支持：
-
- 方向键、空格和翻页按钮；
-
- 鼠标滚轮和触屏滑动；
-
- 页面计数；
-
E 键进入文字编辑模式；-
Ctrl+S 保存编辑后的 HTML 副本；-
- 减少动画模式与打印输出。
-
4. 针对学术页面的专门规则
这个 Skill 固化了几条容易被忽略的排版规则。
章节分页必须是真正的 Flex 布局：
.chapter-slide {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
只写 justify-content: center 并不会自动居中。如果容器没有 display:flex，标题仍会停留在页面顶部。
页眉中的中文标题和英文副标题必须设置明确行高，并且英文副标题与正文之间至少保留 24px 的画布间距。
图片分析页必须同时包含：
-
- 清晰的原图；
-
- 简短图题；
-
- 图中关键系统的解释；
-
- 本页需要观众记住的结论。
-
三、如何安装
方法一：使用 Git 克隆
在 PowerShell 中运行：
git clone https://github.com/0183ty2512/academic-html-ppt.git "$HOME\.codex\skills\academic-html-ppt"
重新打开 Codex 后，即可在技能列表中看到 academic-html-ppt。
方法二：手动下载
打开 GitHub 项目页面，下载 ZIP 文件并解压到：
~/.codex/skills/academic-html-ppt/
目录中应直接包含 SKILL.md，不要额外嵌套一层同名文件夹。
四、如何调用
最简单的方式是在任务中明确写出技能名：
使用 $academic-html-ppt，读取“台风分析”目录中的报告、图片、
提示词和中国海洋大学 PPTX 模板，生成一份不少于 30 页的
学术 HTML PPT，并逐页检查图片、文字溢出和页脚重叠。
如果是修改已有文件，可以这样写：
使用 $academic-html-ppt，检查 existing-deck.html。
修复章节页不居中、英文副标题与正文重叠、图片失效和内容裁切，
保持原有院校模板风格不变。
建议把材料整理为一个目录：
课题名称/
├── 制作提示词.md
├── 分析报告.md
├── 学校模板.pptx
├── existing-deck.html
└── images/
├── figure-01.png
├── figure-02.jpg
└── track-map.jpg
材料组织得越清楚，生成结果越稳定。
五、如何检查生成结果
仓库中附带了一个静态审计脚本：
python scripts/audit_html.py "path/to/deck.html"
它会检查：
-
- 是否存在 1920×1080 固定画布；
-
- 是否只有一个初始活动页面；
-
- 本地图片路径是否存在；
-
- 是否包含键盘导航和编辑功能；
-
- 章节页是否设置了 Flex 居中；
-
- 是否错误地使用
display:none 切换页面。 -
静态检查通过后，还需要在浏览器中逐页验证：
-
- 图片是否全部加载；
-
- 正文是否超出内容容器；
-
- 内容是否压住页脚；
-
- 英文副标题是否与正文相交；
-
- 章节标题是否真正位于页面中心；
-
- 动画、翻页、编辑和保存是否正常；
-
- 在 1280×720 和窄屏窗口下是否仍保持完整画布。
-
手机上出现上下黑边并不一定是错误。固定 16:9 演示为了保持版式，会采用等比例缩放和留黑边，而不是把内容重新排版。
六、这套方法的意义
AI 可以很快生成几十页内容，但“生成完成”不等于“可以汇报”。
一个真正可用的学术演示还需要：
-
- 数据和术语有依据；
-
- 图件与结论对应；
-
- 学校模板得到一致复用；
-
- 每一页文字都能读清；
-
- 所有图片都能正常加载；
-
- 浏览器中的实际效果经过检查。
-
Skill 的价值，就是把这些容易遗漏的步骤变成默认流程。
如果你也需要把报告、图片和学校模板转换成可编辑、可演示、可验收的 HTML PPT，可以从这里开始：
https://github.com/0183ty2512/academic-html-ppt
