一个 AgentSkill，帮助 AI Agent 生成包含主题、布局、动画和演讲者模式的纯静态 HTML 演示文稿。
MITWeb文本代码
npx skills add https://github.com/lewislulu/html-ppt-skill"做一份 8 页的技术分享 slides，用 cyberpunk 主题"
"turn this outline into a pitch deck"
"做一个小红书图文，9 张，白底柔和风"产品信息
- 形态
- AI技能 & 智能体
- 分类
- 效率与协作 › 演示与幻灯片
- 定价
- 开源
- 平台
- Web
- 授权协议
- MIT
- 首发日期
- 2026年9月26日
- 收录时间
- 2026年9月26日
概览
html-ppt-skill（HTML PPT Studio）是一个面向 AI Agent 的技能包（AgentSkill），用于生成专业的 HTML 演示文稿。所有输出均为纯静态的 HTML/CSS/JS 文件，无需构建步骤。 该技能包内置了 36 个主题、15 个完整幻灯片模板、36 种单页布局以及 47 种动画效果（27 种 CSS 动画与 20 种 Canvas FX 动画）。它还提供了一个演讲者模式，通过按 `S` 键可打开独立的演讲者窗口，包含当前幻灯片、下一张预览、逐字稿和计时器四个可拖拽卡片，并通过 `BroadcastChannel` 保持双窗口同步。预览使用 `<iframe>` 加载相同的 HTML 并配合查询参数渲染，确保颜色与布局与观众视图一致；切换幻灯片时通过 `postMessage` 通信，无需重新加载页面。 安装后，支持 AgentSkills 的 AI Agent 可以通过自然语言指令生成演示文稿，例如要求制作特定页数、特定主题的 slides 或图文内容。它也支持离线使用：主题、布局和动画均依赖本地静态文件，唯一的远程依赖是引入 Google Fonts 的 CSS 文件，断网时会回退到系统字体栈。 适合需要让 AI Agent 快速产出网页版演示文稿、Pitch Deck、技术分享或社交媒体图文内容的开发者与创作者。
功能特性
- 36 个主题：提供 36 个纯 CSS tokens 主题文件，替换 link 标签即可更改整个演示文稿的外观。
- 15 个完整模板：包含 8 个提取自真实场景的模板和 7 个通用场景脚手架，如 pitch-deck、tech-sharing 等。
- 36 种单页布局：涵盖 cover、toc、bullets、chart-bar、mindmap 等布局，每种附带示例数据可直接渲染。
- 47 种动画效果：包含 27 种 CSS 动画和 20 种 Canvas FX 动画。
- 演讲者模式：按 S 键弹出独立窗口，含当前页、下一页预览、逐字稿和计时器，通过 BroadcastChannel 同步。
- 像素级预览：预览卡片使用 iframe 加载相同 HTML，保证与观众视图的 CSS、主题、字体和视口完全一致。
- 无刷新导航：切换幻灯片时通过 postMessage 通知 iframe 切换 class，不重新加载页面。
- 纯静态输出：生成的演示文稿为纯 HTML/CSS/JS，无需构建步骤。
- 离线可用：除可选的 Google Fonts 外无运行时网络请求，断网时自动回退至系统字体栈。
- 多 Agent 兼容：支持 Claude Code、Codex、Cursor、OpenCode、Gemini CLI、Windsurf 等宿主。
版本更新
新版本提醒我
首个版本 · html-ppt-skillQ&A
- 如何安装这个技能？由 AI 生成
- 可通过命令 `npx skills add https://github.com/lewislulu/html-ppt-skill` 安装。也支持克隆仓库后本地安装，或手动将文件夹复制到对应 Agent 的 skills 目录下。
- 没有网络可以使用吗？由 AI 生成
- 可以。主题、布局、动画和演讲者模式均为本地静态文件。唯一的远程依赖是引入 Google Fonts 的 CSS，离线时会回退到系统字体栈，不影响正常渲染。
- 演讲者模式是如何工作的？由 AI 生成
- 在任意演示文稿上按 `S` 键会打开一个独立窗口，包含四个可拖拽缩放的磁性卡片。两个窗口通过 `BroadcastChannel` 保持同步，预览卡片使用 iframe 加载同一份 HTML 实现像素级一致。
- 支持哪些 AI Agent 宿主？由 AI 生成
- 原文列出了 Claude Code、Codex、Cursor、OpenCode、Gemini CLI 和 Windsurf，并提供了各自项目级和全局级的 skills 目录路径。
- 可以不依赖 AI Agent 直接使用吗？由 AI 生成
- 可以。模板本身是纯静态文件，可使用自带的 `./scripts/new-deck.sh` 脚本创建新演示文稿，然后直接在浏览器中打开 index.html。
收藏
这个产品还没有主理人
由平台收录或原作者已注销。如果它是你的作品，证明与它的关系后即可成为主理人。
认领这个产品
