slide-deck-generator

想象一下：你刚完成了一场为期两天的大模型技术内训，PPT 做了整整 120 页——配色混乱、排版参差、动画全靠 WPS 预设。结果同事看完后只问了一句：「这个能在浏览器里直接跑吗？」

如果你的答案是「不能」，那 code-on-sunday/slide-deck-generator 就是来填补这个空白的。这个 GitHub 项目本质上是一个为 AI 编程智能体（coding agent）设计的演示文稿技能包，它不生成 PPT 文件，而是让 AI 智能体（如 Claude Code）在本地实时构建一套完整的 React + Vite 演示文稿 Web 应用——每一张幻灯片都是活的 React 组件，带动画、可交互、能缩放，直接在浏览器里跑。

这个工具的诞生背景很有意思。作者 code-on-sunday 显然对「AI 生成 PPT」的现状不满：大多数 AI 生成工具输出的要么是静态图片，要么是套模板的 Office 文件，看起来廉价且缺乏设计感。他在 SKILL.md 中反复强调一个核心原则——「Never generic or AI-generated looking」，字面意思是「永远不要看起来像是 AI 生成的」。为此，他设计了一整套设计规范，从字体选择、色彩搭配到动画节奏，全部给出精确规则，把「设计感」从玄学变成可执行的配方。

如果你使用 Claude Code，只需要一句自然语言指令，比如「Create a slide deck about microservices architecture」，AI 智能体就会启动完整的生成流程：询问你想要的风格和情绪 → 推荐 2-3 个预设方案 → 脚手架搭建 Vite + React + TypeScript 项目 → 分批构建幻灯片 → 最终交付一个 localhost:5173 上可直接运行的演示文稿。整个过程无需手动配置任何工程文件，AI 全程代劳。

系统内置了 11 套经过精心设计的风格预设，覆盖深色、浅色和特殊场景三大类。深色预设包括 Bold Signal（强对比色块风格）、Electric Studio（双栏分割）、Creative Voltage（霓虹赛博感）和 Dark Botanical（植物学优雅）；浅色预设包括 Notebook Tabs（笔记本标签式）、Pastel Geometry（马卡龙几何）、Vintage Editorial（复古编辑风）和 Swiss Modern（瑞士现代主义）。此外还有 Neon Cyber（赛博朋克霓虹）、Terminal Green（黑客终端绿）和 Paper & Ink（纸墨质感）三套特殊预设。每套预设都定义了精确的字体组合、色彩值和签名视觉元素。

幻灯片的工程实现同样讲究。采用了 Framer Motion 处理动画（入场动画、过渡效果、按步骤渐进展示）、Recharts 渲染图表数据、Tailwind CSS v4 做样式管理、Lucide React 提供图标。每一张幻灯片的画布固定为 1280×720px，通过 CSS transform 按比例缩放适配任意视口——这和 reveal.js 的思路一致，但用 React 组件化替代了 HTML 标签，代码更可控，动画更精细。设计上还要求最大 60% 的空间放置内容，其余为留白，且所有字体大小必须使用 clamp() 函数而非固定 px 值，确保跨分辨率可读性。

对于培训场景，项目还提供了一套完整的内容设计方法论（slide-guidelines.md）。核心逻辑是 Problem → Discussion → Concept → Example → Takeaway 五步学习循环：先用真实问题引发好奇心，再引导讨论，在概念讲解前制造认知缺口，最后通过案例和总结强化记忆。每个学习循环建议 5-10 张幻灯片，一个完整的 3-4 小时培训课程约需 100-140 张幻灯片。这套方法论让生成的幻灯片不仅「好看」，而且「有用」。

当然，这个项目也有局限。它本质上是技能插件（skill）而非独立应用，用户必须先安装 Claude Code 或其他兼容的 AI 编程智能体，再通过 npx skills add code-on-sunday/slide-deck-generator 安装。这意味着它的受众是 AI 开发者和技术团队，而非普通办公用户。此外，每次生成幻灯片都涉及完整的 React 项目初始化和网络字体加载，冷启动需要 10-30 秒，不是即时响应。如果你对前端工程没有基本了解，调试生成结果也会比较困难。

从更宏观的视角看，这个项目代表了一个新兴趋势：AI 工具生成 AI 工具的场景正在爆发。slide-deck-generator 不是给人用的，是给 AI 编程智能体用的——它定义了一套规范，让 AI 智能体能生成设计质量足够高的演示文稿，而不需要人类设计师介入。随着 Claude Code、Cursor 等 AI 编程工具的普及，这类「给 AI 用的效率工具包」的需求会持续增长。这也是该项目在 GitHub 上获得关注的核心原因：它精准命中了 AI 时代「内容生成」与「设计品质」之间的矛盾。

图1：Claude Code Skills 演示文稿示例，展示交互式幻灯片界面

图2：Context Engineering 主题幻灯片，展示深色预设的设计效果