html-ppt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

html-ppt — HTML PPT Studio

html-ppt — HTML PPT 工作室

Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in

assets/base.css

制作专业的静态HTML演示文稿。一个主题文件对应一种视觉风格，一个布局文件对应一种页面类型，一个动画类对应一种入场效果。所有页面共享

assets/base.css

中基于令牌（token）的设计系统。

Install

安装

bash

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

One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.

bash

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

一键安装，无需构建。纯静态HTML/CSS/JS，仅使用CDN网络字体。

What the skill gives you

本工具提供的功能

36 themes (
```
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 full-deck templates (
```
templates/full-decks/<name>/
```
) — complete multi-slide decks with scoped
```
.tpl-<name>
```
CSS. 8 extracted from real-world decks (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 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用)
31 layouts (
```
templates/single-page/*.html
```
) with realistic demo data

27 CSS animations (

assets/animations/animations.css

) via

data-anim

20 canvas FX animations (
```
assets/animations/fx/*.js
```
) via
```
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
Keyboard runtime (
```
assets/runtime.js
```
) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
FX runtime (
```
assets/animations/fx-runtime.js
```
) — auto-inits
```
[data-fx]
```
on slide enter, cleans up on leave
Showcase decks for themes / layouts / animations / full-decks gallery
Headless Chrome render script for PNG export

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>/
```
）—— 包含带作用域
```
.tpl-<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（演讲者模式：弹出磁吸卡片，包含当前页/下一页/讲稿/计时器）、N（笔记抽屉）、R（重置演讲者模式计时器）
特效运行时（
```
assets/animations/fx-runtime.js
```
）—— 幻灯片进入时自动初始化
```
[data-fx]
```
元素，离开时清理
主题/布局/动画/完整演示文稿的展示画廊
Headless Chrome渲染脚本，用于导出PNG图片

When to use

使用场景

Use when the user asks for any kind of slide-based output or wants to turn text/notes into a presentable deck. Prefer this over building from scratch.

当用户需要任何基于幻灯片的输出，或是想要将文字/笔记转化为美观的演示文稿时，均可使用本工具。优先使用本工具而非从零开始构建。

🎤 Presenter Mode (演讲者模式 + 逐字稿)

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

If the user mentions any of: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use the
presenter-mode-reveal
full-deck template and write 150–300 words of 逐字稿 in each slide's

<aside class="notes">

See references/presenter-mode.md for the full authoring guide including the 3 rules of speaker script writing:

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

All full-deck templates support the S key presenter mode (it's built into

runtime.js

). S opens a new popup window with 4 magnetic cards:

🔵 CURRENT — pixel-perfect iframe preview of the current slide
🟣 NEXT — pixel-perfect iframe preview of the next slide
🟠 SPEAKER SCRIPT — large-font 逐字稿 (scrollable)
🟢 TIMER — elapsed time + slide counter + prev/next/reset buttons

Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to

localStorage

per deck. A "Reset layout" button restores the default arrangement.

Why the previews are pixel-perfect: each preview is an

<iframe>

that loads the actual deck HTML with a

?preview=N

query param;

runtime.js

detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.

Smooth navigation: on slide change, the presenter window sends

postMessage({type:'preview-goto', idx:N})

to each iframe. The iframe just toggles

.is-active

between slides — no reload, no flicker. The two windows also stay in sync via

BroadcastChannel

Only

presenter-mode-reveal

is designed from the ground up around the feature with proper example 逐字稿 on every slide.

Keyboard in presenter window:

← →

navigate (syncs audience) ·

reset timer ·

Esc

close popup. Keyboard in audience window:

open presenter ·

cycle theme ·

← →

navigate (syncs presenter) ·

fullscreen ·

overview.

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

查看references/presenter-mode.md获取完整创作指南，其中包含讲稿撰写的三条规则：

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

所有完整演示文稿模板均支持S键触发演讲者模式（该功能内置在

runtime.js

中）。按下S键会弹出一个新窗口，包含4张磁吸卡片：

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

每张卡片可通过标题栏拖动，并可通过右下角手柄调整大小。卡片的位置和尺寸会按演示文稿保存到

localStorage

中。点击“重置布局”按钮可恢复默认排列。

预览为何能做到像素级完美：每个预览都是一个

<iframe>

，加载带

?preview=N

查询参数的演示文稿HTML；

runtime.js

会检测该参数，仅渲染第N张幻灯片，无多余界面。因此预览使用的CSS、主题、字体和视口与观众端完全一致——颜色和布局绝对相同。

流畅导航：切换幻灯片时，演讲者窗口会向每个iframe发送

postMessage({type:'preview-goto', idx:N})

消息。iframe仅需在幻灯片间切换

.is-active

类——无需重新加载，无闪烁。两个窗口还通过

BroadcastChannel

保持同步。

只有

presenter-mode-reveal

是完全围绕该功能设计的，每张幻灯片都带有合适的逐字稿示例。

演讲者窗口快捷键：

← →

导航（与观众端同步）·

重置计时器 ·

Esc

关闭弹窗。观众端窗口快捷键：

打开演讲者模式 ·

切换主题 ·

← →

导航（与演讲者端同步）·

全屏 ·

概览。

Before you author anything — ALWAYS ask or recommend

开始创作前 —— 务必询问或推荐

Do not start writing slides until you understand three things. Either ask the user directly, or — if they already handed you rich content — propose a tasteful default and confirm.

Content & audience. What's the deck about, how many slides, who's watching (engineers / execs / 小红书读者 / 学生 / VC)?

Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3 candidates based on tone:

Business / investor pitch →
```
pitch-deck-vc
```
,
```
corporate-clean
```
,
```
swiss-grid
```

Tech sharing / engineering →

tokyo-night

dracula

catppuccin-mocha

terminal-green

blueprint

小红书图文 →

xiaohongshu-white

soft-pastel

rainbow-gradient

magazine-bold

Academic / report →

academic-paper

editorial-serif

minimal-white

Edgy / cyber / launch →

cyberpunk-neon

vaporwave

y2k-chrome

neo-brutalism

Starting point. One of the 14 full-deck templates, or scratch? Point to the closest
```
templates/full-decks/<name>/
```
and ask if it fits. If the user's content suggests something obvious (e.g. "我要做产品发布会" →
```
product-launch
```
), propose it confidently instead of asking blindly.

A good opening message looks like:

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

Only after those are clear, scaffold the deck and start writing.

在开始制作幻灯片前，必须先明确三件事。可以直接询问用户，或者如果用户已经提供了丰富内容，就提出一个合适的默认方案并确认。

内容与受众。演示文稿的主题是什么？需要多少页？受众是谁（工程师/高管/小红书读者/学生/风投）？
风格/主题。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
```
起始模板。使用14套完整演示文稿模板中的一套，还是从零开始？指出最接近的
```
templates/full-decks/<name>/
```
模板并询问是否合适。如果用户的内容明显指向某类模板（例如“我要做产品发布会” →
```
product-launch
```
），可以直接自信地推荐，无需盲目询问。

一个好的开场示例：

我可以帮你制作这份PPT！先确认三件事：
大致内容/页数/观众是谁？
风格偏好？我建议从这3个主题里选一个：
tokyo-night
（技术分享默认风格）、
xiaohongshu-white
（小红书风）、
corporate-clean
（正式汇报）。
要不要用现成的
tech-sharing
完整演示文稿模板作为基础？

只有在明确这三点后，再搭建演示文稿并开始创作。

Quick start

快速开始

Scaffold a new deck. From the repo root:

bash

./scripts/new-deck.sh my-talk
open examples/my-talk/index.html

Pick a theme. Open the deck and press
```
T
```
to cycle. Or hard-code it:
html
```
<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
```
Catalog in references/themes.md.
Pick layouts. Copy
```
<section class="slide">...</section>
```
blocks out of files in
```
templates/single-page/
```
into your deck. Replace the demo data. Catalog in references/layouts.md.

Add animations. Put

data-anim="fade-up"

(or

class="anim-fade-up"

) on any element. On

<ul>

/grids, use

anim-stagger-list

for sequenced reveals. For canvas FX, use

<div data-fx="knowledge-graph">...</div>

and include

<script src="../assets/animations/fx-runtime.js"></script>

. Catalog in references/animations.md.

Use a full-deck template. Copy
```
templates/full-decks/<name>/
```
into
```
examples/my-talk/
```
as a starting point. Each folder is self-contained with scoped CSS. Catalog in references/full-decks.md and gallery at
```
templates/full-decks-index.html
```
.

Render to PNG.

bash

./scripts/render.sh templates/theme-showcase.html       # one shot
./scripts/render.sh examples/my-talk/index.html 12      # 12 slides

搭建新演示文稿。从仓库根目录执行：

bash

./scripts/new-deck.sh my-talk
open examples/my-talk/index.html

选择主题。打开演示文稿后按T键循环切换。或者硬编码主题：
html
```
<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
```
主题目录见references/themes.md。
选择布局。将
```
templates/single-page/
```
文件夹中文件的
```
<section class="slide">...</section>
```
块复制到你的演示文稿中，替换示例数据。布局目录见references/layouts.md。
添加动画。在任意元素上添加
```
data-anim="fade-up"
```
（或
```
class="anim-fade-up"
```
）。对于
```
<ul>
```
/网格布局，使用
```
anim-stagger-list
```
实现序列式展示效果。如需Canvas特效，使用
```
<div data-fx="knowledge-graph">...</div>
```
并引入
```
<script src="../assets/animations/fx-runtime.js"></script>
```
。动画目录见references/animations.md。
使用完整演示文稿模板。将
```
templates/full-decks/<name>/
```
复制到
```
examples/my-talk/
```
作为起始模板。每个文件夹都是独立的，包含作用域CSS。完整模板目录见references/full-decks.md，画廊见
```
templates/full-decks-index.html
```
。

渲染为PNG。

bash

./scripts/render.sh templates/theme-showcase.html       # 单页渲染
./scripts/render.sh examples/my-talk/index.html 12      # 渲染12页幻灯片

Authoring rules (important)

创作规则（重要）

Always start from a template. Don't author slides from scratch — copy the closest layout from
```
templates/single-page/
```
first, then replace content.
Use tokens, not literal colors. Every color, radius, shadow should come from CSS variables defined in
```
assets/base.css
```
and overridden by a theme. Good:
```
color: var(--text-1)
```
. Bad:
```
color: #111
```
.
Don't invent new layout files. Prefer composing existing ones. Only add a new
```
templates/single-page/*.html
```
if none of the 30 fit.

Respect chrome slots.

.deck-header

.deck-footer

.slide-number

and the progress bar are provided by

assets/base.css

runtime.js

Keyboard-first. Always include
```
<script src="../assets/runtime.js"></script>
```
so the deck supports ← → / T / A / F / S / O / hash deep-links.
One
.slide
per logical page.
```
runtime.js
```
makes
```
.slide.is-active
```
visible; all others are hidden.
Supply notes. Wrap speaker notes in
```
<div class="notes">…</div>
```
inside each slide. Press S to open the overlay.
NEVER put presenter-only text on the slide itself. Descriptive text like "这一页展示了……" or "Speaker: 这里可以补充……" or small explanatory captions aimed at the presenter MUST go inside
```
<div class="notes">
```
, NOT as visible
```
<p>
```
/
```
<span>
```
elements on the slide. The
```
.notes
```
class is
```
display:none
```
by default — it only appears in the S overlay. Slides should contain ONLY audience-facing content (titles, bullet points, data, charts, images).

始终从模板开始。不要从零开始制作幻灯片——先从
```
templates/single-page/
```
中复制最接近的布局，再替换内容。
使用令牌变量，而非硬编码颜色。所有颜色、圆角、阴影都应来自
```
assets/base.css
```
中定义的CSS变量，并可通过主题覆盖。正确写法：
```
color: var(--text-1)
```
。错误写法：
```
color: #111
```
。
不要创建新的布局文件。优先组合现有布局。只有当30种布局都不适用时，才添加新的
```
templates/single-page/*.html
```
文件。

保留界面插槽。

.deck-header

、

.deck-footer

、

.slide-number

和进度条由

assets/base.css

runtime.js

提供。

优先支持键盘操作。务必引入
```
<script src="../assets/runtime.js"></script>
```
，确保演示文稿支持←→/T/A/F/S/O/哈希深度链接。
每个逻辑页对应一个
.slide
。
```
runtime.js
```
会显示
```
.slide.is-active
```
元素，隐藏其他所有元素。
添加笔记。将演讲笔记包裹在每张幻灯片内的
```
<div class="notes">…</div>
```
中。按S键可打开笔记覆盖层。
绝对不要在幻灯片上放置仅演讲者可见的文本。类似“这一页展示了……”或“Speaker: 这里可以补充……”的描述性文本，或是针对演讲者的小说明性字幕，必须放在
```
<div class="notes">
```
中，不能作为可见的
```
<p>
```
/
```
<span>
```
元素出现在幻灯片上。
```
.notes
```
类默认是
```
display:none
```
——仅在S键触发的覆盖层中显示。幻灯片应仅包含面向观众的内容（标题、项目符号、数据、图表、图片）。

Writing guide

创作指南

See references/authoring-guide.md for a step-by-step walkthrough: file structure, naming, how to transform an outline into a deck, how to choose layouts and themes per audience, how to do a Chinese + English deck, and how to export.

查看references/authoring-guide.md获取分步指南：文件结构、命名规范、如何将大纲转化为演示文稿、如何根据受众选择布局和主题、如何制作中英双语演示文稿，以及如何导出。

Catalogs (load when needed)

目录（按需查看）

references/themes.md — all 36 themes with when-to-use.
references/layouts.md — all 31 layout types.
references/animations.md — 27 CSS + 20 canvas FX animations.
references/full-decks.md — all 15 full-deck templates.
references/presenter-mode.md — 演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）.
references/authoring-guide.md — full workflow.

references/themes.md —— 所有36种主题及适用场景。
references/layouts.md —— 所有31种布局类型。
references/animations.md —— 27种CSS动画 + 20种Canvas特效动画。
references/full-decks.md —— 所有15套完整演示文稿模板。
references/presenter-mode.md —— 演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）。
references/authoring-guide.md —— 完整工作流程。

File structure

文件结构

html-ppt/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

html-ppt/
├── SKILL.md                 (本文档)
├── references/              (详细目录，按需查看)
├── assets/
│   ├── base.css             (令牌变量 + 基础样式 —— 请勿按演示文稿修改)
│   ├── fonts.css            (网络字体导入)
│   ├── runtime.js           (键盘操作 + 演讲者模式 + 概览 + 主题切换)
│   ├── themes/*.css         (36种令牌变量覆盖文件，每个主题对应一个)
│   └── animations/
│       ├── animations.css   (27种命名CSS入场动画)
│       ├── fx-runtime.js    (幻灯片进入时自动初始化[data-fx]元素)
│       └── fx/*.js          (20种Canvas特效模块：粒子/图形/烟花等)
├── templates/
│   ├── deck.html                  (极简6页起始模板)
│   ├── theme-showcase.html        (36页幻灯片，每页iframe隔离展示一个主题)
│   ├── layout-showcase.html       (iframe展示所有31种布局)
│   ├── animation-showcase.html    (20种特效 +27种CSS动画展示幻灯片)
│   ├── full-decks-index.html      (所有14套完整演示文稿模板的画廊)
│   ├── full-decks/<name>/         (14套带作用域的多页演示文稿模板)
│   └── single-page/*.html         (31种布局文件，附带示例数据)
├── scripts/
│   ├── new-deck.sh                (从deck.html搭建新演示文稿)
│   └── render.sh                  (Headless Chrome → PNG导出)
└── examples/demo-deck/            (完整的演示文稿示例)

Rendering to PNG

渲染为PNG

scripts/render.sh

wraps headless Chrome at

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

. For multi-slide capture, runtime.js exposes

#/N

deep-links, and render.sh iterates 1..N.

bash

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

scripts/render.sh

封装了Headless Chrome，路径为

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

。对于多页捕获，runtime.js暴露了

#/N

深度链接，render.sh会遍历1到N页。

bash

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

Keyboard cheat sheet

快捷键 cheat sheet

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

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

html-ppt

Original

Translation

html-ppt — HTML PPT Studio

html-ppt — HTML PPT 工作室

Install

安装

What the skill gives you

本工具提供的功能

When to use

使用场景

🎤 Presenter Mode (演讲者模式 + 逐字稿)

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

Before you author anything — ALWAYS ask or recommend

开始创作前 —— 务必询问或推荐

Quick start

快速开始

Authoring rules (important)

创作规则（重要）

Writing guide

创作指南

Catalogs (load when needed)

目录（按需查看）

File structure

文件结构

Rendering to PNG

渲染为PNG

Keyboard cheat sheet

快捷键 cheat sheet

License & author

许可证与作者