需要制作多主题、多布局、带动画和演讲者备注的纯静态…

用纯静态 HTML/CSS/JS 快速生成专业演示文稿，支持 36 个主题、31 个布局、47 个动画，无需构建步骤。

适用场景

解决思路

1. 运行 `npx skills add https://github.com/lewislulu/html-ppt-skill` 将技能注册到 agent runtime。
2. 或运行 `git clone https://github.com/lewislulu/html-ppt-skill` 直接克隆技能仓库。
3. 运行 `./scripts/new-deck.sh my-talk` 从基础模板创建新 deck；输出为 `examples/my-talk/index.html`，可直接编辑。
4. 了解关键路径：`assets/base.css` 是共享 tokens 和 primitives；`assets/runtime.js` 提供键盘导航、演讲者模式、概览；`assets/themes/*.css` 是 36 个主题 token 文件；`assets/animations/animations.css` 包含 27 个命名 CSS 动画；`assets/animations/fx-runtime.js` 在进入幻灯片时自动初始化 `[data-fx]`；`assets/animations/fx/*.js` 是 20 个 canvas FX 模块；`templates/deck.html` 是最小 starter；`templates/theme-showcase.html` 在 iframe 隔离中展示全部 36 个主题；`templates/layout-showcase.html` 展示全部 31 个布局；`templates/animation-showcase.html` 展示 47 个动画幻灯片；`templates/full-decks-index.html` 是 14 个 deck 的画廊；`templates/full-decks/<name>/` 是 14 个 scoped 多幻灯片 deck；`templates/single-page/*.html` 是 31 个带演示数据的布局文件；`examples/demo-deck/` 是完整可用 deck。
5. 构建最小 deck：在 HTML head 中使用 `<meta charset='UTF-8' />`、`<meta name='viewport' content='width=device-width, initial-scale=1.0' />`、`<title>My Talk</title>`；引入 `../../assets/base.css`；选择一个主题文件如 `../../assets/themes/tokyo-night.css`；可选引入 `../../assets/animations/animations.css`。
6. 在 body 中创建 `<section class='slide' data-layout='cover'>` 等幻灯片，每页内部使用 `.slide-content` 包裹内容。
7. 对需要入场动画的元素添加 `animate-on-enter` 和动画类，如 `rise-in`、`fade-up`、`zoom-pop`、`blur-in`；用 `style='--delay:0.3s'` 设置延迟。
8. 用 `<ul class='stagger-list'><li>...</li></ul>` 创建逐项出现列表。
9. 用 `<blockquote>` 和 `<cite>` 创建大引用页。
10. 在 body 底部先引入 `../../assets/runtime.js`，再引入 `../../assets/animations/fx-runtime.js`。
11. 更换主题：替换主题 `<link>` 为 `assets/themes/*.css` 中任一文件即可改变整个 deck 外观；可用主题包括 light/editorial 的 `minimal-white.css`、`editorial-serif.css`、`soft-pastel.css`、`academic-paper.css`，dark/moody 的 `tokyo-night.css`、`dracula.css`、`catppuccin-mocha.css`、`gruvbox-dark.css`、`nord.css`，bold/design-forward 的 `neo-brutalism.css`、`glassmorphism.css`、`cyberpunk-neon.css`、`memphis-pop.css`、`vaporwave.css`，business/professional 的 `corporate-clean.css`、`pitch-deck-vc.css`、`swiss-grid.css`，special/cultural 的 `xiaohongshu-white.css`、`japanese-minimal.css`、`terminal-green.css`。
12. 运行 `open templates/theme-showcase.html` 在线浏览全部 36 个主题。
13. 设置布局：在每个 `<section class='slide'>` 上用 `data-layout` 指定 31 种布局之一；结构布局有 `cover`、`toc`、`section-divider`、`thanks`、`cta`；内容布局有 `bullets`、`two-column`、`three-column`、`big-quote`、`table`、`code`、`diff`、`terminal`；数据/统计布局有 `stat-highlight`、`kpi-grid`、`chart-bar`、`chart-line`、`chart-pie`、`chart-radar`；图示/流程布局有 `flow-diagram`、`timeline`、`roadmap`、`mindmap`、`arch-diagram`、`process-steps`、`gantt`；对比布局有 `comparison`、`pros-cons`、`todo-checklist`；视觉布局有 `image-hero`、`image-grid`。
14. 运行 `open templates/layout-showcase.html` 在线浏览全部 31 个布局。
15. 使用 CSS 动画：给任意元素添加动画 class；入场/淡入类如 `rise-in`、`fade-up`、`zoom-pop`、`blur-in`；文本效果如 `typewriter`、`glitch-in`、`neon-glow`、`shimmer-sweep`、`gradient-flow`；列表用 `stagger-list`；数字用 `counter-up` 并设 `data-target='1000000'`；3D/高级用 `card-flip-3d`、`cube-rotate-3d`、`page-turn-3d`、`perspective-zoom`；滚动/运动用 `marquee-scroll`、`kenburns`、`parallax-tilt`、`ripple-reveal`、`spotlight`；用 `--delay` CSS 变量做错峰。
16. 使用 Canvas FX 动画：在 `<section class='slide'>` 上加 `data-fx` 属性，在进入幻灯片时触发电影感 canvas 效果；粒子效果用 `particle-burst`；庆祝用 `confetti-cannon`；科技/数据用 `knowledge-graph`、`neural-net`、`matrix-rain`、`data-stream`；太空/氛围用 `starfield`、`constellation`、`galaxy-swirl`、`orbit-ring`；文本 FX 用 `typewriter-multi`、`word-cascade`、`letter-explode`、`counter-explosion`；视觉用 `gradient-blob`、`sparkle-trail`、`shockwave`、`firework`、`chain-react`、`magnetic-field`；`fx-runtime.js` 会自动初始化，无需额外 JS。
17. 使用 14 个 full-deck 模板：从 `templates/full-decks/<name>/` 使用预建完整 deck；可用 `pitch-deck/`、`product-launch/`、`tech-sharing/`、`weekly-report/`、`course-module/`、`xhs-post/`（9-slide 3:4 ratio）、`xhs-white-editorial/`、`xhs-pastel-card/`、`graphify-dark-graph/`、`hermes-cyber-terminal/`、`knowledge-arch-blueprint/`、`obsidian-claude-gradient/`、`testing-safety-alert/`、`dir-key-nav-minimal/`；每个 deck 使用 scoped `.tpl-<name>` CSS，可安全并排嵌入多个 deck。
18. 运行 `open templates/full-decks-index.html` 浏览全部 14 个 full-deck 模板。
19. 制作 Pitch Deck（VC Style）：使用 `../../assets/themes/pitch-deck-vc.css` 和 `../../assets/animations/animations.css`；封面页用 `data-layout='cover' data-fx='gradient-blob'`，标题用 `animate-on-enter rise-in`，副标题用 `fade-up` 带 `--delay`；traction 页用 `data-layout='stat-highlight'`，在 `.kpi-row` 中放 `.kpi`，数字用 `counter-up` 和 `data-target`；问题/解决方案页用 `data-layout='two-column'`，两列用 `.col`，列表用 `stagger-list`；结尾页用 `data-layout='cta' data-fx='confetti-cannon'`；底部引入 `../../assets/runtime.js` 和 `../../assets/animations/fx-runtime.js`。
20. 制作 Tech Talk / Engineering：使用 `../../assets/themes/tokyo-night.css`；封面页用 `data-layout='cover' data-fx='neural-net'`，标题用 `neon-glow`；代码页用 `data-layout='code'`，`<pre><code class='language-python'>...`；时间线页用 `data-layout='timeline'` 和 `.timeline`/`.timeline-item`，含 `.date` 和 `.event`；底部引入 `runtime.js` 和 `fx-runtime.js`。
21. 制作小红书 Style（3:4 ratio）：使用 `../../assets/themes/xiaohongshu-white.css`；加 `<style>` 设置 `.slide { aspect-ratio: 3 / 4; max-width: 480px; }`；封面用 `data-layout='cover'`，标题用 `rise-in`，副标题用 `fade-up`；内容页用 `data-layout='image-hero'`，含 `.tag`、`h2`、`p`；结尾用 `data-layout='thanks'`；底部引入 `runtime.js`。
22. 添加演讲者备注：在 `<section class='slide'>` 内添加 `<aside class='slide-notes'>...</aside>`，按 `S` 显示。
23. 做深链接和 URL 导航：在 URL 后追加 `#N` 或 `?slide=N` 直接链接到第 N 张幻灯片，例如 `<a href='my-deck/index.html#5'>Jump to Architecture slide</a>`；从 JS 用 `window.location.hash = '3';`。
24. 使用键盘控制：`← → Space PgUp PgDn` 导航幻灯片；`Home / End` 第一/最后一张；`F` 全屏；`S` 演讲者备注覆盖层；`O` 幻灯片概览网格；`T` 循环主题；`A` 在当前幻灯片演示动画。
25. 渲染为 PNG（Headless Chrome）：运行 `./scripts/render.sh templates/theme-showcase.html` 渲染单个模板默认视口；运行 `./scripts/render.sh examples/my-talk/index.html 12` 渲染指定 deck 的 12 张幻灯片；输出在 `scripts/verify-output/`，用 `ls scripts/verify-output/*.png` 查看。
26. 浏览 showcase 文件：`open templates/theme-showcase.html` 查看全部 36 个主题（每个在隔离 iframe）；`open templates/layout-showcase.html` 查看全部 31 个布局和真实演示数据；`open templates/animation-showcase.html` 查看全部 47 个动画（CSS + canvas FX）；`open templates/full-decks-index.html` 查看全部 14 个 full-deck 模板画廊。
27. 排查动画不触发：确保 `fx-runtime.js` 在 `runtime.js` 之后加载；检查 `data-fx` 值与 `assets/animations/fx/*.js` 中的名称匹配；Canvas FX 需要可见 `<canvas>`，缺失时 `fx-runtime.js` 会自动注入。
28. 排查主题不应用：同一时间只启用一个 theme `<link>`；theme 文件必须在 `base.css` 之后加载；嵌入 scoped deck 模板时在 `<body>` 添加 `.tpl-<name>` 类。
29. 排查离线字体不加载：`fonts.css` 从 Google Fonts CDN 加载 `Noto Sans SC` / `Noto Serif SC`；离线使用需下载字体并更新 `assets/fonts.css` 中的 `@font-face` 路径。
30. 排查 3:4 比例幻灯片拉伸：给 `.slide` 添加 `aspect-ratio: 3 / 4` 并限制 `max-width`；默认幻灯片是 16:9 宽屏。
31. 排查代码块未高亮：从 CDN 引入 highlight.js：`<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'></script>`；在 DOM 加载后调用 `hljs.highlightAll()`。
32. 排查图表布局空白：`chart-bar`、`chart-line`、`chart-pie`、`chart-radar` 布局需要 Chart.js；引入 `<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>`。

适用边界 · 注意事项

• 需要生成原生 `.pptx`/`.key` 文件或要求最终用户在 PowerPoint/Keynote 中编辑时，不适用。
• 需要后端动态数据、数据库、登录或实时协作时，不适用（本技能输出纯静态 HTML/CSS/JS）。
• 完全离线且不能下载或本地化 Google Fonts、highlight.js、Chart.js 等 CDN 资源时，不适用，除非先自行内联或本地化这些资源。