kai-slide-creator
# kai-slide-creator
生成零依赖 HTML 演示文稿，纯浏览器运行。
## 核心亮点
- **21 种设计预设** — Bold Signal、Blue Sky、Terminal Green 等，避免通用 AI 审美
- **视觉风格探索** — 生成 3 个预览，看图选风格而非描述风格
- **播放模式** — F5/▶ 全屏，幻灯片缩放适配，控制栏自动隐藏
- **演讲者模式** — P 键打开同步窗口：备注、计时器、页数、翻页
- **浏览器内编辑** — E 键进入编辑模式，Ctrl+S 保存
- **两种规划深度** — 自动 (快速出稿) / 精修 (更强叙事和视觉锁定)
- **内容 Review 系统** — 16 个检查点，精修模式自动执行
---
## 安装
**Claude Code:** 告诉 Claude「安装 https://github.com/kaisersong/slide-creator」
**OpenClaw:** `clawhub install kai-slide-creator`
> ClawHub 页面：https://clawhub.ai/skills/kai-slide-creator
---
## 使用方式
```bash
/slide-creator --plan [prompt] # 生成 PLANNING.md 大纲
/slide-creator --generate # 从 PLANNING.md 生成 HTML
/slide-creator --review [file.html] # 16 项检查点自动优化
/slide-creator # 交互式创建（风格探索）
```
**规划深度：**
- `自动` (Auto) — 快速出稿，约 3-6 分钟
- `精修` (Polish) — 深度规划，约 8-15 分钟，自动执行 Review
**内容类型 → 风格推荐：**
| 内容类型 | 推荐风格 |
|---|---|
| 数据报告 / KPI 看板 | Data Story、Enterprise Dark、Swiss Modern |
| 商业路演 / VC Deck | Bold Signal、Aurora Mesh、Enterprise Dark |
| 开发工具 / API 文档 | Terminal Green、Neon Cyber、Neo-Retro Dev Deck |
| 研究 / 思想领导力 | Modern Newspaper、Paper & Ink、Swiss Modern |
| 创意 / 个人品牌 | Vintage Editorial、Split Pastel、Neo-Brutalism |
| 产品发布 / SaaS | Aurora Mesh、Glassmorphism、Electric Studio |
---
## 命令路由
slide-creator now supports **two user-facing planning depths**:
- `自动` / `Auto` — default path for fast drafts, light interaction, and direct generation momentum
- `精修` / `Polish` — deeper planning for decks that need stronger structure, visual locking, and page-aware image decisions
`参考驱动` remains supported, but only as an internal reference-driven branch inside `精修`.
---
## 命令路由
| 命令 | 加载内容 | 行为 |
|------|----------|------|
| `--plan [prompt]` | `references/planning-template.md` | 检测规划深度，创建 PLANNING.md，不生成 HTML |
| `--generate` | SKILL.md HARD RULES + `references/html-template.md` + 风格文件 + `base-css.md` | 从 PLANNING.md 生成 HTML，执行 16 项生成前校验 |
| `--review [file.html]` | `references/review-checklist.md` + 目标 HTML | 执行 16 项检查点 → 确认窗口 → 修复/报告 |
| 无 flag (交互式) | `references/workflow.md` + 其他按需 | 遵循 Phase 0-5（Phase 3 Step 7 必须执行 16 项校验） |
| 直接给内容 + 风格 | SKILL.md HARD RULES + `references/html-template.md` + 风格文件 + `base-css.md` | 立即生成，执行 16 项生成前校验 |
**渐进式披露：** 每个命令只加载所需文件。`--plan` 不接触 CSS。
---
## 生成契约
**每次生成的 HTML 必须包含播放模式和编辑模式（默认开启）。**
1. **播放模式** — F5 / ▶ 按钮，全屏缩放，`PresentMode` 类
2. **编辑模式** — 左上角热区，`✏ Edit` 开关，`contenteditable`，备注面板
3. **水印** — 右下角固定显示 `By kai-slide-creator v[version] · [preset-name]`，`[version]` 从 SKILL.md frontmatter 读取，`[preset-name]` 为选中的风格预设名称（如 `Blue Sky`、`Enterprise Dark`），播放模式下隐藏，HTML 源码中置于 `</body>` 之后 `</html>` 之前
4. **风格强制** — 所有 CSS 主题值（颜色、字体、图表色等）**必须且只能**来自选中的风格参考文件。模板 `html-template.md` 中的占位符（`[from style file]`）和注释示例值仅为结构示意，**禁止直接使用**。生成后对照风格文件的 checklist 验证。
详见 `references/html-template.md`。**生成任何 HTML 前必读此文件**。
> 省略播放模式是生成错误。仅当用户明确选择「无需编辑」时可省略编辑模式。
---
### Pre-Write Validation Pipeline（生成前校验流水线）
这些规则在组装完整 HTML 后、写入文件前**自动执行**。逐条搜索违规项并修复。
**现有 8 项（HARD RULES Rule 1-7 + 标题质量）+ 9 项视觉/组件硬规则：**
1. 内容密度 ≥65%（Rule 1）
2. 列平衡 ≥60%（Rule 2）
3. 标题换行 ≤3 行（Rule 3）
4. 标题禁止通用标签（Rule 4）
5. 禁止连续 3 页同布局（Rule 5）
6. 三概念法则 ≤3（Rule 6）
7. 90/8/2 色彩律（Rule 7）
8. 标题质量（断言式，非通用标签）
**新增视觉硬规则（来自 impeccable-anti-patterns.md）：**
9. **U+FE0F 零容忍：** HTML 中不得出现 U+FE0F 变体选择符（emoji 使用基础形式）
10. **letter-spacing 上限：** 正文/列表/卡片元素的 `letter-spacing` 不得超过 `0.05em`
11. **纯黑背景禁用：** `#000` / `#000000` 背景 → 替换为 `#111` 或 `#18181B`
12. **bounce/elastic easing 禁用：** 检测 `ease.*back|bounce` → 替换为 `cubic-bezier(0.16, 1, 0.3, 1)`
13. **嵌套卡片：** 检测 `.card` / `.glass-card` 等容器内再嵌套同类容器 → 扁平化
14. **cramped padding：** 卡片/容器 padding < `0.75rem` → 增加到 ≥0.75rem
15. **light text on light bg：** 浅色文字（`#888`/`#999`/`#cbd5e1`/`var(--text-secondary)`）在浅色背景（`#f0f4f8`/`#fef3c7`/`#e8f5e9`/`#fff` 等亮度 >60% 的颜色）上 → 加深文字为深色（`#1e293b`/`#334155`）或覆盖 `color: inherit` 到卡片上
16. **组件丰富度：** 检测整个 deck 中是否超过 50% 的幻灯片仅使用同一种组件模式（如全是 `.g` + `.bl`）→ 至少一半的幻灯片必须使用 2-3 种不同组件类型（step/callout/stat/kbd/table/callout/quote 等）
17. **SVG 箭头连线可见：** `<line>` 元素的起点和终点距离必须 ≥30px，确保线段可见。箭头从外框边缘指向中心图形边缘（如圆外切点），不得指向圆心或进入圆内部。下侧/右侧/左侧的箭头都需要足够的连线长度，rect 位置应与圆保持 ≥30px 间距
> 完整反模式映射表见 `references/impeccable-anti-patterns.md`。
### 标题质量规则
**Do NOT 使用这些通用标签作为幻灯片标题：**
概览、Overview、架构介绍、Introduction、Summary、总结、结论、Key Insights、Next Steps、方法论、背景、问题分析、关键发现、展望、简介、说明、系统介绍、方案说明。
**Instead，使用断言式标题（陈述结论或主张）：**
- ❌ `XX 架构概览` → ✅ `XX 架构可确保流量峰值期零遗漏`
- ❌ `Overview` → ✅ `How XX ensures zero downtime during traffic spikes`
- ❌ `系统介绍` → ✅ `三个核心模块，支撑日活百万级业务`
- ❌ `关键发现` → ✅ `80% 的用户流失来自首次加载超时`
**幻灯片标题模板（选一种匹配）：**
- "[Subject] 可确保/证明/支撑 [具体收益/结果]" — 技术/架构页
- "N 个 [核心概念]，解决 [关键痛点]" — 能力/特性页
- "[数据/事实] — [洞察/含义]" — 数据/发现页
- "[行动/决策] 的 N 个步骤/原则" — 方法/流程页
- 最短有力断言（≤12 字中文 / ≤6 英文词）— 强调/宣言页
**快速路由：**
- **PLANNING.md 已存在** → 读取并作为真相源，跳至 Phase 3
- **用户直接给内容 + 风格** → 跳过 Phase 1/2，立即生成
- **用户有 `.ppt/.pptx` 文件** → Phase 4（PPT 转换）
- **用户要增强现有 HTML** → 读取后遵循 Enhancement Mode 守则
- **其他情况** → Phase 1（内容发现）
---
## 风格参考文件
仅读取已选风格的文件。
| 风格 | 文件 |
|------|------|
| Blue Sky | `references/blue-sky-starter.html` |
| Aurora Mesh | `references/aurora-mesh.md` |
| Chinese Chan | `references/chinese-chan.md` |
| Data Story | `references/data-story.md` |
| Enterprise Dark | `references/enterprise-dark.md` |
| Glassmorphism | `references/glassmorphism.md` |
| Neo-Brutalism | `references/neo-brutalism.md` |
| 其他风格 | `STYLE-DESC.md` 相关章节 |
| 自定义主题 | `themes/<name>/reference.md` |
**风格选择器 / 心情映射** → `references/style-index.md`
**视口 CSS / 密度限制** → `references/base-css.md`
**设计质量规则** → `references/design-quality.md`
**Impeccable 反模式（视觉硬规则）** → `references/impeccable-anti-patterns.md`
---
## 面向 AI 智能体
其他智能体可直接调用：
```bash
# 从主题或备注生成
/slide-creator 为 [主题] 制作路演 deck
# 从计划文件生成（跳过交互式 Phase）
/slide-creator --generate # 自动读取 PLANNING.md
# 两阶段（生成前审查大纲）
/slide-creator --plan "Acme v2 产品发布"
# （如需要，编辑 PLANNING.md）
/slide-creator --generate
# 生成后导出 PPTX
/kai-html-export presentation.html # 图片模式（像素级，默认）
/kai-html-export --mode native presentation.html # Native 模式（文字可编辑）
```
---
## 相关技能
- **kai-report-creator** — 长篇幅可滚动 HTML 报告（非幻灯片）
- **kai-html-export** — 导出 PPTX/PNG，或发布为分享链接
标签
skill
ai
