第一次知道 @zarazhangrui 是因为她在 X 上的一篇热帖：

To learn anything, first unlearn school

那篇文章的核心思想是”在干中学”（Learning by doing），类似于费曼学习法，通过输出倒逼输入。她本人也很好地践行了这种理念，一直坚持 Learning in Public，在 X 上分享了很多心得，非常值得学习。

非程序员做出了让工程师点赞的开源项目

最近她发布了一个非常火的开源 Skill frontend-slides，在 GitHub 上获得了非常多的 Star。她本人并不是专业的程序员，但通过 AI 辅助编程（Vibe Coding）做出了一个让大家点赞无数的项目。这在以前是不可思议的——一个非工程师能在 GitHub 上做出让这么多专业工程师点赞的项目，但如今在 AI 时代，Nothing is impossible。

我为什么需要做幻灯片

最近因为要准备一些汇报材料，不得不做一份幻灯片初稿。我个人非常讨厌做 PPT，但在某些汇报场景下又不得不做。去年我尝试过不少工具：

1. 最早像 GPT 或 Claude 的 Artifacts 都可以做单页幻灯片；
2. 后来国内的 Kimi、豆包以及 WPS 也都往这个方向发力；
3. 比较惊艳、产品完成度很高的是 Manus，端到端交付做得非常不错，我曾用它做过幻灯片，整个交付过程和设计的顺畅度都很好，但在免费会员下有一些额度限制；
4. 此外还有 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 更多有利于自己的工具，来满足自己工作场景中的各种需求。

References

• To learn anything, first unlearn school
• frontend-slides - GitHub