在开始做自动化视频之前,你可能已经装了不少 PPT 主题的 Skill。html-ppt 有 36 套主题,歸藏有 9 套,加上其他的 40 多套,总共近百种风格。每次要做 PPT 想选个好看的主题,但 Skill 默认不是可视化的,没法直接阅览。这一节我们做一个主题预览画廊网站,把所有主题集中在一起,点开就能看效果。 这也是一个很好的 Hermes 实战练习。
该视频为课程站点内嵌片段,未收录于本地离线包;如需观看请回到线上课程对应课时。
2.1 近百个主题,怎么挑?
如果你跟着第 5 章装了 PPT 相关的 Skill,你现在大概有这些主题库:
| 技能 | 主题数 | 风格方向 |
|---|---|---|
| HTML PPT Studio | 36 | 从极简白到赛博霓虹,最全面的主题库 |
| 歸藏 PPT | 9 | 杂志风 + 瑞士国际主义 |
| 其他 | 46 | 带口播的视频演示主题 |
| Slidev | 9 | 开发者友好的幻灯片框架 |
| 合计 | 100 |
100 种风格,每次要做 PPT 你得从这里面挑。但你怎么知道「新粗野」长什么样?「毛玻璃」和「极光」哪个更适合你的教学内容?
目前的做法:让 Hermes 用某个主题生成一份 PPT,打开看看效果。不满意,换一个主题再生成一份。来回折腾,一份 PPT 没做出来,先花半小时在选主题上。
我们需要一个画廊:打开网页,一眼看到所有主题的配色、字体、风格,点进去能看它在实际幻灯片上的效果。选定了再动手。
2.2 思路:让 Skill 自己生成
这个画廊的核心思路是:准备一份统一底稿,让每个 Skill 各自生成一遍 PPT,然后集中展示。
为什么不提取配置文件里的颜色变量来拼模拟卡片?因为 Skill 对主题的理解远不止几个 CSS 变量。一个主题的风格由字体、配色、间距、版式共同决定。让 Skill 自己生成 PPT,展示出来的才是真实的渲染效果,这才是你选主题时真正需要看到的东西。
具体流程:
- 把你所有的主题 Skill 集中到同一个目录里(上一节讨论过这个做法)
- 让 Hermes 去这个目录搜索所有和主题风格相关的 Skill
- 准备一份统一底稿(封面 + 数据仪表盘 + 金句页),中英文各一份,所有主题共用同一份内容
- 依次用每个 Skill 根据底稿各自生成预览 PPT
- 把所有生成的 PPT 整合到一个单文件 HTML 画廊网页中
2.3 给 Hermes 的提示词
你可以这样告诉 Hermes:
我的 Skill 都在 ~/my-skills/ 目录下。帮我做一个单文件 HTML 画廊网页,浏览我所有 PPT 主题 Skill 的视觉风格。
要求: - 自动扫描我的 Skill 目录,找到所有和 PPT 主题相关的 Skill - 准备一份统一底稿(封面 + 数据页 + 金句页),中英文各一份 - 让每个 Skill 各自用底稿生成预览 PPT,集中展示在画廊里 - 支持按技能分类筛选,支持 Light/Dark 模式切换 - 点击卡片可以全屏预览幻灯片
就这么简单。把输入(Skill 目录在哪)和目的(做一个能预览所有主题的画廊)说清楚,剩下的让 Hermes 自己发挥。它会自己决定怎么扫描、怎么组织数据、怎么写前端代码。
如果你希望对每个细节都有精确控制,可以参考我们为这个项目写的完整 SPEC 文档:
profile/ppt-theme-gallery/SPEC-PPT主题画廊.md
直接把这个 SPEC 交给 Hermes 执行即可。

这是我本机 Hermes 执行上述 SPEC 文档的效果。
2.4 画廊长什么样
打开网页,你会看到一个卡片网格。每张卡片代表一个主题:
- 卡片上半部分是预览区域,展示该主题生成的 PPT 的实际效果
- 下方是主题名称、所属技能、色调分类(Light / Dark / Bold)
- 顶部有筛选按钮,可以按技能分类查看
点击任意卡片,进入全屏预览模式,展示该 Skill 生成的多页幻灯片(中英文两个版本)。用方向键翻页,ESC 关闭预览返回画廊。
画廊做成单文件 HTML,所有 CSS、JavaScript、数据都内联在里面。双击就能在浏览器中打开,不需要本地服务器,不需要构建工具。放在桌面上,随时双击打开选主题。
这个画廊解决的不是「怎么做视频」的问题,而是「怎么管理你的创作素材」的问题。当你装了大量 Skill、积累了大量主题之后,你需要一个统一的入口来浏览和管理它们。把这个画廊做好,后面讲自动化视频流程的时候,选主题环节直接打开画廊挑,不用再一个个试了。
2.5 ■ 学点英语
| 中文 | English | 音标 | 说明 |
|---|---|---|---|
| 主题画廊 | Theme Gallery | /θiːm ˈɡæləri/ | 集中预览和选择视觉主题的页面 |
| 资源库 | Asset Library | /ˈæset ˈlaɪbreri/ | 集中保存图片、字体、模板等素材的库 |
| 主题预览 | Theme Preview | /θiːm ˈpriːvjuː/ | 提前查看不同视觉主题效果的页面 |
| 视觉令牌 | Design Token | /dɪˈzaɪn ˈtoʊkən/ | 保存颜色、字体、间距等设计值的变量 |