bolt-slides

bolt-slides 快速入门

StackBlitz 出品，用任何 AI Agent 创建惊艳的交互式演示文稿

⭐ 评分: 8.4/10 💰 价格: 开源免费 🏢 厂商: StackBlitz 🌐 官网: github.com/stackblitz/bolt-slides

这是什么？

bolt-slides 是 StackBlitz 团队推出的开源项目，让任何 AI Agent（Claude Code、Codex CLI、Cursor 等）都能直接生成交互式 Web 演示文稿。不同于传统的静态 PPT 工具，bolt-slides 产出的幻灯片是运行在浏览器中的 Web 应用，支持动画、交互和实时数据。

核心价值主张：用 AI Agent 驱动演示文稿创建，告别手动排版和模板选择。你只需用自然语言描述需求，Agent 负责生成完整的交互式幻灯片。

目标用户：需要快速创建技术演示的开发者、经常做产品 Demo 的产品经理、以及任何已经使用 AI Agent 工作流的用户。

准备工作

• Node.js 18+ 环境
• 任意 AI Agent（Claude Code / Codex CLI / Cursor / Windsurf 等）
• GitHub 账号（用于克隆仓库）
• 5 分钟上手时间

三步快速上手

第一步：克隆仓库

git clone https://github.com/stackblitz/bolt-slides.git
cd bolt-slides
npm install

第二步：用 AI Agent 生成幻灯片

在 Agent 中描述你的演示需求：

请使用 bolt-slides 框架创建一个关于"AI 在 2026 年的 5 大趋势"的演示文稿，
包含 8 张幻灯片：封面、目录、5 个趋势各一张、总结。
每张幻灯片使用 bolt-slides 的组件库，添加适当的动画效果。

第三步：预览和导出

npm run dev

浏览器打开 http://localhost:5173 即可预览。满意后可直接部署到 Vercel/Netlify 等平台。

核心特性

• Agent 驱动：任何 AI Agent 均可创建演示文稿，不限于特定工具
• 交互式输出：支持动画、过渡效果、点击交互
• Web 原生：基于现代 Web 技术栈（Vite + React），浏览器直接运行
• StackBlitz 品质：知名在线 IDE 平台出品，代码质量有保障
• 开源免费：MIT 协议，无任何使用限制

常见踩坑

1. Node 版本过低导致安装失败 — 确保使用 Node 18+ 版本
2. Agent 生成的幻灯片组件引用错误 — 检查 bolt-slides 组件库文档，确保使用正确的组件名
3. 图片资源路径问题 — 使用相对路径或 CDN 外链，避免使用本地绝对路径
4. 动画效果不生效 — 检查 CSS transition/animation 配置，部分浏览器需添加前缀
5. 移动端适配 — bolt-slides 默认面向桌面端，移动端需额外调整响应式布局

常见问题 FAQ

Q1: bolt-slides 和 Gamma AI 有什么区别？

A: bolt-slides 是开源免费的 AI Agent 驱动工具，Gamma AI 是商业订阅服务。bolt-slides 更适合已有 AI Agent 工作流的开发者，Gamma AI 更适合非技术用户。

Q2: 生成的内容可以导出为 PPTX 吗？

A: 目前不支持直接导出 PPTX。bolt-slides 产出的 HTML/CSS/JS 幻灯片，可通过浏览器打印为 PDF。

Q3: 支持哪些 AI Agent？

A: 任何能读写文件和执行命令的 AI Agent 都可以使用，包括 Claude Code、Codex CLI、Cursor、Windsurf、GitHub Copilot 等。

Q4: 如何自定义幻灯片主题？

A: 修改 CSS 变量或添加自定义样式文件，Agent 可以帮助你生成主题配置。

Q5: 可以在已有的项目中集成 bolt-slides 吗？

A: 可以。bolt-slides 是一个 Vite 项目模板，你可以将其组件集成到现有项目中。

参考链接

• 官方仓库
• StackBlitz 官网