open-slide：AI Agent 做 PPT 的正确姿势——不是生成文件，而是写代码

项目：open-slide
GitHub：https://github.com/1weiho/open-slide（约 2800+ Stars，MIT 协议）
官网：https://open-slide.dev
作者：何奕纬（1weiho），台湾全栈开发者、Raycast 大使
安装：npx @open-slide/cli init my-slide

引子：为什么 AI 做 PPT 只能"凑合"？

过去一年多，AI 生成 PPT 的工具井喷。但你用过就知道——它们产出的东西，用一个词概括：凑合。

排版僵化、配色灾难、动画不存在、改一页要重写全部。你拿到一份 Markdown 或 JSON，导进 PowerPoint 还要手动调半天。AI 帮你省了"打字"的时间，但没省"排版"的时间。

根本问题：PPT 不是文本问题，是视觉布局问题。

传统工具的解法是让 AI 生成中间格式（Markdown、JSON、PPTX 模板），然后人类接手排版。这个交接点恰恰是效率黑洞。

open-slide 的解法完全不同：

让 AI 直接写 React 代码。幻灯片即代码，代码即幻灯片。

核心思路：幻灯片即代码

open-slide 不是一个"AI 生成 PPT 的工具"。它是一个为 AI Agent 设计的幻灯片运行时。

架构定位

用户描述需求 ──→ Agent 写 React 代码 ──→ open-slide 运行时渲染 ──→ 演示/导出
         ↑___________________________________________↓
                      浏览器内 Inspector 反馈循环

open-slide 负责：

• 固定画布（1920×1080）
• 开发预览 + 热更新
• 演示模式（全屏、键盘导航、speaker notes、timer）
• 导出静态 HTML / PDF
• 素材管理

Agent 负责：

• 理解需求
• 写 React 组件（每页幻灯片一个组件）
• 处理修改反馈

人负责：

• 描述需求
• 点击元素写评论
• 最终审核

为什么是 React？

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

这意味着：

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

官网上的一句话很精准：

"A slide is a file. Just React, nothing else."

核心功能拆解

1. Agent 原生创作：/create-slide

初始化项目后，workspace 自带 Agent 技能说明。核心命令：

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

这是关键设计：open-slide 不只是一个组件库，而是把"Agent 如何生成幻灯片"纳入了工作流。它告诉 Agent：

"画布是 1920×1080，主标题用 48px，正文用 24px，配色是 #1a1a1a + #ff6b6b，你可以用 Framer Motion 做动画。"

Agent 有了这些约束，生成的代码不是瞎写，而是在框架内自由发挥。

2. 固定画布：1920 × 1080

每张 slide 渲染在固定的 1920×1080 画布中。这给了 Agent 明确的视觉边界：

• 字号、布局、元素位置、比例关系都有稳定参考系
• 导出和展示时像素级精确
• 比响应式网页更接近真实演示文稿

对 Agent 来说，固定画布是强约束，也是强能力。它不需要猜测"在 1366px 宽屏上怎么排"，只需要在固定画布内优化。

3. 浏览器内 Inspector：评论驱动迭代

这是 open-slide 最精妙的设计之一。

在开发服务器里，你可以点击页面任何元素，直接留下修改意见：

• "标题改成红色"
• "字号缩小到 36px"
• "这页加一段过渡动画"

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

流程闭环：

Agent 生成初稿 → 人点击元素写评论 → Agent 批量修改 → 人再评论 → 再修改...

这不是"AI 生成，人类接受/拒绝"，而是真正的协作迭代。Agent 不是一次性出稿，而是持续精修。

4. 素材管理 + Logo 搜索

内置 assets panel，按 deck 管理图片、视频、字体。还集成了 svgl Logo 目录，可以直接搜索品牌 Logo 插入。

对做产品介绍、技术分享、路演的用户来说，这省了大量找 SVG 的时间。

5. 专业演示模式

open-slide 不只是开发预览，提供完整的 present mode：

• 全屏播放
• 键盘导航（← → 切页）
• 当前页 / 下一页预览
• speaker notes（演讲者备注）
• timer（计时器）

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

6. 导出静态 HTML 和 PDF

• 静态 HTML：自包含，可部署到 Vercel、Cloudflare Pages、Netlify 等
• PDF：可打印、可分发

这意味着你的幻灯片可以：

• 本地演示（present mode）
• 在线分享（部署到 CDN）
• 离线分发（PDF）

7. Slide Manager

多 deck 管理：按文件夹、emoji、拖拽排序组织。生成越来越多时，这个管理能力有用。

技术架构：Monorepo + 运行时

open-slide/
├── packages/
│   ├── core/          # 核心运行时
│   │   ├── slide viewer     # 幻灯片预览
│   │   ├── present mode     # 演示模式
│   │   ├── inspector        # 浏览器内审查器
│   │   ├── vite plugin      # 构建插件
│   │   └── cli              # dev/build/preview 命令
│   └── cli/           # 初始化脚手架
└── apps/
    └── demo/          # 示例工作区

技术栈：TypeScript、React、Vite、pnpm、Turbo。

设计哲学：不重新发明轮子，而是把 React 生态的成熟工具（Vite 热更新、pnpm workspace、Turbo 构建）组合成幻灯片运行时。

与现有方案对比

open-slide 的差异化不是"某个功能更好"，而是工作流不同：

传统工具是人类为主，AI 辅助打字。open-slide 是Agent 为主，人类辅助审核。

为什么两周 2800+ Stars？

时机：Agent 时代的基础设施

2026 年，Claude Code、Codex、Cursor 等 Coding Agent 已经成熟。开发者习惯了一件事：

"描述需求 → Agent 写代码 → 人审核修改"

open-slide 把这套工作流原封不动地搬到幻灯片制作上。它不改变用户习惯，只是把"幻灯片"纳入了已有的 Agent 协作范式。

哲学：幻灯片即代码

过去，幻灯片和代码是两个世界：

• 写代码用 VS Code + Git
• 做 PPT 用 PowerPoint + 邮件附件

open-slide 说：不需要两个世界。 幻灯片就是代码，用同样的工具、同样的流程、同样的版本管理。

这意味着：

• 技术团队可以用 code review 的方式 review 幻灯片
• 设计师可以把 Design System 编码为 React 组件
• 演讲者可以用 Git 分支管理不同版本的 deck

台湾开发者的视角

作者何奕纬（1weiho）是台湾全栈开发者、Raycast 大使。Raycast 的哲学是"键盘优先的开发者工具"，这影响了 open-slide 的设计：

• 命令行安装（npx init）
• 键盘导航演示
• 开发者优先的 Inspector

不是给"所有人"做的幻灯片工具，是给会写代码、用 Agent 的人做的。

局限与开放问题

1. 学习曲线：不会 React 的人用不了。这不是 bug，是 feature——目标用户就是开发者。

2. 动画支持有限：虽然可以用 Framer Motion，但没有内置的"PPT 式动画向导"。复杂动画需要手动写代码。

3. PPTX 导出：目前不支持导出 PowerPoint 格式。如果接收方必须用 PPT，需要额外转换。

4. 文字编辑的精细度：虽然 Inspector 可以评论，但实时 WYSIWYG 编辑（像 Figma 那样直接拖拽）还没有。

5. 模板生态：目前依赖 Agent 生成，缺少预置的高质量模板库。社区需要积累。

影响与展望

对幻灯片工具的启示

open-slide 代表了一个趋势：

AI 工具正在从"生成内容"转向"生成可编辑的中间表示"。

• 生成 Markdown 是死端——纯文本，后续编辑困难
• 生成 PPT 文件是单行道——格式封闭，Agent 无法迭代
• 生成 React 组件是活端——每张 slide 是可编程对象，Agent 可以持续修改

open-slide 解决的不是"能不能生成 PPT"，而是"能不能让 AI 持续维护 PPT"。

对 Agent 生态的启示

open-slide 的成功说明：Agent 需要的不是通用工具，而是专用运行时。

Agent 能写代码，但让它从零搭一个 React 项目、配置 Vite、处理导出逻辑，太麻烦了。open-slide 提供了稳定的运行时环境，Agent 只需要在约束内写组件。

未来可能会有更多"Agent-native"工具：

• Agent-native 文档工具（不是写 Word，而是写 MDX + 组件）
• Agent-native 设计工具（不是用 Figma，而是写 SVG + 代码）
• Agent-native 数据分析（不是用 Excel，而是写 Python + 可视化组件）

一个更大的图景

如果幻灯片可以代码化，那所有"文档"都可以代码化：

博客文章 → MDX（React 组件）
演示文稿 → open-slide（React 组件）
产品原型 → React Storybook（React 组件）
数据报告 → Observable Plot（JavaScript 组件）

最终，所有"内容"都变成了"代码"，所有"内容创作"都变成了"编程"。而 Agent 最擅长的，就是编程。

open-slide 的 2800 Stars 只是开始。

快速上手

# 初始化项目
npx @open-slide/cli init my-slide

# 进入目录
cd my-slide

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 在编辑器里用 /create-slide 生成幻灯片
# 在浏览器里点击元素写评论
# 用 /apply-comments 让 Agent 批量修改

# 导出
pnpm build        # 静态 HTML
pnpm export:pdf   # PDF

结论

open-slide 是 2026 年最值得关注的新项目之一。它不是因为"功能多"而火，而是因为工作流对。

它看准了一个事实：Coding Agent 已经成熟，但 Agent 需要的不只是"能写代码的 IDE"，而是各领域专用的运行时。幻灯片是第一个被"代码化"的，但绝不会是最后一个。

对开发者来说，open-slide 意味着：

• 做 PPT 不再离开代码编辑器
• 演示文稿可以用 Git 管理、PR 审核、CI 部署
• Agent 可以持续迭代，而不是一次性生成

对 Agent 生态来说，open-slide 意味着：

• Agent-native 工具这个新类别正在成型
• 不是"给人类用的工具 + AI 辅助"，而是"给 Agent 用的工具 + 人类审核"

2800 Stars 用了两周。如果项目持续迭代，积累模板生态和 Agent 技能库，这个数字可能会翻倍。

参考信息

• GitHub：https://github.com/1weiho/open-slide
• 官网：https://open-slide.dev
• 安装：npx @open-slide/cli init my-slide
• 作者：何奕纬（1weiho），台湾全栈开发者、Raycast 大使
• 技术栈：TypeScript、React、Vite、pnpm、Turbo
• 许可证：MIT
• 最新版本：@open-slide/core@1.0.6

#工具 #AIAgent #幻灯片 #React #开源 #小凯