Agent做PPT

AGENT实验室 · 教程实战2026.07

PPT只能手工排版？

从一个想法，到一份能演示的 PPT

从安装 html-ppt Skill 到五页 Agent 介绍稿。

AGENT实验室

教程实战

前几天，我想做一份关于 Agent 的介绍 PPT。

要求其实不复杂：五页，讲清楚 Agent 是什么、怎么工作、由哪些部分组成，以及怎么从 Demo 走到生产。

但真正动手时，问题很快就来了：内容怎么组织？页面怎么排？配色怎么统一？代码和流程图怎么放？做完之后，怎么确认在浏览器里真的能正常播放？

如果这些事情全部手工完成，往往不是不会做，而是很容易把时间花在重复劳动上。

这次我换了一个方式：使用 html-pptSkill，把 PPT 当成一个可以运行的 HTML 项目来做。

最后的结果不是一个传统意义上的 .pptx 文件，而是一份静态 HTML deck。它可以直接在浏览器打开，也支持方向键翻页、全屏、概览、主题切换和讲者备注。

下面记录完整过程。

在开始做 PPT 之前，必须先把主题讲明白。

Agent 不是“更会聊天的模型”。

聊天机器人通常围绕一次提问生成一次回答；Agent 面向的是一个任务。它会先理解目标，再规划下一步，调用搜索、代码、数据库或业务 API，拿到结果之后继续观察和判断，直到任务完成，或者把问题交给人处理。

可以把它简化成一个循环：

所以，Agent 的核心不只是模型能力，还包括四个部分：

01模型：负责理解、推理和生成计划。

02工具：负责把计划连接到真实世界的动作。

03记忆：负责保存上下文、历史和用户偏好。

04运行时：负责权限、重试、超时、日志和人工接管。

这也直接决定了 PPT 的叙事顺序：先解释概念，再展示闭环，然后拆解架构，最后讲如何落地。

html-ppt 的思路很简单：不要从空白页面开始，而是使用已经准备好的主题、布局、动画和运行时。

它提供了几类能力：

•多套主题，覆盖技术分享、商务汇报、学术报告、产品发布等场景；

•多种单页布局，例如封面、三栏卡片、双栏内容、流程图、代码块和结尾页；

•一组 CSS 入场动画；

•基于 Canvas 的粒子、知识图谱、神经网络等视觉效果；

•键盘驱动的演示运行时；

•讲者模式、备注抽屉、概览模式和 PNG 渲染脚本。

对这次 Agent 介绍来说，最合适的是 tech-sharing 全 deck 模板。

它的特点是深色 GitHub 风格、等宽字体、终端代码块和偏工程化的卡片，非常适合讲模型、工具调用、运行时和系统架构。

如果你的内容是融资路演，可以换成 pitch-deck；如果是产品发布，可以选择 product-launch；如果想要更强的演讲者视图，则可以使用 presenter-mode-reveal。

在终端中执行：

安装完成后，Skill 目录里通常会有这样的结构：

安装完成之后，不建议直接在 Skill 源码目录里改文件。更好的方式是从模板复制一份自己的 deck，在自己的目录中修改。

最小项目可以这样创建：

如果要直接使用技术分享模板，可以复制完整模板：

然后打开：

Linux 环境也可以直接用浏览器打开 index.html，或者启动一个本地静态服务器：

接着访问：

如果你所在的环境已经预装了这个 Skill，就不需要重复安装。重点是找到模板目录，并把自己的 deck 放在独立目录中。

这一步很容易被忽略。

很多人做 PPT 的顺序是：先写一堆文字，再想办法把文字塞进页面。结果往往是每一页都很满，标题、正文、图表和代码互相争夺空间。

更稳妥的顺序是：先确定受众和风格，再选择模板，最后把内容放进模板提供的结构中。

这次的默认设定是：

•受众：产品和技术同学；

•语言：中文，关键概念保留英文；

•风格：深色、工程化、少装饰；

•页数：五页；

•形式：浏览器演示，同时保留讲者备注。

tech-sharing模板默认使用深色背景、绿色和蓝色作为强调色。为了让页面保持一致，我没有为每一页单独发明一套颜色，而是沿用模板里的 CSS 变量：

这样做的好处是，后面如果想换主题，不需要逐个修改页面上的颜色。

这份 Agent 介绍没有采用“封面、目录、正文、感谢”的传统结构，而是让五页都承担明确的信息任务。

第 1 页：Agent，从聊天到行动

第一句话先把核心认知放出来：Agent 不是只会生成文字，而是可以围绕目标持续行动。

这一页只放标题、副标题、四个关键词和一个很轻的身份信息，不放复杂定义。

关键词是：

封面不应该承担所有解释工作。它的任务只是让观众知道接下来要听什么。

第 2 页：Agent 不只是更会聊天的模型

这一页使用对比表，把 Chatbot 和 Agent 放在一起：

对比表比长段落更适合做概念澄清。观众可以快速看到差异，也方便演讲者用一句话收束：

第 3 页：一个 Agent，就是一个行动闭环

这一页是整份 PPT 的核心。

我把 Agent 的运行方式画成四步：

下面再放一段非常短的伪代码：

这里特意没有放完整框架代码，因为这一页要解释机制，而不是展示某个 SDK 的 API。代码越短，越容易让观众把注意力放在“循环”本身。

第 4 页：Agent 的能力来自四层系统组合

这一页回答一个工程问题：为什么一个 Agent 项目不是“接一个大模型”那么简单？

页面用四张卡片分别介绍：

•Model：理解自然语言、推理、生成计划；

•Tools：连接搜索、API、代码执行和数据库；

•Memory：保存任务状态、历史和偏好；

•Runtime：控制权限、重试、超时、日志和评估。

最后用一条公式做总结：

这个表达不是严格的数学公式，而是一种工程提醒：模型再强，如果工具不稳定、权限没隔离、过程不可观测，系统依然不可靠。

第 5 页：从 Demo 到生产，先把边界设计好

最后一页不再继续介绍概念，而是给出行动建议：

01从窄任务开始；

02让每一步可观测；

03高风险动作需要人工确认。

比如不要一上来就做“全能个人助理”，可以先做一个“查询订单 → 判断异常 → 生成处理建议”的闭环。

只要任务范围足够清晰，就能知道它有没有完成，也能积累真实的日志和评估数据。

每一页都是一个 section.slide：

几个关键点：

•class="slide" 是运行时识别页面的标记；

•data-title 会显示在概览模式里；

•每页只表达一个逻辑主题；

•.notes 默认隐藏，按 S 可以进入讲者模式；

•页面内容尽量使用模板提供的 .grid、.card、.terminal 等结构。

页面头部需要引入公共资源：

页面底部需要引入运行时：

少了 runtime.js，页面看起来仍然可能正常，但方向键、进度条、概览和讲者备注都不会工作。

封面使用了一个淡入动画：

动画的原则是“一页一个重点”。封面可以用 fade-up 或 rise-in，正文可以让卡片顺序出现，结尾可以使用轻微的 confetti-burst。

但技术分享不适合每个字都飞进来。观众需要理解概念，而不是追赶动画。

写完 HTML 不代表完成。一定要实际渲染，才能发现浏览器中的问题。

Skill 自带的渲染命令是：

这个脚本默认寻找 macOS 的 Chrome 路径。如果你在 Linux 环境，脚本可能提示：

这不代表 deck 有问题，只是渲染脚本的默认路径与当前环境不一致。可以使用本机的 Chrome 替代：

第一次渲染时，我还发现了两个页面级问题。

问题一：页脚与内容重叠

为了让每一页的内容位于装饰背景之上，我写了这样一条规则：

但模板里的 .deck-footer 原本是绝对定位。上面的通用规则把它覆盖成了相对定位，于是页脚被重新放回普通文档流，和封面信息发生了重叠。

修复方式是给页脚更高优先级：

这个问题很典型：CSS 看起来只是“给内容加层级”，实际上可能改变模板原有的布局语义。

问题二：渐变文字变成了渐变色块

为了做渐变文字，样式大致是这样：

后来又加了一条 background 简写规则，结果把之前的 background-clip: text 重置了。浏览器就会把渐变铺满整个行盒，看起来像一个矩形色块。

修复时，要么避免再次使用 background 简写，要么在最后重新声明：

这也是为什么我建议不要只在编辑器里看代码，一定要在真实浏览器里走一遍。

我会检查五件事：

1. 页数是否正确

输出应该是 5。

2. 每一页是否有讲者备注

输出也应该是 5。

3. 每一页是否能单独打开

4. 键盘功能是否正常

•← →：翻页；

•Home / End：跳到第一页或最后一页；

•F：全屏；

•O：打开概览；

•N：打开当前页备注；

•S：进入讲者视图；

•T：切换主题。

5. 是否存在溢出和遮挡

重点看标题、代码块、底部页脚和三栏卡片。特别是在浏览器窗口缩小之后，中文标题和英文单词的换行方式可能变化。

这次生成的目录很简单：

其中：

•index.html 是完整的五页 deck；

•style.css 是这份 deck 的局部样式；

•rendered/ 是用于检查页面效果的 PNG；

•agent-ppt-wechat.md 就是本文的文章源文件。

这里还有一个容易误解的地方：这份产物是 HTML PPT，不是原生 PowerPoint 文件。如果需要 .pptx，还需要额外做格式转换；但如果目标是浏览器演示、在线分享、版本管理或快速迭代，HTML 反而更轻。

它比较适合：

•技术分享；

•产品方案介绍；

•内部培训；

•AI 工作流演示；

•开源项目说明；

•需要频繁修改的团队汇报。

尤其是技术内容，HTML 的优势很明显。代码块、流程图、交互按钮和网页链接都可以自然地放进页面里；修改内容时，也不必反复拖动文本框。

当然，它也有边界：如果你需要和公司已有的 PowerPoint 模板完全一致，或者需要交付给只能使用 Office 的协作者，传统 .pptx 可能更合适。

这次做 Agent PPT，我最大的感受不是“AI 帮我写了五页内容”，而是把做 PPT 这件事拆成了几个可以复用的环节：

先确定叙事，再选模板；先写页面结构，再填具体内容；先用浏览器运行，再处理渲染问题。

Agent 的核心是一个行动闭环。

做 PPT 其实也一样：输入一个想法，规划结构，调用模板，观察渲染结果，再根据反馈继续修改。

当页面不再是一张张孤立的画布，而是一个可以运行、检查和迭代的小项目，做演示文稿就会从“排版劳动”变成一种更接近产品开发的工作流。

下一次，如果你需要做一份技术分享，可以先不要打开 PowerPoint。

先打开终端，安装一个 Skill，然后从一个模板开始。

Agent 的核心是一个行动闭环。做 PPT 其实也一样：输入一个想法，规划结构，调用模板，观察渲染结果，再根据反馈继续修改。