frontend-slides：用 Claude 前端技能做的幻灯片工具，16K 星有点意思

说实话，AI 时代做 PPT 的工具我见得多了，但用 Claude 的「前端技能」来做幻灯片，这个概念本身就挺新鲜的。frontend-slides 就是这么一个项目，16.4K star 说明不少人觉得它有意思。

这玩意到底干啥的

简单说，它让你用类似 Claude Artifacts 或者 HTML/CSS 的方式来写幻灯片。不用 PowerPoint，不用 Keynote，直接写代码出片子。对程序员来说，这简直是把「写代码」和「做汇报」两件事强行融合了。

项目的核心是：你提供一个主题或者大纲，Claude 生成前端代码（HTML/CSS/JS），然后渲染成漂亮的幻灯片。整个过程在浏览器里完成，也就是说你的幻灯片本质上是一个网页。

几个让我眼前一亮的点

完全代码驱动。 不像传统工具那样拖拖拽拽，这里的每一页都是代码。这意味着版本控制、代码复用、团队协作都变简单了。Git 管理幻灯片，听起来就很极客。

样式自由度高。 因为是网页，所以 CSS 能搞的一切它都能搞。渐变背景、动画过渡、响应式布局，想做多炫酷都行。传统 PPT 工具里需要插件才能实现的效果，这里几行 CSS 就搞定。

Claude 原生集成。 项目名字里就带 frontend，明显是为 Claude 的前端能力设计的。你可以直接把 Claude 生成的 HTML 代码塞进去，稍微调整一下就是一套完整的演示文稿。这个衔接很顺畅。

直接在浏览器演示。 不需要安装任何软件，一个 URL 就能播放。跨设备、跨平台，甚至手机上看都没问题。出差或者临时借别人电脑做汇报，这个优势太大了。

还能导出。 虽然核心是网页，但它支持导出成 PDF 或者图片，方便打印和离线分享。

怎么上手

项目的 README 里有详细说明，基本流程是：

1. 克隆仓库
2. 按照模板写一个 Markdown 或者 JSON 格式的幻灯片结构
3. 让 Claude 生成对应的前端代码
4. 在浏览器里打开预览

git clone https://github.com/zarazhangrui/frontend-slides.git
cd frontend-slides
# 按照 docs 里的模板准备内容
# 然后交给 Claude 生成代码

优缺点都得说

优点：

• 程序员友好，代码即幻灯片
• 样式完全可控，CSS 能力即上限
• 浏览器原生运行，零安装
• 方便版本控制和协作
• 和 Claude 的集成很丝滑

缺点：

• 对非程序员极不友好，门槛很高
• 没有 WYSIWYG 编辑器，改一页可能要改代码
• 排版需要前端知识，小白容易踩坑
• 动画效果要自己写，不像 PPT 那样点两下就出效果
• 目前 Stars 虽高但更新频率一般（上次更新 2026 年 4 月）

跟传统工具比比

工具	上手难度	颜值上限	协作	跨平台	价格
frontend-slides	高	极高	Git	✅	免费
PowerPoint	低	中等	Office 365	✅	付费
Keynote	低	高	iCloud	苹果生态	免费
Google Slides	低	中等	实时协作	✅	免费
Reveal.js	中等	高	Git	✅	免费

它和 Reveal.js 有点像，但多了一个「AI 生成」的维度。如果你已经是 Reveal.js 用户，这个工具可以帮你加速内容生成环节。

适合谁

我觉得两类人最合适：

1. 技术极客——讨厌鼠标拖拽，只想写代码解决问题
2. AI 重度用户——已经在用 Claude 写代码、写文档，想让它顺便把 PPT 也包了

老实说，我虽然觉得概念很酷，但真让我去做一个重要的商务汇报，我可能还是会先考虑 Keynote。毕竟审美这件事，交给代码比交给设计师要费脑子得多。

---

关于作者

柳钉鱼，全栈开发者，GitHub 重度用户。过去 3 年 Star 了 900+ 仓库，这里只写我真正用过或深度调研过的工具。

📧 发现好工具想推荐？发邮件到 [email protected]