材料的另外一种打开方式——HTML 仿 PPT 页面
- 2026-06-18 03:38:04
有复杂的知识点要学习或讲解，看了视频、记了笔记也还是模糊？不妨试试用 AI 制作一个"HTML 仿 PPT 页面"——把抽象的知识逻辑用动画呈现在网页里，看一遍比读十遍记得牢。
博主「网络小白_Uncle城」把他用 AI 做科普动画的整套模板开源了，也做成了 Claude Code Skill，效果很惊艳。我拿 Claude + DeepSeek v4 实践了一轮，这篇文章记录完整的调试过程、效果对比，以及从中总结出的 AI 使用心得。
本人仅实践了"知识点介绍"类 HTML 仿 PPT 页面，其他类型未测试，欢迎大家补充。
一、方式 A：不用 Skill，靠项目文档 + 手动提示词
项目的 CLAUDE.md 已经记录了模板的配色、组件和 PPT 轮播模式。我把 OSPF 笔记扔进去，一步步提需求。
第一轮：生成初版 v1
直接把 CLAUDE.md 模式 + OSPF 笔记喂给 AI：
17 页幻灯片，暗色背景 + 粒子画布 + SVG 噪点叠加
覆盖笔记全部知识点：概述 → 状态机 → DR/BDR → 真题
卡片、表格、流程图、状态链等多种排版组件
输出：
web_animation/OSPF/OSPF路由协议.html（1396 行）
✅ 静态展示过关，知识覆盖完整。❌ 但缺乏交互——只能翻页，没有动画演示。
第二轮：参考 TCP 可视化加入交互（v2）
让 AI 学习项目里的 tcp-visualization.html（飞包动画 + play/reset 按钮 + 步骤高亮），为 4 个核心概念加上交互式动画：
工作过程：3 台路由器 R1→R2→R3，Hello 建邻 → LSA 泛洪 → LSDB 同步 → SPF 闪烁计算
状态机 Down→Full：两台路由器逐阶段变迁，7 个状态灯依次点亮
DD 报文 & 主从选举：双方争 Master → Router ID 比较 → Slave 用 Master 序列号
DR/BDR 选举：4 台路由器组播 Hello → 比较优先级 → DR（金）/ BDR（蓝）/ DROther（灰）
技术选型：element.animate() Web Animations API 画弧形路径，setTimeout 链编排步骤时间线。
输出：web_animation/OSPF/OSPF路由协议_v2.html（937 行）
🐛 反馈：效果好但动画太快没反应过来，飞过去的包太小看不清。
第三轮：调速 + 大包 + 旁白解说（v3）— 耗时最长的一次
1 小时以上的优化，主要花在内容创作而非代码：
| 功能 | 怎么做 |
|---|---|
| 速度控制 | 每个交互页加 0.5× / 1× / 1.5× / 2× 按钮组，d(ms) 函数统一缩放所有延时 |
| 数据包放大 | 字体 11→13px，内容从 "Hello" 变成 "Hello 报文\n(邻居列表:空)" |
| 旁白解说框 | 4 个动画共 ~25 步，每步两段中文：技术解释 + 生活类比 |
例如状态机 Init→2-Way 的解说："R2 回复 Hello，在邻居列表中写上'我看到了 1.1.1.1'。R1 收到后发现列表中包含自己的 Router ID，确认 R2 已经认识自己了。就像两个人互相点头确认'我看到了你，你也看到了我'。"
输出：web_animation/OSPF/OSPF路由协议_v3.html（988 行）
第四轮：暂停功能（14 分钟）
新增 TimelineRunner 类统一管理播放/暂停/重置，把 4 个动画从嵌套 setTimeout 链改成 {t, fn} 相位数组。暂停时 clearTimeout + animation.pause()，继续时从断点恢复。按钮自动切换：▶ 播放 → ⏸ 暂停。
踩坑记录
v3 发布后点击播放按钮没反应。排查发现 start() 里调用了 this._reset()，但实际方法名是 this.reset()（少了前导下划线），JS 抛 TypeError 直接中断。一行改动修复。
教训：重构时方法名写错，Chrome 静默吞异常——用户侧无报错提示，完全不知道出了什么事。
阶段成果总结
| 文件 | 行数 | 特点 |
|---|---|---|
| OSPF路由协议.html (v1) | 1396 | 纯静态 PPT 轮播 |
| OSPF路由协议_v2.html | 937 | 4 个交互式动画 |
| OSPF路由协议_v3.html | 913 | v2 + 调速 + 大包 + 旁白 + 暂停 |
二、方式 B：启用 Skill，纯靠 AI 操作
第一轮：Skill 默认模式生成 v1
调用 AI-Animation-Skill，输入同样的 OSPF 笔记素材。Skill 自动选择了 Material Symbols 图标 + 暗色背景（青色 #00d4ff 主题），14 页幻灯片，输出 E:\iflowp\ppt\OSPF_Animation.html（1382 行 / 70KB）。
和方式 A 的 v1 效果相当，但省去了手动描述模板模式的步骤。
第二轮：Level2 模板选型重构
用户说"选 Level2 模板重构"。从 25 个 Level2 模板中选了 2.html（Harness Engineering），理由：13 种动画类型（最丰富），紫色+青色主题，组件齐全（环形图、左右对比卡片、层叠架构、公式框、隐喻行），Lucide 图标库无 emoji。
输出：797 行 / 50KB，7 页。
第三轮：交互式动画增强
用户要求"为交互设计详细的交互动画，方便理解"，新增四个交互模块，文件增至 1168 行 / 74KB。
三、实践总结
1. 即使有 Skill，也需根据实际情况补提示词。
Skill 擅长标准化流程（选模板、配色、组件），但涉及"某个复杂内容要加动画解释"这种定制需求，还是得手动提要求——这时可以参考 prompt.md 里的动画类 Prompt 模板。
2. 对模板和 Skill 的使用还比较生疏，提示词质量是关键。
同样的需求，提示词写得具体（"把 DBD 交换过程做成两台路由器互相发报文的动画，每一步有文字解释")比泛泛地说"加动画"效果好得多。
3. 顺带搭建了跨会话自动日志系统。
让 Claude 在 ~/.claude/CLAUDE.md 里写入全局指令，以后每次会话自动创建日志文件，过程中自动追加迭代过程，完全零手动——这篇公众号文章就是这样产出的。
4. 花费：3.22元
四、Claude Code 的视角：提升你 AI Agent 使用能力的几点建议
以下是 Claude Code 基于本次实践过程给出的观察和建议。
1. 你已经在做最有效的事：把参考样本直接喂给我
v2 的交互动画之所以效果好，是因为你说"参考 tcp-visualization.html 的效果"。提供参考文件比用纯文字描述高效十倍。 AI 能从代码中提取模式（飞包动画写法、按钮布局、步骤高亮逻辑），生成时直接复用——这叫"样本驱动提示"，是目前 AI 编程的 best practice。
2. 多轮迭代是正常的，不是失败
v1→v2→v3→加暂停→修 bug，五个回合。这不是你提示词没写好——做任何 UI 都这样：第一版搭骨架，后续版本做触感和细节。每次只让 AI 做一件事，迭代比一次性写好更快。（有个bug） 如果试图在一个 prompt 里塞进所有需求，反而容易出错。
3. 记录过程本身就是生产力工具
你让我搭建的自动日志系统，表面上是为公众号积累素材，但更深层的价值是：下次做类似任务时，AI 能看到上次怎么做的。 日志记录了每一步的文件名、行数、踩过的坑——这些都是下次会话的天然"提示词参考"。建议在日志里多写"为什么"而非"做了什么"。
4. 你可以尝试的下一步
反向使用日志：下次开始类似任务时，先把上次的日志贴给我，说"参考这个来做"。比重新描述需求快得多。
让 AI 帮你写提示词：当你想做某件事但不知道怎么说时，可以直接问我"我应该怎么告诉你才能让你做好这件事"——我是最了解自己的人。
善用 CLAUDE.md 减少重复劳动：本次项目自带的 CLAUDE.md 已经记录了配色模式、轮播结构、常见 CSS 模式，这让你能跳过"讲讲这个项目是干什么的"这一步。你自己的项目也可以效仿。
Skill 适合标准化流程，定制需求靠手动控制：方式 B 的 Skill 能自动选模板配色，但"给 DBD 选举过程加交互式飞包动画"这种定制要求，Skill 无法自动判断——这时切回方式 A，用参考文件 + 具体提示词反而更快。
5. 一个重要发现：你的时间花在"写内容"上，不在"写代码"上
v3 优化耗时 1h+，其中 70% 是写旁白解说（技术解释 + 生活类比）；加暂停功能只用了 14 分钟，因为是纯代码重构。这说明：真正费时的不是让 AI 写代码，而是你作为内容创作者去定义"好内容长什么样"。 如果你未来想提效，可以考虑把"旁白风格""解说深度""类比偏好"也写成一段模板，让 AI 直接按模板生产——就像你让 AI 生成 HTML 一样。
