💡阅读指南

前两节安装了 find-skills 和 skill-vetter,打通了「搜索 → 审计 → 安装」的完整链路。这一节开始实战,用装好的技能做一件具体的事。

3.1 为什么用 HTML 代替 PPT

不否认有些 PPT 高手能把 PPT 做得非常炫酷。但不知道怎么回事,我天生对 PPT、Word 这种东西极度的抵触和厌恶。我宁愿古法编程一个星期,也不愿意做 10 分钟的 PPT。看到 PPT 文件心理上就自动发怵。

HTML 则完全不同。无论可控性还是样式美观,它都远胜过 PPT。而且它本身就是纯文本,不需要依靠私有软件打开,一个浏览器就行。PPT 还得装个超大的 WPS 或者 PowerPoint,我对这种打开密密麻麻按钮的软件天然很反感。

我打心里认为 PPT 这种反人性的东西早就该淘汰了,HTML 才是未来。何况 AI 时代你也不需要自己写 HTML,大把大把的 Skill 可以让你做出好看的、带翻页动画的 HTML 来代替 PPT。全屏模式下根本看不出来是 HTML。

抖音上那些优秀科普博主做的视频底页基本全是 HTML,根本不是 PPT。

生成 HTML 的 Skill 非常多,这里推荐我经常用的:html-ppt,它不依赖任何第三方框架,生成的是纯粹的静态 HTML 文件

3.2 实战

我想做一个实战演示:找一个 YouTube 上的技术分享视频,让 Hermes 把字幕抓下来,整理成中文稿,最后做成一套漂亮的 PPT。整个过程从找素材到出成品,全部用对话完成。

第一步:从 YouTube 抓取字幕

先去 YouTube 找一个你喜欢的技术分享视频。 Hermes 自带抓取 YouTube 字幕的能力,直接把视频链接丢给它就行:

code
> 帮我把这个视频的字幕抓下来:https://www.youtube.com/watch?v=xxxxx

Hermes 会自动提取字幕并保存成文本文件。

💡配套资料

如果你无法抓取字幕,可以使用教材资料包里的字幕材料:

  • profile/claude-code-pro-tips/claude-code-pro-tips.md

第二步:搜索并安装 html-ppt

先让 Hermes 搜一下:

code
> 帮搜索下 html-ppt 这个技能

Hermes 会返回搜索结果,比如:

alt text

第一个是我们需要的。直接让它装上。

code
> 安装第一个

第三步:让 Hermes 给你讲解 Skill 的功能和用法

要了解一个 Skill,最高效的方式不是去看 Skill.md,也不是去看官网说明,而是直接让 Hermes 帮你总结,这是最高效的方式。

帮我总结下这个 Skill 的功能

alt text

第四步:生成主题演示,看看所有风格

装好之后,先别急着做具体的 PPT。让 Hermes 生成一份主题演示文件,把 36 套主题全部展示一遍:

code
> 帮我生成一份演示文稿,用来展示 html-ppt 的所有 36 套主题
> 每页用不同的主题,让我能一套一套的浏览

打开生成的 HTML,循环切换主题,挑出喜欢的风格。之后做 PPT 时,直接告诉 Hermes 用哪个主题。

💡配套资料

资料包里有两份主题展示文件:

  • profile/html-ppt/主题画廊-36主题一览.html — 36 套主题的缩略图总览
  • profile/html-ppt/theme-showcase.html — 36 页逐页翻阅

第五步:把字幕整理成中文稿

资料包里的 profile/claude-code-pro-tips/claude-code-pro-tips.md 是从视频里直接提取的字幕,带时间戳、英文原文,没法直接用。我需要一份干净的中文稿,后面做 PPT 的时候才有内容可放。

直接跟 Hermes 说:

code
> 帮我把 profile/claude-code-pro-tips/claude-code-pro-tips.md 里的字幕整理成一篇文章
> 去掉时间戳,翻译成中文,按主题分好段落
> 保存到 profile/claude-code-pro-tips/claude-code-pro-tips-zh.md
💡配套资料

资料包里已整理好中文版:

  • profile/claude-code-pro-tips/claude-code-pro-tips-zh.md — 去掉时间戳、翻译好的中文稿

第六步:用 Blueprint 主题生成 PPT

中文稿有了,接下来让 Hermes 用 html-ppt 把它变成一套可读性强的 PPT:

code
> 用 html-ppt 把 profile/claude-code-pro-tips/claude-code-pro-tips-zh.md 做成一份 PPT
> 主题用 Blueprint
> 不要用 emoji,需要图标的地方用 SVG 图标代替
> 字号稍微大一点,整体阅读感要强
💡配套资料

资料包里已生成成品,供参考:

  • profile/claude-code-pro-tips/claude-code-pro-tips.html — 用 Blueprint 主题生成的完整 PPT
alt text

演讲者模式

如果需要上台讲,html-ppt 有一个很实用的功能,叫演讲者模式。按 S 键会弹出一个独立窗口,显示四张卡片:

  • 当前页:像素级预览,观众在看什么你也能看到
  • 下一页:提前知道下一页内容,衔接自然
  • 逐字稿:你写的讲稿,大字号显示
  • 计时器:已讲时间和进度

每张卡片可以拖拽调整位置和大小,位置会保存在浏览器里。

alt text
💡投屏用法

通常,演讲者模式是我看提示,用户看全屏 PPT。 要实现这个功能,需要扩展屏幕,比如,macOS 用扩展屏幕模式,投影屏全屏 PPT,笔记本屏幕看演讲者面板。两个窗口各看各的,跟 PowerPoint 演示者视图一样。

3.3 ■ 学点英语

中文 English 音标 说明
演示文稿 Presentation Deck /ˌprezənˈteɪʃən dek/ 由多页内容组成、用于展示或讲解的材料
幻灯片生成 Slide Generation /slaɪd ˌdʒenəˈreɪʃən/ 把文字材料自动转换成幻灯片的过程
内容摘要 Content Summary /ˈkɑːntent ˈsʌməri/ 把长材料压缩成重点内容的结果
知识提取 Knowledge Extraction /ˈnɑːlɪdʒ ɪkˈstrækʃən/ 从视频、文章或文档中抽取有用知识