做演示还在套模板？这个 Skill 让我 5 分钟做出动画级 HTML Slides

你是不是也烦透了 PPT 的极简风、渐变紫和千篇一律的字体？想做一个有设计感的演示文稿，Photoshop 不会，Keynote 又太普通，最后只能用模板改来改去，越改越丑。

最近挖到一个超有意思的开源 Skill：frontend-slides。它不是一个普通的 PPT 转 HTML 工具，而是一套能让你用代码“写”出网页版演示文稿的创意工作流。

它是什么？

frontend-slides 来自 affaan-m/ECC 这个超火的 Claude Skills 仓库，在 SkillsMP 上已经拿到了 22 万+ Star，可见社区认可度极高。

简单说，它的能力是：

• 从零生成：给主题和要点，直接输出一套可运行的 HTML 演示文稿
• PPT 转换：把 .ppt / .pptx 转成浏览器里直接跑的 HTML 版本
• 动画增强：自带丰富的 CSS 动画、转场和交互，不是那种静态截图式的网页

为什么我觉得它适合设计创意人？

1. 零依赖，一个 HTML 文件搞定
   不需要服务器，不需要构建工具，生成的文件直接双击就能在浏览器里打开。做作品展示、提案 Demo 非常方便。

2. 视觉探索优先
   不像传统工具让你先选“模板风格”，它会先给你 3 个单页预览，让你用“感觉”选方向，然后自动生成完整 deck。对非专业设计师太友好了。

3. 可定制度极高
   因为是纯 HTML/CSS，你可以直接改代码里的颜色、字体、布局，甚至加 Three.js 背景。PPT 可做不到这种自由度。

4. 支持 Claude Code / Codex CLI
   装上之后直接跟 AI 说“帮我做一个关于 AIGC 趋势的 slides”，它就会从内容结构到视觉样式一条龙帮你搞出来。

适用场景

• 设计师/AIGC 创作者做作品展示
• 创业者/产品经理做 Pitch Deck
• 技术分享/工作坊的互动演示
• 想把旧 PPT 升级成可在线分享的网页版

使用方式

把 Skill 装进 Claude Code 或 Codex CLI 后，直接说需求就行：

“帮我把这份品牌设计讲义做成 HTML slides”

它会自动检测你是“新建”还是“转换”，然后生成一个完整的 presentation.html。你可以直接用浏览器打开演示，也可以丢到任意静态托管。

最后说两句

说实话，看到 frontend-slides 这种 Skill 的时候，我第一反应是：原来“做演示”这件事还可以这么被重新定义。它不只是在帮你排版，而是在帮你重新思考“内容和视觉的关系”。

如果你也想摆脱 PPT 的束缚，或者想给客户展示一个更酷的 Demo，这个 Skill 绝对值得一试。

GitHub：affaan-m/ECC – frontend-slides

GitHub: https://github.com/affaan-m/ECC/tree/main/skills/frontend-slides