实操|用HTML来做PPT,告别手搓(附案例)
- 2026-09-21 09:59:56
YouMind｜AI 学习与创作工作台
YouMind 官网 可以简单理解成：把“收集资料 → AI 阅读研究 → 整理想法 → 最后生成作品”放在同一个工作空间里的 AI 工具。官方目前把自己定位为 AI Creation Studio，而不是单纯的 AI 聊天机器人。
比如你研究一个心理学主题，可以把文章、视频、截图、笔记等资料收进 YouMind，让 AI 围绕这些材料帮你研究和梳理，然后进一步生成文章、图片、Slides、视频、网页等内容。它还有 Board（看板）、Agent、Skills 等机制，可以把某套创作流程重复使用。
所以你可以先把它理解成：
YouMind ≈ AI 知识库 + AI 研究助手 + AI 内容创作工作台。
它和 ChatGPT 最大的直观区别是：ChatGPT 更像“我现在和 AI 对话完成任务”；YouMind 更强调“围绕一个主题长期积累材料，然后从材料一路加工成作品”。这也是为什么它会比较适合做研究、读书笔记、内容创作、视频脚本、课件这一类工作流。官方目前有免费版，也有 Pro / Max 付费方案。
PPT 前端化
对，你的假设基本得到验证，而且我认为这会成为 Agent 时代制作演示文稿的一条重要路线。但我会把你的表述稍微改成：不是「PPT 消失，全部变 HTML」，而是**“演示文稿越来越可以被视为代码，然后由 Agent 负责生成和修改”**。
实际上这条技术路线已经存在。比如 reveal.js 本身就是 HTML Presentation Framework，一张幻灯片可以直接对应一个 HTML <section>； Slidev 则进一步允许用 Markdown + HTML + Vue 来制作演示文稿，而且现在已经支持导出 PDF、PPTX、PNG，甚至直接发布成网页。
Agent 的出现让这件事情变得更有意义。以前的问题是：**HTML/CSS 虽然比 PowerPoint 自由，但是普通人不会写。**现在 Agent 可以替你写，于是工作流可以变成：
你：「做一个16:9的读书会演示文稿，深色背景，12页。」
↓
Agent 生成 HTML / CSS / JS
↓
浏览器直接播放
↓
你：「第5页人物太大，把人物缩小30%，标题向左移动，背景再暗一点。」
↓
Agent 修改代码
↓
页面立即更新
这已经不是理论设想。HTML 本身就是文本代码，因此 Agent 可以根据自然语言直接修改具体元素；现有 HTML Slides 类 Agent 工具也已经把「通过自然语言修改标题、布局、字体、颜色、增加/删除页面」作为核心工作方式。
而且这里还有一个比传统 PPT 很重要的优势：**修改可以变成 diff。**比如 Agent 不需要重新生成整个演示文稿，它可以只修改：
- font-size: 64px;
+ font-size: 52px;
- background: #ffffff;
+ background: #111111;这和你前面刚学的 diff 正好连接起来了：PPT 从“拖动一个个图形对象”，变成“维护一个可以被 Agent 理解和修改的文档/代码系统”。
不过你假设里的「重新写提示词就可以了」需要加一个限定：**简单修改已经非常适合这样做，但复杂 PPT 不能只依赖一次次重新生成。**更成熟的方式应该是 Agent 保留现有 HTML，然后你说「修改第7页」，它只修改第7页，而不是重新生成整套。否则容易出现你只要求改一个标题，结果字体、布局、图片也跟着变化的问题。
所以我会把未来的理想形态概括成：
Prompt → Agent → HTML/结构化 Slides → 浏览器实时预览 → 自然语言修改 → Agent 局部改代码 → 最终导出 PPTX / PDF / 网页。
你这个判断背后其实比「HTML 做 PPT」更重要：**Agent 正在把很多 GUI 创作软件的问题，从“人操作界面”转换成“人描述意图，Agent 操作底层结构”。**PPT 只是一个非常适合发生这种变化的场景。
我的目标是
「HTML + Agent 做 PPT」
是终端安装、还是客户端安装
有几个方式你自己选：
直接下载、终端完整安装、作为 npm 依赖安装。
它不是一个需要安装的 PPT 客户端软件，而是一个 JavaScript/HTML 框架。官方目前提供三种使用方式：直接下载、终端完整安装、作为 npm 依赖安装
我们选择最基本的安装
1. Download the latest reveal.js version https://github.com/hakimel/reveal.js/archive/master.zip
第 2 步：找到index.html****。 解压后的文件夹里会有这个文件。它可以简单理解为：这就是你的 PPT 文件，只不过它不是.pptx****，而是网页.html****。
第 3 步：用浏览器打开index.html****。 Chrome / Safari 都可以。你会看到一个可以像 PPT 一样前后翻页的网页演示。官方的 Basic Setup 就是「下载 → 解压 → 修改 index.html → 浏览器打开」这套流程
打开后最原始的版本，这个东西就是浏览器渲染出来的 Slide （幻灯片）
第4 步：用 VS Code 打开这个文件夹。 这时候你就能看到 HTML。reveal.js 的基本逻辑非常简单，一组 <section> 就是一组幻灯片
看到 .js 就是属于JS的框架对吗
reveal.js 中的 .js 表明它是基于 JavaScript 的框架/库，主要用于制作 HTML 网页演示文稿。
看到名字带.js通常意味着与 JavaScript 生态相关，不代表所有.js都是“框架”；.js 本身也是 JavaScript 文件的扩展名。
来吧，我们看源码
打开VSCODE
用VSCODE 打开上面的文件夹
你会看到侧边栏就是你的各种文件和文件夹了。你现在其实已经把 reveal.js 最基本的运行链路跑通了
左侧侧边栏
左侧的 css、dist、js、plugin、react、scripts 等，是 reveal.js 这个框架自己的代码、插件和资源
reveal.js = 一台已经造好的 PPT 播放机器
index.html = 你放进机器里的 PPT 内容
你点击 index 文件点进去。
**我们之前讲过邪修前端，你大概知道这是前端代码就可以了，不用纠结细节**
现在这么简单，怎么把它做漂亮？
你现在没必要开始学一堆 HTML 和 CSS。因为你真正想验证的是 Agent 工作流。
右侧已经有 Copilot Chat，因此下一步可以直接尝试让 Agent 修改
直接写提示词：
修改 index.html 中的第一页幻灯片。
将第一页设计成一个专业的 AI 主题 PPT 封面。
主标题：AI Agent
副标题：从聊天机器人走向自主执行
使用深色科技风背景。
增加蓝紫色渐变光效、半透明卡片、装饰线条等视觉元素。
保持 16:9，不修改 reveal.js 的基本功能。验收下
我在vscode中的agent需要消耗token，但我没介入任何大模型，它从哪里扣费的。
GitHub Copilot 的 Agent，Token 通常不是从 OpenAI API 账户扣的，而是由 GitHub Copilot 自己提供模型调用额度。GitHub Copilot 会根据你的套餐提供一定的使用额度。
