你有没有过这种经历？——明天一早要汇报，PPT 还是一片空白。脑子里内容一大堆，可一打开 PowerPoint，光调配色和排版就耗掉了所有热情。最后只能套个默认模板，交上去自己都嫌弃。
今天聊的这个工具，可能真的能帮你把这个痛点给解决了。它叫 Frontend Slides，GitHub 上 19000+ Star，定位就一句话，用 AI 把文字描述或者旧 PPT 文件，直接生成一份零依赖的单文件 HTML 动画演示文稿。
不需要 Canva，不需要在模板里抠颜色。你只需要告诉 AI 你要讲什么，剩下的它来。
说真的，我试完之后的感觉是，做PPT这件事可能真的被它解决了。
Frontend Slides 不是什么网站，也不是什么 App。
它是一个给 AI 编程助手用的技能包，或者说外挂。你把它装进 Claude Code 里面，然后直接用大白话跟 AI 说你想做什么演示，它就会帮你生成一个完整的 HTML 幻灯片文件。打开浏览器就能全屏放映，键盘方向键翻页，手机上也能自适应显示。
你只需要说一句「帮我做一个 AI 创业公司的路演演示」，剩下的交给它。
最爽的是什么呢，它还支持把你现有的 PowerPoint 文件直接转成网页版？？？原来的文字、图片、备注全都保留，只是换了一套更高级的视觉皮肤。
我是真的觉得，这个功能对那种「手头有一堆旧PPT但看着就想吐」的人来说，简直是救星。
那它跟别的 AI 做 PPT 工具有什么不一样？
现在市面上 AI 做 PPT 的工具不少，但 Frontend Slides 有几个让我觉得特别对的地方。
第一，零依赖，一个文件搞定一切。生成的幻灯片就是一个独立的 .html 文件，所有样式和脚本全都写在里面。不需要 npm，不需要 React，不需要任何构建工具。把它拷到 U 盘里，十年后打开照样能跑。你想想看，那些 React 项目两年后可能就跑不起来了，这个意识我觉得作者是真的思考过的。
依赖就是债务。一个独立的 HTML 文件十年后还能用，一个 React 项目可能两年后就跑不起来了。这句话是作者说的，我深以为然。
第二，「我看看再选」，而不是「你描述一下你想要啥」。大部分设计工具会让你用文字描述想要的风格，现代简约带点科技感。拜托，这种描述谁能说清楚？Frontend Slides 的做法更实在，它直接给你生成 3 种不同风格的视觉预览，你看着选就行，看对眼了就拍板。作者管这个叫 Show, Don't Tell，展示，别描述。
第三，拒绝 AI 大众审美。作者特意避开了那种烂大街的 AI 生成风格，紫白渐变 + 圆角 + 阴影拉满那种。每个样式都有自己的个性，看着就不像机器批量生产的。
我寻思了一下，这三点加在一起，其实就是作者对「AI 到底该怎么帮人做设计」这个问题的回答。不是让你变得更懂设计，而是让你在做选择的时候，知道自己喜欢哪个。
内置风格多到什么程度呢，我给你数数。
12 种基础风格，加上 34 种 Bold 模板包。不管你是做什么场景的演示，都能找到合适的调调。
暗色系的有那么几个让我印象特别深的。
Bold Signal，深色底，大胆的色彩卡片，适合跟领导汇报、融资路演，专业感拉满。
Electric Studio，干净利落，分屏布局，专业又不沉闷。
Creative Voltage，偏复古现代，电气蓝加霓虹感，产品发布会用这个很炸。
Dark Botanical，深色底配暖色点缀，雅致得像一本精装杂志。
亮色系的也有意思。
Notebook Tabs，像笔记本带彩色标签页，结构化内容的最佳搭档，团队内部分享特别合适。
Pastel Geometry，柔和粉彩，竖排圆角块，友好亲切。
Vintage Editorial，复古编辑风格，带几何图形和个性排版，做年度总结特别有味道。
还有一些特殊风格的。
Neon Cyber，霓虹发光 + 粒子背景，赛博朋克既视感，黑客松、科技发布会的首选。
Terminal Green，终端绿，极客风，技术分享用它准没错。
Swiss Modern，极简包豪斯，几何感极强，对外提案拿这个显得克制又精致。
Paper & Ink，纸张质感，有首字下沉和引用样式，文学讲座、编辑审稿用这个特别有范儿。
Bold 模板包更是离谱。34 种，每套都是精心打磨的视觉体系。Neo-Grid Bold，米白纸张上的新野兽派，一条霓虹黄点缀，编辑味儿十足。Sakura Chroma，日式复古卡带包装美学，奶油纸张配对角彩虹丝带，精致到不行。Retro Windows，Windows 95 复古风，灰色标题栏 + 像素字体，怀旧拉满。Biennale Yellow，太阳黄配深靛蓝衬线体，荷兰编辑海报的冲击力。Pin & Paper，黄色纸张配安全别针插图，手写感十足。
选风格的时候，系统会给你生成预览，1 个安全预设 + 至少 1 个 Bold 模板 + 1 个随机惊喜选项，三选一。
就这样，简单干脆。你不用成为设计师，你只需要知道自己喜欢哪个。
怎么装怎么用，我直接说。
安装方式两种。
Claude Code 用这个最方便，
/plugin marketplace add zarazhangrui/frontend-slides/plugin install frontend-slides@frontend-slides
两条命令分开执行，等第一条跑完再输第二条。装完之后输入 /frontend-slides 就能用了。
手动安装也很简单，
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides
直接克隆到 Claude Code 的技能目录，重启就行。
如果你用的是 Codex、Kimi Code、Gemini CLI 之类的其他 AI 工具，直接把项目链接丢给它，让它读 SKILL.md 就能按照技能的流程来工作。
从零新建一个演示文稿的流程是这样的。
输入 /frontend-slides，然后告诉 AI 你想做什么主题。不用拘束，正常说话就行，比如，
"帮我做一个 Q2 销售复盘的演示文稿，大概6页。第一页封面，第二页 Q2 整体完成率 87%，达成了年度目标的 43%；第三页是三个重点成交案例；第四页是下半年的三个策略方向；第五页是重点客户列表；第六页是结语。风格要现代、深色。"
然后 AI 会先问你几个问题，用途是啥，多长，内容准备到什么程度了。接着生成 3 种视觉风格预览，你选一个喜欢的。选完风格，AI 开始生成，1 到 3 分钟后你就得到一个 .html 文件，浏览器打开按 F11 全屏就能放映。
转换已有的 PPT 更简单。
/frontend-slides> "帮我转换一下 presentation.pptx"
AI 会用自带的提取脚本把 PPT 里的文字、图片、备注全部提取出来，让你确认内容是否正确，然后你选个风格，它就生成网页版。
不过有两个注意点。PPT 里的动画不会保留，HTML 版会用自带的动画效果替代。复杂的 Excel 图表会按截图处理。
做完之后怎么分享？
两种方式。
部署到线上拿永久链接，
bash scripts/deploy.sh ./my-deck/
用的是 Vercel 免费版，手机电脑都能直接访问，发链接就行。首次用会引导你登录。
导出 PDF，
bash scripts/export-pdf.sh ./my-deck/index.html
用 Playwright 把每一页截成 1920×1080 的图片合成 PDF。动画不会保留，但发邮件、打印够用了。
另外还有个小技巧，HTML 文件别直接微信发，微信会把 HTML 当代码显示。发到群文件、云盘链接，或者先转成 PDF 再发。
我自己用下来的过程中踩了三个坑，愚钝如我，跟你分享一下。
第一个坑，描述太简短，生成质量差。你只说「帮我做 Q2 复盘」，出来的基本是通用占位文字。把你脑子里的具体数字、案例名、结论都告诉 AI，越具体越好。这个不是工具的毛病，是提示词的毛病，但确实容易踩。
第二个坑，中文字体偶尔会偏。某些 Windows 系统上打开可能字重偏细。用 Chrome 打开最稳定，要发给不确定对方浏览器的人就转 PDF。这个坑说实话也不是工具的问题，是跨平台字体渲染的老问题了，但在实际使用中就是会遇到。
第三个坑，想自己改代码，可以的。生成的 HTML 文件注释写得比较清楚，懂点 CSS 的话直接在里面改就行，不需要重新生成。这个点我觉得特别好，它不是黑盒，你想改就能改。
最后聊几句作者的几个设计理念，我是真的被打动了。
作者在项目里写了这么几句话，
你不需要成为设计师才能做出好看的东西。你只需要在看到选项时，知道自己喜欢哪个。
依赖就是债务。一个独立的 HTML 文件十年后还能用，一个 React 项目可能两年后就跑不起来了。
通用等于容易被忘记。每个演示文稿都应该像是为你定制的。
注释是一种善意。代码应该能自己解释自己。
这些理念不是空话。从生成视觉预览让你选，而不是让你描述风格，到单文件零依赖的输出方式，再到代码里详尽的注释，每一步都是在践行这些想法。
我有时候觉得，一个好的开源项目跟一篇好文章其实是同一件事。你得有自己的相信，然后让别人看到你的相信。
Frontend Slides 的作者，我相信他。
如果你平时经常需要做演示文稿，又不想每次都在模板里找配色、调排版，Frontend Slides 真的值得一试。装起来不复杂，做出来的东西确实比默认 PPT 模板好看一大截。
而且因为是 HTML 文件，走到哪都能用浏览器打开，连 PowerPoint 都不用装。
项目地址在这里，zarazhangrui/frontend-slides[1]，MIT 协议，随便用，随便改。
有兴趣的朋友可以去看看仓库里的演示视频和模板截图，眼见为实。
以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章，我们，下次再见。
引用链接
[1] zarazhangrui/frontend-slides: https://github.com/zarazhangrui/frontend-slides
