给 AI Agent 用的PPT生成框架，实测

AI时代，PPT的未来是HTML，一个神奇的 Skills 推荐

刷到一个项目叫 open-slide，专门写给 AI 编程 Agent 用的幻灯片框架

不是给人用的，是给 Claude Code、Codex、Cursor 这些 Agent 用的

你跟 Agent 说"帮我做一份介绍 XX 的 10 页 PPT"，它直接给你写出来一份高质量、可以现场演示的深色编辑器风格 PPT，整个过程你不用打开 Keynote 也不用碰 figma

地址：github.com/1weiho/open-slide

地址：github.com/1weiho/open-slide

我自己实测了一遍，用它做了一份 10 页的「Harness 详解」PPT，截图插进了上一篇文章里，效果相当不错

今天就来好好聊聊这个项目

简介

先放官方一句话定位：

❝The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.

你描述要做啥，Agent 写 React 组件，框架处理所有脏活——画布缩放、键盘导航、热更新、演示模式

每一页幻灯片是一个 1920×1080 的 React 组件，没有 DSL 没有模板限制，你想怎么 layout 怎么 layout，想用什么 React 库就用什么

这点是它和 reveal.js、slidev 最大的区别：那俩是给"会写 markdown 的人"用的，open-slide 是给"会写 React 的 Agent"用的

核心功能拆解：

• Agent-native authoring：脚手架自带 4 个 Claude Code skill —— /create-slide（端到端生成一份 deck）、/slide-authoring（画布/字号/调色板技术规范，Agent 写之前先读这个）、/apply-comments（应用评论修改）、/create-theme（自定义主题）
• 浏览器内 inspector：dev server 里点任何元素都能加评论，比如 *"make this red"、"shrink the headline"*，评论以 @slide-comment 标记保存到源码，跑一句 /apply-comments，Agent 一次性把改动全应用上，循环：present → 点选评论 → apply → 再来一遍
• Assets manager + svgl logo 搜索：每个 deck 有独立的资源面板管理图片/视频/字体，要插品牌 Logo 直接通过集成的 svgl 搜，不用再去满世界扒 SVG
• 专业演示模式：全屏播放 + 键盘导航，还有 presenter mode——当前页/下一页预览、speaker notes、计时器一应俱全，是给真正上台做分享的人准备的，不是 demo
• 导出 HTML & PDF：一条命令导出独立静态站或者打印就绪的 PDF，没有服务器依赖
• 静态部署：build 出来就是一坨纯静态文件，Vercel、Cloudflare Pages、Netlify、Zeabur 任你挑，零运维

安装

按官方指引超简单，三行命令的事：

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

使用

我的流程是这样的：写一篇技术文章 → 让 Agent 把核心观点抽成 10 页 PPT → 截图插回文章

以「Harness 才是 AI 编程 Agent 的胜负手」那篇为例

Step 1：让 Agent 设计幻灯片

直接把原文 md 喂给 Claude Code，让它读 /slide-authoring skill 后，按照 1920×1080 画布写 10 页 React 组件，保存到 slides/harness-2026/index.tsx

每页就是一个 React function，可以 export default 一个数组，框架按数组顺序渲染

Step 2：build + preview

pnpm build
pnpm preview

预览跑在 4173，浏览器打开 /s/harness-2026 就能看效果

我做的 Harness PPT 大概长这样（深色编辑器风、橙色 accent）：

open-slide 实战 - Harness PPT 封面

open-slide 实战 - 反直觉结论

open-slide 实战 - Edit Tool 对比

open-slide 实战 - Hashline 代码

open-slide 实战 - Oh-My 生态

open-slide 实战 - 对比表

10 页全跑下来一气呵成，视觉风格统一、信息密度合理，比我自己用 Keynote 拼一下午快至少 10 倍

Step 3：截图插入文章

这步不是 open-slide 自带的（issue 里有人提过想要批量导出 PNG），我自己写了个 playwright 脚本：

const { chromium } = require('playwright');
const browser = await chromium.launch();
const ctx = await browser.newContext({
viewport: { width: 1920, height: 1080 },
deviceScaleFactor: 2,
});
const page = await ctx.newPage();
await page.goto('http://localhost:4173/s/harness-2026');
await page.click('body');
await page.keyboard.press('f');  // 进入 present mode

for (let i = 1; i <= 10; i++) {
if (i > 1) await page.keyboard.press('ArrowRight');
await page.waitForTimeout(500);
const handle = await page.$('div[style*="1920px"][style*="1080px"]');
await handle.screenshot({ path: `png/page-${i}.png` });
}

这里有个关键技巧：必须先按 f 进入 present mode，普通预览模式下键盘事件会被缩略图组件吃掉，ArrowRight 只能翻一页就卡住

我一开始没进 present mode，10 张截图里 9 张都是同一页，调试了半天才发现这个机关

进 present mode 之后稳如老狗，10 张全部独立，分辨率 3840×2160（DPR=2 的视网膜版本），插到文中绝对清晰

实测

实测下来我对它的评价是：专为 Agent 设计这个定位，不是噱头，是真的把 Agent 的工作流吃透了

优点：

• React + Tailwind 写页面，自由度比 reveal.js / slidev 高一个量级，想做什么花活都行
• 1920×1080 固定画布的设计简单粗暴但有效，Agent 不用担心响应式适配，专心写内容
• /slide-authoring skill 文档详细到字体字号、行距、留白比例全都规定好了，Agent 写出来的页面视觉一致性极强
• present mode + presenter mode 是真的能上台用，不是花架子
• 部署纯静态，扔 Cloudflare Pages 一秒上线

缺点 / 局限：

• 中文字体支持要自己折腾（assets 面板加字体文件 + 在 React 里 import）
• 没有内置的 PNG 批量导出（要自己写 playwright，像我上面那段）
• 写 React 的门槛不算高但也不算零——如果你不会 React 完全不知道这是啥的话，得让 Agent 全权代笔，自己改细节会有点懵
• 现在生态还小，主题/模板库基本是空的，全靠自己（或 Agent）从零撸

适合谁：

• 经常需要把技术内容快速做成幻灯片的内容创作者、布道师、做技术分享的工程师
• 重度用 Claude Code / Codex / Cursor 的人，让 Agent 直接产出 deck 是真的爽
• 喜欢 React 生态的，想用 Tailwind / shadcn / framer-motion 写动画的

不适合谁：

• 完全不写代码、纯靠 GUI 拖拽做 PPT 的人——那你还是用 Keynote 吧
• 内容固定就是那几个简单 markdown 文档，slidev 完全够用，不需要这个
• 要协同编辑（多人同时改一份 deck）的——这个目前是个人本地工具

One More Thing

最让我感慨的不是 open-slide 这个工具本身，而是它背后的思路

幻灯片是 visual code，Agent 擅长写 code，所以让 Agent 用代码方式生产幻灯片，比让它生成 pptx 文件靠谱一万倍

这个思路可以推广到很多地方：

• 简历是 visual code → 让 Agent 用 React 给你写一份
• 海报是 visual code → 让 Agent 写 SVG / Canvas
• 数据可视化是 visual code → 让 Agent 用 D3 / Vega

未来真正的内容创作工具，可能都是这种"自然语言 → Agent → 代码 → 视觉产出"的形态，open-slide 是这个范式很早期但很正确的一个样板

我打算之后所有文章配的 PPT、信息图都用它生成，正好凑齐"obsidian 写文 + Claude Code 写 PPT + R2 图床 + 编辑器一键发"的全链路

一句话总结：如果你是用 Claude Code / Codex 的内容创作者，今晚就装上玩玩，回不去了

#openslide #ClaudeCode #AIGC #AI编程 #PPT

制作不易，如果这篇文章觉得对你有用，可否点个关注。给我个三连击：点赞、转发和在看。若可以再给我加个🌟，谢谢你看我的文章，我们下篇再见！