Open Slide：让 Coding Agent 直接写 React 幻灯片

open-slide 是一个专为 AI Coding Agent 设计的开源幻灯片框架。说白了，它不再让你用 Markdown 或纯 HTML 拼凑简陋的演示文稿，而是让 Claude Code、Codex CLI 或 Cursor 直接帮你把需求写成标准的 React 组件。

项目把每张幻灯片都放在固定 1920 × 1080 的画布上渲染。你只要在浏览器里描述演示内容，Agent 就会逐页编写代码，画布同时实时热重载并跟随渲染。

它能做什么

相比传统的网页幻灯片方案，open-slide 的核心优势是拥有 React 的生态组件和更顺畅的 AI 协作循环。

你可以在浏览器里直接驱动本地 Agent。按键盘上的 A 键能唤起侧边面板，按 C 键则能框选元素或区域留下修改批注。这些批注会自动存入源码中的注释标记，Agent 可以一次性读懂并批量修改，免去一段段提示词来回复制的麻烦。

除了完全交给 AI 编写代码，它还自带一套可视化编辑器。文字、位置、尺寸都可以手动拖拽微调，对齐辅助线和内联文本编辑一应俱全。

项目还内置了资源管理器，集成了收录 1500 多个品牌矢量图标的 SVGL 库与 Google Fonts。如果你经常写技术类 PPT，找 Claude、Codex 或 Cursor 的高清 Logo 不用再到处切网页去搜。

在输出方面，open-slide 支持演讲者双屏模式、倒计时与演讲备注。做好的幻灯片既能直接导出为静态 HTML、PDF 和 PPTX，也可以一键构建并部署到 Cloudflare Pages、Vercel 或 Netlify。

怎么跑起来

open-slide 采用 MIT 协议开源。你的电脑只要装了 Node 环境，终端里运行 npx @open-slide/cli init my-deck 就能初始化项目。

首次在浏览器打开面板时，它会自动在本地工作区配置 SDK，复用你现有的 Claude Code 或 Codex 终端登录状态，不需要额外去配第三方 API 密钥。如果你更习惯纯终端工作流，项目自带的命令技能也可以直接被各类代码助手调用。

为什么重要

我们认为 open-slide 聪明的地方在于，它没有自己去重造一套半吊子的大模型生成后台，而是顺应了开发者已经习惯的终端 Coding Agent。把幻灯片当作标准 React 前端工程来维护，既让 AI 写代码的泛化能力彻底释放，又用直观的画布和批注解决了纯代码修图的痛点。

如果你平时需要频繁制作技术分享、产品演示，又对市面上千篇一律的 AI PPT 排版感到厌烦，这个项目非常值得拉到本地试一试。