让 AI 做出像高级 PPT 一样的网页课件

翻页课件版：同样的内容做成了 16 页的课件，左边看效果，右边一键复制提示词。打开课件版 →

前几天我让 AI 做了一份 26 页的翻页课件。滚轮和方向键都能翻页，讲原理的页面配了动画，有一页还能拖动滑块改参数，看数值怎么变。做完一看，功能和完成度都很满意，但风格很普通：干净，不出错，也没有任何让人记住的地方。

这篇把整个做法写下来，包括后来补上的「风格」那一步。不需要会写代码，会用 ChatGPT 或 Claude 聊天就能跟着做。

文中的例子我做成了一份新粗野风格的示例课件，可以先点开看看：示例课件（右上角能切换中文、日语、英语）。

懒人版：复制给你的 agent

不想读全文的话，点下面框右上角的「复制」，粘贴给你的 AI（Claude、ChatGPT 都行），把花括号里的内容换成你自己的，它就会按这篇的流程一步步做。

请按下面的流程，帮我做一份像高级 PPT 一样的网页课件。

主题：{你的主题，比如「特斯拉 Roadster 怎么飞起来、怎么倒挂」}
读者：{谁看，他们已经懂什么，看完要能做什么}
风格：{比如「新粗野主义」或「Apple 发布会」；不知道就推荐 2–3 种让我选}

流程（每一步做完先停下来，等我确认再继续）：
1. 只写讲稿（Markdown），每部分讲一个点。事实和数字注明来源，分清「已经证实的」和「只是宣称的」。
2. 把讲稿拆成分镜表：页码 | 这页的一句话结论 | 画面 | 动画讲什么（没有就写「无」）。每页只有一个重点。
3. 我确认分镜后再做页面：
   - 单个 HTML 文件，不引用任何外部资源，断网也能打开
   - 16:9 居中缩放；滚轮、方向键、空格都能翻页，滚轮一次只翻一页；底部显示章节名和页码
   - 讲原理的页面用 canvas 做动画，每个动画回答一个「为什么」，3–6 秒，播一次就停，有重播按钮；有参数关系的地方加一个可拖动的滑块
   - 风格要写清参照对象、具体色号、字体；强调色最多 3 个，每个颜色的含义全片固定
   - 不要出现：居中大标题加两个按钮的封面、三张等宽卡片并排、蓝紫渐变、发光球、粒子、模糊进场、元素依次飞入、emoji 当图标、框里套框
   - 正文不小于 18px，图注不小于 13px
4. 做完逐页截图（动画页截开头、中间、结尾三张），自己检查文字重叠、溢出、字太小，修好再交给我。如果你不能运行代码或截图，就给我完整的 HTML 文件，并提醒我逐页检查。

下面是完整的做法和每一步的原因。

为什么用网页，不用 PPT

PPT 能做的，网页基本都能做。网页多出来的有三样：

• 动画可以讲原理。 比如一辆车为什么能倒挂在坡顶不掉下来，画成一段 5 秒的动画，比三行文字清楚。
• 读者可以自己动手。 放一个滑块，拖一下推力，就能看到车在哪一刻离地。动过手的东西记得住。
• 一个文件，到处能打开。 做成单个 .html 文件，发给别人，双击就在浏览器里打开，手机电脑都行，不用装软件。

代价是改起来没有 PPT 方便，你没法直接拖动文字框。所以前面的准备要多做一点，后面才不用反复改。

你需要准备什么

• 一个能写代码的 AI。Claude 的 Artifacts、ChatGPT 的 Canvas 都能在对话旁边直接预览网页，最适合第一次尝试。
• 一个浏览器。如果 AI 那边没有预览，就把它给的代码整段复制，存成「课件.html」，双击打开。
• 一个你讲得清楚的题目。这篇用特斯拉新 Roadster「飞起来」和「倒挂在墙上」的原理做例子。

三条最重要的经验

1. 先写讲稿，再做页面

一上来就说「帮我做一份讲特斯拉 Roadster 原理的课件」，AI 会一边想内容一边排版，结果是把字塞满每一页，看起来像 Word 文档换了个背景。

正确的顺序是：先让 AI 写讲稿（纯文字），你看一遍、改对；再把讲稿拆成「一页一个观点、配一个画面」的分镜表；最后才让它做页面。内容和排版分开以后，改一句话不会把整页排版弄乱。

2. 动画用来讲原理，不用来装饰

每个动画都要回答一个「为什么」。车为什么喷气就能离地、为什么倒过来也掉不下去，这种适合做动画。标题飞进来、卡片一张张弹出来，这种不要做，只会分散注意力。

动画控制在 3 到 6 秒，进入页面播一次就停，旁边放一个重播按钮。有参数关系的地方（角度、距离、速度）做成滑块，让读者自己拖。

3. 风格要点名，还要写清楚不要什么

这是我第一次没做好的地方。不指定风格，AI 就会给你「平均审美」：白底、蓝色按钮、圆角卡片，哪里都见过。

要有个性，提示词里要给四样东西：

• 参照对象：比如「Apple 发布会」或「新粗野主义的独立产品官网」
• 具体色号：背景、正文、强调色各是什么颜色
• 字体：标题用什么、正文用什么
• 禁用清单：明确写出不要什么，比如蓝紫渐变、三张一样大的卡片并排、emoji 当图标

重点：最后一样最容易漏，也最管用。AI 的默认审美就是由这些常见元素组成的，把它们一条条排除掉，剩下的才是你点名要的风格。

一步步来：以「特斯拉 Roadster 怎么飞起来、怎么倒挂在墙上」为例

10 月 15 日特斯拉发布了新一代 Roadster，现场演示了两件事：车靠喷气跃到空中翻滚，和车开上一段弧形坡道、在最高处倒挂着停住。这两件事背后各是一条中学物理，很适合做成原理动画。

第 1 步：写讲稿

对 AI 说：

我想做一份 7 页左右的网页课件，题目是「特斯拉 Roadster 怎么飞起来、怎么倒挂在墙上」，给没学过物理的成年人看。
先只写讲稿，用 Markdown，每一部分讲一个点。先不要做页面。
区分清楚：哪些是现场演示过的，哪些只是特斯拉公布的数字。

拿到讲稿后自己读一遍。热门话题尤其要核对：数字以官方发布和可靠报道为准，AI 记的可能是旧消息，甚至是编的。这个例子里，「飞」其实只是几秒钟的跃起和翻滚，不是持续飞行；4,700 公斤的吸附力是特斯拉自己公布的数字，有媒体质疑偏高。这些在讲稿里就要写准，做成动画以后再改就麻烦了。

第 2 步：拆成分镜表

把讲稿拆成分镜表，每页一行：页码 | 这页的一句话结论 | 画面 | 动画讲什么（没有就写「无」）

这个例子拆出来大概是这样：

页	一句话结论	画面	动画
1	一辆车，怎么飞起来、怎么倒挂？	封面：车的侧影	无
2	往后喷气，车就往前冲	车尾喷口、气流、车身受力箭头	气体向后喷出，车向前加速（作用力与反作用力）
3	喷气的推力比车重，车就能离地	车底喷口朝下，推力箭头和重力箭头	拖动滑块调推力，推力超过车重的那一刻车离地
4	为什么只能飞几秒：气罐里的气很快就喷完了	气罐和剩余气量	气量条下降，推力随之消失，车落地
5	风扇把车底的空气抽走，外面的大气把车压在路面上	车底剖面：裙边、风扇、气流	车底的气压箭头变短，车顶的大气压箭头不变
6	压力差乘以车底面积，大于车重，就能倒挂	倒挂的车，压力箭头和重力箭头	拖动滑块调车底气压，看车在坡顶是掉下来还是挂住
7	总结：一个往外推，一个往里压	两张小图并排	无

检查：看这张表时只问自己一件事：每页是不是只有一个重点。有一页想说两件事，就拆成两页。

第 3 步：选风格

不知道选什么风格，可以去 VibeHub 的设计风格页（vibe-hub.org）逛一圈，它整理了 24 种风格，每种都有说明和示例。这里挑两种：

• 苹果风：黑底或浅灰底，一页一句话加一个大画面，大量留白。适合讲原理、讲概念。
• 新粗野：米白底、黑色粗描边、高饱和色块、硬阴影。适合想让人眼前一亮、轻松一点的主题。

第 4 步：用完整提示词生成

把分镜表确认好以后，用下面的模板。四个部分分别是：输入、风格方向、结构、技术要求。这个分段写法借鉴自 Prompt Motion（prompt-motion.com）上那些效果最好的动效提示词。花括号里的换成你自己的内容，没写的部分 AI 会用默认值。

<inputs>
主题：{课件主题}
读者：{谁看、他们已经懂什么、看完要能做什么}
讲稿：{粘贴确认过的讲稿和分镜表}
页数：{约 N 页}
</inputs>

<direction>
参照：{例如「Apple 发布会 keynote」}
画布：{背景色号}；正文色 {色号}；强调色最多 2 个 {色号}，每个颜色有固定含义：{颜色=含义}
字体：中文用系统字体（如 PingFang SC），数字和代码用等宽字体
版式：每页一个重点；大标题一句话说完结论；留白服务于聚焦
不要出现：
- 居中大标题 + 两个按钮式的封面
- 三张等宽卡片并排
- 蓝紫渐变、发光球、粒子、模糊进场、3D 翻转
- 每块内容依次飞入
- emoji 当图标
- 框里套框、每段都画分割线、左侧彩色竖线
- 任何看起来像模板的东西
</direction>

<structure>
按分镜表做，每页一个 section。
- 讲原理的页面配动画，动画回答一个「为什么」，3–6 秒，播一次就停，可重播
- 有参数关系的地方做一个可拖动的滑块
</structure>

<build>
- 单个 HTML 文件，不引用任何外部资源，断网也能打开
- 16:9 居中缩放；滚轮、方向键、空格都能翻页，滚轮要防止一次翻多页
- 底部显示章节名和页码
- 颜色、字体、字号写成统一的变量，全片只用这些变量
- 动画用 canvas 画，每一帧由时间计算出来
- 正文字号不小于 18px，图注不小于 13px
</build>

两种风格的「风格方向」部分，可以直接替换上面的 <direction>：

苹果风

参照：Apple 发布会 keynote 与 apple.com 产品页
画布：#000000 或 #F5F5F7；正文 #1D1D1F（浅底）/ #F5F5F7（深底）；强调色只用 1 个
字体：SF Pro / PingFang SC，大标题 64–96px、字重 600、字距略紧，正文 20–24px
版式：一页只放一句话 + 一个大画面；大量留白
动画：慢进快停的缓动，一次只动一样东西；不要弹跳
不要出现：同上，另外毛玻璃只用于浮层，渐变只用于点题的一个词

新粗野

参照：新粗野主义（Neo-Brutalism）的独立产品官网和活动页
画布：#FFF8E7 这类米白；黑色 3px 粗描边；不模糊的纯黑硬阴影（偏移 6px）
强调色：2–3 个高饱和色块（如 #FFD23F、#3BCEAC、#EE4266），每个颜色有固定含义
字体：粗黑大标题（字重 800 以上），正文用常规字重，保证好读
版式：色块卡片、贴纸式标签、略微倾斜的强调元素；信息层级仍然清楚
动画：利落的位移和按压效果，不要柔和淡入
不要出现：同上；装饰不能压过内容，全片撞色不超过 3 种

做出来的样子

按上面的提示词，用新粗野的 <direction> 做了一版：打开示例课件。米白底、黑色粗描边、硬阴影，标签做成贴纸。

颜色含义全片不变：推力一直是红色，气压一直是青绿色，重力一直是黑色。第 3 页和第 6 页可以拖滑块，第 2、4、5 页的动画可以重播。电脑上看效果最好，手机请横过来。

第 5 步：逐页检查

AI 做的页面一定要一页一页看过，不能只看它说「已完成」。常见的问题有：文字和图重叠、标签压在线条上、动画最后一帧没停在正确的位置、字小到看不清。看到哪页有问题，把那页截图直接贴给 AI，说清楚第几页、哪个元素、改成什么样，比如「第 5 页的『外面：正常大气压』标签压在车身上了，挪到车顶上方」。一次只改一处，改完再看一眼。同时改好几处的话，经常修好一个又弄坏另一个。

如果你用的是能自己运行代码的 agent（比如 Claude Code），可以在提示词最后加一句：「完成后逐页截图，动画页截开头、中间、结尾三张，自己检查文字重叠和溢出，修好再给我。」它会先自查一遍，你再看的时候问题会少很多。

几个容易踩的坑

• 颜色要有固定含义。 比如这个例子里，推力箭头一直用红色，重力一直用黑色，大气压力一直用青绿色。全片不变，读者看到颜色就知道指的是什么。
• 滚轮一次翻好几页。 笔记本的触控板滑一下，会连续触发很多次翻页。提示词里写上「滚轮要防止一次翻多页」就能避免。
• 字越来越小。 AI 为了把内容塞进一页，会悄悄把字号缩小。所以要写明最小字号。
• 动画一直循环。 循环播放很分散注意力。写明「播一次就停，可重播」。
• 页数多了一次做不完。 页数多的时候，AI 一次输出可能写不完整（这是我的经验判断，不同工具上限不同）。可以先做前几页定下样式，再让它按同样的样式一章一章补。补的时候让它「只输出新增的那几页」，你自己粘进文件里。颜色、字体和翻页的代码不要让它每次重写，不然前后容易不一致。
• 原理讲错了要全部改。 讲稿里错一句，页面、动画、你自己的笔记都要跟着改。所以第 1 步的核对最省事。

交付前的 10 项自检

1. 每页只有一个重点吗？标题能一句话说完吗？
2. 颜色的含义全片一致吗？
3. 有没有居中大标题、蓝紫渐变、三张等宽卡片这类模板感？
4. 动画讲的是原理吗？能重播吗？最后一帧停稳了吗？
5. 正文字号够大吗？
6. 断网能打开吗？
7. 滚轮会不会一次翻好几页？
8. 每一页都亲眼看过了吗？
9. 讲稿里的事实核对过了吗？
10. 风格是你点名选的，还是 AI 的默认审美？

最后

这套做法里最花时间的是前两步：写讲稿和拆分镜。真正生成页面反而很快。如果你只想先试一下，可以直接用上面的提示词模板，换一个你熟悉的主题，先做 5 页看看效果。

本文用到的资料：

• VibeHub 设计风格：vibe-hub.org
• Prompt Motion 动效提示词合集：prompt-motion.com
• VibeHub「防止 AI 味儿」：vibe-hub.org/anti-ai-flavor