10+年产品经理专注分享AI 工具、AI 资讯、AI Coding、Vibe Coding与下一代产品创新,按 Ctrl+D 收藏我们
关于我 留言板 标签云 排行榜

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI智能体

html-ppt-skill:AI 原生 PPT 生成器,20 天 2600 Star 的开源项目

6月前 AI智能体 2775 0

20 天,2600+ Star。又一个做 PPT 的项目在 GitHub 火了,叫 html-ppt-skill。

它做的事情听起来很简单:让 AI 帮你做 PPT。自带 36 套主题、31 种布局、47 个动效,还有一个像素级精确的演讲者模式。

它不生成 PPTX 文件,而是直接输出一份纯静态的 HTML 文件——零构建、零依赖、AI 原生,双击打开浏览器就能演示。

项目定位:Agent Skill

html-ppt-skill 本质上是一个 Agent Skill——AI Agent 的插件。装好后,直接告诉 AI 你要什么:

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

AI 会自动选择模板、主题、布局,输出一个完整的 HTML 文件。双击打开,按 F 全屏,直接演示。

36 套主题,覆盖全场景

项目内置了 36 套主题,覆盖极简、暗色、渐变、科技、出版、柔和、商务、效果等不同风格:

  • 学术汇报:minimal-white、editorial-serif 等极简风
  • 技术分享:cyberpunk-neon、terminal-green 等赛博风
  • 小红书图文:xiaohongshu-white、soft-pastel 等柔和风

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

15 套完整模板

除了主题,项目还从真实项目中提炼出 15 套完整模板:

  • tech-sharing:GitHub 暗底风格,专门给技术分享用
  • pitch-deck:YC 风格的融资路演模板
  • xhs-post:3:4 竖版的小红书图文模板
  • presenter-mode-reveal:每页带 150-300 字示例逐字稿,配合演讲者模式

如果要准备一场正式分享,直接拿这套模板改内容就行。

31 种布局 + 47 个动效

布局

从封面、目录、章节分隔,到文字排版、数据图表、代码展示,再到时间线、架构图、流程图,31 种布局基本够用。每种布局都带真实的示例数据,复制粘贴就能用。

动效

47 个动效 = 27 个 CSS 动画 + 20 个 Canvas FX:

  • CSS 动画:轻量,适合常规入场
  • Canvas FX:手写的 canvas 模块,粒子爆发、星空飞行、神经网络脉冲等电影级效果,适合封面或关键时刻

为什么是 HTML 而不是 PPTX?

作者的选择很明确:零构建。

  • 生成的文件不需要安装任何软件,双击用浏览器打开就能演示
  • 没有 node_modules,没有构建步骤,只有 CDN 上的字体文件
  • 对于开发者来说,比打开 PowerPoint 顺滑太多

演讲者模式:真正用心的地方

按 S 键,弹出一个独立的演讲者窗口,里面有四个可拖拽、可缩放的磁吸卡片:

  1. 当前页预览
  2. 下一页预览
  3. 逐字稿
  4. 计时器

每个预览卡片是一个 iframe,加载同一份 HTML 文件,只是 URL 多了一个 ?preview=N 参数。这意味着预览和观众看到的是完全相同的 CSS、主题、字体、viewport——像素级精确,不会出现"预览和实际不一样"的尴尬。

翻页时,演讲者窗口通过 BroadcastChannel 和主窗口同步,用 postMessage 通知 iframe 切换页面。整个过程不重新加载页面,不白屏,不闪烁。

快速上手

方式一:安装为 Agent Skill(推荐)

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

装好后在 Claude Code 等 AI Agent 中直接说需求,AI 会自动调用 skill 生成 HTML 文件。

方式二:直接克隆仓库

git clone https://github.com/lewislulu/html-ppt-skill
cd html-ppt-skill
./scripts/new-deck.sh my-talk

然后用浏览器打开生成的 HTML 文件。

操作快捷键

按键 功能
← → 翻页
F 全屏演示
S 打开演讲者窗口
O 幻灯片网格预览
T 循环切换主题(36 套)
A 循环演示入场动画

主题展示与模板浏览

想先感受效果?仓库里提供了两个展示页面:

  • templates/theme-showcase.html:36 套主题展示,每页用独立 iframe 渲染,避免样式互相污染
  • templates/full-decks-index.html:全部 15 套完整模板浏览

导出 PDF

用浏览器打印功能,选择"另存为 PDF"即可导出。

当前限制

  • 只能导出 PNG:没法直接生成 PPTX。需执行 ./scripts/render.sh 你的PPT文件.html,借助无头 Chrome 把每页渲染成 PNG,再手动粘贴到 PPT 或批量转换。
  • 需编辑 HTML 源码:修改内容需要直接编辑 HTML,对不懂前端的人来说上手门槛偏高。

苏米注

html-ppt-skill 的出现,标志着 AI 生成演示文稿正在从"模拟传统"走向"原生 HTML"。

与 Gamma、Beautiful.ai 等 SaaS 方案相比,它的核心优势在于:① 零依赖:纯静态 HTML,双击即用,无需注册账号;② AI 原生:作为 Agent Skill 直接嵌入工作流,不需要在多个工具间切换;③ 演讲者模式:像素级精确的预览 + BroadcastChannel 同步,体验甚至优于传统 PPT。

对于技术分享、路演等场景,如果你习惯用浏览器演示,这套方案值得尝试。项目基于 MIT 协议开放,20 天 2600+ Star,活跃度极高。

GitHub:https://github.com/lewislulu/html-ppt-skill

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:html-ppt-skill:AI 原生 PPT 生成器,20 天 2600 Star 的开源项目
#html-ppt-skill #AI生成PPT #开源项目 #Agent-Skill #演示文稿 
收藏 1
腾讯 ima + WorkBuddy 打通:AI 直接读写你的知识库,效率翻倍指南
DS2API 部署指南:NAS 部署将 DeepSeek Web 转为 OpenAI/Claude/Gemini 兼容 API
推荐阅读
  • 拆解Grok Bot:Personal Agent架构设计、记忆管理与权限边界
  • OpenClaw 2026.3.7 正式版重磅发布:AI 助手新纪元,五大核心升级重塑体验
  • Agent Skills 沉淀企业 SOP:从静态文档到可调度知识资产
  • Harnessclaw本地AI工作台搭建指南
  • OpenClaw 别急着开工,这 10 个核心 Skills让龙虾从聊天到真干活的配置指南
评论 (0)
请登录后发表评论
分类精选
Multi-Agent(多智能体)实战:OpenClaw x 飞书机器人,为每个业务场景打造专属多Agent项目协作群
8250 8月前
微信 iLink Bot 协议深度拆解:开发者必备实战手册
8176 7月前
微信官方 ClawBot 插件多Agent如何绑定多个微信号?让全家人都用上了OpenClaw!
7282 7月前
即梦CLI:如何用OpenClaw搭建AI工作流实现24小时自动化生图、生视频创作
7062 7月前
OpenClaw 升级到 2026.3.24 后,微信 ClawBot 插件更新指南
5978 7月前
腾讯系 WorkBuddy :一键部署 OpenClaw 并接入微信,扫码即用,体验丝滑
5358 7月前
Star-Office-UI:用像素办公室实时可视化 OpenClaw(小龙虾)的工作状态
5319 8月前
7 个高质量前端UI设计的 Skills(技能包),让 AI 编程生成高质量UI代码
4878 6月前
OpenClaw 飞书多 Agent 实战:一只龙虾不够用?教你养一池子龙虾
4508 8月前
腾讯文档Skills接入完全指南:如何让AI助手直接管理你的云端文档
4394 7月前

文章目录

关于苏米客
分类排行
1 Meta Muse Agent 架构拆解:个人智能助理背后的设计与生态逻辑
2 BuilderIO Agent-Native 框架:让 AI 智能体与 GUI 共享同一应用上下文
3 Pi Agent 私有部署实战:交付前必须修改的 8 个默认值
4 拆解Grok Bot:Personal Agent架构设计、记忆管理与权限边界
5 手搓剪口播 Skill:模型选择、字幕优化、审片面板的实践思考
6 16 个 AI 图像 Skill 实测:手撕纸拼贴、水墨海报、像素艺术,拯救旅行废片
7 Pi Agent 接入 Grok 实战:利用上下文压缩避开 200K 翻倍计价
8 Agentic UI 设计指南:从任务计划、执行状态到结果工作台
9 DeepSeek Harness 完全指南:Everything is a Plugin 的 AI 编程工具
10 9种Agentic架构模式详解:AI开发者必备的智能体设计指南
苏米客
登录 注册
显示
没有账号? · 立即注册
显示
已有账号? · 直接登录
登录代表你已同意 用户协议 和 隐私政策
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6 网站地图 百度地图
拉美跨境导航 微信文章助手 程序库 免费影视APP 免费字体下载 产品经理导航 爱克硕儿 产品经理AI资讯 Axure元件库下载 申请友联