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: INLINECODE0

ClawHub 页面：https://clawhub.ai/skills/kai-slide-creator

---

使用方式

CODEBLOCK0

规划深度：

• - 自动 (Auto) — 快速出稿，约 3-6 分钟
• INLINECODE2 (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
• INLINECODE5 / Polish — deeper planning for decks that need stronger structure, visual locking, and page-aware image decisions

INLINECODE7 remains supported, but only as an internal reference-driven branch inside 精修.

---

命令路由

命令	加载内容	行为
INLINECODE9	INLINECODE10	检测规划深度，创建 PLANNING.md，不生成 HTML
INLINECODE11

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. 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. 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）：

1. 9. U+FE0F 零容忍： HTML 中不得出现 U+FE0F 变体选择符（emoji 使用基础形式）
2. letter-spacing 上限： 正文/列表/卡片元素的 letter-spacing 不得超过 INLINECODE34
3. 纯黑背景禁用： #000 / #000000 背景 → 替换为 #111 或 INLINECODE38
4. bounce/elastic easing 禁用： 检测 ease.*back|bounce → 替换为 INLINECODE40
5. 嵌套卡片： 检测 .card / .glass-card 等容器内再嵌套同类容器 → 扁平化
6. cramped padding： 卡片/容器 padding < 0.75rem → 增加到 ≥0.75rem
7. light text on light bg： 浅色文字（#888/#999/#cbd5e1/var(--text-secondary)）在浅色背景（#f0f4f8/#fef3c7/#e8f5e9/#fff 等亮度 >60% 的颜色）上 → 加深文字为深色（#1e293b/#334155）或覆盖 color: inherit 到卡片上
8. 组件丰富度： 检测整个 deck 中是否超过 50% 的幻灯片仅使用同一种组件模式（如全是 .g + .bl）→ 至少一半的幻灯片必须使用 2-3 种不同组件类型（step/callout/stat/kbd/table/callout/quote 等）
9. SVG 箭头连线可见： <line> 元素的起点和终点距离必须 ≥30px，确保线段可见。箭头从外框边缘指向中心图形边缘（如圆外切点），不得指向圆心或进入圆内部。下侧/右侧/左侧的箭头都需要足够的连线长度，rect 位置应与圆保持 ≥30px 间距

完整反模式映射表见 references/impeccable-anti-patterns.md。

标题质量规则

Do NOT 使用这些通用标签作为幻灯片标题：
概览、Overview、架构介绍、Introduction、Summary、总结、结论、Key Insights、Next Steps、方法论、背景、问题分析、关键发现、展望、简介、说明、系统介绍、方案说明。

Instead，使用断言式标题（陈述结论或主张）：

• - ❌ XX 架构概览 → ✅ INLINECODE60
• ❌ Overview → ✅ INLINECODE62
• ❌ 系统介绍 → ✅ INLINECODE64
• ❌ 关键发现 → ✅ INLINECODE66

幻灯片标题模板（选一种匹配）：

• - "[Subject] 可确保/证明/支撑 [具体收益/结果]" — 技术/架构页
• "N 个 [核心概念]，解决 [关键痛点]" — 能力/特性页
• "[数据/事实] — [洞察/含义]" — 数据/发现页
• "[行动/决策] 的 N 个步骤/原则" — 方法/流程页
• 最短有力断言（≤12 字中文 / ≤6 英文词）— 强调/宣言页

快速路由：

• - PLANNING.md 已存在 → 读取并作为真相源，跳至 Phase 3
• 用户直接给内容 + 风格 → 跳过 Phase 1/2，立即生成
• 用户有 .ppt/.pptx 文件 → Phase 4（PPT 转换）
• 用户要增强现有 HTML → 读取后遵循 Enhancement Mode 守则
• 其他情况 → Phase 1（内容发现）

---

风格参考文件

仅读取已选风格的文件。

风格	文件
Blue Sky	INLINECODE68
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 |

风格选择器 / 心情映射 → INLINECODE77

视口 CSS / 密度限制 → INLINECODE78

设计质量规则 → INLINECODE79

Impeccable 反模式（视觉硬规则） → references/impeccable-anti-patterns.md

---

面向 AI 智能体

其他智能体可直接调用：

CODEBLOCK1

---

相关技能

• - kai-report-creator — 长篇幅可滚动 HTML 报告（非幻灯片）
• kai-html-export — 导出 PPTX/PNG，或发布为分享链接