面向 AI 编码代理的 React 幻灯片框架，支持 Agent Skills 驱动的自然语言创作、浏览器内评论标注与迭代编辑。
open-slide 是一个以 Agent-native 为核心的 React 幻灯片框架，采用 Slides as Code 理念，每张幻灯片即为 TSX 组件，渲染在固定 1920×1080 画布上，保证跨设备一致性。
核心能力#
Agent 原生创作#
框架内置四项 Agent Skills，兼容 Claude Code、Cursor、Gemini CLI、Codex、Windsurf、Zed 等主流编码代理：
/create-slide— 端到端生成幻灯片，自动询问四项定位问题（主题与美学、页数、文本密度、动效 vs 静态），再规划结构并生成页面代码/slide-authoring— 提供 1920×1080 画布约束、排版、调色板、布局规则的技术参考/apply-comments— 扫描源码中所有@slide-comment标记，批量应用修改后清除/create-theme— 创建主题
编辑体验#
- In-browser Inspector：开发服务器中点击任意元素附加评论，评论持久化为
@slide-comment源码标记 - Visual Editor：inspect 模式下直接修改文本、字号、字重、颜色、图片等，编辑缓冲在内存中一次性 HMR 写入
- Assets Manager：内置资源面板管理图片/视频/字体，集成 svgl 搜索 1500+ 品牌 Logo SVG 并直接放入资源文件夹
- Slide Manager：按文件夹组织、自定义 emoji、拖拽排序
演示与导出#
- Professional Present Mode：全屏播放、键盘导航、演讲者视图（当前/下一页预览、演讲者备注、计时器）
- Export：一键导出为自包含静态 HTML 站点或打印级 PDF，无需服务器即可分享
- Deploy-friendly：纯静态构建输出，支持 Vercel、Cloudflare Pages、Zeabur、Netlify 等任意静态托管
架构#
项目采用 pnpm + Turborepo monorepo 架构：
| 路径 | 包名 | 职责 |
|---|---|---|
packages/core | @open-slide/core | 核心运行时：首页、幻灯片查看器、演示模式、Inspector、Vite 插件、dev/build/preview CLI |
packages/cli | @open-slide/cli | 脚手架工具：init 生成最小化工作区，Vite/React/tsconfig 隐藏在 core 内部 |
apps/demo | — | 示例工作区，消费本地 @open-slide/core，用于框架开发调试 |
关键机制：
- Agent Skills 文件存放在
.agents/skills/和.claude/skills/目录，脚手架初始化时预配置 Claude Code 技能 - Inspector 产生的评论以
@slide-comment注释标记写入 TSX 源码 - Visual Editor 画布编辑缓存在内存中，通过 HMR 一次性写入源码
- Vite 负责 dev server 与生产构建，Turborepo 管理包间依赖与任务编排
快速开始#
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev
脚手架自动生成 slides/ 目录、open-slide.config.ts 配置文件，并启动热重载开发服务器。
幻灯片文件约定#
每张幻灯片为 slides/<id>/index.tsx，导出 Page[] 类型数组：
import type { Page } from '@open-slide/core';
const Cover: Page = () => (
<div style={{ background: '#08090a', color: '#f7f8f8' }}>
<h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
Hello, <em style={{ color: '#d56b48' }}>deck</em>.
</h1>
<p>A React slide, rendered live.</p>
</div>
);
export default [Cover] satisfies Page[];
适用场景#
- AI 代理驱动的快速幻灯片生成
- 需要 Git 版本控制的技术演讲与分享
- 品牌演示素材管理（svgl Logo 集成）
- "演示 → 标注 → 代理修改 → 再演示"的高频人机协作编辑循环
不适用场景：非技术用户希望通过拖拽 GUI 完成全部制作（编辑能力依附于开发服务器）。
待确认信息#
- 未发现相关论文链接，项目为工程工具而非学术研究
- PDF 导出底层实现引擎未明确说明
- 未发现明确的 i18n 支持说明
open-slide.config.ts配置项完整 schema 未在文档中展示