太强了这个开源项目让我告别 PowerPoint36 套主题一键切换还自带演讲者模式 你是否厌倦了 PowerPoint 那些千篇一律的模板今天介绍一个 GitHub 上的硬核项目——HTML PPT Studio纯静态 HTML/CSS/JS 构建36 套主题、31 种布局、47 种动画还能按 S 键弹出像素级精确的演讲者模式让你做 PPT 像写代码一样爽。 先看效果想象一下你写了一堆 HTML按下 F 全屏按下 ← → 翻页按下 S 弹出演讲者视图——当前页预览、下一页预览、逐字稿、计时器四个磁吸卡片可拖拽可缩放和观众窗口实时同步。这不是 Keynote不是 Google Slides而是一个零构建、纯静态的 HTML 演示文稿工具。项目自带 56 张验证截图所有展示页面都是真实 iframe 渲染不是截图模拟 它能做什么特性说明 36 套主题从 minimal-white 到 cyberpunk-neon换一个link整体换肤 15 套完整模板8 套真实项目提取 7 套场景模板路演、技术分享、周报等 31 种页面布局cover、toc、bullets、timeline、chart-bar、arch-diagram 等✨ 27 种 CSS 动画fade-up、glitch-in、typewriter、neon-glow、card-flip-3d 等 20 种 Canvas 特效粒子爆发、烟花、星空、知识图谱、神经网络脉冲、星系旋涡等 演讲者模式S 键弹出当前页/下一页/逐字稿/计时器磁吸卡片可拖拽️ 4 套展示 Deck主题/布局/动画/全套模板各一个展示页 5 分钟快速上手环境要求一个现代浏览器Chrome / Edge / Firefox可选Node.js 用于安装为 AgentSkill第一步安装# 作为 AgentSkill 安装推荐npx skillsaddhttps://github.com/lewislulu/html-ppt-skill安装后任何支持 AgentSkills 的 Agent 都能直接生成 PPT比如做一份 8 页的技术分享 slides用 cyberpunk 主题 turn this outline into a pitch deck 做一个小红书图文9 张白底柔和风第二步创建你的第一份 Deck# 从基础模板脚手架./scripts/new-deck.sh my-talk# 打开浏览器预览openexamples/my-talk/index.html第三步选择主题 布局# 浏览所有 36 套主题opentemplates/theme-showcase.html# 浏览所有 31 种布局opentemplates/layout-showcase.html# 浏览所有 47 种动画opentemplates/animation-showcase.html在浏览器中按T键可循环切换主题实时预览效果第四步使用完整模板不想从零开始直接用现成的 15 套模板# 查看所有模板opentemplates/full-decks-index.html# 复制一套模板开始cp-rtemplates/full-decks/tech-sharing/ examples/my-talk/ 核心原理揭秘设计系统Token 驱动一键换肤所有颜色、圆角、阴影、字体决策都定义在assets/base.css的 CSS 变量中每个主题文件只做变量覆盖/* assets/themes/tokyo-night.css */:root{--bg-1:#1a1b2e;--text-1:#a9b1d6;--accent:#7aa2f7;--radius:8px;}换主题 换一个link整个 Deck 瞬间变脸。演讲者模式像素级精确的秘密为什么预览和观众看到的完全一致因为每个预览卡片是一个iframe加载同一个 Deck HTML但加了?previewN参数// assets/runtime.js简化// 检测预览模式只渲染第 N 页去掉所有 UI 镜片if(newURLSearchParams(location.search).has(preview)){// 只显示指定 slide无 chrome}翻页时演讲者窗口通过postMessage通知 iframe 切换.is-active类——无重载、无闪烁。两个窗口通过BroadcastChannel实时同步。Canvas FX自动初始化与清理每个 Canvas 特效是独立模块通过data-fx属性声明sectionclassslidedata-fxparticle-burst!-- 幻灯片内容 --/sectionfx-runtime.js在 slide 进入时自动初始化离开时自动清理——你不需要手动管理动画生命周期。// assets/animations/fx-runtime.js简化// 监听 slide 切换自动 init / destroyobservernewMutationObserver((){constactiveSlidedocument.querySelector(.slide.is-active);initFx(activeSlide.dataset.fx);// 进入时初始化cleanupFx(previousFx);// 离开时清理}); 36 套主题速览风格主题名适合场景 极简minimal-white, editorial-serif, sharp-mono, japanese-minimal学术报告、正式汇报 暗色tokyo-night, dracula, catppuccin-mocha, gruvbox-dark, nord技术分享、开发者演示 渐变aurora, rainbow-gradient, sunset-warm, vaporwave创意展示、发布会 科技cyberpunk-neon, terminal-green, blueprint, engineering-whiteprint工程演示、架构分享 出版magazine-bold, swiss-grid, bauhaus, academic-paper杂志风、论文展示 柔和soft-pastel, xiaohongshu-white, catppuccin-latte, rose-pine小红书图文、生活方式 商务corporate-clean, pitch-deck-vc, news-broadcast投资路演、商务汇报️ 潮流neo-brutalism, glassmorphism, y2k-chrome, retro-tv品牌展示、潮流内容⚖️ 优缺点分析维度评分说明 设计感⭐⭐⭐⭐⭐专业设计师级默认值告别PPT 2006 美学 易用性⭐⭐⭐⭐HTML 基础即可上手AgentSkill 加持更丝滑 体积⭐⭐⭐⭐⭐纯静态零构建CDN 仅用于字体和可选库 演讲体验⭐⭐⭐⭐⭐像素级预览 磁吸卡片 逐字稿比 PowerPoint 好用 跨平台⭐⭐⭐⭐⭐浏览器即播放器任何设备无需安装 协作⭐⭐⭐纯文件适合 Git 管理但不如在线文档实时协作 数据图表⭐⭐⭐内置 bar/line/pie/radar 布局但不如专业 BI 工具 适用场景✅技术分享 / Meetup 演讲— tokyo-night terminal-green 主题绝配✅产品发布会 / 路演— pitch-deck-vc 模板直接用✅小红书图文— xiaohongshu-white 主题 9 页 3:4 布局✅周报 / 月报— weekly-report 模板✅课程模块— course-module 模板✅学术报告— academic-paper 主题✅Git 友好— 纯文本文件版本管理无压力 键盘快捷键一览快捷键功能← → Space PgUp PgDn翻页F全屏S打开演讲者窗口磁吸卡片N快速笔记抽屉T循环切换主题A当前页播放演示动画O幻灯片总览网格R重置计时器演讲者窗口#/NURL 深链接到第 N 页 总结HTML PPT Studio 是一个用写代码的方式做 PPT的硬核工具。它不跟 PowerPoint 拼简单易用而是给开发者一条更爽的路Token 驱动换肤、iframe 隔离预览、Canvas 特效自动管理、演讲者模式像素级精确——每一个设计决策都透着工程师审美。如果你是一个更习惯 Markdown 而不是拖拽排版的开发者如果你厌倦了 PowerPoint 换台电脑字体就崩的痛苦如果你想要一个能 Git 管理的演示文稿——这个项目值得你试一试。推荐指数⭐⭐⭐⭐⭐ 原文链接https://github.com/lewislulu/html-ppt-skill标签#html-ppt-skill #HTML #CSS #演示文稿 #PPT #前端