夜雨聆风之前写了一篇用html来代替ppt的文章，有读者朋友提出想知道具体的流程。那么这篇文章，我会把我和AI的对话过程展开写出来，并解释每一步的目的
这一步到底在干嘛，为什么这么做，AI 在这里起了什么作用。
如果你想知道，今天到底该怎么用 AI 和现成的 JS 库去做一份“像 PPT 一样的网页演示”，那这篇应该会很有参考价值，欢迎转发提问。先来看一下最终成果吧。
一、起点：先问 AI，有没有现成工具
因为我新安装的Hermes agent，所以就正好从0开始使用Hermes agent来实现全部的制作，当然用openclaw或者claude code或者codex都是可以实现同样效果的。
“请你找一下看看有没有 revealjs 相关的 skill”
revealjs是一个制作类似ppt的js现成库，包含了众多功能。
我没有让 AI 立刻开写，而是先让它检查系统里有没有现成能力。
因为如果已经有现成 skill，那就没必要从零摸索 reveal.js 的结构、模板和最佳实践。
AI 查了一遍之后，给我的结论是：
目前没有直接叫
revealjs/reveal.js的 skill。比较接近的只有powerpoint、popular-web-designs、p5js、excalidraw，但都不是 reveal.js 专用。
这是一个很典型的 AI 使用原则：
先检索已有能力，再决定是否从零开干。
这跟写代码前先看有没有库、做设计前先看有没有模板，本质是一样的。
如果一上来就让 AI“自己想办法”，很多时候其实是在浪费上下文和时间。
二、第二步：我给了一个 skill 链接，让 AI 去装
我自己搜索了clawhub发现了两个相关的skill，然后选择了一个给了 AI 一个链接：
https://clawhub.ai/danielgrobelny/revealjs-presentations
然后我说：
“请你安装一下这个 skill”
Hermes agent先去检查这个 skill，确认它是什么。然后尝试直接安装。比较有意思的是，它第一次安装并没有成功。
日志里的情况大概是：
• hermes skills install <url>失败• 提示无法从该 URL source fetch
正常很多 AI 到这一步就会停下来，然后跟你说：
“安装失败了，你要不要换个链接？”
但这次它没有停。
它继续做了这些动作：
1. 搜索 skill 标识符 2. 打开 ClawHub 页面确认下载入口 3. 直接下载 zip 4. 检查 zip 内部文件 5. 手动解压到本地 skill 目录 6. 再用 skills_list和skill_view反向验证安装是否成功
最后它告诉我：
已安装好，现在可以正常识别这个 skill：
revealjs-presentations
还顺便吐槽了一句：
官方
hermes skills install <url>这次有点掉链子，于是我走了“外科手术”路线——下载 zip 后手动装进目录。
AI 真正有价值的地方，不在于“会不会标准路径”，而在于标准路径失败之后，能不能自己继续想办法。
这和我们平时对“智能”的期待很接近。不是永远一条路走到底，而是当第一条路不通时，它能换路继续做。
三、第三步：我没有让它直接写，而是先让它读 skill 和官方文档
skill 装好之后，我没有马上说“开始做”。
我接着让它：
• 读取这个 skill 的 SKILL.md• 查看模板 assets/template.html• 查看参考文档 references/revealjs-api.md• 再去看 reveal.js 官方网站： • https://revealjs.com/• 以及几个关键子页面
这个过程里，AI 重点抽取了这些内容：
• reveal.js 首页的能力概述 • Auto-Animate • Speaker View • PDF Export • Vertical Slides • Fragments • Code Highlight
然后它把这些信息整理成我后续幻灯片里的骨干内容。
四、第四步：正式开做第一版完整 HTML 幻灯片
前面准备完之后，我终于向AI下了真正的任务：
直接开做一份完整的 reveal.js 幻灯片吧，内容就是向还在使用 PPT 的人介绍 reveal.js 的功能，以及如何使用 AI 来通过 reveal.js 制作幻灯片，同时介绍通过 reveal.js 可以做出什么效果的幻灯片，请你尽可能做的美观一些。
AI 接到这个任务后，直接开始生成一整份 HTML 文件。
它做出来的第一版，已经相当完整，包含：
• 一整套页面结构 • reveal.js 初始化配置 • 自定义 CSS 样式 • 多页内容编排 • fragments、auto-animate、vertical slides、speaker notes、code highlight 等特性 • 页面内的卡片、标题、层次设计
它生成完之后，还主动起了本地预览服务，把 HTML 跑起来，自己又检查了：
• 页面能不能打开 • 控制台有没有报错 • 幻灯片总页数对不对 • 代码页和讲者页是否显示正常
甚至它还对代码字体大小、页脚说明等细节做了一点修正。
五、第五步：我开始像一个真实甲方一样提意见
第一版做出来之后，背景使用了全黑色，不太好看，AI一如既往的在审美方面差了一点，我的反馈是：
内容不错，请你来一个精修视觉的版本，最好背景不用那么科技感，而更像普通企业汇报的那种风格感觉，例如“灵感不下班”这个公司内部的领导汇报 PPT 的效果。
然后我发现可以使用键盘进行翻页，但是没法用鼠标进行翻页，然后我就再对AI提出了修改意见：
还有一个问题，可以让我使用鼠标左键进行下一页的操作么？
AI 接到这轮反馈后，开始做两类修改。
第一类：改视觉方向
它把整体从偏深色、偏科技感的风格，改成了：
• 米白 / 浅暖灰背景 • 白色卡片 • 更克制的配色 • 深蓝标题 • 暖色点缀 • 整体更像企业内部汇报
也就是从“技术发布会感”，往“领导汇报模板感”那边拉。
第二类：补交互
它还加了点击事件，让：
• 鼠标左键点击空白区域 → 下一页
并且做了保护：
• 链接不受影响 • 按钮不受影响 • 控件区域不受影响
最后它还自己验证了一次，确认点击事件确实会触发 Reveal.next()。
第一版通常不会是终版。还需要多轮对话来进行修改和优化。
六、第六步：我给了参考图，让它按模板重构
到了这一步，可能已经会觉得“差不多了”。
但我想要更进一步。
所以我又给了 AI 一张参考图，并提出了新的要求：
“我希望你可以用类似这样的模板来再重构一版，不要覆盖原版，新建一个，如果需要图片你可以上网搜索或者自己生成，反正用你能用的所有工具来实现。”
这句话里其实包含了非常强的设计指令：
• 不只是改风格 • 而是按模板重新做一版 • 不覆盖原版，保留版本对比 • 素材获取方式不限 • 允许它自由调动工具来完成
这整个过程，我认为是一篇非常完整的“AI 协作案例”。里面既有顺利的地方，也有偏差、修正的地方。
真正让我兴奋的，恰恰不是“AI 一次就全做对了”，而是：
我已经可以把一个模糊的创意，交给 AI 陪我一路打磨成一个真正能运行的作品。
