用文字直接生成一份 HTML 动画演示文稿 PPT，GitHub 19K 收藏，这个 AI 工具让我彻底换了路子

它是 GitHub 上一个 17100 star 的工具，定位是：用 AI 把文字描述或旧 PPT 文件，直接生成一份零依赖的单文件 HTML 动画演示文稿。不需要 Canva，不需要 MasterGo，不需要在模板里抠颜色。只需要告诉 AI 你要讲什么，剩下的它来。

最终的演示文稿我在当天六点发给了领导。他回了一句：「这个风格挺好，不像以前那种模板的感觉。」

下面把完整的过程讲给你。

先搞清楚它是什么，解决什么问题

frontend-slides 是一个 Claude Code 技能（skill），不过原作者不太积极，很多 bug 都没修复，码哥 fork 了一个版本并修复了问题，建议使用修复后的，不然许多坑。https://github.com/MageByte-Zero/frontend-slides

也就是说，它不是一个独立的网站或 App，而是安装在 Claude Code 里、通过对话驱动的工具。

你跟它说：「帮我做一个关于 Q2 销售复盘的演示，五页，风格现代一点。」它就会生成一个完整的 HTML 文件，里面包含了所有动画、排版、配色——打开浏览器就能全屏放映，不需要安装任何额外软件。

你也可以把一份旧的 PPTX 文件扔给它，它能把文字、图片和备注全部提取出来，再按你选的风格重新排版成 HTML。

和普通 PPT 模板相比，它的核心差异是三点：

第一，零依赖，单文件。生成的 HTML 文件里内联了所有样式和脚本，复制给任何人，用任何浏览器打开都一模一样，不会出现字体丢失、图片找不到的问题。

第二，12 种精心设计的风格，覆盖了深色系（Bold Signal、Electric Studio、Dark Botanical）、浅色系（Notebook Tabs、Vintage Editorial）和特殊风格（Neon Cyber、Swiss Modern），每一种都明确拒绝了「AI 生成的那种大众模板感」。

第三，从旧 PPT 到新演示的完整闭环。你已有的内容不用白费，PPT 里的文字和图片都可以继承过来，只是换了一套更高端的视觉呈现。

用之前 vs 用之后：

用AI工具前后对比，3小时VS20分钟

图：同样的汇报内容，用模板 vs 用 frontend-slides 的时间和视觉效果对比

安装：只需要做一次的准备

在开始之前，你的电脑需要准备好两件东西：

第一：Claude Code

Claude Code 是 Anthropic 出的 AI 编程工具，但你不用会编程，这里只是把它当一个能运行技能的平台来用。

安装方式：到 Claude 官网（claude.ai/code）按指引下载安装。需要有一个 Claude 账号，免费账号有使用限额，付费订阅（Pro，每月 $20）没有限制。

国内注意：Claude 官网需要访问国外网站。后边码哥来写一篇国内可用的 Claude Code 安装和使用方式。

第二：frontend-slides 技能

打开 Claude Code，在对话框里输入：

/plugin marketplace add MageByte-Zero/frontend-slides

/plugin install frontend-slides@frontend-slides

回车执行，等 30 秒左右，安装完成。这是一次性操作，以后每次打开 Claude Code 都可以直接用。

安装之后，怎么验证成功了？ 在对话框里输入 /frontend-slides，如果 AI 回应说准备好了、让你描述需求，就说明安装成功。

上手三步：从零到一份完整演示文稿

第一步：描述你要讲什么

打开 Claude Code，输入 /frontend-slides，然后告诉它你的需求。

不需要按特定格式，用正常说话的方式就行：

“「帮我做一个 Q2 销售复盘的演示文稿，大概 6 页。主要内容是：第一页封面，第二页 Q2 整体完成率 87%，达成了年度目标的 43%；第三页是三个重点成交案例；第四页是下半年的三个策略方向；第五页是重点客户列表；第六页是结语。风格要现代、深色，不要那种大众感。」

字数多一点没关系，描述越具体，AI 生成的内容越准确。

第二步：选风格

AI 收到需求后，会展示 12 种风格预览，你来选一个。

不知道选哪个？这里是码哥在不同场合的推荐：

第三步：等待生成，下载 HTML

选完风格，AI 会开始生成。一般 1-3 分钟后，你会得到一个 .html 文件。

把这个文件发给同事、发给领导——任何人用任何浏览器打开，效果都一模一样。

放映方式：

• 按 F11（Windows）或 Cmd + Ctrl + F（Mac）全屏
• 用方向键翻页，或者直接点击屏幕
• 不需要 PowerPoint，不需要安装插件

frontend-slides操作流程，三步完成演示文稿

图：从输入描述到得到演示文稿的完整流程

进阶：把旧 PPT 文件直接转换过来

如果你已经有一份现成的 PPTX 文件，想换一套更好看的视觉风格，流程稍微多一步。

第一步：提取 PPTX 内容

frontend-slides 自带了一个提取脚本。把你的 PPTX 文件放到一个固定目录，然后在 Claude Code 里告诉 AI：「我有一个 PPTX 文件，路径是 /Users/你的用户名/Documents/述职.pptx，帮我提取内容」。

AI 会自动运行提取脚本（python scripts/extract-pptx.py），把 PPT 里的所有文字、图片、备注整理出来，然后展示给你确认。

如果你愿意自己运行，命令是：

python scripts/extract-pptx.py 述职.pptx

需要先安装 python-pptx 库：pip install python-pptx

第二步：确认提取内容，选风格

AI 会告诉你它识别到了几页、每页的标题是什么、有多少张图片。你确认没问题后，选一个风格，它就开始生成。

一个需要注意的点：动画不保留。 PPTX 里原本的切换动画和元素动画不会被迁移，HTML 版会用 frontend-slides 自带的动画效果替代，通常更流畅，但风格不同。

另一个注意点：复杂图表。 如果你的 PPT 里有 Excel 联动的数据图表，这些图表 AI 会按截图处理，不是可编辑的矢量图。

三个真实使用中的坑

坑一：内容描述太简短，生成的页面质量差

只告诉 AI「帮我做 Q2 复盘」，生成出来的内容基本是通用占位文字。AI 需要你告诉它具体的数字、具体的案例名、具体的结论。把你脑子里知道的内容直接说给它，越具体越好。

坑二：HTML 文件在微信里发送会失效

HTML 文件不能通过微信直接发送给对方打开——微信会把 HTML 当网页处理，通常只显示代码。正确做法是：发到群文件、云盘链接，或者先转成 PDF（浏览器 → 打印 → 保存为 PDF）再发送。如果是当场汇报，直接在自己电脑上打开浏览器放映就行。

坑三：中文字体有时显示偏差

HTML 文件在某些 Windows 系统上打开，中文字体可能和你生成时看到的不一样（主要是字重偏细的问题）。解决方法是用 Chrome 打开，Chrome 对字体的支持最稳定。如果需要发给不确定对方用什么浏览器的人，转成 PDF 是最保险的做法。

总结

在做演示这件事上，工具确实不是最重要的——内容好、逻辑清才是根本。但一份视觉上明显高出平均水准的演示文稿，会让你在汇报前就多了三分信心，也让对方在你开口之前就觉得「这个人做事认真」。

frontend-slides 现在已经是码哥做对外演示的默认工具了，不用每次在模板里找颜色搭配，把时间省下来放到内容本身。

下篇打算写 Claude Code 的另一个用法——怎么用它来自动处理每周的数据报表，感兴趣的话关注一下，发布了会第一时间推送。