open-slide

在传统演示文稿工具中，调整像素、对齐元素和处理格式往往耗费大量精力。open-slide 是一个专为 AI 编码代理 设计的幻灯片框架。你只需用自然语言描述需求，你的 AI 代理（如 Claude Code）就会编写 React 代码 来生成精美、可编程的幻灯片。

open-slide 处理所有底层复杂性：1920×1080 固定画布、缩放、导航、热重载和演示模式。代理只需专注于内容逻辑与视觉呈现，而你无需离开聊天界面即可见证演示文稿的诞生。

核心亮点：代码即幻灯片

1. 代理原生创作流程

• 自然语言驱动：通过内置的 /create-slide 技能，代理会询问范围界定问题，规划结构，并端到端编写 React 页面代码。
• 技术参考文档：/slide-authoring 技能为代理提供画布尺寸、字体比例、调色板和布局规则的详细技术参考，确保生成代码符合规范。
• 零样板代码：从一行提示到完整可运行的演示文稿，无需手动配置 Webpack 或 CSS 框架。

2. 浏览器内可视化检查器

• 点击即评论：在开发服务器中，直接点击任何元素并附加修改意见（如“把这个标题变大一点”、“背景色改成深蓝”）。
• 自动应用修改：评论以 @slide-comment 标记保存在源码中。运行 /apply-comments，代理会自动读取并应用所有待处理编辑，然后清除标记。
• 高效迭代循环：展示 → 点击评论 → /apply-comments → 重复，实现可视化的快速反馈闭环。

3. 资源管理器与 SVG 徽标库

• 统一管理：内置资源面板，轻松管理图像、视频和字体文件。
• SVGL 集成：直接搜索并拖入数千个品牌 SVG 徽标，无需再去网上寻找矢量图，保持演示文稿的专业质感。

4. 专业级演示体验

• 全屏播放：支持键盘导航，流畅的转场动画。
• 演讲者模式：提供当前/下一张幻灯片预览、演讲者备注和计时器，专为正式舞台演讲设计。
• 多端导出：一键导出为自包含的静态 HTML 网站或打印就绪的 PDF，无需服务器即可分享。

5. 幻灯片管理与部署

• 文件夹组织：支持用自定义表情符号标记文件夹，拖放排序，轻松管理多个演示文稿项目。
• 静态部署：输出纯静态构建产物，可一键部署到 Vercel、Cloudflare Pages、Netlify 等任何静态主机，无锁定、无运行时依赖。

快速开始

1. 初始化项目

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

2. 启动代理创作

脚手架生成的工作区已预配置了适用于 Claude Code 的代理技能。

• 打开你的 AI 编码代理（如 Claude Code）。
• 输入指令：/create-slide 制作一个关于 open-slide 框架介绍的演示文稿，风格极简科技感。
• 代理将自动创建文件、编写 React 组件并启动热重载。

3. 迭代与优化

• 在浏览器中查看生成的幻灯片。
• 点击不满意的地方，添加评论。
• 在终端或代理对话中运行 /apply-comments，观察代理自动修复代码。

技术架构

open-slide 是一个基于 pnpm + Turbo 的 Monorepo 项目：

核心技术栈：

• React：每张幻灯片都是标准的 React 组件，拥有无限的定制能力。
• Vite：极速热重载（HMR），修改代码瞬间预览效果。
• TypeScript：类型安全，辅助代理编写更健壮的代码。

为什么选择 open-slide？