开会前半小时才发现还缺一份路演稿，这种场景最怕两件事：PPT 模板太普通，AI 写出来的页面又像一张网页海报。frontend-slides 解决的是中间这段空档。它不是在线 PPT 工具，而是一个给 Coding Agent 用的 Skill，让 Claude Code、Codex 这类本地代理把内容做成可在浏览器里播放的 HTML 幻灯片。

frontend-slides 到底是什么

frontend-slides 是 zarazhangrui 开源的 AI 幻灯片 Skill。GitHub README 对它的描述很直接：用 Coding Agent 的前端能力，在网页里做漂亮的 slides。它可以从零生成一套演示文稿，也可以把 PPT/PPTX 转成网页幻灯片，保留原来的文字、图片和备注，再给它换成更适合浏览器播放的视觉系统。

它的关键产物不是一个 `.pptx` 文件，而是一个单文件 HTML。CSS 和 JS 内联进去，不需要 npm、不需要打包、不需要框架。你把文件发给别人，对方用浏览器就能打开；需要分享时，可以部署成网页链接；需要静态交付时，也能导出 PDF。

它比普通 AI PPT 生成器多了什么

普通 AI PPT 生成器常把问题简化成“主题进，PPT 出”。frontend-slides 的设计更像一个前端设计流程。它会先判断任务模式：新建演示、转换 PPT、改造已有 HTML 幻灯片。新建时，它会问用途、页数、内容准备程度和信息密度，再生成 3 个视觉预览，让你凭眼睛选方向。

这个“show, don't tell”很实用。很多人说不清自己想要什么风格，但看到 3 张不同标题页时，马上能判断哪张更适合路演、培训、内部汇报或课程讲解。frontend-slides 把这一步写进 Skill，代理不会直接冲去生成全套页面，而是先用预览把审美方向钉住。

核心规则看哪里

它的 SKILL.md 把底层规则写得很细。每套幻灯片都使用固定 16:9 舞台，内部按 1920×1080 设计，再整体缩放到浏览器窗口。手机上也不重新排版，只做等比例适配，避免同一页在不同设备上版式变形。

文档还要求单文件输出、内联 CSS/JS、支持 reduced motion、避免紫色渐变白底这类常见 AI 审美。对读者来说，这些规则比“好看”两个字更重要：它们约束了尺寸、动画、字体、密度和可交付方式，能让代理少走模板化路线。

适合哪些人用

它适合三类人。第一类是要快速做路演、课程、技术分享的人，内容已经有了，只缺设计和动效。第二类是把旧 PPT 改成网页演示的人，想保留原素材，但希望浏览器播放更顺。第三类是经常用 Claude Code、Codex、Cursor 这类代理的人，愿意让代理读文件、写 HTML、打开浏览器验收。

它不太适合只想要传统 PPTX 的场景。比如公司模板被锁死、必须交给 PowerPoint 二次编辑、版式需要严格套品牌母版，这时普通 PPT 工作流会更省心。frontend-slides 的强项是网页原生表达：动效、字体、CSS 图形、浏览器播放、链接分享。

安装和使用入口

在支持 Skills 的代理里，可以用 Skills CLI 从 GitHub 安装：

npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Claude Code 还有插件方式：先添加 marketplace source，再安装 `frontend-slides@frontend-slides`，使用命令是 `/frontend-slides:frontend-slides`。手动安装时，可以把仓库克隆到本地 skills 目录。Codex 这类代理没有同样的斜杠命令时，把仓库链接交给代理，让它从 `SKILL.md` 读起，也能按同一套规则工作。

判断它值不值得试

如果你的目标是“一份能播放、能分享、视觉不土的网页幻灯片”，frontend-slides 很值得试。它把 AI 做幻灯片时最容易失控的几个点都写成规则：先定用途和密度，再看风格预览，选中后生成整套固定舞台 HTML，交付前用浏览器验收。

真正要注意的是素材准备。标题、受众、页数、讲述场景、图片文件越清楚，生成结果越像一份可用演示，而不是一组漂亮页面。把它当成“网页幻灯片设计师 Skill”会更准确；让它替你补全部内容，也能做，但质量会更依赖提示词和后续修改。