【Skill 创作】html-ppt-slides：把论文、汇报和 Markdown 一键生成可演示的 HTML PPT
1、Skill 简介
- Accumulate-PPTs是这个代码仓库的总称，我希望在这个项目构建一个从各种学习工作和生活中常见的多源数据可视化为方便展示，可以统一管理的HTML格式的PPTs，在本项目中主要介绍当前调通的具备一定的可用性的
html-ppt-slides。
我做的这个 Skill，我在比赛帖子里把它统一命名为 html-ppt-slides。它的核心能力是：把论文 PDF、阅读笔记、Markdown 文档、述职材料等内容，自动整理成一份可以直接在浏览器中打开、翻页和展示的单文件 HTML 幻灯片。
和传统 PPT 工具相比，它更像一个“内容到演示”的自动化工作流：先理解内容，再完成结构规划、页面拆分、视觉排版，最后输出成可离线打开、可分享、可继续迭代的 HTML 幻灯片。它特别适合以下人群：
-
需要频繁做论文精读汇报的学生、研究生和实验室成员
-
想快速产出答辩稿、组会汇报、课程展示的人
-
希望把 Markdown、笔记、草稿快速转成可演示内容的创作者
-
喜欢可版本管理、可复用、可部署的 HTML 方案，而不是反复手调 PPT 的用户
目前主要聚焦于计算机与人工智能相关专业的PDF格式论文转化为html格式的PPT这个场景：
html-paper-slides：偏论文精读、组会汇报
我把它们统一理解为同一条能力主线：用 AI + 模板 + 结构化约束，把“内容”稳定转成“演示文稿”。
2、使用场景
我想做这个 Skill，最直接的原因是：以前做 PPT 时，真正耗时的并不是“写内容”，而是下面这些重复动作：
-
从原始材料里摘重点
-
想每一页该讲什么
-
调整页面结构和视觉层级
-
一遍遍对齐、换色、改字号
-
讲完之后还要整理成可分享版本
尤其是论文汇报场景，痛点会更明显。很多时候一篇论文明明已经读懂了，但要把它讲清楚，还要再经历一轮“重新提炼结构、找图、拆方法、排实验、做封面、做总结”。如果每次都从零开始，不仅慢，而且风格不稳定。
所以我想做一个真正能落地的 Skill，不只是“帮我生成几页页面”，而是尽量把整条链路串起来：
-
对输入材料进行结构化理解
-
按演讲逻辑自动规划分页
-
调用统一的 HTML 幻灯片模板进行排版
-
输出单文件 HTML，浏览器直接播放
-
自动生成封面缩略图，并汇总到展示站点中
这样做出来之后，能明显省掉很多机械动作：
-
不用每次重新搭 PPT 母版
-
不用手动整理每页标题和信息密度
-
不用反复在“内容写作”和“视觉排版”之间切换
-
不用再把最终稿锁死在某个桌面办公软件里
-
可以直接纳入 Git 仓库管理，方便持续迭代和沉淀
我觉得这个 Skill 特别适合真实学习和工作场景，而不是只做 Demo。因为它最终产出的不是一段文字，而是一份真的能讲、能看、能分享的演示稿。
3、创作过程
- 写在前面，我觉得TRAE是想法的放大器，所以Brain First！AI Second！得想想清楚我们做SKILL的需求和已有的可以参考的相关工作，然后再逐一与TRAE协作来实现，Agent负责执行，人类负责构思。
- 这个技能的灵感来自于B站up主[卷卷姐juan](https://space.bilibili.com/229150291)的这篇视频：【手把手教你打造专属HTML SKILL！让AI完全懂你的设计风格】 https://www.bilibili.com/video/BV1HToiBCEwg
- 原始SKILL的仓库在这里：https://github.com/juanjuanjie/html-presentation
- 我在这个HTML SKILL的基础上做了以下几件事：
第一步：先定义这个 Skill 到底要解决什么问题
- 卷卷姐对她的SKILL的定义主要是：
“视频分镜、HTML演示文稿、PPT风格HTML、幻灯片制作、网页幻灯片、演示素材、HTML幻灯片、html做视频分镜、生成HTML演示文稿”
- 而我是想要用这个SKILL来实现PDF论文2PPT：
“论文阅读PPT、HTML演示文稿、PPT风格HTML、幻灯片制作、网页幻灯片、演示素材、HTML幻灯片、生成HTML演示文稿、AI&CS专业组会论文阅读汇报PPT”
第二步：根据自己的要求调整视觉设计：
- 卷卷姐对她的HTML-PPT色系的定义主要是：
| 用途 | 颜色值 | 说明 |
|------|--------|------|
| 主背景色 | `#000000` | 纯黑色 |
| 主文字色 | `#ffffff` | 纯白色 |
| 标题文字色 | `#b98eff` | 紫色 |
| 强调文字色 | `#ffc402` | 黄色 |
| 次要文字色 | `#888888` | 浅灰色 |
- 而我是希望他生成更符合我所在的学校的蓝白渐变的色系：
| 用途 | 颜色值 | 说明 |
|------|--------|------|
| 主背景色 | `#ffffff` | 纯白色 |
| 主文字色 | `#000000` | 纯黑色 |
| 标题文字色 | `#3966A2` | 微深蓝色 |
| 强调文字色 | `#132843` | 深蓝色 |
| 次要文字色 | `#6191D3` | 浅蓝色 |
第三步：根据你所需要制作的PPT的场景去定义Agent的工作流程和大概想要的汇报框架
- 卷卷姐：
1. **理解需求**: 确定演示主题、核心观点、目标受众
2. **内容规划**: 将内容拆分为 8-15 页，每页聚焦单一主题
3. **结构设计**:
- 封面页（标题 + 副标题 + 标签）
- 问题/痛点页
- 核心内容页（2-8 页）
- 案例/演示页
- 总结/结尾页
4. **填充内容**: 根据模板组件填充具体内容
5. **预览调整**: 生成后检查效果并微调
---
| 位置 | 内容 | 页数 |
|------|------|------|
| 前3页 | 封面 + 痛点 + 发现 | 3页 |
| 中间 | 核心观点 + 案例 | 6-10页 |
| 最后 | 总结 + 结尾 | 2页 |
- 而我是：
1. **理解论文**: 理解论文内容，使用`.\skills\html-paper-slides\scripts\pdf_extractor.py`提取透明背景的论文原始图表，按分页规划建议各部分结构提取论文内容形成`论文名.md`文件。
2. **内容规划**: 将内容根据分页规划建议拆分为 13~22 页，每页聚焦单一主题
3. **结构设计**:
- 首页（标题 + 作者 + 作者单位 + 发表期刊）
- 摘要（标题 + 摘要原文）
- 引言（现有研究不足 + 本文主要贡献）
- 相关工作综述（可选）
- 方法
- 实验结果
- 总结与讨论
- 结尾
4. **填充内容**: 根据模板组件填充具体内容
5. **预览调整**: 生成后检查效果并微调
6. **生成缩略图**: 运行 `python .\skills\html-paper-slides\scripts\generate-thumbnails.py` 为新生成的 HTML 幻灯片截取首屏封面，输出到 `assets/thumbnails/`，并自动更新 `slides-manifest.json` 中的 `thumbnail` 字段，使电子书柜首页的卡片能展示真实的幻灯片封面而非默认示意图
---
| 位置 | 内容 | 页数 |
|------|------|------|
| 首页 | 标题 + 作者 + 作者单位 + 发表期刊 | 1页 |
| 摘要 | 标题 + 摘要原文 | 1页 |
| 引言 | 现有研究不足 + 本文主要贡献 | 2页 |
| 相关工作综述（可选） | 则按并列/倒金字塔型叙述逻辑阐述（如有） | 2~3页 |
| 方法 | 主要方法框架图总述 + 关键要点分述 | 3~5页 |
| 实验结果 | 实验设置 + 实验结果（表格+分析） + 消融实验（如有） + 结果可视化（如有） | 3~5页 |
| 总结与讨论 | 实验结论阐述 + 局限（如有） + 未来展望 | 2~3页 |
| 结尾 | 简要结束页面 | 1页 |
第四步：把论文汇报场景做深
在论文场景中，我没有停留在“把摘要变成几页 PPT”，而是继续补了两个能力：
-
pdf_extractor.py：从论文 PDF 中提取原始图表素材 -
generate-thumbnails.py：为生成后的 HTML 幻灯片自动截取首屏缩略图
这样一来，这个 Skill 就不只是“生成 PPT”，而是开始具备内容资产沉淀能力：
-
原始 PDF 可以进入工作流
-
中间提取内容可以变成 Markdown
-
最终产物可以汇总到画廊首页
-
幻灯片封面可以自动展示在导航站点中
第五步：做一个页面把多个HTML格式的论文PPT集中管理起来
- 这个SKILL可以实现了一篇篇的把PDF格式的论文转化为HTML格式的PPT之后，沉淀得越来越多，我们就会希望能有一个网站能把这些HTML-PPT聚合起来，变成一份个人的论文PPT知识库，所以我还与TRAE协同做了以下几件事：
- 构建论文汇聚页面`index.html`，画面风格上使用了Design Prompts - AI-Powered Design Style Explorer
- 将页面部署为Github Pages，方便持续集成
4、使用步骤
论文汇报场景
-
准备好论文 PDF，并放到你的工作区中的`raw`目录下：
-
用 TRAE 打开当前项目仓库
-
直接输入类似下面的指令：
请你使用 html-paper-slides 技能(skills\html-paper-slides\SKILL.md)，
帮我为 [给定你要制作的 PDF 文件路径] 制作一份 HTML 格式的 PPT，
最终文件存放在 paper-slides 目录下。
-
等 Agent 生成 HTML 幻灯片
-
和 TRAE 多次交流，知道得到满意的HTML格式的PPT
-
用git进行管理，把最终的满意的HTML格式的PPT上传到你fork的仓库中
这个 Skill 的一个优点是，生成后的结果不是封死的。你可以继续和 Agent 对话，让它帮你：
-
重写某几页标题
-
调整页面视觉层级
-
增删案例页
-
更换主题色和风格
-
优化总结页、封面页或某个图表说明
这会比传统 PPT 编辑的来回拖拽更高效。
5、效果展示
目前这个项目已经不是空壳，而是已经有多份真实演示稿沉淀下来。它们能直观看到这类 Skill 的实际效果。
项目总览
- 可以通过已经部署的GIthub Pages来查看这个SKILL目前生成的HTML格式的PPT的效果：
- https://luoqianshi.github.io/Accumulate-PPTs/
已有示例缩略图
你可以在仓库里看到多个真实生成结果，例如：
6、Skill 链接
7、总结与思考
这次做 html-ppt-slides，我最大的感受是：AI 真正有价值的地方，不是只替我“写一页内容”，而是帮我把一整段重复、琐碎、又很耗时间的工作流压缩掉。
以前做一份 PPT，经常要在“内容提炼”和“页面排版”之间来回切换；现在这套 Skill 更像是在做一个“内容生产装配线”：
-
原始材料进入仓库
-
Agent 负责理解和拆解
-
模板负责稳定输出
-
脚本负责补齐资产和展示
-
成品可以持续沉淀、复用和分享
我目前最满意的地方有三个：
-
它不是只生成一份页面，而是形成了完整工作流
-
它已经覆盖论文精读这个真实场景
-
它能把生成结果继续纳入仓库和展示页，方便长期积累
后续我还想继续优化这些方向：
-
增加直接阅读PDF格式的英文论文的论文阅读的SKILL，提高Agent有效提取计算机类论文的要点提取能力
-
进一步优化 PDF 图表提取能力
-
尝试补充 HTML 到 PPTX 的进一步转换能力
-
继续增强不同场景下的视觉风格库
-
补充更多可复用的页面组件
如果要用一句话总结这个 Skill，我会这样说：
它不是在替我“做 PPT”，而是在帮我把“从内容到演示”的整条流程做成一个可以反复复用的能力。