SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场html-ppt

html-ppt

设计与创作

查看项目

更新于 10-15 17:15

技能介绍

用途

html-ppt 用于编写专业的 HTML 演示文稿，输出为静态文件。它把演示文稿拆解成彼此独立、可组合的构件：一套主题文件决定整体视觉风格，一套布局文件决定单页版式，一个动画类决定元素的入场效果，而所有页面共享位于 assets/base.css 的基于令牌（token）的设计系统。

该技能适合在用户需要任何形式的幻灯片产出，或希望将文本、笔记转化为可展示的演示文稿时使用。相比从零开始构建，官方建议优先采用此技能。

主要能力

  • 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 个完整演示模板（templates/full-decks/<name>/）：带作用域 CSS 的多页演示模板。其中 8 个提取自真实演示（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 特效动画（assets/animations/fx/*.js），通过 data-fx 使用，包括 particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力导向）、neural-net、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（演讲者模式，弹出 CURRENT / NEXT / SCRIPT / TIMER 四张磁贴卡片）、N（备注抽屉）、R（在演讲者模式中重置计时器）。
  • FX 运行时（assets/animations/fx-runtime.js）：幻灯片进入时自动初始化 [data-fx]，离开时清理。
  • 主题、布局、动画与完整模板的画廊展示页。
  • 受管 Chromium 渲染脚本，用于导出 PNG。

使用方式

安装命令：

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

官方说明为“一条命令，无需构建”，使用纯静态 HTML/CSS/JS，仅依赖 CDN 网络字体。

快速开始流程：

  1. 在仓库根目录生成新演示：./scripts/new-deck.sh my-talk，然后打开 examples/my-talk/index.html。
  2. 选择主题：打开演示按 T 循环切换，或硬编码，例如 <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">。
  3. 选择布局：从 templates/single-page/ 中复制 <section class="slide">...</section> 块，替换示例数据。
  4. 添加动画：给元素加 data-anim="fade-up"（或 class="anim-fade-up"）；在列表或网格上用 anim-stagger-list 实现依次显现；Canvas 特效使用 <div data-fx="knowledge-graph">...</div> 并引入 fx-runtime.js。
  5. 使用完整模板：将 templates/full-decks/<name>/ 复制到 examples/my-talk/ 作为起点，每个文件夹自包含作用域 CSS。
  6. 渲染为 PNG：./scripts/render.sh templates/theme-showcase.html 或 ./scripts/render.sh examples/my-talk/index.html 12（12 页）。

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

当用户提到演讲、分享、讲稿、逐字稿、speaker notes、presenter view、演讲者视图、提词器，或表达“我要去给团队讲 xxx”“要做一场技术分享”“怕讲不流畅”“想要一份带逐字稿的 PPT”时，应使用 presenter-mode-reveal 完整模板，并在每页 <aside class="notes"> 中写 150–300 字的逐字稿。逐字稿写作三条规则：它是提示信号而非讲稿（加粗核心词、过渡句独立成段）；每页 150–300 字（约 2–3 分钟/页）；使用口语而非书面语。

所有完整模板均支持 S 键演讲者模式。S 打开一个新弹窗，内含 4 张磁贴卡片：CURRENT（当前页像素级 iframe 预览）、NEXT（下一页像素级 iframe 预览）、SPEAKER SCRIPT（大字号逐字稿，可滚动）、TIMER（已用时间 + 页码计数 + 上一页/下一页/重置按钮）。每张卡片可通过标题拖动、通过右下角手柄调整大小，位置和尺寸按演示保存到 localStorage，“Reset layout”按钮可恢复默认排列。预览像素级精确的原因在于：每个预览是一个 iframe，加载实际演示 HTML 并带 ?preview=N 查询参数，runtime.js 检测到后仅渲染第 N 页且不显示界面元素。切换幻灯片时，演讲者窗口向各 iframe 发送 postMessage({type:'preview-goto', idx:N})，iframe 仅在幻灯片间切换 .is-active。两个窗口还通过 BroadcastChannel 保持同步。演讲者窗口键盘：← → 导航（同步观众端）、R 重置计时器、Esc 关闭弹窗；观众端窗口：S 打开演讲者模式、T 切换主题、← → 导航（同步演讲者端）、F 全屏、O 概览。

适用场景

  • 商业/投资人路演：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。

编写规则与限制

  • 始终从模板出发，不要从零编写幻灯片；先复制最接近的模板再替换内容。
  • 使用令牌而非字面颜色，颜色、圆角、阴影应来自 assets/base.css 定义的 CSS 变量（例如 color: var(--text-1)，而非 color: #111）。
  • 不要发明新的布局文件；优先组合已有布局。
  • 尊重界面插槽：.deck-header、.deck-footer、.slide-number 与进度条由 base.css + runtime.js 提供。
  • 键盘优先：始终引入 runtime.js，以支持 ← → / T / A / F / S / O 及哈希深链接。
  • 每个逻辑页一个 .slide，runtime.js 使 .slide.is-active 可见。
  • 提供备注：演讲者笔记放在每页的 <div class="notes">…</div> 内。
  • 绝不要把仅给演讲者看的文字放到幻灯片上，此类说明必须放进 .notes（默认 display:none），幻灯片上只应保留面向观众的内容。

其他信息

文件结构包含 SKILL.md、references/（主题、布局、动画、完整模板、演讲者模式、编写指南等目录）、assets/、templates/、scripts/（new-deck.sh、render.sh）、examples/。渲染 PNG 使用 Playwright 受管 Chromium 渲染器，官方提示不要直接调用用户安装的 Google Chrome 进行 PNG 导出；多页捕获时 runtime.js 暴露 #/N 深链接，render.sh 迭代 1..N。键盘快捷键还包括 ?preview=N 强制预览模式、O 幻灯片概览网格、T 循环主题、A 循环演示动画、#/N 深链接、Esc 关闭所有浮层。许可为 MIT，版权归 2026 lewis sudolewis@gmail.com。