1. 1

   动画能讲原理

   一辆车为什么能倒挂不掉，5 秒动画比三行字清楚。

2. 2

   读者可以自己动手

   拖一下推力，就看到车在哪一刻离地。动过手的东西记得住。

3. 3

   一个文件，到处能打开

   单个 .html，双击就在浏览器里打开，不用装软件。

代价：不能像 PPT 那样直接拖文字框，所以前面的准备要多做一点。

一上来就让 AI 做课件，它会一边想内容一边排版，每页都塞满字，像换了背景的 Word 文档。

内容和排版分开以后，改一句话不会把整页弄乱。

• 每个动画回答一个「为什么」
• 3 到 6 秒，播一次就停，旁边放重播按钮
• 有参数关系的地方（角度、距离、速度）做成滑块

不要：标题飞进来、卡片一张张弹出来。只会分散注意力。

• 参照对象「Apple 发布会」「新粗野主义的独立产品官网」
• 具体色号背景、正文、强调色各是什么颜色
• 字体标题用什么、正文用什么
• 禁用清单蓝紫渐变、三张等宽卡片、emoji 当图标……

禁用清单最容易漏，也最管用。把 AI 的默认元素一条条排除，剩下的才是你要的风格。

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

AI 记的可能是旧消息，甚至是编的。数字以官方发布和可靠报道为准，做成动画以后再改就麻烦了。

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

看表时只问一件事：每页是不是只有一个重点？想说两件事，就拆成两页。

• 去 VibeHub（vibe-hub.org）挑，它整理了 24 种风格，每种都有说明和示例
• 讲原理、讲概念：选留白多、一页一句话的风格
• 想让人眼前一亮：选新粗野这类个性强的风格
• 选好后，把参照对象、色号、字体、禁用清单写进提示词

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

直接替换模板里的 <direction> 部分。

把那页截图贴给 AI，说清第几页、哪个元素、改成什么样：

「第 5 页的『外面：正常大气压』标签压在车身上了，挪到车顶上方。」

用能运行代码的 agent（比如 Claude Code），在提示词最后加这一句：

完成后逐页截图，动画页截开头、中间、结尾三张，自己检查文字重叠和溢出，修好再给我。