# slide-creator · 零依赖 HTML 演示文稿生成器

01 / 10
Claude Code & OpenClaw Skill · v1.4

# slide-creator

零依赖 HTML 演示文稿，直接在浏览器运行。
无需 npm · 无需构建工具 · 无需下载 Chromium

13
种设计风格
0
外部依赖
1
行命令安装
设计哲学

## 四大核心理念

📦

### 零依赖

单文件内联 CSS/JS，用任何浏览器打开，分享一个文件，永久可用。

👁️

### 看图选风格

人无法用语言描述设计偏好——先生成 3 个视觉预览，让你直接反应，而非猜想。

✦

### 有个性的设计

拒绝 Inter 字体、紫色渐变、千篇一律的 Hero 布局。每个演示文稿都应独特。

📐

### 视口精确填充

每张幻灯片恰好填满 100vh，绝不出现幻灯片内滚动条。内容溢出就分页，不压缩。

使用方式

## 三种创建方式，按需选择

A

#### 交互式 — 先看风格再生成

/slide-creator # 回答 4 个问题 → 看 3 个预览 → 生成完整幻灯片
B

#### 两阶段 — 先规划，再生成（复杂内容推荐）

/slide-creator --plan 我的 AI 创业公司融资路演
# 审阅 PLANNING.md 大纲后
/slide-creator --generate
C

#### PPT 转换 — 放入 .pptx 文件，自动识别转换

/slide-creator # 自动检测当前目录的 .pptx 文件
风格探索

## 「惊喜时刻」——看图而非描述

❓

#### 第一步：问你的感受

想要震撼自信？充满活力？沉静专注？还是有个性？

🎨

#### 第二步：3 个视觉预览

真实的字体、配色和动画效果，不是描述，是实物。

✅

#### 第三步：选一个，立刻生成

选 A/B/C 或混合元素，完整幻灯片即刻生成。

已经知道想要什么风格？直接指定跳过探索：
`/slide-creator --generate 用 Blue Sky 风格做我的季度汇报`
设计预设

## 13 种精心设计的风格，拒绝 AI 审美

Bold Signal
路演 · 主题演讲
Electric Studio
商务演示
Creative Voltage
创意提案
Dark Botanical
高端品牌
Blue Sky ✨
产品 · 科技路演
Notebook Tabs
报告 · 评审
Pastel Geometry
产品介绍
Split Pastel
创意机构
Vintage Editorial
个人品牌
Neon Cyber
科技创业
Terminal Green
开发工具
Swiss Modern
企业 · 数据
Paper & Ink
叙事演讲
特色风格

## Blue Sky — 你正在看的就是它

#### 天空渐变背景

`#f0f9ff → #e0f2fe`，叠加 SVG 噪点纹理

#### 玻璃拟态卡片

rgba(255,255,255,0.7) · backdrop-filter: blur(24px)

#### 3 个动态环境光球

每页重新定位 · 80px 模糊 · 弹簧缓动过渡

#### 弹簧物理横向切换

Horizontal track · cubic-bezier(0.22, 1, 0.36, 1)

#### 40px 科技网格底层

6% 透明度 · 径向遮罩向边缘渐隐

#### 封面云朵特效

仅封面页 · CSS blur 圆形簇 · 漂浮动画

#### 渐变标题文字

`#1e3a8a → #3b82f6`，深海军蓝到亮蓝

#### 胶囊分页指示点

当前页展开为胶囊形，其余为圆点

内容规范

## 视口填充 — 不可妥协的底线

幻灯片类型 | 内容上限
--- | ---
标题页 | 1 个标题 + 1 个副标题
内容页 | 1 个标题 + 4–6 条要点
功能网格 | 1 个标题 + 最多 6 个卡片（2×3 或 3×2）
代码页 | 1 个标题 + 8–10 行代码
引用页 | 1 段引用（最多 3 行）+ 来源

拿不准就分页。幻灯片出现滚动条等同于破损。内容溢出时拆分到下一页，而不是压缩字号硬塞。
导出

## PPTX 导出 — 用你已有的 Chrome

1

#### 运行导出命令

/slide-creator --export pptx
2

#### Playwright 调用系统已安装的 Chrome

Chrome / Edge / Brave 均可 · 无需下载 300MB Chromium · 无需 Node.js

3

#### 像素级还原 PPTX

逐张截图 · 组装为原生 .pptx · 可直接在 PowerPoint 中打开

前置依赖：`pip install playwright python-pptx`
安装

## 一行命令，重启即用

#### Claude Code

git clone https://github.com/kaisersong/slide-creator ~/.claude/skills/slide-creator

重启 Claude Code · 使用 `/slide-creator` 调用

#### OpenClaw · 通过 ClawHub 安装（推荐）

clawhub install html-slide-creator

自动安装全部依赖 · clawhub.ai/skills/html-slide-creator

Python 3 Pillow（图片处理） python-pptx（PPT 导入导出） playwright（PPTX 导出）
开始创作

## 你的下一个演示文稿
从一行命令开始

/slide-creator --plan 我的季度汇报
# 审阅 PLANNING.md 大纲，满意后继续
/slide-creator --generate
# → presentation.html 自动在浏览器中打开
13 种风格 交互式风格探索 PPTX 导出 零外部依赖

github.com/kaisersong/slide-creator · clawhub.ai/skills/html-slide-creator