做一份"网页感"的演示稿 —— HTML 单文件 PPT 的方法论
先说清楚不是给谁看的。
如果你要做的是给老板用 WPS 改的汇报，关掉这篇。HTML PPT 不能直接给同事改，进不了内部 OA，没法当 .pptx 用。那种场景请走 Kimi Slides 路线。
这篇是写给：
- PM 想做一份能投屏给团队看的产品演示
- 科普作者想把一篇文章变成可滑动的"故事 deck"
- 独立设计师想做个人作品集页面
- 老师 / 培训师想做一份"出圈"的课件
- 任何"投屏自己讲、想被人记住"的创作者
愿意调代码，愿意为视觉效果折腾，做完只发链接不需要发文件——这一类需求，HTML 单文件 PPT 是甜点。
为什么 90% 的 AI 直出 HTML PPT 都很丑
直接让 AI "做一份 PPT"，出来的东西几乎一定是这几样的组合：
- 圆角卡片，左边一道色条，里面三个 bullet
- emoji 当 icon
- AI 自画的卡通小人 / 笔记本 / 灯泡 SVG
- "专业感"渐变球漂在右上角
- 每页都是同一种版式
这些不是 bug，是统计意义上的最优解——AI 见过几百万份 PPT，平均下来就长这样。你不告诉它"什么不要做"，它就把所有这些堆给你。
做出来好看的关键，从来不是工具能力，是你的设计 brief 够不够狠。下面这套方法论，换 Claude、Kimi、Cursor 都成立。
一、心智先到位：你不是在做 PPT，你是在写一份设计 brief
通用 LLM 不是设计师。它是一个见过很多代码的实习生。
设计师能自己判断"这场合该用衬线还是非衬线"。LLM 不能。你必须把以下五件事写死给它：
- 画布规格（1920×1080 / 16:9 / 留白多少）
- 字号体系（标题、副标题、正文的具体像素值）
- 字体（中文用哪套、英文用哪套，不能让它默认）
- 色彩（主色 / 强调色 / 中性灰阶的具体十六进制色号）
- 每页的"意图"（金句页 / 数据页 / 对比页 / 流程页 / 引用页）
少写一条，它就用平均水平糊弄你。五条都写到位，输出质量直接跃迁一个档。
二、工具排序：哪个 LLM 能真的出好东西
这是 2026 年这一刻的真实情况：
| 工具 | 视觉质量 | 国内访问 | 备注 |
|---|---|---|---|
| Claude.ai Artifacts | ✅ 当前天花板 | 需要梯子和账号 | 同样的提示词，Claude 出来的就是好看一档 |
| Cursor / Trae + Claude API | ✅ 接近 Claude.ai | 国内可用（需 API key） | 本地写、本地迭代、能继续改代码 |
| Kimi 直出 HTML 代码 | 🟡 中上 | 国内可用免费 | 让它"写一个 HTML 文件"，不是用 Slides 模式 |
| DeepSeek | ❌ 视觉 mediocre | 国内可用免费 | 写代码强，做 PPT 弱 |
推荐组合：能上 Claude.ai 用 Claude，国内首选 Kimi（让它生成 HTML 代码），不要用 DeepSeek 做这件事。
进阶玩法：不想自己每次写设计 brief 的，可以直接装 jiji262/claude-design-skill 这个开源 Claude Skill。它把 Claude.ai 内部的设计系统提示词、反 AI Slop 规则、字号字体规范打包成可移植 skill，本地 Claude Code / Cursor 都能用，等于把本文第三到第五节的人工 brief 自动注入。中文拆解版见 刘大猫的解析。
三、设计 token：你要给 AI 的"色卡"
每次开一份新 PPT 之前，先把这张色卡填好。它就是你的"设计宪法"，下面所有提示词都基于它。
【画布】
- 16:9，画布 1920×1080，整页 transform:scale 适配窗口
- 四周内边距 ≥80px
【字号】
- 主标题 ≥72px
- 副标题 ≥40px
- 正文 ≥24px
- 永远不要用低于 24px 的字
【字体】
- 中文：Noto Serif SC（如果要"庄重"）或 Noto Sans SC（如果要"现代"）
- 英文：**避开 Inter / Roboto / Fraunces 这三个被 AI 用滥的"默认审美字体"**，优先选 Geist / Space Grotesk / IBM Plex Sans / Söhne 之一，没有授权再退到 Helvetica Neue
- 数字：SF Pro 或 Inter Tight 等宽变体（数字位是例外，因为对齐刚需）
【颜色】（举例，可换）
- 主色 #1a3a5c（深藏青）
- 强调色 #c9a961（暖金）
- 中性背景 #f5f0e6（米白）
- 中性文字 #1f1410（墨黑）
- 全稿不超过这 4 个色 + 它们的不同透明度阶梯
【留白】
- 元素之间 ≥40px
- 标题与正文之间 ≥48px
- 卡片内边距 ≥24px
这套写完，复制到剪贴板。下面提示词每次都先粘它。
四、反 AI Slop 清单：把"什么不要做"写死
这一节是这篇文章最值钱的部分。这份清单逐条堵住 AI 偷懒会产生的"AI 味"：
【绝对不要做】
- 不要圆角卡片+左侧色条的烂大街组合
- 不要 emoji 当 bullet 点（要 icon 就用 lucide 风格的极简线条 SVG）
- 不要 AI 自画的卡通小人 / 笔记本 / 灯泡 / 灯箱
- 不要"专业感"渐变球 / 玻璃拟物 / 光晕
- 不要每页都用同一种版式
- 不要彩虹渐变；要渐变只允许同色相不同明度
- 不要居中对齐到底（除了金句页），正文统一左对齐
- 不要在数据图上加描边、阴影、发光
- 不要用 Material Design 默认蓝
- 不要用 CSS 描边或 box-shadow 模拟产品图（典型症状：一个圆角矩形 + 浅灰底，声称是"产品截图"）
- 不要在"AI / 智能"主题页用渐变球（gradient orbs）代表算法——这是 AI 自我画像最大的 tell
- 不要用 `text-align: center` 做整段正文居中——金句页可以，正文段落必须左对齐
把这段每次跟着设计 token 一起粘。AI 看到这种否定式约束，输出质量会显著好转。
五、每页"意图"：一份 PPT 应该有的版式节奏
新手最容易让 AI 出一份"标题 + 三个 bullet × 8 页"的流水账。
好 PPT 的节奏是每页只承担一种功能，不同页之间版式有变化：
| 版式 | 用途 | 视觉特征 |
|---|---|---|
| 封面 | 第一页 | 大标题 + 副标 + 装饰 |
| 章节扉页 | 大段过渡 | 单字大词 + 章节号水印 |
| 金句页 | 强调观点 | 一句话居中，大字号，留白极多 |
| 数据页 | 关键数字 | 一个大数字主导整页，配 1 句注释 |
| 时间轴 | 历史/流程 | 横向或竖向时间线 + 节点 |
| 对比页 | 两个方案 | 左右两栏对位排版 |
| 引用页 | 名言 / 用户原话 | 左竖线 + 浅底块 + 出处小字 |
| 流程图 | 步骤 | SVG 画连接线 + 节点 |
| 收尾页 | 结束 | 金句 + 行动号召 + 署名 |
提示词里直接写"这 8 页分别是：封面 / 数据 / 时间轴 / 引用 / 对比 / 流程 / 金句 / 收尾"——AI 会立刻知道每页不一样，不会再给你 8 张相同模板。
六、可以直接抄的长提示词
把上面所有规则揉成一份能跑的提示词。直接粘到 Claude Artifacts 或 Kimi 里，主题替换成你自己的：
你是资深演示设计师（不是程序员），用单文件 HTML+CSS+JS 生成 16:9 的演示稿。
【主题】
[在这里填你的主题，例如：从 0 到 1 做一款独立产品的复盘]
【事实约束】
涉及具体公司、产品、数据时，先 WebSearch 验证，禁止凭印象生成数字 / 公司名 / 产品功能。不确定就用 [占位符]。
【画布】
- 16:9，画布 1920×1080，整页 transform:scale 适配窗口，加 letterbox
- 四周内边距 ≥80px
【字号】
- 主标题 ≥72px，副标题 ≥40px，正文 ≥24px，永不低于 24px
【字体】
- 中文：Noto Serif SC（标题）+ Noto Sans SC（正文）
- 英文：Geist 或 Space Grotesk 或 IBM Plex Sans，避开 Inter / Roboto / Fraunces
- 数字：SF Pro / Inter Tight 等宽
【颜色】
- 主色 #1a3a5c，强调色 #c9a961，背景 #f5f0e6，文字 #1f1410
- 全稿仅这 4 色 + 不同透明度阶梯，禁止彩虹渐变
【绝对不要做】
- 不要圆角卡片+左侧色条
- 不要 emoji 当 bullet
- 不要 AI 自画的卡通小人 / 笔记本 / 灯泡
- 不要"专业感"渐变球 / 玻璃拟物 / 光晕
- 不要每页同一种版式
- 不要 Material Design 默认蓝
- 不要 CSS 描边模拟产品图
- 不要 gradient orbs 代表 AI / 算法
【结构（10 页）】
1. 封面：主题 + 副标 + 装饰元素
2. 章节扉页"壹"：大字"为什么"
3. 数据页：一个核心数字 + 一句注释
4. 时间轴：横向 5 个关键节点
5. 章节扉页"贰"：大字"怎么做的"
6. 流程页：3 步骤 + SVG 连线
7. 对比页：左右两栏
8. 章节扉页"叁"：大字"学到了什么"
9. 引用页：一句最重要的洞察
10. 收尾：金句 + 署名 + 年份
【交付】
- 单 HTML 文件，全内联，无外部依赖
- 键盘 ← → 翻页，按 F 全屏，按 P 进打印模式
- 每页左下显示页码 "01 / 10"
- 顶部加细进度条
- 适配脚本：用 `transform: scale(min(vw/1920, vh/1080))` + `transform-origin: top left`，外层 `<body>` 黑底制造 letterbox。**禁止用百分比 / vw / vh 做内部尺寸**——所有元素以 1920×1080 绝对像素布局，字号才稳定
【关键】
- 先列每页一句话主题给我看，我确认后再写代码
- 不要一次性输出全部，先 outline 后 implementation
最后那条"先 outline 后 implementation"是这套提示词的真正杠杆——不让它直接生成完整 HTML，先看 outline 改一遍。这一步能省下 30 分钟反复重生成的时间。
七、单案例迭代法：怎么让它越改越好不是越改越烂
迭代不是随机往回改，是有循环结构的。借 宝玉总结的 prompt engineering 5 步：
GOAL（具体到能验收）→ IDEA（选一个方向）→ PROMPT（写，先别想太多）→ TEST（跑出来）→ EVALUATE（对比 GOAL 找差距）→ 回 GOAL 修订。
新手卡在 PROMPT 步反复重写，高手在 EVALUATE 步发现是 GOAL 没定清楚——所以每轮迭代之前先问自己"我现在到底想看到什么变化"，再改提示词。
新手最容易越改越乱。原因永远只有一个：整段重写。
对话里这样追问：
不错。请只调整以下几点，其他保持完全不变：
1. 第 3 页数字从 8.6 万改成 9.2 万
2. 第 6 页流程图节点之间的连线改成虚线
3. 第 9 页引用人名加占位 [姓名]
每条都有"其他保持不变"。AI 会比对原版只改你指出的那几处。
迭代到第 5-6 轮的时候，你会发现整份 PPT 越来越像你脑海里的样子。这不是因为 AI 变聪明了，是因为你的 brief 越来越具体了。
八、保存和投屏
AI 会给你一段从 <!DOCTYPE html> 开头到 </html> 结尾的代码。
保存：
- Mac：打开"文本编辑" →
Shift + Cmd + T转纯文本 → 粘贴 → 存为演示.html - Windows：记事本 → 粘贴 → 另存为，文件名
演示.html，编码选 UTF-8
双击打开，方向键翻页，F 全屏。
投屏：
- 拷到 U 盘 → 会议室电脑双击 → Edge / Chrome 都能放
- 提前 10 分钟到现场试一遍
- 备份一份 PDF（浏览器里 Ctrl+P 另存）
九、这套方法能延伸到哪里
学会了之后，HTML PPT 只是这套能力的一个用法。同样的"AI + 设计 brief + 反 AI Slop"思路能做：
- 个人网站着陆页——把"10 页 PPT"换成"5 段单页滚动"
- 简历网页——一个 .html，HR 浏览器直接打开
- 作品集——每个项目一份 HTML，链接做导航
- 故事 deck——把一篇博客文章变成可滑动的视觉体验
- 课件——投影时学生能直接扫码访问的 web 课件
把"主题"和"结构"换一换，其他规范完全复用。这才是这套方法真正的价值——不是教你做一份 PPT，是教你怎么让 AI 帮你做一切"网页范"的视觉作品。
十、最后
AI 是杠杆，不是替代。审美、判断力、内容深度永远是你的核心资产。AI 把"码字 + 排版"的体力活包了，剩下的是你独有的东西。
现在动作：打开 Claude.ai 或 Kimi，把第六节那段长提示词复制进去，把"主题"换成你下一个想做的真实项目，按发送。
不用读完整篇，先跑一遍。