1weiho/open-slide

# open-slide [](https://github.com/1weiho/open-slide/stargazers) [](https://github.com/1weiho/open-slide/network/members) [](https://opensource.org/licenses/MIT) **专为 agent 构建的幻灯片框架。** 用自然语言描述你的演示文稿——你的 coding agent 来编写 React。open-slide 负责处理画布、缩放、导航、热重载和演示模式，让 agent 可以专注于内容。 每张幻灯片都渲染在一个固定的 **1920 × 1080** 画布上。页面是任意的 React 组件，而不是受限的 DSL。 ``` npx @open-slide/cli init my-slide ``` ## 为什么选择 open-slide 幻灯片是可视化的代码。agent 擅长编写代码。open-slide 就是那个缺失的 runtime，它将“制作关于 X 的幻灯片”变成一份精美、适合演示的文稿——而你完全不需要离开聊天界面。 ## 核心特性 ### 🤖 Agent 原生创作 支持任何 coding agent（Claude Code、Codex、Cursor 等）。脚手架自带内置技能： - **`/create-slide`** —— 端到端起草一份演示文稿。询问四个范围界定问题（主题与美学、页数、文本密度、动态与静态），选择一个 id，规划结构，并编写页面。 - **`/slide-authoring`** —— 关于 1920 × 1080 画布、字体比例、调色板和布局规则的技术参考。agent 会在编写之前阅读此内容。 从一行 prompt 到一份精美的演示文稿，无需样板代码。 ### 🎯 浏览器内检查器 在 dev server 中点击任意元素并添加评论——*“把这个变成红色”*，*“更改为 'Open Slide Rocks'”*，*“缩小标题”*。评论会作为 `@slide-comment` 标记持久化保存在源码中。运行 `/apply-comments`，agent 会应用所有待处理的编辑，然后清除这些标记。 循环流程：演示 → 点击评论 → `/apply-comments` → 重复。 ### 🖼️ 资源管理器 + svgl logo 搜索 通过内置资源面板针对每份演示文稿管理图像、视频和字体。通过集成的 [svgl](https://svgl.app/) 目录搜索并拖放任何品牌 logo —— 无需再费力寻找 SVG。 ### 🎬 专业演示模式 全屏播放并支持键盘导航，外加带有当前/下一张幻灯片预览、演讲者备注和计时器的 **演讲者模式**。专为舞台设计，而不仅仅是为了浏览器标签页。 ### 📦 导出为静态 HTML 和 PDF 一条命令即可将你的演示文稿导出为独立的静态 HTML 站点或适合打印的 PDF。无需服务器即可分享。 ### 📁 幻灯片管理器 使用自定义 emoji 将演示文稿整理到文件夹中，并支持拖放重新排序。当你构建了超过三份演示文稿并需要快速找到某一份时，这会非常有用。 ### 🚀 对部署友好 输出纯粹的静态构建版本 —— 一键部署到 Vercel、Cloudflare Pages、Zeabur、Netlify 或任何静态托管平台。无服务器，无 runtime，无锁定。 ## 快速开始 ``` npx @open-slide/cli init my-slide cd my-slide pnpm dev ``` 搭建好的工作区预先为 Claude Code 配置了 agent 技能。接下来你可以通过你的 agent 来控制演示文稿——或者直接编辑 `slides//index.tsx`。有关硬性规则，请参见 [CLAUDE.md](CLAUDE.md)。 ## 仓库结构 本仓库是一个 pnpm + Turbo monorepo。 | 路径 | 描述 | | --- | --- | | [packages/core](packages/core) | `@open-slide/core` —— runtime（主页、幻灯片查看器、演示模式、检查器），Vite 插件，以及 `open-slide` dev/build/preview CLI。 | | [packages/cli](packages/cli) | `@open-slide/cli` —— `npx @open-slide/cli init` 脚手架。生成一个最小化的工作区，其中 Vite/React/tsconfig 隐藏在 core 内部。 | | [apps/demo](apps/demo) | 通过 `workspace:*` 使用 `@open-slide/core` 的示例工作区。用于框架的本地开发。 | ## 开发 ``` pnpm install pnpm dev # runs the demo against the local @open-slide/core pnpm build # builds all packages pnpm check # type-checks all packages pnpm lint # lints via biome ``` ## 支持 如果 open-slide 对您有帮助，请考虑支持开发： [](https://ko-fi.com/D1D11YPUP1) ## License MIT

标签：AI代理, React框架, SOC Prime, 开发工具, 演示文稿, 自动化攻击