用 AI 做一份汇报 / PPT，第一版还像样，改着改着就开始"翻车"：配色悄悄漂移、版式忽宽忽窄、动画时快时慢。你以为是模型不行，于是换个更贵的，结果还是差不多。
提示
最近翻到一个开源项目 html-ppt-skill（作者 lewislulu），一句话把我点醒了：AI 做 HTML 慢、丑、不一致的瓶颈，从来不在模型，而在它每次都从零"重造轮子"。
它给 Claude Code / Cursor 这类 Agent 装了一整套预置素材库——36 套主题、15 套完整 deck、31 种单页布局、47 个动效——做演示不再是"从空白页搭起"，而是"先选后填"。
这件事，把我整个"用 AI 做汇报"的认知刷新了。下面把这趟收获拆成 7 个可迁移的技巧，你用 AI 做任意汇报 / 演示都能直接用。
一、先选后填：把"设计师"变成"装配工"
没有素材库时，AI 每做一页都要重新决定：用啥配色？啥布局？动画怎么写？决策成本全压在模型身上，随机性自然大。
html-ppt-skill 的做法是：先把素材库塞进 Agent 的工作目录，让它"先读索引，挑配色、挑布局、挑动画，把现成卡片拼起来，最后只往里塞业务文案"。
作者实测：让 Claude 生成 12 页技术分享，没装 Skill 时平均 8 分钟还常翻车；装了之后直接说"我用 minimal-tech 主题 + technical-talk deck"，3 分钟出一份能直接讲。
“前者是"全靠灵感的 PPT 设计师"，产出不可预期；后者是"有素材库的 PPT 装配工"，每次都稳定在一个能用的水位以上。
二、用设计 Token 驱动：换主题 = 换一行 link
所有颜色、圆角、阴影、字体，都收进 CSS 变量（设计 Token）里统一管理。换一套皮肤，只需换一行 <link>：
html
<link rel="stylesheet" href="assets/themes/cyberpunk-neon.css">
一处改，全局重排。AI 不用在每段 CSS 里重写颜色，样式一致性从根上被锁死。36 套主题每套都是独立 Token 文件，cyberpunk 的霓虹紫、tokyo-night 的深蓝、bauhaus 的几何块，差异一眼可辨：
三、Scoped CSS 隔离：一份文件塞两种风格也不打架
每套主题 / 每个组件都带独立作用域（比如 .tpl-xxx）。同一份 HTML 里同时放"产品发布页"和"内部数据页"两种风格，样式互不污染。
这点细节决定了你能不能在一份周报里混排多种版式——也是很多"AI 一次性生成"的方案最容易翻车的地方。
四、纯静态、零构建：交付一个文件夹就行
整个产物没有 webpack、没有 vite、没有 npm install，就是一份 index.html 加几个相对路径的 css/js。扔到 GitHub Pages、Vercel、任意对象存储，甚至 python -m http.server 都能演示。
重点
你交付给客户的就是一个文件夹，对方用 Chrome 双击就开——不用装 Node、不用装 PowerPoint、不用管版本兼容。分发成本直接砍到零。
五、动效自动化：翻到才播，翻走即停
47 个动效分两类：27 个 CSS 动画管文字入场、卡片浮起；20 个 Canvas FX（粒子穿梭、烟花、矩阵雨、流体波纹）管"过去要手撸 shader 才搞得出"的效果。
关键是它们都监听了 slide 事件：翻到这一页才开始跑，翻走自动停，性能不会被一堆同时跑的粒子拖崩。
六、多窗口同步：BroadcastChannel + postMessage
按 S 唤起演讲者模式，屏幕四角飘出 4 个磁吸卡片：当前页大预览、下一页小预览、本页逐字稿、计时器——和 Keynote 演讲者视图几乎一比一。
实现上有两个巧思：预览不是单独再渲染，而是用 ?preview=N 让同一份 deck 自己渲染单页，主窗口和预览共用一份代码，像素级一致、翻页零闪烁；主窗口与卡片之间用 BroadcastChannel + postMessage 双通道同步，多窗口状态从不错位。
七、Prompt 三段式：让 AI 先报方案再动手
把"让 AI 做演示材料"的 prompt 固定成三段：
1受众与场景：这份材料给谁看、在什么场合用；
2主题偏好 + 参考案例：想要哪种风格、有没有对标的例子；
3素材：把大纲 / 数据丢过去。
AI 拿到后会先回一句："我准备用 X 主题 + Y deck 模板，加 Z 动效，你看 ok 吗？"确认完再生成。把"自由发挥"变成"确认制"，翻车率骤降。
笔记
顺带一个彩蛋：逐字稿有三黄金法则——提示信号（"接下来我们看……"）不写进讲稿；每页 150–300 字；用真口语而不是把幻灯片文字念一遍。
写在最后
把这 7 个技巧串起来，其实是一句话：做任何"生成式 UI"，先给 AI 一个素材库，再让它当装配工，而不是设计师。
瓶颈从来不在模型，而在我们是不是还在让它"从零造轮子"。html-ppt-skill 给我最大的启发也在这——它把 PPT 设计权交给模板维护者，让你这个内容创作者，只关心一件事：把内容讲清楚。
如果你也想试试，一行命令就能装上这套素材库：
bash
npx skills add https://github.com/lewislulu/html-ppt-skill
“你平时用 AI 做汇报 / PPT，最常在哪一步翻车？评论区聊聊，咱们一起把"装配工"练熟。
