html-ppt-skill

HTML PPT Studio (html-ppt-skill) 是由开发者 lewis 发起并持续维护的开源 AI 原生 HTML 演示技能，核心定位是“为 AI 编码代理配备一座包含 36 种主题、15 套完整模板、31 种页面布局与 47 种动效的 HTML 演示工坊，让 AI 生成的不再是扁平图片，而是可直接在浏览器中演示、自带演讲者模式的交互式幻灯片”——它不满足于做一份简单的 HTML 模板集合或零散的 CSS 动效库，而是将 36 种 CSS 主题令牌系统、15 套完整 Deck 模板、31 种单页布局、27 种 CSS 动画与 20 种 Canvas 电影级特效、真·演讲者模式（四张磁吸卡片：当前页/下一页预览/逐字稿/计时器）、零构建纯静态架构等核心能力整合于一套完整的开源技能体系中，全部配有 npx skills add 一键安装、主题展厅/布局展厅/动画展厅/完整 Deck 展厅四合一预览画廊、render.sh 无头渲染脚本、new-deck.sh 脚手架工具以及 MIT 开源协议。市面大多 AI 演示工具要么是依赖云端服务的黑盒平台（数据上云、有平台锁定），要么是输出扁平图片或填充模板的静态排版（不可交互、缺乏演讲支持）——但很少有项目能将“36 种主题 × 31 种布局 × 47 种动效 × 真·演讲者模式”的设计系统广度与“纯静态 HTML/CSS/JS、零构建、完全本地运行”的开源自由度同时做到，HTML PPT Studio 解决的正是这个问题。

一、HTML PPT Studio 是什么

HTML PPT Studio 采用“AI 技能文件 + 主题/布局/动效系统 + 演讲者模式”三位一体的使用体验，通过 GitHub 完全开源发布，采用 MIT 许可证。项目由开发者 lewis 发起并持续维护，核心定位是“世界级的 AgentSkill，用于生成专业的 HTML 演示文稿”。用户只需执行 npx skills add https://github.com/lewislulu/html-ppt-skill 一条命令，即可将技能注册到 Agent 运行时。安装后，任何支持 AgentSkills 的代理（Claude Code、Codex、Gemini CLI 等）都可以通过自然语言指令生成演示文稿，例如“做一份 8 页的技术分享 slides，用 cyberpunk 主题”或“把这份大纲变成 pitch deck”。项目提供完整的中文文档（README.zh-CN.md）。

HTML PPT Studio 的运作机制与市面常见的“模板填充工具”或“截图式 PPT 生成器”有本质区别。它不是把内容塞进预设模板然后把每一页渲染成扁平图片，而是一套直接生成纯静态 HTML/CSS/JS 交互式幻灯片的完整设计系统。其核心理念是“令牌驱动的设计系统”——所有颜色、圆角、阴影、字体决策都集中在 assets/base.css 和当前主题文件中，改变一个变量，整个 Deck 就会优雅地重新流动。项目包含 36 种主题（从极简白到赛博朋克霓虹，从 editorial-serif 到 engineering-whiteprint）、15 套完整 Deck 模板（从小红书白底杂志风到暗底力导向知识图谱，从终端 cyberpunk 到蓝图架构风）、31 种单页布局（目录、分节、两栏/三栏、KPI 网格、流程图、甘特图、雷达图、架构图等）、27 种 CSS 动画 + 20 种 Canvas 电影级特效（粒子爆发、彩带、星域、矩阵雨、知识图谱力导向、神经网络信号脉冲等）。所有预览都是真实模板文件在 Deck 内部渲染的实时 iframe，不是截图，不是 mock-up。项目还提供了真·演讲者模式——按 S 键弹出专用演讲者窗口，包含四张可拖拽、可调整大小的磁吸卡片：当前幻灯片、下一页预览、演讲者逐字稿和计时器。

二、HTML PPT Studio 能做什么

HTML PPT Studio 的核心能力可以精炼地概括为：选、构、演、预、导，围绕这五大维度提供了从 AI 指令到可演示幻灯片的完整路径，覆盖 AI 辅助演示文稿创作的全方位需求，具体包括：

36 种主题与 15 套模板的精准选择（选） ——不是“随便找个模板”，而是“从 36 种 CSS 令牌主题 + 15 套完整 Deck 模板中为你的内容选择最合适的视觉语言”。36 种主题涵盖 minimal-white、editorial-serif、soft-pastel、cyberpunk-neon、xiaohongshu-white、glassmorphism、neo-brutalism、swiss-grid、vaporwave、academic-paper、pitch-deck-vc 等。每种主题都是一个纯 CSS 令牌文件——交换一个 <link/> 即可重新为整个 Deck 换肤。15 套完整 Deck 模板中，8 套从真实世界 Deck 中提取（小红书白底杂志风、暗底力导向知识图谱、蓝图架构风、终端 cyberpunk 等），7 套为通用场景脚手架（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 等）。

31 种单页布局与 47 种动效的灵活编排（构） ——不是“固定版式死板填充”，而是“按内容选择最合适的布局 + 按氛围选择最合适的动效”。31 种单页布局覆盖了演示文稿的几乎所有常见页面类型：目录、分节、两栏/三栏、大引用、KPI 网格、表格、代码、终端、流程图、时间线、路线图、思维导图、对比、优缺点清单、甘特图、图片 Hero、图表（柱/线/饼/雷达）、架构图、流程步骤、CTA、致谢等。每种布局都配有真实的演示数据，用户可以将其放入 Deck 并立即看到渲染效果。47 种动效分为 27 种轻量级 CSS 动画（方向淡入、rise-in、zoom-pop、blur-in、glitch-in、打字机、霓虹光晕、闪烁扫描、渐变流动、错落列表、数字滚动、路径绘制、3D 卡片翻转、视差倾斜等）和 20 种电影级 Canvas 特效（粒子爆发、彩带、烟花、星域、矩阵雨、知识图谱力导向物理、神经网络信号脉冲、星座、轨道环、星系旋涡、文字级联、字母爆炸、连锁反应、磁场、数据流、渐变 blob、闪烁轨迹、冲击波、多行打字机、数字爆炸）。每种特效都是手写的 Canvas 模块，在幻灯片进入时通过 fx-runtime.js 自动初始化。

真·演讲者模式与逐字稿（演） ——不是“只能看”，而是“可以讲、可以练、可以控时”。按 S 键弹出专用演讲者窗口，包含四张可拖拽、可调整大小的磁吸卡片：当前幻灯片、下一页预览、演讲者逐字稿、计时器。两个窗口通过 BroadcastChannel 保持同步。每张预览卡片都是一个加载同一 Deck HTML 的 <iframe>，带有 ?preview=N 查询参数——运行时检测到该参数后只渲染第 N 页，无任何 chrome，使用与观众视图完全相同的 CSS、主题、字体和视口，保证颜色和布局完全一致。幻灯片切换时，演讲者窗口通过 postMessage 通知每个 iframe 切换幻灯片，只切换 .is-active 类——无重载、无闪烁。演讲者逐字稿遵循三条黄金法则：提示信号而非朗读文本（加粗关键词，过渡句单独成段）、每页 150–300 字（约 2–3 分钟/页的节奏）、写得像你说话一样（对话式而非书面散文）。项目内置的 presenter-mode-reveal 模板每一页都配有完整的 150–300 字演讲者脚本。

零构建纯静态架构与预览画廊（预） ——不是“需要构建工具才能跑”，而是“纯静态 HTML/CSS/JS，双击即可打开”。项目零构建——纯静态 HTML/CSS/JS，CDN 仅用于 web 字体、highlight.js 和 chart.js（可选）。项目提供了完整的预览画廊：theme-showcase.html 展示全部 36 种主题（每个主题在独立 iframe 中渲染，确保主题之间视觉隔离）、layout-showcase.html 展示全部 31 种布局（每个布局直接加载，每 2.8 秒轮播一次）、animation-showcase.html 展示全部 47 种动效、full-decks-index.html 展示全部 15 套完整 Deck。

脚手架工具与无头渲染（导） ——不是“只能手动建”，而是“有脚手架、有渲染工具链”。项目提供 new-deck.sh 脚手架脚本，一键创建新 Deck；render.sh 通过无头 Chrome 将任意模板渲染为 PNG。

三、HTML PPT Studio 适合谁用

HTML PPT Studio 的内容设计使其适配各类希望通过 AI 提升演示文稿制作效率的知识工作者与开发者，核心聚焦那些“AI 生成的演示文稿要么是扁平图片不可编辑，要么是功能受限的在线预览缺乏演讲支持”、希望从“手动做 PPT”升级为“AI 辅助生成可交互 HTML 幻灯片”的人群，主要涵盖以下几类：

AI 编码代理的重度使用者与开发者——已经在用 Claude Code、Codex、Gemini CLI 等 Agent 进行日常工作的用户。HTML PPT Studio 作为一套 AgentSkill，让“在对话中完成 HTML 演示文稿生成”成为原生体验。

技术分享者与开发者布道师——需要为技术大会、团队分享、开源项目演示准备幻灯片。项目内置的 tech-sharing 模板、cyberpunk 和 terminal-green 主题、代码高亮和终端布局，天然适合技术场景的演示需求。

产品经理与创业团队——需要快速将产品文档、商业计划书转化为 pitch deck 或产品发布演示。项目的 pitch-deck-vc 主题、pitch-deck 和 product-launch 完整模板，为融资和产品发布场景提供了开箱即用的视觉语言。

内容创作者与自媒体人——需要制作小红书图文、公众号配图或品牌演示内容。项目专门提供了 xiaohongshu-white 主题和 xhs-post 模板（9 页 3:4 比例），以及 xhs-white-editorial 和 xhs-pastel-card 等小红书风格完整模板。

演讲者与教育工作者——需要排练演讲、控制节奏、准备逐字稿。项目的真·演讲者模式（当前页/下一页/逐字稿/计时器四卡同步）和 presenter-mode-reveal 模板（每页配有 150–300 字完整逐字稿），让排练和现场演讲有了专业级的工具支持。

四、HTML PPT Studio 的应用场景是什么

基于其内容设计与定位，HTML PPT Studio 的应用场景主要围绕技术分享与大会演讲、产品发布与融资路演、内容创作与社交媒体分发、演讲排练与现场交付，覆盖从个人创作到商业演示的多个场景，具体包括：

技术分享与大会演讲场景——开发者需要为技术大会、团队内部技术分享或开源项目演示准备幻灯片。HTML PPT Studio 提供了一条“在 AI 对话中描述需求（如‘做一份 8 页的技术分享 slides，用 cyberpunk 主题’）→ AI 自动生成完整 HTML Deck → 按 S 键进入演讲者模式 → 使用逐字稿和计时器排练 → 现场全屏演示”的完整路径。terminal-green 主题、代码和终端布局为技术内容提供了原生的视觉语言。

产品发布与融资路演场景——创业团队需要快速将产品文档或商业计划书转化为 pitch deck。项目的 pitch-deck-vc 主题和 pitch-deck 完整模板提供了专业的融资路演视觉语言。render.sh 无头渲染脚本可将 Deck 导出为 PNG，方便嵌入 PDF 或用于社交媒体预览。

小红书图文与社交媒体内容场景——内容创作者需要将图文内容快速转化为小红书风格的视觉卡片。项目专门提供了 xiaohongshu-white 主题、xhs-post 模板（9 页 3:4 比例）、以及 xhs-white-editorial（小红书白底杂志风）和 xhs-pastel-card（柔和马卡龙图文）两套完整模板。同一套内容可以快速切换主题，适配不同平台的视觉风格。

演讲排练与现场交付场景——演讲者需要在正式上台前进行排练，并在现场获得演讲工具支持。演讲者模式的四张磁吸卡片——当前页、下一页预览、逐字稿、计时器——让演讲者在一个窗口中掌握全部信息。逐字稿的 150–300 字/页的节奏设计，帮助演讲者控制时长。presenter-mode-reveal 模板每页都配有完整的逐字稿，开箱即用。

品牌演示与多主题快速切换场景——团队需要为同一份内容快速生成不同视觉风格的演示版本（如给不同客户展示不同风格）。36 种主题通过交换一个 <link/> 即可重新为整个 Deck 换肤——同一份内容，一键切换风格，无需重新制作。

五、HTML PPT Studio 为什么值得关注

HTML PPT Studio 之所以值得关注，核心在于它将“AI 生成演示文稿从依赖云端黑盒或扁平图片升级为本地运行、主题驱动、演讲就绪的纯静态 HTML 工坊”，并具备“36 种主题 × 31 种布局 × 47 种动效 × 真·演讲者模式的设计广度、零构建纯静态架构、MIT 开源”的独特价值，具体体现在以下几点：

从“云端依赖”到“纯静态零构建”的自由度。大多数 AI 演示工具是云端托管的黑盒——文档上传到第三方服务器，输出被平台锁定，需要网络才能运行。HTML PPT Studio 输出的是纯静态 HTML/CSS/JS，双击即可在浏览器中打开，无需任何构建工具、无需网络（CDN 字体和图表库可选）、无需特定软件。这种“零依赖”的交付方式，让演示文稿从“需要特定环境才能打开”升级为“一个文件，随处打开，永久可读”。

从“扁平图片”到“真·演讲者模式”的交付升维。大多数 AI 演示工具的输出要么是扁平图片（不可编辑、不可交互），要么是功能受限的在线预览（缺乏演讲支持）。HTML PPT Studio 交付的是一个自带完整演讲者模式的交互式 HTML 幻灯片——当前页 + 下一页预览 + 逐字稿 + 计时器四卡同步、无重载无闪烁的平滑导航、像素级精确的预览（使用与观众视图完全相同的 CSS/主题/字体/视口）、150–300 字/页的逐字稿黄金法则。一个 HTML 文件 = 完整的演讲工作台。

从“模板填充”到“令牌驱动设计系统”的工程深度。大多数“模板”工具是“换皮”——换个颜色、换个字体，但底层布局是固定的。HTML PPT Studio 的核心是令牌驱动的设计系统——所有颜色、圆角、阴影、字体决策集中在 assets/base.css 和当前主题文件中。36 种主题不是 36 套独立的 CSS 文件，而是 36 套令牌变量——交换一个 <link/>，整个 Deck 优雅地重新流动。这种“设计系统即代码”的架构，让视觉一致性不再是“每页手动调整”，而是“改一个变量，全局生效”。

从“一种风格”到“36 主题 × 15 模板 × 31 布局 × 47 动效”的覆盖广度。大多数 AI 演示工具提供 5-10 种风格选项。HTML PPT Studio 提供了 36 种主题（从极简白到赛博朋克，从学术论文到 VC pitch）、15 套完整 Deck 模板（从小红书白底杂志风到暗底知识图谱）、31 种单页布局（从目录到甘特图到雷达图）、47 种动效（从轻量 CSS 到电影级 Canvas 特效）。这种“主题 × 模板 × 布局 × 动效”的组合式设计，让用户可以在不同维度自由组合，而非被单一模板锁定。

从“空方法论”到“四合一预览画廊 + 完整工具链”的验证深度。大多数开源项目只有 README 和几行示例代码。HTML PPT Studio 提供了主题展厅（36 种主题在独立 iframe 中隔离展示）、布局展厅（31 种布局每 2.8 秒轮播）、动画展厅（47 种动效完整展示）、完整 Deck 展厅（15 套完整模板 gallery）——所有预览都是真实模板文件的实时渲染，不是截图，不是 mock-up。配套 new-deck.sh 脚手架、render.sh 无头渲染、56 张自测截图验证。这种“用成品说话”的验证方式，让能力承诺有了可检验的证据。

MIT 开源 + 中英文一等支持。HTML PPT Studio 采用 MIT 协议，完全开源免费可商用。项目提供完整的中文文档（README.zh-CN.md），Noto Sans SC / Noto Serif SC 中文字体预置导入。无论你是中文还是英文用户，都能获得一致的体验。

现实挑战与生态成熟度。HTML PPT Studio 并非没有短板。首先，项目输出的是 HTML 幻灯片，而非 .pptx 文件——对于需要 PowerPoint 兼容性的场景需要额外转换。其次，虽然 36 种主题覆盖了广泛的视觉风格，但主题之间通过 CSS 令牌切换的设计意味着所有主题共享同一套 HTML 结构——极端定制化的布局需求可能需要手动修改 HTML。