slidehtml 入门

slidehtml 用 231 个固定模板拼出 16:9 的 HTML 演示，最后输出一个可以离线打开的单文件 HTML。版式、字体、配色和动效都已经在模板里定好，写一份新演示只需要三步：

1. 选模板
2. 填内容
3. 跑检查

只要不改模板、不写自定义 CSS，并且遵守每个模板的内容上限，做出来的效果就和示例演示一致。这套约束也让 AI 助手能稳定地写出合格的演示。

• 231 个模板：封面、数据图表、对比、结构图、时间线、截图、节奏页等
• 23 种风格（DeckDef.style）× 5 套配色（DeckDef.theme），任意组合
• 放映功能齐全：逐条展开、总览、演讲者视图、激光笔、画笔、导出 PDF
• 自动 QA：四种窗口尺寸逐页检查溢出、重叠、字号和远程资源，最后输出 PASS 或 FAIL

安装

需要 Node.js 20.19 或更高版本。

npx slidehtml init my-talk      # 在 my-talk/ 生成一个项目
cd my-talk
npm install

5 分钟做第一份演示

npx slidehtml new q3-review     # 从起步模板生成 src/decks/q3-review/index.tsx
npx slidehtml dev q3-review     # 打开开发预览，改文件后自动刷新

打开 src/decks/q3-review/index.tsx，每一页就是一个模板，内容都通过 props 传入：

import type { DeckDef } from '../../kit'
import { Cover, StatRow, Closing } from '../../kit'

export const deck: DeckDef = {
  title: 'Q3 Review',
  theme: 'cobalt',        // 配色
  style: 'standard',      // 风格
  slides: [
    { id: 'cover', label: '封面', render: () => <Cover kicker="季度回顾" title="平台组 Q3" … /> },
    { id: 'numbers', label: '规模', build: 'reveal', render: () => <StatRow … source="出处" /> },
    { id: 'end', label: '结论', render: () => <Closing statement="……" … /> },
  ],
}

改完之后：

npx slidehtml check q3-review   # 类型检查 + 构建 + 自动 QA，最后一行必须是 PASS
npx slidehtml build q3-review   # 生成 dist/q3-review.html，单文件，可以直接发给别人

check 输出 FAIL 时按 guide.md 第 8 节 修复。每页截图在 qa/slide-NN-1920x1080.png，逐页看过才算完成。

开发预览里打开 #/kit 可以浏览全部模板、风格样张和图标。

配合 AI 助手使用

项目根目录的 AGENTS.md（Claude Code 读 CLAUDE.md）告诉 AI 助手这里的规则。skills/slidehtml/ 是一份写演示的 skill：怎么写故事线、怎么按内容形状挑模板、怎么把文字压进上限、怎么跑检查。中文版是 SKILL.md，参考表在 skills/slidehtml/references/。

常见做法：把资料交给 AI 助手，说“用 slidehtml 做一份 10 页的季度汇报”，它会新建 deck、填内容、运行 npx slidehtml check 直到 PASS。

文档导航

其他语言：English · Deutsch · 繁體中文