太强了！用自然语言写 PPT，AI 帮你搞定一切——open-slide 开源项目全解析
💡 还在手动调 PPT 对齐？试试 open-slide，一句话生成专业幻灯片，AI 写代码，你只管说。
目录
- 1. 项目简介
- 2. 它能做什么？
- 3. 5 分钟快速上手
- 4. 核心原理揭秘
- 5. 适用场景与优缺点
- 6. 总结
📌 1. 项目简介
你有没有过这种经历——要做个演示文稿，打开 PowerPoint 或 Keynote，然后花大把时间在对齐、调字体、找素材、导出 PDF 上？
open-slide 的思路完全不同：PPT 本质上就是视觉化的代码。既然 AI 编码助手（Claude Code、Cursor、Codex）已经非常擅长写代码了，为什么不直接让它们帮你"写"PPT？
open-slide 就是为 AI Agent 量身打造的幻灯片框架。你只需要用自然语言描述想要的幻灯片，Agent 负责写 React 代码，open-slide 负责渲染画布、缩放适配、导航控制、热重载和演讲模式——你甚至不需要离开聊天窗口。
🎯 核心定位：The slide framework built for agents. 用自然语言描述 → AI Agent 写 React → open-slide 渲染成品
- 🔗 GitHub 地址：https://github.com/1weiho/open-slide
- 🛠️ 技术栈：React + Vite + TypeScript + pnpm + Turbo
🎯 2. 它能做什么？
| 🤖 Agent 原生创作 | 兼容 Claude Code、Cursor、Codex 等任何编码助手，内置 /create-slide 和 /slide-authoring 技能 |
| 🎨 固定 1920×1080 画布 | 每页幻灯片在固定分辨率画布上渲染，缩放自适应，不用担心布局错位 |
| ⚛️ 任意 React 组件 | 页面就是普通 React 组件，不是受限 DSL，想怎么写就怎么写 |
| 🎯 浏览器内审查器 | 点击元素直接添加评论（“把标题改红”、“缩小字号”），运行 /apply-comments 一键应用修改 |
| 🖼️ 资源管理器 + Logo 搜索 | 内置资源面板管理图片/视频/字体，集成 svgl 品牌 Logo 目录，拖拽即用 |
| 🎬 专业演讲模式 | 全屏播放 + 键盘导航 + 演讲者视图（当前页/下一页预览、备注、计时器） |
| 📦 导出静态 HTML & PDF | 一键导出为自包含的静态网站或可打印的 PDF，无需服务器即可分享 |
| 📁 幻灯片管理器 | 文件夹分组 + 自定义 Emoji + 拖拽排序，管理多套幻灯片不再混乱 |
| 🚀 一键部署 | 输出纯静态构建，直接部署到 Vercel / Cloudflare Pages / Netlify 等任意静态托管平台 |
🤖 Agent 原生创作——工作流详解
这是 open-slide 最核心的亮点，我们展开说说：
Step 1：一行命令初始化项目
npx @open-slide/cli init my-slide
脚手架会生成一个最小化工作区，Vite/React/tsconfig 等配置全封装在 core 里，你不需要关心。
Step 2：告诉 Agent 你想要什么
在聊天窗口输入类似：
“帮我做一份关于 React 19 新特性的演示文稿，科技感风格，8 页左右，文字简洁，适当加动画”
Step 3：Agent 自动执行 /create-slide 技能
这个技能会问你 4 个问题来明确范围：
然后 Agent 会规划结构、分配页面 ID、逐页编写 React 组件代码。
Step 4：预览 → 评论 → 修改 → 重复
在浏览器中预览幻灯片，点击任意元素添加评论注释，运行 /apply-comments 让 Agent 批量应用所有修改。这个循环非常高效：
呈现 → 点击评论 → /apply-comments → 重复
🚀 3. 5 分钟快速上手
环境要求
- ✅ Node.js 16+
- ✅ pnpm（推荐）
- ✅ 一个 AI 编码助手（Claude Code / Cursor / Codex 等）
第一步：初始化项目
npx @open-slide/cli init my-slide
第二步：进入目录并启动开发服务器
cd my-slide
pnpm dev
第三步：让 Agent 帮你写幻灯片
在 Claude Code 中直接描述需求（脚手架已预配置 Agent 技能）：
“创建一份关于 AI 编程趋势的演讲，极简风格，6 页”
Agent 会调用内置的 /create-slide 技能，自动完成从规划到编码的全过程。
第四步：预览与迭代
浏览器打开开发服务器，实时预览。点击元素添加评论，再让 Agent 应用修改。
第五步：导出与分享
# 导出为静态 HTML
pnpm build
# 导出为 PDF
# 在预览模式中使用导出功能
🔍 4. 核心原理揭秘
架构概览
open-slide 采用 pnpm + Turbo monorepo 架构，主要包含以下模块：
| packages/core | @open-slide/core | 运行时：首页、幻灯片查看器、演讲模式、审查器、Vite 插件、dev/build/preview CLI |
| packages/cli | @open-slide/cli | 脚手架：npx @open-slide/cli init 初始化项目，生成最小工作区 |
| apps/demo | (private) | 示例工作区，通过 workspace:* 引用 core，用于本地开发调试 |
| apps/web | (private) | 官网（Next.js） |
关键设计决策
① 固定画布策略
每页幻灯片渲染到固定的 1920 × 1080 画布上，然后通过缩放适配各种屏幕尺寸。这意味着：
- 🎯 你只需要关心一个分辨率下的布局
- 🎯 不会出现"在我电脑上看着好好的，投屏就乱了"的问题
- 🎯 缩放逻辑由框架统一处理
② 页面 = React 组件
// 📄 slides/my-deck/index.tsx
export default function MySlide() {
return (
<div className="flex flex-col items-center justify-center h-full">
<h1 className="text-7xl font-bold">Hello, open-slide!</h1>
<p className="text-2xl mt-8 text-gray-400">AI 驱动的幻灯片框架</p>
</div>
);
}
页面就是普通的 React 组件——你可以使用任何 React 生态的工具：Tailwind CSS、Framer Motion、Recharts 图表等。不是受限的 DSL，不是拖拽编辑器，是真正的代码。
③ Agent 技能体系
框架内置了两个核心技能：
- /create-slide：端到端的幻灯片创作技能。从需求澄清到结构规划到代码编写，全自动化。
- /slide-authoring：技术参考手册。Agent 在写代码前先读取这个技能，了解画布规格、字号体系、调色板和布局规则。
这套技能体系确保了 Agent 产出的幻灯片在视觉一致性上是有保障的，而不是随机写一通。
④ 评论驱动迭代
这是一个非常巧妙的设计——在开发服务器中，点击任意元素可以添加评论，这些评论会以 @slide-comment 标记的形式持久化到源码中。运行 /apply-comments，Agent 就能批量处理所有待修改项。
这比传统的"截图→标注→口头描述修改→手动改"流程高效太多了。
⚖️ 5. 适用场景与优缺点
✅ 适合你，如果……
- 你日常使用 AI 编码助手，习惯"对话式"工作流
- 你对代码有基本了解，不排斥用代码表达创意
- 你需要快速产出技术分享、产品演示等幻灯片
- 你希望幻灯片可以版本控制、团队协作
❌ 可能不适合，如果……
- 你完全不懂代码，只习惯拖拽式 PPT 工具
- 你需要非常复杂的动画效果（React 动画可以实现，但门槛较高）
- 你需要离线编辑，不能依赖 Node.js 开发环境
优缺点对比
| 🎨 易用性 | ⭐⭐⭐⭐ | 有 Agent 辅助后门槛很低，但纯手工写仍需 React 基础 |
| ⚡ 效率 | ⭐⭐⭐⭐⭐ | 一句话出幻灯片，评论驱动迭代，效率碾压传统工具 |
| 🎯 灵活性 | ⭐⭐⭐⭐⭐ | React 组件不受限，想做什么效果都可以 |
| 📦 生态 | ⭐⭐⭐ | 新项目，社区和模板还在建设中 |
| 🔧 部署 | ⭐⭐⭐⭐⭐ | 纯静态输出，任何静态托管平台都能一键部署 |
📚 6. 总结
open-slide 是一个思路非常新颖的开源项目——它不试图做"更好的 PowerPoint"，而是重新定义了幻灯片的创作方式：让 AI Agent 成为你最强大的 PPT 助手。
它的核心理念是：PPT 就是代码，AI 擅长写代码，所以让 AI 写 PPT。围绕这个理念，它提供了一整套从创作到迭代到部署的完整工具链。
🌟 推荐指数：⭐⭐⭐⭐（4/5）
- 适合：技术从业者、AI 工作流爱好者、追求效率的团队
- 关注点：项目较新，生态仍在建设；需要基本的 React/Node.js 环境
一句话总结：如果你已经在用 AI 编码助手写代码，那为什么不顺便让它帮你写 PPT 呢？
📢 原文链接：https://github.com/1weiho/open-slide
标签：#open-slide #AI编程 #React #幻灯片 #PPT #Vite
