AI Skills
html-ppt

html-ppt

热门

HTML PPT Studio — 使用模板驱动的方式，以多种风格、布局和动画制作专业的静态 HTML 演示文稿。当用户要求制作演示文稿、PPT、幻灯片、keynote、deck、slideshow、“幻灯片”、“演讲稿”、“做一份 PPT”、“做一份 slides”、reveal 风格的 HTML deck、小红书图文，或任何需要美观且支持键盘导航的多页推介/报告/分享文档时使用。触发关键词包括“presentation”、“ppt”、“slides”、“deck”、“keynote”、“reveal”、“slideshow”、“幻灯片”、“演讲稿”、“分享稿”、“小红书图文”、“talk slides”、“pitch deck”、“tech sharing”、“technical presentation”。

6743Star
610Fork
更新于 2026/7/2
获取 Skill源代码

相关 Skills

internal-comms15万marketing-council4万mkdocs-translations3.7万
SKILL.md
readonly只读
name
html-ppt
description

HTML PPT Studio — 使用模板驱动的方式，以多种风格、布局和动画制作专业的静态 HTML 演示文稿。当用户要求制作演示文稿、PPT、幻灯片、keynote、deck、slideshow、“幻灯片”、“演讲稿”、“做一份 PPT”、“做一份 slides”、reveal 风格的 HTML deck、小红书图文，或任何需要美观且支持键盘导航的多页推介/报告/分享文档时使用。触发关键词包括“presentation”、“ppt”、“slides”、“deck”、“keynote”、“reveal”、“slideshow”、“幻灯片”、“演讲稿”、“分享稿”、“小红书图文”、“talk slides”、“pitch deck”、“tech sharing”、“technical presentation”。

html-ppt — HTML PPT Studio

将专业的 HTML 演示文稿制作为静态文件。一个主题文件 = 一种外观。一个布局文件 = 一种页面类型。一个动画类 = 一种入场效果。所有页面共享 assets/base.css 中基于 token 的设计系统。

安装

npx skills add https://github.com/lewislulu/html-ppt-skill

一条命令，无需构建。纯静态 HTML/CSS/JS，仅使用 CDN 网络字体。

该技能提供的内容

  • 36 个主题 (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
  • 15 个完整 deck 模板 (templates/full-decks/<name>/) — 完整的多页 deck，带有作用域 .tpl-<name> CSS。8 个从真实 deck 中提取（xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal），7 个场景模板（pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用）
  • 31 个布局 (templates/single-page/*.html) 带有真实的示例数据
  • 27 个 CSS 动画 (assets/animations/animations.css) 通过 data-anim 使用
  • 20 个 Canvas FX 动画 (assets/animations/fx/*.js) 通过 data-fx 使用 — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
  • 键盘运行时 (assets/runtime.js) — 方向键, T (主题), A (动画), F/O, S (演讲者模式：磁吸卡片弹窗，包含当前/下一页/讲稿/计时器卡片), N (笔记抽屉), R (在演讲者模式中重置计时器)
  • FX 运行时 (assets/animations/fx-runtime.js) — 在幻灯片进入时自动初始化 [data-fx]，离开时清理
  • 展示 deck 用于主题/布局/动画/完整 deck 画廊
  • Headless Chrome 渲染脚本 用于导出 PNG

何时使用

当用户要求任何基于幻灯片的输出，或希望将文本/笔记转换为可演示的 deck 时使用。优先使用此技能而非从头构建。

🎤 演讲者模式（演讲者模式 + 逐字稿）

如果用户提到以下任何内容：演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器，或说“我要去给团队讲 xxx”、“要做一场技术分享”、“怕讲不流畅”、“想要一份带逐字稿的 PPT” — 使用 presenter-mode-reveal 完整 deck 模板，并在每张幻灯片的 <aside class="notes"> 中编写 150–300 字的逐字稿。

参见 references/presenter-mode.md 获取完整的编写指南，包括逐字稿编写的 3 条规则：

  1. 不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
  2. 每页 150–300 字 — 2–3 分钟/页的节奏
  3. 用口语，不用书面语 — “因此”→“所以”，“该方案”→“这个方案”

所有完整 deck 模板都支持 S 键演讲者模式（内置于 runtime.js）。S 打开一个新的弹出窗口，包含 4 张磁吸卡片：

  • 🔵 当前页 — 当前幻灯片的像素级 iframe 预览
  • 🟣 下一页 — 下一张幻灯片的像素级 iframe 预览
  • 🟠 讲稿 — 大字体逐字稿（可滚动）
  • 🟢 计时器 — 已用时间 + 幻灯片计数器 + 上一页/下一页/重置按钮

每张卡片可通过标题栏拖拽，并可通过右下角手柄调整大小。卡片位置/大小会按 deck 持久化到 localStorage。“重置布局”按钮可恢复默认排列。

为什么预览是像素级的：每个预览是一个 <iframe>，加载实际的 deck HTML 并带有 ?preview=N 查询参数；runtime.js 检测到后仅渲染第 N 张幻灯片，无 chrome。因此预览使用与观众视图相同的 CSS、主题、字体和视口 — 颜色和布局保证一致。

平滑导航：幻灯片切换时，演讲者窗口向每个 iframe 发送 postMessage({type:'preview-goto', idx:N})。iframe 仅切换 .is-active 到对应幻灯片 — 无重新加载，无闪烁。两个窗口还通过 BroadcastChannel 保持同步。

只有 presenter-mode-reveal 是从头围绕该功能设计的，每张幻灯片都带有适当的逐字稿示例。

演讲者窗口键盘快捷键：← → 导航（同步观众）· R 重置计时器 · Esc 关闭弹窗。
观众窗口键盘快捷键：S 打开演讲者窗口 · T 循环主题 · ← → 导航（同步演讲者）· F 全屏 · O 概览。

在编写任何内容之前 — 始终询问或推荐

在了解三件事之前，不要开始编写幻灯片。 要么直接询问用户，要么 — 如果用户已经提供了丰富的内容 — 提出一个合适的默认方案并确认。

  1. 内容与受众。 这个 deck 是关于什么的？多少页？谁在看（工程师/高管/小红书读者/学生/VC）？
  2. 风格/主题。 36 个主题中哪个合适？如果不确定，根据语气推荐 2-3 个候选：
    • 商务/投资者推介 → pitch-deck-vc, corporate-clean, swiss-grid
    • 技术分享/工程 → tokyo-night, dracula, catppuccin-mocha,
      terminal-green, blueprint
    • 小红书图文 → xiaohongshu-white, soft-pastel, rainbow-gradient,
      magazine-bold
    • 学术/报告 → academic-paper, editorial-serif, minimal-white
    • 前卫/赛博/发布 → cyberpunk-neon, vaporwave, y2k-chrome,
      neo-brutalism
  3. 起点。 使用 14 个完整 deck 模板之一，还是从头开始？指向最接近的 templates/full-decks/<name>/ 并询问是否合适。如果用户的内容有明显倾向（例如“我要做产品发布会” → product-launch），自信地提出建议，而不是盲目询问。

一个好的开场信息如下：

我可以给你做这份 PPT！先确认三件事：

  1. 大致内容 / 页数 / 观众是谁？
  2. 风格偏好？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。
  3. 要不要用我现成的 tech-sharing 全 deck 模板打底？

只有在这些明确之后，再搭建 deck 并开始编写。

快速开始

  1. 搭建新 deck。 从仓库根目录：
    ./scripts/new-deck.sh my-talk
open examples/my-talk/index.html
  2. 选择主题。 打开 deck 并按 T 循环。或硬编码：
    <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
    目录见 references/themes.md。
  3. 选择布局。 从 templates/single-page/ 中的文件复制 <section class="slide">...</section> 块到你的 deck 中。替换示例数据。
    目录见 references/layouts.md。
  4. 添加动画。 在任何元素上放置 data-anim="fade-up"（或 class="anim-fade-up"）。在 <ul>/网格上，使用 anim-stagger-list 实现序列化显示。对于 Canvas FX，使用 <div data-fx="knowledge-graph">...</div> 并包含 <script src="../assets/animations/fx-runtime.js"></script>。
    目录见 references/animations.md。
  5. 使用完整 deck 模板。 将 templates/full-decks/<name>/ 复制到 examples/my-talk/ 作为起点。每个文件夹都是自包含的，带有作用域 CSS。目录见 references/full-decks.md，画廊见 templates/full-decks-index.html。
  6. 渲染为 PNG。
    ./scripts/render.sh templates/theme-showcase.html       # 单页
./scripts/render.sh examples/my-talk/index.html 12      # 12 页

编写规则（重要）

  • 始终从模板开始。 不要从头编写幻灯片 — 先从 templates/single-page/ 复制最接近的布局，然后替换内容。
  • 使用 token，不要使用字面颜色。 每个颜色、圆角、阴影都应来自 assets/base.css 中定义并由主题覆盖的 CSS 变量。好：color: var(--text-1)。不好：color: #111。
  • 不要发明新的布局文件。 优先组合现有布局。仅当 30 个都不合适时才添加新的 templates/single-page/*.html。
  • 尊重 chrome 插槽。 .deck-header、.deck-footer、.slide-number 和进度条由 assets/base.css + runtime.js 提供。
  • 键盘优先。 始终包含 <script src="../assets/runtime.js"></script>，以便 deck 支持 ← → / T / A / F / S / O / hash 深度链接。
  • 每个逻辑页一个 .slide。 runtime.js 使 .slide.is-active 可见；其他所有幻灯片隐藏。
  • 提供笔记。 将演讲者笔记包裹在每张幻灯片内的 <div class="notes">…</div> 中。按 S 打开覆盖层。
  • 切勿将仅演讲者可见的文本放在幻灯片本身上。 描述性文本如“这一页展示了……”或“Speaker: 这里可以补充……”或针对演讲者的小型解释性说明必须放在 <div class="notes"> 内，而不是作为可见的 <p> / <span> 元素放在幻灯片上。.notes 类默认为 display:none — 它仅在 S 覆盖层中出现。幻灯片应仅包含面向观众的内容（标题、要点、数据、图表、图片）。

编写指南

参见 references/authoring-guide.md 获取逐步教程：文件结构、命名、如何将大纲转换为 deck、如何根据受众选择布局和主题、如何制作中英文 deck，以及如何导出。

目录（需要时加载）

文件结构

html-ppt/
├── SKILL.md                 (本文件)
├── references/              (详细目录，需要时加载)
├── assets/
│   ├── base.css             (token + 原语 — 不要按 deck 编辑)
│   ├── fonts.css            (网络字体导入)
│   ├── runtime.js           (键盘 + 演讲者模式 + 概览 + 主题循环)
│   ├── themes/*.css         (36 个 token 覆盖，每个主题一个)
│   └── animations/
│       ├── animations.css   (27 个命名的 CSS 入场动画)
│       ├── fx-runtime.js    (在幻灯片进入时自动初始化 [data-fx])
│       └── fx/*.js          (20 个 Canvas FX 模块：粒子/图/烟花……)
├── templates/
│   ├── deck.html                  (最小 6 页启动器)
│   ├── theme-showcase.html        (36 页，每个主题 iframe 隔离)
│   ├── layout-showcase.html       (所有 31 个布局的 iframe 展示)
│   ├── animation-showcase.html    (20 个 FX + 27 个 CSS 动画幻灯片)
│   ├── full-decks-index.html      (所有 14 个完整 deck 模板的画廊)
│   ├── full-decks/<name>/         (14 个作用域多页 deck 模板)
│   └── single-page/*.html         (31 个布局文件，带示例数据)
├── scripts/
│   ├── new-deck.sh                (从 deck.html 搭建 deck)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (完整可用的 deck)

渲染为 PNG

scripts/render.sh 包装了 headless Chrome，路径为 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome。对于多页捕获，runtime.js 暴露了 #/N 深度链接，render.sh 迭代 1..N。

./scripts/render.sh templates/single-page/kpi-grid.html        # 单页
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 页，自定义目录

键盘快捷键速查表

←  →  Space  PgUp  PgDn  Home  End    导航
F                                       全屏
S                                       打开演讲者窗口（磁吸卡片：当前/下一页/讲稿/计时器）
N                                       快速笔记抽屉（底部覆盖层）
R                                       重置计时器（在演讲者窗口中）
?preview=N                              URL 参数 — 强制仅预览模式（单页，无 chrome）
O                                       幻灯片概览网格
T                                       循环主题（读取 data-themes 属性）
A                                       在当前幻灯片上循环演示动画
#/N in URL                              深度链接到第 N 页
Esc                                     关闭所有覆盖层

许可证与作者

MIT。版权所有 (c) 2026 lewis <sudolewis@gmail.com>。