当前位置：首页 > news >正文

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

news 2026/7/3 7:46:30

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

💡 你是否厌倦了 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，但加了?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 套主题速览

风格	主题名	适合场景
🤍 极简	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	重置计时器（演讲者窗口）
#/N	URL 深链接到第 N 页