关键一步：把幻灯片从图片变回网页

Bolt Slides 的做法，是给 AI 代理一套现成积木，让每一页幻灯片重新变成一个能跑的网页。往细里说，每一页就是一个 React 组件：凡是你能给网页做的东西，都能塞进这一页：真实的排版、精心设计的动画、任意的交互。

翻到底层，它并不神秘：就是一套经典的分页演示引擎，带缩略图侧栏、网格总览、逐步揭示内容的构建步骤、批注画笔，以及和观众端同步的演示者模式。差别在于，每一页的内容是普通网页代码，所以它能自适应任何屏幕，也能用一个链接直接分享出去。用仓库里的一句话说：只要你能给网页做出来，就能拿它来演示。

按 G 键打开网格总览：一套自带的 26 页示例 deck 一屏铺开，涵盖封面、图表、大数字、对比表、报价页等各类版式。来源：官方仓库。

配色也做成了开箱即用：全部颜色、字体、圆角、阴影都收在一个样式文件的根变量里，改一个主色，整套演示连带工具界面一起换肤，仓库还附了九套现成主题方向，从杂志感到暗色技术风都有。仓库文档把这件事称作「品味是标配」。

当幻灯片能被「操作」，演示就变成了体验

抽象的「交互幻灯片」不好想象，官方给的三个场景很具体，各配一段真实演示。看的时候留意一个共同点：观众不再只是听你念，而是能自己动手。

推介客户和投资人：让他们上手，而不只是听你讲

给客户或投资人做推介？演示可以真的活起来。一份房产经纪的幻灯片，能内嵌整套房屋的 3D 漫游；翻到下一页，还能放一个购房者可以自己拨动的房贷计算器：改房价、改首付、改利率，月供实时跟着变。与其口头描述，不如让对方亲手体验一遍。

内部规划：把听众变成协作者

内部规划和头脑风暴会议，人最容易走神。Bolt Slides 让你把一块实时白板直接放进第一季度的规划演示里：整个团队不用离开这份演示，就能贴便利贴、涂涂画画、当场投票。听众从旁观者变成了共同作者。

董事会和季度汇报：让人自己去挖数字

董事会更新、客户报告、季度业绩。与其干巴巴念数字，不如让人去探索：筛选表格、给图表排序、点进某个关键指标往下看。而且因为每份演示本身就是一个响应式网页应用，它就是一个普通链接，在任何屏幕上都排得好看，手机也不例外。

把仓库拉开看：这套东西到底是怎么搭的

既然开源了，最有意思的就是拆开看它怎么做到「每一页是网页、还能被 AI 一句话搭出来」。拆完会发现，它的底子比想象的朴素得多。

整个引擎自己手写，只依赖三样东西

先看底子。整个 deck 引擎连界面加起来大约一千两百多行代码，跑起来只依赖三样：React、React DOM，和做动画的 framer-motion。没有 Slidev，没有 reveal.js，连能拖着转的 3D 地球那种花活，都是用浏览器自带的画布（Canvas）手写的，一个图形库都没引。

这也解释了它挂在嘴边那句「只要你能给网页做出来，就能拿它来演示」：因为它本来就是一个普通的 React 应用，没有一层专门的幻灯片框架横在中间挡着你。

关键分工：引擎锁死，内容每次从头写

为什么一句提示就能返回一套又好看又能用的成品？答案在仓库里那份写给 AI 代理看的说明书（.bolt/skills/slides/SKILL.md）。它把活儿劈成两半，而且反复强调这两半绝不能混：

也就是说，AI 代理不用每次现搓一个幻灯片引擎（那才是最容易出 bug、最容易做丑的部分），它只负责往一个已经打磨好的骨架里填内容。难啃的部分是固定资产，AI 只做它擅长的组合。这就是「成品还好看」的来源。

逐步构建：一页里点几下，靠一个小计数器

演示里最常用的交互，是「点一下冒出一条要点」。在代码里，就是把要分步出现的内容包进一个 Build 标签，标上它第几步出现：

<Slide center>
  <h2>Three things changed</h2>
  <Build at={1}>First, the data got bigger</Build>
  <Build at={2}>Then, the tools got faster</Build>
  <Build at={3}>Now, anyone can ship</Build>
</Slide>

上面这页里，三条要点各包在一个 Build 里，标了第 1、2、3 步。引擎给每一页记两个数：当前点了几下、这一页总共有几步。按一下方向键，如果这页还有没露出的步骤，就先露一步；步骤走完了，才翻到下一页。往回按也一样，退回上一页时，它会把那页恢复成「全部露完」的状态，所以来回翻不会乱。整个逻辑就是这么一个小计数器，没有魔法。

演示者模式、分享链接、缩略图，全是白捡网页的现成能力

正因为幻灯片就是网页，很多功能直接借用了浏览器的原生本事：

• 演示者模式　按 P 会新开一个标签当讲者视图（带计时器、下一页预览、可编辑备注）。两个标签之间靠浏览器自带的跨标签广播（BroadcastChannel，一种同源页面互发消息的机制）同步：你在讲者页翻页，观众页跟着翻。代码里还专门加了个「防回声」的小开关，免得两个页面来回弹。
• 分享到某一页　地址栏末尾的 #7 就是第 7 页。翻页时它实时改写这个编号，所以你能把链接直接甩到某一页发给人。
• 缩略图和网格总览　侧栏和网格里的每一张小图并不是截图。它把真正那一页的组件按比例缩小、重新渲染了一遍，所以缩略图永远和真实内容一致，改了内容，缩略图立刻跟着变。
• 备注　你在讲者页临时敲的备注，存在你自己浏览器本地，下次打开还在。

最巧的一处：批注会「跟着内容跑」，换个屏也圈得准

发布片里有个容易被忽略的细节：在笔记本上圈住某个数字，同一份演示换到手机上打开，那个圈还是准准地套在同一个数字上，哪怕手机上版面早已重排、数字挪了位置。普通画笔批注做不到这点，它们记的是屏幕坐标，一换屏就错位。它是这么绕过去的：

你画完一笔，它先找到这一笔正中央盖住的那个内容块，把它记成一条「从这页根节点数下来的第几个孩子、再第几个孩子」的路径（比如 0.2.1）；再把笔画的每个点，换算成「相对这个块的百分比位置」。因为同一份演示在任何屏幕上，页面的结构（谁是谁的第几个孩子）完全一样，只是 CSS 把它重新排了版，所以这条路径在手机上照样找得到同一个块，百分比坐标一套，圈就还在那个数字上。画在空白背景上的笔画则锚到整页、随屏幕缩放。

「品味是标配」怎么落地：写成 AI 必须守的硬规矩

回到那份喂给 AI 的说明书。它最见功力的地方，是把「别做得像 PPT 模板」拆成了一条条 AI 能照着执行的硬规矩：

• 每个花哨版式都有准入门槛　3D 地球只有在故事真跟地理相关（按国家分布的用户或收入）时才准用，标记还得是真实坐标；巨型数字每套最多一个、且得有真实可查的出处；报价表只在这次演示真的要谈价钱时出现。说明书原话：如果你没法一句话说清这个版式为什么服务于这套演示，就删掉它。
• 示例稿是用来删的　那 26 页把所有组件秀了一遍，只因为它是「组件展示」；真做演示绝不能照抄，必须照用户真实内容重写。
• 零新依赖　自己加组件可以，但只能用纯 React、CSS、SVG，不许引任何新库；连主题也只准改那一套颜色、字体变量的值，改一个主色，整套演示连界面一起换肤。

这些规矩合起来，才是「品味是标配」的真正含义：品味在这里不靠模型灵光一现，靠的是前人把踩过的坑（版式堆砌、居中错位、手机溢出）提前写成了 AI 必须遵守的检查清单。所以 Bolt 开源出来的，与其说是一个幻灯片工具，不如说是这一整套攒好的判断。

两条上手路：一键生成，或接进你自己的 Agent

Bolt 给了两种起步方式。第一种是一键版：打开 Bolt，输入一句提示（比如「帮我做一套把某产品讲给某类客户的演示」），不用任何配置，它就返回一份可以直接放的成品应用。仓库里附带了一份写给代理看的 skill 文档，教它怎么定主题、怎么排版、怎么写这份 deck，连浏览器标签的标题和图标都替你设好。

第二种是开源版：把仓库拉到本地，接进你自己惯用的 Agent，Claude Code、Codex、Cursor 都行。跑起来是一份 26 页的示例 deck，把每个组件都演示了一遍；删掉示例页，照着写自己的就成。每一页在代码里就是 Deck 的一个子元素，用现成组件拼，或者直接写普通 JSX；想在某一步点击时才揭示某段内容，用 Build 标一下即可，方向键前进后退都认。

拼页面用的组件库分五类，全部自适应手机：

• 结构　封面、目录、分节、分栏、便当格
• 数据　柱状 / 折线 / 环形图、表格、大数字、计数动画、可视化看板
• 叙事　引用、对比、时间线、步骤、对话
• 产品　代码窗、浏览器框、报价、团队
• 点缀　3D 地球、倾斜卡、聚光卡、跑马灯、手风琴、标签页

git clone https://github.com/stackblitz/bolt-slides
cd bolt-slides
npm install
npm run dev        # 打开一份 26 页示例 deck，改 src/App.tsx 写你自己的

# 或者交给 Agent 一句话：
# 帮我做一套把「你的产品」讲给「你的听众」的演示 deck

2026 年 7 月 16 日，Bolt.new 把自家的 AI 幻灯片工具 Bolt Slides 开源了（MIT 许可，意思是随便用、随便改，免费）。它干的关键一件事：把幻灯片从「导出的图片」变回「能跑的网页」，每一页其实就是一段网页代码。

可问题来了：每页既然是自己写的网页，AI 凭什么一句话就搭出一套又好看、又能互动的成品，而不是搞出一堆丑东西？答案在下面这张图。

秘诀是「分工」：把最难做、最容易做丑的那部分提前写好锁死，AI 只干它擅长的填空。

对普通人来说，最实在的变化是：想做一份「能上手玩」的演示，本来得自己写一大套程序，现在这套程序 Bolt 直接免费送了。