01 / 10
SPEAKER NOTES — SLIDE 1 / 10
slide-creator v1.5

# AI 驱动的
HTML 演示文稿

从提示词到精美演示，秒速完成。
零依赖。浏览器原生。无限编辑。

21

主题

0

依赖

1

HTML 文件

为什么选择 slide-creator

## 传统工具限制了你

#### ❌ 传统方法

- 从空白幻灯片开始 — 结构是你的问题
- 花费数小时调整字体、对齐和颜色
- PPTX 在其他机器上损坏，字体丢失
- 分享意味着电子邮件附件或上传到云盘
- 图表是静态图像 — 更新数据，重新做一遍

#### ✓ slide-creator

- 描述你的主题 — AI 规划结构
- 21 个主题，自动匹配你的内容类型
- 单个 HTML 文件，在任何地方呈现完全相同
- 分享 URL 或打开文件 — 无需账户
- 来自内联数据的实时图表，秒速更新

设计原则：你拥有内容。AI 拥有结构和视觉表现。 你没有提供的数字永远不会被编造 — 仅仅 `[INSERT VALUE]` 占位符。
工作流

## 从想法到演示的三步

1

#### 描述你的主题

告诉 slide-creator 你想呈现什么 — 受众、目标、核心信息。纯英文或中文。无需特殊格式。

/slide "第一季度业务审查，面向领导层 — 重点关注增长和留存"
2

#### 审查计划 （可选）

使用 `--plan` 先获得结构化大纲文件。编辑它，然后在准备好时运行 `--generate`。你掌控叙述。

3

#### 在浏览器中打开 — 完成

单个自包含的 HTML 文件。内置键盘导航、触摸滑动、全屏和编辑模式。无需安装，无需服务器。

## 21 个主题适应所有场景

按内容类型自动匹配

#### 深色

4 个主题
Bold Signal Electric Studio Creative Voltage Dark Botanical

演讲 · 品牌 · 技术分享

#### 浅色

5 个主题
Blue Sky 本演示 Notebook Tabs Pastel Geometry Split Pastel Vintage Editorial

教育 · 内部 · 创意

#### 专业

4 个主题
Neon Cyber Terminal Green Swiss Modern Paper & Ink

开发 · 学术 · 极简

#### v1.5 新增

8 个主题
Aurora Mesh Enterprise Dark Glassmorphism Neo-Brutalism Chinese Chan Data Story Modern Newspaper Neo-Retro Dev Deck
`--themes` 预览所有 · `--theme <name>` 覆盖 · 内容关键字触发自动推荐
架构

## 为 AI 时代而建

0

#### npm 包

纯 HTML/CSS/JS — 打开文件，它就能工作

3

#### AI 可读层

摘要 JSON → 部分注释 → 原始组件数据

∞

#### 保质期

无 SaaS 订阅，无过期链接，无厂商锁定

图表库：通过 CDN 使用 Chart.js 绘制柱形/折线/饼形/散点图。 雷达或漏斗图会将整个演示切换到 ECharts — 永远不会同时使用两个。 使用 `--bundle` 内联所有 JS 以供离线使用。
AI 管道友好：每个幻灯片嵌入 `data-component` 属性 和机器可读的摘要块 — 下游代理可以解析和重新使用内容 无需重新阅读整个 HTML。
功能

## 编辑模式 — 立即修复任何内容

✏

#### 点击任何文本进行编辑

每个标题、段落和列表项都变成 `contenteditable`。无需开发者工具。

⌨

#### 键盘快捷键

按 `E` 在演示文稿的任何位置切换编辑模式。

💾

#### 在浏览器中实时编辑

使用 `⌘S` / `Ctrl+S` → 另存为网页以捕获更改。或从开发者工具复制更新的 HTML。

编辑模式激活

#### 此标题可编辑 ↗

此段落也可以。单击任何高亮的元素开始输入。

- 列表项可编辑
- 统计数据、标签、标注 — 一切都可以

立即切换到编辑模式 — 按 `E` 或单击右上角工具栏中的 ✏ 编辑，然后单击此幻灯片上的任何文本。
功能

## 演示模式 — 自由导航

### 导航

`→` `Space` `↓` | 下一个幻灯片
`←` `↑` | 上一个幻灯片
`Home` / `End` | 第一个/最后一个幻灯片
`F` | 切换全屏
`E` | 切换编辑模式
滑动 ← → | 触摸导航

### 全屏演示

⛶

#### 按 F 或单击 ⛶

进入原生浏览器全屏。模式栏和计数器自动隐藏 — 将鼠标悬停以显示它们。

🎞

#### 弹簧物理过渡

水平轨道带 `cubic-bezier(0.22, 1, 0.36, 1)` — 幻灯片感觉有重量和自然，不会很生硬。

📱

#### 触摸和移动就绪

带惯性防抖的左/右滑动 — 没有来自触控板动量的意外双跳。

用例

## 为每种类型的演讲者而构建

📊

### 业务评审和季度业务评审

KPI 仪表板、趋势图表、比较表。AI 永远不会猜测你的数字 — 每个缺少的数据点都是 `[INSERT VALUE]`。

🚀

### 产品发布和融资演示

大胆信号或极光网格主题，大型统计数据，前后对比。在 10 分钟内准备好风投演示。

🛠

### 技术讲座和开发文档

终端绿色或霓虹赛博主题。序列图、代码块、架构幻灯片 — 清晰渲染，无 PPTX 损坏。

📚

### 教育和培训

笔记本标签或纸张和墨水主题，用于长篇内容。步骤流程、知识层级和案例研究 — 易读且集中。

幕后

## IR 格式 — AI 阅读，人类编辑

#### slide.md — 中间表示

---
title: Q1 业务评审
theme: enterprise-dark
---
# 收入增长
::: kpi
- ARR: [INSERT VALUE]
- 增长: [INSERT VALUE]
:::
::: chart type=line
title: 月收入
:::
两步工作流：`--plan` 生成 IR 文件。您读它、编辑占位符、批准结构。`--generate` 将其渲染为 HTML。

#### 为什么是 IR？

- 人类可读的纯文本，git 友好
- AI 代理可以链接：plan → review → generate
- 用不同主题重新生成 — 相同内容
- 声明式图表：更改数据，重新运行，完成

无幻觉数据。 IR 中的所有数字要么来自您的输入，要么标记为 `[INSERT VALUE]`。Claude 从不填入它不知道的数字。
快速开始

## 您的下一个演示文稿只需一个提示

打开 Claude Code 并输入：

/slide "您的演示文稿主题"
/slide --plan "主题" # 先查看大纲
`E`

编辑模式

`F`

全屏

`→`

下一个幻灯片

`←`

上一个幻灯片