open-slide

专为 agent 构建的幻灯片框架。 用自然语言描述你的演示文稿——你的编码 agent 负责编写 React 代码。open-slide 处理画布、缩放、导航、热重载和演示模式，让 agent 专注于内容本身。

每张幻灯片都渲染在固定的 1920 × 1080 画布上。页面是任意 React 组件，而非受限的 DSL。

npx @open-slide/cli init my-slide

为什么选择 open-slide

幻灯片本质上是可视化代码。Agent 擅长编写代码。open-slide 是缺失的运行时，能将"制作关于 X 的幻灯片"这一指令转化为精美可演示的演示文稿——而你甚至无需离开聊天界面。

亮点

🤖 Agent 原生创作

可与任何编码 agent（Claude Code、Codex、Cursor 等）配合使用。脚手架内置了以下技能：

• /create-slide — 端到端起草演示文稿。会询问四个范围界定问题（主题与美学风格、页数、文本密度、动效 vs 静态），选择 id，规划结构，并编写页面。
• /slide-authoring — 关于 1920 × 1080 画布、字号比例、调色板和布局规则的技术参考。Agent 在编写前会读取此内容。

从一行 prompt 到精美的演示文稿，无需样板代码。

🎯 浏览器内检查器

在开发服务器中点击任意元素并附加评论——"把这个改成红色"、"改为 'Open Slide Rocks'"、"缩小标题"。评论会以 @slide-comment 标记的形式持久化保存在源码中。运行 /apply-comments，agent 会应用所有待处理的编辑，然后清除这些标记。

工作流程：演示 → 点击评论 → /apply-comments → 重复。

🖼️ 资源管理器 + svgl 标志搜索

通过内置的资源面板管理每个演示文稿的图片、视频和字体。通过集成的 svgl 目录搜索并拖入任意品牌标志——无需再四处寻找 SVG。

🎬 专业演示模式

全屏播放，支持键盘导航，另配有演示者模式，包含当前/下一张幻灯片预览、演讲者备注和计时器。专为舞台场景设计，而不仅仅是浏览器标签页。

📦 导出为静态 HTML 和 PDF

一条命令即可将演示文稿导出为独立的静态 HTML 网站或可直接打印的 PDF。无需服务器即可分享。

📁 幻灯片管理器

将演示文稿整理到文件夹中，支持自定义 emoji 和拖拽排序。当你构建了三个以上演示文稿需要查找时，此功能非常实用。

🚀 易于部署

输出为纯静态构建产物——一键部署到 Vercel、Cloudflare Pages、Zeabur、Netlify 或任何静态托管平台。无需服务器、无需运行时、无锁定。

快速开始

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

脚手架生成的工作区已为 Claude Code 预配置了 agent 技能。你可以通过 agent 驱动演示文稿的创作——或直接编辑 slides/<id>/index.tsx。硬性规则请参见 CLAUDE.md。

仓库结构

本仓库是一个 pnpm + Turbo 的 monorepo。

开发

pnpm install
pnpm dev      # 针对本地 @open-slide/core 运行 demo
pnpm build    # 构建所有包
pnpm check    # 对所有包进行类型检查
pnpm lint     # 通过 biome 进行 lint

Star 历史

如果 open-slide 对你有用，请在 GitHub 上给仓库加星——这有助于其他人发现该项目。

支持

如果 open-slide 对你有帮助，可以考虑支持其开发：

许可证

MIT