stackblitz/bolt-slides

## 为什么开发这个项目 用于制作幻灯片的 AI 非常强大，但生成的成果往往很糟糕：千篇一律的布局，满屏的项目符号，毫无展示的亮点。 而且：为什么幻灯片仍然是*静态*的？Agent 可以构建*任何东西*。如果你（有品位地）让它们自由发挥来制作幻灯片，会是什么样子？ Bolt Slides 就是我们为了寻找答案而开发的产品：提供一套基础构建块，任何 agent（Claude Code、Codex、Cursor、Bolt）都可以利用它们组合出惊艳、引人入胜的演示文稿。定制化布局、专业排版、精心设计的动画、任何可交互的元素。每份演示文稿都是一个真正的 Web 应用，在任何屏幕上都自适应，并且可以作为一个链接分享。 **开箱即用的卓越品味。** [看看效果如何 →](https://x.com/boltdotnew/status/2077770386444341332?s=20) 其底层是一套经典的分页演示文稿——Slidev 风格的停靠栏、缩略图侧边栏、网格概览、点击构建（click-builds）、注释、同步的演讲者模式——其中每一张幻灯片都是一个标准的 React 组件。只要是你能为 Web 构建的内容，就可以用来展示。 ## 快速开始 **使用 agent（有趣的方式）。** 在 [Bolt](https://bolt.new/github.com/stackblitz/bolt-slides) 中打开仓库并输入 prompt： 内置的 skill（[`.bolt/skills/slides/SKILL.md`](./.bolt/skills/slides/SKILL.md)）会教 agent 如何设置主题、组合内容并编写演示文稿——包括设置标签页标题和 favicon——因此只需一个 prompt 就能生成一个完整且可用于展示的应用。 **手动方式。** ``` git clone https://github.com/stackblitz/bolt-slides cd bolt-slides npm install npm run dev ``` 开发服务器会打开一个包含 26 张幻灯片的演示，展示了每个组件的用法。删除 [`src/App.tsx`](./src/App.tsx) 中的演示幻灯片并编写你自己的内容。 ## 编写内容 `` 的每个顶级子元素都是一张幻灯片。你可以利用组件库来组合它们，或者直接编写普通的 JSX： ``` Acme} subtitle="Answers, not dashboards." notes="Welcome — set up the problem, then hold a beat." />

Dashboards are everywhere. Insight isn't.

Acme turns raw events into answers — automatically.

``` - **``** 在第 n 次点击时显示内容——方向键会先逐步执行构建，然后再切换幻灯片，支持向前和向后。 - 在任何幻灯片上添加 **`notes="…"`** 都会在演讲者模式下显示；你在演示时编辑的笔记会保存在本地。 - 幻灯片是普通的 React 组件——可以获取实时数据、挂载 3D 场景、嵌入你的真实产品。 ## 演示 | 按键 | 操作 | | --- | --- | | `→` `↓` `Space` | 下一张（先显示构建内容） | | `←` `↑` | 上一张（倒回构建内容） | | `Home` / `End` | 第一张 / 最后一张幻灯片 | | `S` | 侧边栏 —— 缩略图轨道 | | `G` | 网格视图 —— 一次性查看所有幻灯片 | | `A` | 注释 —— 画笔、荧光笔、形状、橡皮擦 | | `F` | 全屏 | | `P` | 演讲者模式 —— 同步新标签页 | | `H` | 隐藏 UI | | `Esc` | 关闭遮罩层 | - **演讲者模式** 会在第二个标签页中打开，包含计时器、下一张幻灯片预览和可编辑的笔记——通过 `BroadcastChannel` 与观众端标签页保持同步。 - **注释与内容锚定**：在笔记本电脑上围绕某个数据画的圆圈，在手机上也会准确圈出同一个数据，无论布局如何移动。绘图内容会针对每张幻灯片单独保存。 - **深链接**：URL 的 hash 会跟踪幻灯片（`/#7`），因此你可以直接分享指向特定幻灯片的链接。 ## 组件库 | | 组件 | | --- | --- | | **结构** | `Cover` `Agenda` `Section` `Split` `Bento` `Slide` | | **数据** | `Charts` (柱状图 · 折线图 · 环形图) `Table` `StatGrid` `BigNumber` `CountUp` `VisualDashboard` | | **故事** | `Quote` `Contrast` `Comparison` `Timeline` `Steps` `Chat` | | **产品** | `CodeWindow` `BrowserFrame` `Pricing` `Team` | | **风采** | `Globe` `TiltCard` `SpotlightCard` `Marquee` `Accordion` `Tabs` | 所有这些都在内置的入门演示文稿中进行了演示，并且全都是响应式的。 ## 主题设置 所有颜色、字体、圆角和阴影都位于 [`src/styles/tokens.css`](./src/styles/tokens.css) 的 `:root` 代码块中。只需修改 `--primary`，整个演示文稿——包括界面——就会重新调整配色。Skill 中记录了九种现成的主题方向，从编辑奢华风到暗黑科技风应有尽有。 ## 项目结构 ``` .bolt/skills/slides/ the agent-facing authoring guide (the skill) src/deck/ engine + chrome — Deck, Slide, Build, Reveal, Annotator src/components/ the slide component library src/styles/ tokens.css (theme) + base.css (system styles) src/App.tsx your deck (ships with the component demo) ``` ## 贡献 欢迎提交 Issue 和 PR——请参阅 [CONTRIBUTING.md](./CONTRIBUTING.md)。使用 `npm run dev` 进行开发，在提交之前运行 `npx tsc --noEmit && npm run build`。 ## 许可证 [MIT](./LICENSE) © StackBlitz

标签：AI代理, React组件, StackBlitz, 演示文稿, 自动化攻击