太强了！这个开源项目让我告别 PowerPoint，36 套主题一键切换，还自带演讲者模式！

太强了！这个开源项目让我告别 PowerPoint，36 套主题一键切换，还自带演讲者模式！

💡 你是否厌倦了 PowerPoint 那些千篇一律的模板？今天介绍一个 GitHub 上的硬核项目——HTML PPT Studio，纯静态 HTML/CSS/JS 构建，36 套主题、31 种布局、47 种动画，还能按 S 键弹出像素级精确的演讲者模式，让你做 PPT 像写代码一样爽。

📌 先看效果

想象一下：你写了一堆 HTML，按下 F 全屏，按下 ← → 翻页，按下 S 弹出演讲者视图——当前页预览、下一页预览、逐字稿、计时器，四个磁吸卡片可拖拽可缩放，和观众窗口实时同步。

这不是 Keynote，不是 Google Slides，而是一个零构建、纯静态的 HTML 演示文稿工具。

项目自带 56 张验证截图，所有展示页面都是真实 iframe 渲染，不是截图模拟！

🎯 它能做什么？

🚀 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，但加了?preview=N参数：

// 📄 assets/runtime.js（简化）// 检测预览模式，只渲染第 N 页，去掉所有 UI 镜片if(newURLSearchParams(location.search).has('preview')){// 只显示指定 slide，无 chrome}

翻页时，演讲者窗口通过postMessage通知 iframe 切换.is-active类——无重载、无闪烁。两个窗口通过BroadcastChannel实时同步。

Canvas FX：自动初始化与清理

每个 Canvas 特效是独立模块，通过data-fx属性声明：

<sectionclass="slide"data-fx="particle-burst"><!-- 幻灯片内容 --></section>

fx-runtime.js在 slide 进入时自动初始化，离开时自动清理——你不需要手动管理动画生命周期。

// 📄 assets/animations/fx-runtime.js（简化）// 监听 slide 切换，自动 init / destroyobserver=newMutationObserver(()=>{constactiveSlide=document.querySelector('.slide.is-active');initFx(activeSlide.dataset.fx);// 进入时初始化cleanupFx(previousFx);// 离开时清理});

📋 36 套主题速览

⚖️ 优缺点分析

💡 适用场景

• ✅技术分享 / Meetup 演讲— tokyo-night + terminal-green 主题绝配
• ✅产品发布会 / 路演— pitch-deck-vc 模板直接用
• ✅小红书图文— xiaohongshu-white 主题 + 9 页 3:4 布局
• ✅周报 / 月报— weekly-report 模板
• ✅课程模块— course-module 模板
• ✅学术报告— academic-paper 主题
• ✅Git 友好— 纯文本文件，版本管理无压力

🎹 键盘快捷键一览

📚 总结

HTML PPT Studio 是一个用写代码的方式做 PPT的硬核工具。它不跟 PowerPoint 拼"简单易用"，而是给开发者一条更爽的路：Token 驱动换肤、iframe 隔离预览、Canvas 特效自动管理、演讲者模式像素级精确——每一个设计决策都透着"工程师审美"。

如果你是一个更习惯 Markdown 而不是拖拽排版的开发者，如果你厌倦了 PowerPoint 换台电脑字体就崩的痛苦，如果你想要一个能 Git 管理的演示文稿——这个项目值得你试一试。

推荐指数：⭐⭐⭐⭐⭐

📢 原文链接：https://github.com/lewislulu/html-ppt-skill

标签：#html-ppt-skill #HTML #CSS #演示文稿 #PPT #前端