当前位置：首页>PPT>html-ppt-skill:让 AI 真正理解什么是“好看的幻灯片”

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

2026-06-02 23:31:14

如果你曾经让 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.4k star

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 skills add https://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-active class，不重新加载、不白屏、不闪烁。

逐字稿部分也有讲究：每页 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 自动初始化，不需要手动写一行代码。