文章正文
这份源码是一个做专业静态 HTML 演示文稿的 Studio，官方名字叫 HTML PPT Studio。
它走的是”一套 token 设计系统管全局”的路线：一个主题文件决定外观，一个布局文件决定页面类型，一个动画 class 决定入场效果，全部是纯静态 HTML/CSS/JS。
内置规模很夸张——36 套主题、31 种布局、27 个 CSS 动画，外加 20 个 canvas 画布特效（粒子、烟花、星空、知识图谱那种）。
最贴心的是演讲者模式：按 S 弹出一个浮窗，左边是当前页和下一页预览，中间是逐字稿大字，右边是计时器，线下演讲能直接当提词器用。
键盘运行时也很完整，方向键翻页、T 切主题、F 全屏、O 总览，幻灯片还能用 URL 锚点直链到某一页。
需要出图时，scripts/render.sh 调用无头 Chrome 把每一页截成 PNG，整体是静态、干净、好维护的一套路子。
源码简介
这是 html-ppt-skill（lewislulu）的 AI Skill 源码，用于生成专业静态 HTML 演示文稿。
基于 token 化设计系统，内置 36 套主题、31 种布局、27 个 CSS 动画与 20 个画布特效。
源码含键盘运行时、演讲者模式（逐字稿+计时器）与无头 Chrome 导出脚本，适合需要演讲辅助、结构化内容与快速出图的开发者下载参考。
适用场景
- 技术分享、线下演讲，需要逐字稿提词与计时器辅助
- 结构化报告、产品发布、小红书图文等多风格演示
- 想要主题/布局/动画即取即用、静态无构建的干净方案
技术栈与运行环境
- 前端：纯静态 HTML / CSS / JS，仅依赖 CDN webfonts，无 npm 构建
- 设计系统：assets/base.css 提供 token 与基础组件，主题以 assets/themes/*.css 覆盖
- 运行时：assets/runtime.js 提供键盘导航、主题切换、演讲者模式、总览
- 动画：assets/animations/animations.css（CSS）+ fx/*.js（canvas 特效）
- 导出：无头 Chrome（scripts/render.sh 截 PNG）
- 安装：npx skills add 一键引入，无需构建
功能亮点
- Token 化设计系统 + 36 套主题：assets/base.css 定义 token，assets/themes/*.css 提供 36 个主题覆盖。
- 31 种布局 + 15 套全 deck 模板：templates/single-page/*.html 为 31 个布局，templates/full-decks/ 含 15 个完整 deck（含 presenter-mode-reveal）。
- 27 CSS 动画 + 20 画布特效：assets/animations/animations.css 与 fx/*.js 提供 data-anim / data-fx 驱动的动效。
- 演讲者模式（逐字稿+计时器）：runtime.js 按 S 弹出浮窗，含 CURRENT / NEXT / SPEAKER SCRIPT / TIMER 四张磁吸卡片，notes 抽屉放逐字稿。
- 完整键盘运行时：←→ / T（主题）/ A（动画）/ F（全屏）/ S（演讲者）/ N（notes）/ O（总览）+ URL 锚点直链。
- 无头 Chrome 导出 PNG：scripts/render.sh 逐页截图，适合出图或归档。
安装与部署提示
- 一键引入：npx skills add https://github.com/lewislulu/html-ppt-skill（纯静态，无构建）。
- 在支持 skill 的 agent 环境按 SKILL.md 确定内容、风格与起点模板。
- 用 ./scripts/new-deck.sh 脚手架新建 deck，拷贝 templates/single-page 布局填充内容。
- 导出 PNG 需本机有 Chrome；scripts/render.sh 调用无头 Chrome 迭代截图。
截图与演示说明
- examples/demo-deck/index.html 完整可运行 deck。
- templates/theme-showcase.html（36 套主题巡览）、layout-showcase.html（31 种布局）。
- animation-showcase.html（20 FX + 27 CSS 动画）与 full-decks-index.html（15 套全 deck 模板）。
- 演讲者模式浮窗：按 S 弹出的 CURRENT/NEXT/SCRIPT/TIMER 四卡与 notes 抽屉。
- scripts/render.sh 。
常见问题
#### 需要联网或构建吗？
产物是纯静态 HTML，仅字体走 CDN webfonts，无 npm 构建；导出 PNG 需要本机 Chrome 环境。
#### 适合二次开发吗？
主题、布局、动画都是可读的 CSS/JS 文件，runtime.js 与 base.css 结构清晰，方便新增主题或改造运行时。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本项目为 AI Skill 加前端模板，运行依赖对应 agent 环境与 Chrome（仅 PNG 导出需要）。
GitHub项目开源地址：https://github.com/lewislulu/html-ppt-skill
