当前位置：首页 > news >正文

html-ppt-skill：让 AI 真正理解什么是“好看的幻灯片”

news 2026/6/3 5:09:34

如果你曾经让 AI 帮你做 PPT，大概率收获过这样的作品：配色辣眼睛、排版像 2003 年的 Word 艺术字、动画恨不得把所有特效都来一遍。

这不是 AI 的错——是它手里没有趁手的“兵器”。

今天介绍的这个开源项目html-ppt-skill，就是专门解决这个问题的。它不是一个简单的模板库，而是一套完整的AgentSkill，让 Claude Code、Cursor、OpenClaw 这类 AI 助手，真正理解怎么做出一份“能打”的 HTML 演示文稿。

项目介绍

一款专业级的 AgentSkill，让 AI 做出真正能打的 HTML 演示文稿。 36 套主题、15 套完整 deck 模板、31 种页面布局、47 个动效 (27 个 CSS + 20 个 Canvas FX)，加上全新的演讲者模式 —— 像素级完美预览 + 逐字稿提词器 + 计时器。纯静态 HTML/CSS/JS，无需构建。

该项目在github 上已有5.4kstar

github地址: https://github.com/lewislulu/html-ppt-skill

项目结构

html-ppt-skill/ ├── SKILL.md agent 入口 ├── README.md 英文 README ├── README.zh-CN.md 本文件 ├── references/ 详细文档 │ ├── themes.md 36 主题 + 使用场景 │ ├── layouts.md 31 布局 │ ├── animations.md 27 CSS + 20 FX 目录 │ ├── full-decks.md 15 完整 deck 模板 │ ├── presenter-mode.md 🎤 演讲者模式 + 逐字稿指南 │ └── authoring-guide.md 完整工作流 ├── assets/ │ ├── base.css 共享 tokens + 基础组件 │ ├── fonts.css web 字体引入 │ ├── runtime.js 键盘导航 + 演讲者模式 + 总览 │ ├── themes/*.css 36 主题 token 文件 │ └── animations/ │ ├── animations.css 27 个命名 CSS 动画 │ ├── fx-runtime.js 进入 slide 自动初始化 [data-fx] │ └── fx/*.js 20 个 Canvas FX 模块 ├── templates/ │ ├── deck.html 最小起步模板 │ ├── theme-showcase.html iframe 隔离的主题 tour │ ├── layout-showcase.html 全部 31 布局 │ ├── animation-showcase.html 47 动画 slide │ ├── full-decks-index.html 15 deck gallery │ ├── full-decks/<name>/ 15 个 scoped 多页 deck 模板 │ └── single-page/*.html 31 个布局文件（带示例数据） ├── scripts/ │ ├── new-deck.sh 脚手架 │ ├── render.sh headless Chrome → PNG │ └── verify-output/ 56 张自测截图 └── examples/demo-deck/ 完整可运行的示例 deck

一行命令，AI 瞬间拥有设计能力

安装简单到离谱：

npx skillsaddhttps://github.com/lewislulu/html-ppt-skill

或者下载项目直接导入到skills中。

装完之后，你的 AI 助手就掌握了这些能力：

36 套专业主题——从极简白到赛博朋克，从学术论文到小红书图文
15 套完整 deck 模板——投资人 pitch、产品发布、技术分享、周报……
31 种单页布局——封面、目录、两栏、三栏、大引用、数据仪表盘、代码块……
47 个动效——27 个 CSS 动画 + 20 个 Canvas 电影级特效

对 AI 说一句话，它就能给你一套完整的 HTML 幻灯片：

“做一份 8 页的技术分享 slides，用 cyberpunk 主题”
“把这段 outline 变成投资人 pitch deck”
“做一个小红书图文，9 张，白底柔和风”

杀手级功能：演讲者模式

这是我最喜欢的新功能。在任何 deck 里按一下S键，就会弹出一个独立的演讲者窗口，包含4 个可拖拽、可调整大小的磁吸卡片：

当前页预览
下一页预览
逐字稿
计时器

两个窗口通过BroadcastChannel双向同步翻页，完全零延迟。

更妙的是，预览卡片用的是<iframe>加载同一份 HTML 文件，只是加了?preview=N参数。这意味着预览看到的 CSS、主题、字体、排版，和观众看到的像素级一致——不会出现“预览好看，投出来崩了”的尴尬。

翻页时通过postMessage通知 iframe 切换.is-activeclass，不重新加载、不白屏、不闪烁。

逐字稿部分也有讲究：每页 150–300 字，约 2–3 分钟的演讲节奏；用口语不用书面语；关键词加粗，过渡句独立成段。这不是让你照着念的讲稿，而是提示信号。

36 套主题，每一套都有态度

这个项目的主题不是随便调几个颜色就完事。每一套都有明确的设计语言和使用场景：

minimal-white——极简白，适合任何场合
cyberpunk-neon——赛博霓虹，技术分享利器
xiaohongshu-white——小红书白底杂志风
academic-paper——学术论文风格，参考文献排版极工整
pitch-deck-vc——投资人 pitch，数据突出
terminal-green——终端绿，极客最爱

每个主题都是一份纯 CSS token 文件，换一行<link>就能给整份 deck 换皮。在theme-showcase.html里可以用 iframe 隔离的方式预览全部 36 套——每个预览都是真实的渲染结果，不是截图，不是色卡。

15 套完整 deck 模板，开箱即用

模板分为两类：

从真实作品提炼的视觉语言（8 套）：小红书白底杂志风、暗底+力导向知识图谱、蓝图/架构图风、终端 cyberpunk 风、紫色渐变卡、红/琥珀警示风、柔和马卡龙图文、方向键极简导航。

通用场景脚手架（7 套）：投资人 pitch、产品发布会、技术分享、周报、小红书图文（9 页 3:4）、教学模块，以及一套专门为演讲者模式设计的完整分享模板——每一页都带 150–300 字的示例逐字稿。

每个模板都是自包含的文件夹，用 scoped 的 CSS class，多个模板可以同时加载而不会互相污染。

31 种单页布局 + 47 个动效

布局库覆盖了 PPT 几乎所有的常见需求：封面、目录、章节分隔、项目符号、两栏/三栏、大引用、数据高亮、KPI 网格、表格、代码块、终端、流程图、时间线、路线图、思维导图、对比、优劣势、待办清单、甘特图、图片墙、各种图表、架构图、步骤图、CTA、致谢……

每个布局都带真实的示例数据，拖进 deck 立即看得到效果。

动效分成两层：CSS 动画负责轻量入场（淡入、弹入、打字机、霓虹光晕、流光、3D 翻转……），Canvas FX负责电影级特效（粒子爆发、彩带、烟花、星空、代码雨、力导向知识图谱、神经网络脉冲、星座连线……）。进入 slide 时由fx-runtime.js自动初始化，不需要手动写一行代码。