用 AI 做幻灯片：frontend-slides Skill 使用体验
第一次知道 @zarazhangrui 是因为她在 X 上的一篇热帖：
那篇文章的核心思想是”在干中学”（Learning by doing），类似于费曼学习法，通过输出倒逼输入。她本人也很好地践行了这种理念，一直坚持 Learning in Public，在 X 上分享了很多心得，非常值得学习。
非程序员做出了让工程师点赞的开源项目
最近她发布了一个非常火的开源 Skill frontend-slides，在 GitHub 上获得了非常多的 Star。她本人并不是专业的程序员，但通过 AI 辅助编程（Vibe Coding）做出了一个让大家点赞无数的项目。这在以前是不可思议的——一个非工程师能在 GitHub 上做出让这么多专业工程师点赞的项目，但如今在 AI 时代，Nothing is impossible。
我为什么需要做幻灯片
最近因为要准备一些汇报材料，不得不做一份幻灯片初稿。我个人非常讨厌做 PPT，但在某些汇报场景下又不得不做。去年我尝试过不少工具：
- 最早像 GPT 或 Claude 的 Artifacts 都可以做单页幻灯片；
- 后来国内的 Kimi、豆包以及 WPS 也都往这个方向发力；
- 比较惊艳、产品完成度很高的是 Manus，端到端交付做得非常不错，我曾用它做过幻灯片，整个交付过程和设计的顺畅度都很好，但在免费会员下有一些额度限制；
- 此外还有 Google 的 NotebookLM，也可以做出很好看的 PPT。
Google NotebookLM 和 Manus 都是不错的产品，但对于这种低频场景，为此付费有时候会觉得划不来。
快速尝试，完成了 90%
正好在 X 上刷到了 @zarazhangrui 的 frontend-slides Skill，就尝试用了一下。这次场景比较简单轻量，快速做了一个幻灯片，总体感觉非常不错——本来很焦虑的事情，一下子就完成了 90%。
Skill 的工作流程
这个 Skill 可以通过 Claude Code 快速安装。我对它做了一个拆解，整体分为六个阶段：
flowchart LR
A[Phase 0\n检测模式] --> B[Phase 1\n内容收集]
B --> C[Phase 2\n风格选择]
C --> D[Phase 3\n生成幻灯片]
D --> E[Phase 5\n交付预览]
E --> F{分享或导出？}
F --> G[Phase 6A\n部署到 Vercel]
F --> H[Phase 6B\n导出 PDF]
F --> I[Phase 6C\n导出 PPT]
classDef phase0 fill:#6366f1,stroke:#4338ca,color:#fff
classDef phase1 fill:#0ea5e9,stroke:#0284c7,color:#fff
classDef phase2 fill:#10b981,stroke:#059669,color:#fff
classDef phase3 fill:#f59e0b,stroke:#d97706,color:#fff
classDef phase5 fill:#f97316,stroke:#ea580c,color:#fff
classDef decision fill:#e879f9,stroke:#c026d3,color:#fff
classDef export fill:#64748b,stroke:#475569,color:#fff
class A phase0
class B phase1
class C phase2
class D phase3
class E phase5
class F decision
class G,H,I export各阶段简要说明：
- Phase 0 检测模式：判断是新建幻灯片、转换已有 PPT 文件，还是优化现有 HTML；
- Phase 1 内容收集：利用 Claude Code 的
AskUserQuestion工具，一次性问清楚用途、页数、内容是否准备好、是否需要浏览器内编辑，避免来回打断； - Phase 2 风格选择：不让你描述风格，而是直接生成 3 个真实单页预览让你挑选，所见即所得；
- Phase 3 生成幻灯片：输出单文件 HTML，所有 CSS/JS 内联，零依赖，每张幻灯片严格适配视口不滚动；
- Phase 5 交付预览：自动在浏览器中打开，告知快捷键操作方式；
- Phase 6 分享导出：支持部署到 Vercel 生成可分享链接、导出 PDF 或导出 PPT 三种方式。
交付产物是一个单文件 HTML，实现了幻灯片的轮播效果。最让我惊喜的功能：
- 交互式完善：继续跟 Claude Code 对话，就能把内容完善成图文并茂的幻灯片；
- 浏览器直接编辑：支持在浏览器中直接修改文字并保存到 HTML；
- 多格式导出：最后可以导出为 PDF 或 PPT 格式。
导出功能有些小坑
用下来，导出成 PPT 和 PDF 并不是很好用：
- PDF 导出：导出时会启动一个 Playwright，由于浏览器尺寸和 HTML 源码的问题，导致字体大小和尺寸与 HTML 预览时并不完全一致；
- PPTX 文件：通过内置脚本生成导出，风格也不太一致。
推荐用法：HTML + Chrome 全屏
我比较推荐在许多场景下，直接使用 HTML 单文件格式，用 Chrome 浏览器打开并开启全屏，利用方向键和空格等快捷键进行轮播切换，基本上就是一个幻灯片演示模式。大部分场景下，这种交互方式已经足够用了。
总结
这个 Skill 非常推荐大家去尝试。在某些不得不做幻灯片来更好地呈现和表达的场合，它是一个能帮你快速节省时间的好工具。
也可以借鉴它的思路去改造自己的 Skill。更希望大家能从中学习到一种产品思维——利用 AI 去 build 更多有利于自己的工具，来满足自己工作场景中的各种需求。