open-slide：为 AI Agent 设计的幻灯片框架

一句话定位

open-slide 是一个为 AI Agent 设计的 React 幻灯片框架：你用自然语言描述要做什么，Agent 负责写 React 页面，open-slide 负责画布、预览、演示、导出和迭代。

基础信息卡片

解决什么问题

传统做 PPT 的流程，通常是在 Keynote、PowerPoint、Figma 或网页编辑器里手动拖拽、调样式、排版。

但现在很多内容其实可以由 AI Agent 生成：结构、文案、视觉层级、配色、代码实现，Agent 都能参与。open-slide 的思路是：既然幻灯片本质上也是视觉代码，那就让 Agent 直接写代码生成幻灯片。

它提供了一个固定的幻灯片运行时：

• 每页都是一个 React 组件。
• 每张幻灯片渲染在固定的 1920 × 1080 画布中。
• 支持开发预览、热更新、演示模式和导出。
• Agent 可以围绕项目内置的 skills / 规则来生成和修改幻灯片。

这样用户不需要从零搭建 React、Vite 和导出逻辑，也不需要手动写一堆样板代码。你只需要描述“我要一套关于某个主题的演示文稿”，Agent 负责生成页面，open-slide 负责把这些页面变成可展示、可迭代、可交付的 deck。

核心功能

1. Agent-native authoring

open-slide 的核心卖点是“为 Agent 写幻灯片”设计。

它可以配合 Claude Code、Codex、Cursor 等 Coding Agent 使用。初始化后的项目会带有给 Agent 使用的技能说明，例如：

• /create-slide：从主题、风格、页数、文字密度、动效偏好等信息出发，生成一套完整幻灯片。
• /slide-authoring：告诉 Agent 画布尺寸、字号体系、配色、布局规则等技术约束。

也就是说，open-slide 不只是一个普通幻灯片组件库，而是把“Agent 如何生成幻灯片”也纳入了工作流。

2. React-first，每页都是代码

open-slide 没有发明一套受限的幻灯片 DSL。每页幻灯片就是任意 React 组件。

这意味着：

• 可以用普通 TSX 写页面。
• 可以自由控制布局、样式、动画和组件结构。
• 可以用 Git 管理版本。
• 可以让 Agent 直接修改源码。
• 可以像普通前端项目一样 code review。

官网上也强调：A slide is a file. Just React, nothing else.

3. 固定 1920 × 1080 画布

每张 slide 都渲染在固定的 1920 × 1080 画布中。

这对 Agent 生成内容很重要，因为它给了明确的视觉边界：字号、布局、元素位置、比例关系都可以围绕一个稳定画布设计。

相比响应式网页，这种固定画布更接近真实演示文稿，也更方便导出和展示。

4. 浏览器内 Inspector

open-slide 提供了一个很有意思的迭代方式：可以在开发服务器里点击页面元素，并留下修改意见。

比如你可以点某个标题，然后备注：

• “改成红色”
• “标题缩小一点”
• “把文案改成 Open Slide Rocks”

这些评论会以 @slide-comment 标记写回源码。之后运行 /apply-comments，Agent 就可以读取这些待处理评论，批量修改代码并清理标记。

这个流程很适合“先让 Agent 生成，再人工点选反馈，然后让 Agent 继续改”的协作模式。

5. 素材管理和 Logo 搜索

open-slide 内置 assets panel，可以按 deck 管理图片、视频、字体等素材。

它还集成了 svgl Logo 目录，可以直接搜索并插入品牌 Logo。对于做产品介绍、路演、技术分享来说，这能减少到处找 SVG Logo 的时间。

6. 专业演示模式

open-slide 不只是开发预览，还提供面向正式展示的 present mode：

• 全屏播放
• 键盘导航
• 当前页 / 下一页预览
• speaker notes
• timer

也就是说，它生成的不只是网页，而是可以真正拿去演讲的演示文稿。

7. 导出静态 HTML 和 PDF

open-slide 支持将 deck 导出为：

• 自包含静态 HTML
• 可打印 / 分发的 PDF

静态 HTML 可以部署到 Vercel、Cloudflare Pages、Netlify、Zeabur 或任意静态托管服务。它既适合本地演示，也适合在线分享。

8. Slide manager

项目还提供 slide manager，用来把多个 deck 按文件夹、emoji、拖拽排序等方式组织起来。

当你生成的演示稿越来越多时，这个管理能力会变得有用。

适合谁

open-slide 比较适合这些人：

• 想用 Claude Code、Codex、Cursor 快速生成演示文稿的人。
• 更喜欢“幻灯片即代码”的开发者。
• 需要把技术方案、产品介绍、项目汇报做成可演示 deck 的团队。
• 想要可版本管理、可 review、可自动化生成的幻灯片流程的人。
• 不想在传统 PPT 工具里反复拖拽排版的人。

它尤其适合技术型内容：架构讲解、产品 demo、路线图、开源项目介绍、技术分享等。

快速上手

初始化一个项目：

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

初始化后的 workspace 会预置 open-slide 的运行环境和 Agent 相关规则。你可以让 Agent 通过 /create-slide 生成幻灯片，也可以直接编辑：

slides/<id>/index.tsx

如果要参与 open-slide 本身开发，仓库是一个 pnpm + Turbo monorepo：

pnpm install
pnpm dev
pnpm build
pnpm check
pnpm lint

主要目录：

结论

open-slide 代表了一种很自然的新方向：不是让 AI 生成一份静态 PPT 文件，而是让 Agent 直接写一套可运行、可迭代、可版本管理的幻灯片代码。

它把 React、固定画布、演示模式、Inspector、素材管理和导出能力组合起来，给 Agent 提供了一个稳定的“幻灯片运行时”。

如果你已经在用 Claude Code、Codex 或 Cursor 做内容和代码生成，open-slide 很适合用来尝试“用 Agent 做演示文稿”的工作流。