01 / 14
SPEAKER NOTES — SLIDE 1 / 14
21 种设计预设

# kai-slide-creator

零依赖 HTML 演示文稿生成器
从设计预设开始，让内容自己说话

21

设计预设

0

依赖

100%

浏览器运行

01

## 为什么需要另一种演示工具

现有工具的局限

为什么选择 slide-creator

## 为什么需要另一种演示工具

#### 传统工具的痛点

- PPT 模板千篇一律，找不到差异化表达
- AI 生成通用审美，缺乏签名视觉语言
- 导出丢失设计细节，跨设备展示不一致

#### slide-creator 的思路

- 从设计预设出发，每种都有签名视觉语言
- 纯 HTML 运行，任何浏览器打开都一样
- 浏览器内可编辑，修改即刻持久化

核心理念：你拥有内容，AI 拥有结构和视觉表现。 你没有提供的数字永远不会被编造 —— 只用 `[INSERT VALUE]` 占位符。
设计预设

## 21 种设计预设 每种都有签名视觉语言

Bold Signal

#### 商业路演

高对比度深色背景，大号渐变标题，投资者/VC 路演首选

Blue Sky

#### 清新技术

天空渐变 + 玻璃卡片 + 网格叠加，适合产品介绍和技术分享

#### Terminal Green

开发工具 / API 文档

#### Enterprise Dark

数据看板 / KPI 报告

Modern Newspaper

#### 研究报告

窄列排版 + 衬线字体，适合长篇思想领导力内容

Aurora Mesh

#### 产品发布

极光渐变叠加 + 光球效果，SaaS 产品发布首选

深色 · 5 个主题 浅色 · 5 个主题 专业 · 4 个主题 v2.x 新增 · 7 个主题
02

## 三个核心模块，支撑全流程演示

播放、演讲、编辑 —— 一个文件全部搞定

播放

## 播放模式 — 按 F5 即全屏

1

#### `F5` 或点击播放按钮进入全屏

自动隐藏控制栏和计数器，纯净无干扰的演示体验。

2

#### 幻灯片自动缩放适配屏幕

保持设计比例不变形，1440x900 画布 CSS 缩放到任何尺寸。

3

#### 方向键 / 滚轮 / 触摸滑动翻页

弹簧物理过渡动画 `cubic-bezier(0.22, 1, 0.36, 1)`，自然不生硬。

4

#### 无需安装任何播放器

浏览器就是投影仪 —— 零依赖，打开即用。

零依赖播放体验，任何设备打开即用
演讲

## 演讲者模式 — P 键打开同步窗口

#### 观众看到的

- 全屏幻灯片
- 纯净无干扰
- 自动缩放适配

演讲者窗口
`P` 打开同步窗口
演讲者备注
倒计时器
当前页 / 总页数
翻页控制
按 P 键打开，与主窗口同步翻页。观众永远看不到你的备注。
编辑

## 浏览器内编辑 — 所见即所改

✏

#### 按 `E` 键进入编辑模式

所有文字变为可编辑，点击任何标题、段落或列表项即可修改。

💻

#### 直接点击文字修改

实时预览效果，无需切换到 PowerPoint 或 Figma。

💾

#### `Ctrl+S` 保存为 HTML

修改持久化到文件，另存为网页即可捕获更改。

编辑模式默认开启，无需额外配置
03

## 一条命令，三分钟出稿

从规划到生成，全程自动化

/slide-creator --plan

- 生成 BRIEF.json IR
- 可编辑后再生成

/slide-creator --generate

- 从 BRIEF.json 生成 HTML
- 执行 16 项质量校验

/slide-creator --review

- 对已有 HTML 执行检查点
- 自动修复常见问题

也可直接给内容 + 风格，立即生成：`/slide-creator "你的主题" Blue Sky`
风格推荐

## 什么内容配什么风格，一眼匹配

#### 数据报告 / KPI 看板

- Data Story
- Enterprise Dark
- Swiss Modern

#### 商业路演 / VC Deck

- Bold Signal
- Aurora Mesh
- Enterprise Dark

#### 开发工具 / API 文档

- Terminal Green
- Neon Cyber
- Neo-Retro Dev

#### 研究 / 思想领导力

- Modern Newspaper
- Paper & Ink
- Swiss Modern

#### 创意 / 个人品牌

- Vintage Editorial
- Split Pastel
- Neo-Brutalism

#### 产品发布 / SaaS

- Aurora Mesh
- Glassmorphism
- Electric Studio

技术架构

## 零依赖，纯浏览器运行

0

npm 包依赖

3

核心文件 HTML/CSS/JS

∞

可扩展场景

1

浏览器即运行环境

生成的 HTML 文件完整自包含，双击即可在浏览器中打开
版本历史

## 持续迭代，每周都在变强

1

#### v1.x — 基本框架

播放模式、编辑模式、首批 7 个设计预设

2

#### v1.5 — 风格扩展

21 个预设、Cloud Bank Hero、Orbital Rings

3

#### v2.x — 智能生成

AI 规划、Review 系统、PPT 转换

4

#### v2.16 — 渲染引擎升级

主题卡片、组件修饰符、26 项回归测试

GitHub + ClawHub 双渠道发布，持续迭代中
开始使用

## 从设计预设开始 让内容自己说话

打开 Claude Code 并输入：

/slide-creator "你的主题" Blue Sky
/slide-creator --plan "你的主题" # 先查看大纲
`E`

编辑模式

`F5`

全屏

`→`

下一页

`←`

上一页