html-ppt-skill：AI原生的HTML演示文稿技能，20天2600+Star

GitHub: https://github.com/lewislulu/html-ppt-skill
Stars: 2600+ (20天)
协议: MIT
发布平台: 程序员茄子（chenxutan.com）
标签: AI PPT, HTML演示, Agent Skill, Claude Code, 演示文稿

引言

做技术分享，光是排版、调样式就得耗一两个小时？

html-ppt-skill 来了。

这是一个让 AI 帮你做 PPT 的神级 Skill，20天斩获 2600+ Star。

它不生成 PPTX 文件，而是直接输出一份纯静态的 HTML 文件，零构建、零依赖、AI 原生。

双击打开浏览器就能演示！

一、项目简介

html-ppt-skill 是一个 Agent Skill——AI Agent 的插件。

核心定位

让 AI 帮你做 PPT。

工作方式

# 安装 skill
npx skills add https://github.com/lewislulu/html-ppt-skill

# 告诉 AI 你的需求
"做一份微服务架构的技术分享，10页，暗色主题，要有架构图和代码示例"

AI 会自动选择模板、主题、布局，输出一个完整的 HTML 文件。

速度

二、为什么选择 HTML 而不是 PPTX？

传统 PPTX 的痛点

HTML 的优势

只有 CDN 上的字体文件，其他全部内置。

三、36 套主题

覆盖了极简、暗色、渐变、科技、出版、柔和、商务、效果等不同风格。

主题分类

主题预览

按 T 键可以实时切换主题，方便快速对比效果。

四、15 套完整模板

从真实项目里提炼出来的完整模板：

presenter-mode-reveal 模板

这是最用心的模板之一：

• 每一页都带了 150-300 字的示例逐字稿
• 专门配合演讲者模式设计
• 准备正式分享时，直接拿这套模板改内容就行

五、31 种布局

从封面、目录、章节分隔，到文字排版、数据图表、代码展示，再到时间线、架构图、流程图，基本够用了。

每种布局都带真实的示例数据，复制粘贴就能用。

六、47 个动效

CSS 动画（27个）

轻量级入场动画，适合常规页面切换：

Canvas FX（20个）

手写的 canvas 模块，电影级效果，适合封面或关键时刻：

七、演讲者模式

这是这个项目真正用心的地方。

入口

按 S 键，会弹出一个独立的演讲者窗口。

四个磁吸卡片

像素级精确预览

每个预览卡片其实是一个 iframe，加载的是同一份 HTML 文件，只是 URL 多了一个 ?preview=N 参数。

这意味着预览和观众看到的是完全相同的 CSS、主题、字体、viewport——像素级精确。

无闪烁翻页

翻页的时候，演讲者窗口通过 BroadcastChannel 和主窗口同步，用 postMessage 通知 iframe 切换页面。

整个过程：

• 不重新加载页面
• 不白屏
• 不闪烁

八、快速开始

方式一：安装为 Agent Skill

npx skills add https://github.com/lewislulu/html-ppt-skill

然后在你支持的 AI Agent 里直接说需求：

做一份微服务架构的技术分享，10页，暗色主题，要有架构图和代码示例

方式二：直接克隆

git clone https://github.com/lewislulu/html-ppt-skill
cd html-ppt-skill

# 创建新项目
./scripts/new-deck.sh my-talk

# 用浏览器打开生成的 HTML

九、键盘快捷键

十、在线预览

主题展示

打开 templates/theme-showcase.html

这是 36 套主题的展示页面，每一页用独立的 iframe 渲染，避免样式互相污染。

完整模板

打开 templates/full-decks-index.html

浏览全部 15 套完整模板，这些都是现成的 HTML 文件，双击就能看。

十一、导出 PDF

用浏览器的打印功能：

1. 按 F 进入全屏
2. 按 Ctrl/Cmd + P 打开打印
3. 选择"另存为 PDF"

十二、导出 PNG 图片

目前只能导出 PNG 图片格式。

需要借助无头 Chrome：

# 先安装依赖
npm install

# 渲染每一页为 PNG
./scripts/render.sh 你的PPT文件.html

之后可以：

• 手动粘贴到 PPT 里
• 用其他工具批量转成 PPTX

十三、注意事项

当前限制

适合人群

十四、与传统 PPT 对比

十五、适用场景

十六、总结

以前做技术分享，光是排版、调样式就得耗一两个小时。现在简单跟 AI 说清楚需求，几分钟就生成好，省下的时间专心打磨内容就行。

就跟开车从手动挡换成自动挡一样：

虽说少了点手动操控的感觉，但是真的省事、省心太多了。

本文首发于「程序员茄子」博客，原文链接：https://chenxutan.com