打造交互式 AI Slides：6 大结构框架指南

开会时有人问“具体拆解一下数据？”，全场突然安静，你手忙脚乱地翻找资料——这种尴尬我们都经历过。有了“交互式 AI 幻灯片”，这种冷场将彻底消失。以下是完整的制作指南以及所使用的提示词。

先看看点击后会发生什么

点击数字，支撑数据的图表就会展开；点击卡片，直接跳转到对应页面；拖动滑块，计算结果瞬间更新。

以前总被“我找一下另一份文档……”打断的会议，现在可以一气呵成。

我认为，AI 幻灯片的下一次进化不在于做得有多快，而在于观众的体验有多好。

观众能感受到的三件事

1）细节随手可得

幻灯片自己就能回答“所以，具体拆解是怎样的？”

在 32 个行业的排名中，点击“货运”，就能下钻查看按交易阶段划分的明细（全行业）。再也不用浪费时间去找证据页了。

2）信息之间的关联一目了然

第 1 页展示全局。点击“运费流失”卡片，直接放大到该专属页面。按下 O 键，所有页面并排呈现，你会发现各页标题串联起了一个完整的故事线。

3）变化一眼可见

2024 年的工时柱状图收缩至 2025 年的水平，差值清晰可见。不用任何解释，大家就能看明白：减少的是等待/装卸时间，而不是驾驶时间。

交互性由 6 种结构决定

这是最关键的一点。

交互不是凭感觉拍脑袋决定的。

咨询公司的演示文稿按核心信息可分为 6 种结构类型。一旦确定了结构，合适的动画也就定下来了。这让观众能亲手验证标题中的结论。

结论与证据 → 点击显示证据
细分 → 切换维度重新排序柱状图
差异 → 形状变化，让差值可视化
因果关系 → 用滑块调整条件重新计算
差距与方案 → 切换方案填补差距
流程与时间 → 元素依次组装

原则：每页只设一个交互。

动画要跟着文稿的结构走，而不是为了炫技。这样既不会让观众一头雾水，也能避免被吐槽“只是花架子”。

怎么做：只需在常用提示词里加一段

粘贴用于制作咨询级演示文稿的“终极提示词”。（如果还没见过，可以用这篇免费文章里的：https://note.com/uchita_success/n/na5babdc58b0e）
在它下面，粘贴下一节的提示词（就是让文稿具备交互性的那部分）。
在最底部，粘贴你的原始素材（数据和来源）。
打开生成的文稿（Claude 会以 artifact 形式输出；ChatGPT 则以 canvas 或文件形式输出）。

注：本文示例使用 Claude Opus 5.5 制作。

交互式 AI Slides 提示词

直接把这段提示词粘贴在上面提到的终极提示词下方即可。

⚠️ 由于字数限制，这里无法放出包含代码示例的完整版提示词。完整版附带了示例页面的代码，帮助 AI 对齐视觉风格，总长超过 8,000 字。请从 note 复制粘贴完整版：

https://note.com/uchita_success/n/nf8711b1dba37

以下是去掉代码部分的正文内容。

text

1【交互式文稿提示词 v2.1】
2因篇幅限制省略全文；请从 note 复制粘贴。
3
4## 补充要求：实现交互功能
5将此模块追加到上述文稿创建提示词之后。素材请粘贴在本模块下方（保留上一段提示词中“请将素材粘贴在此行下方”的原句不变）。
6
7### 优先级
8- 内容层面（数据处理、标题、逻辑、模板、绘图规范、校验）遵循上述文稿创建提示词。
9- 输出格式以本模块为准：单文件交互式 HTML，共 3 页（素材多则 4 页），标题每行最多 36 字符（不换行）。不单独输出设计文档；改为输出页面清单和数据台账（把上一段提示词中要求的设计项整合进这两项里）。
10- 开始前只提一次问题，且仅在素材/背景中目的或受众不明确时才提问。否则自行判断、记录假设，一次性写完。
11
12### 页面模板（视觉效果需与下方示例一致）
13- 第 2-3 页：左侧主图表（占宽 60%），右侧证据面板（浅色背景框）。面板结构：一个大数字（88-96px）→ 含义说明（1 行）→ 背景上下文（2-3 行）→ 对比对象与差值（附公式）→ “查看明细 ›”
14- 第 1 页：顶部一行 3 个大数字，底部展示整体流程/结构（哪里发生了什么）。在流程中放置可跳转到具体页面的卡片（如“p.2 ›”）。
15- 图表和数字撑满画布。内容下方不留空白条带。
16- 用尽素材中的所有数字（图表、面板、标注、证据）。计算差值/比率并展示公式。绝不捏造素材中没有的数字。
17- 主体用主色，对比项用浅渐变色，其余用灰色。每页只放一个大数字。
18- 让可点击元素足够显眼：使用“›”、“点击…”、悬停边框，进入页面时用圆环高亮一次。柱状图/圆点悬停时显示“数值、名称、来源”提示框。
19
20### 每页一个交互（由结构推导）
21每页严格添加一个操作，让读者能验证标题中的判断。根据标题的结构类型选择操作方式。
22- 金字塔型（结论/证据）→ 点击下钻。右侧证据面板（附来源；几乎每页都要有）。
23- 分类型（细分）→ 切换维度（汇总口径、指标、年份）重排所有柱状图。
24- 比较型（差异）→ 原状态变形为当前状态，差值/差异以虚线保留。
25- 因果型（原因/结果）→ 滑块调整条件，重新计算结果。屏幕上展示公式。
26- 问题解决型（差距/方案）→ 开关方案以填补/留出差距。
27- 顺序型（流程/过程/时间）→ 依次组装，角色沿流程移动，时间轴上标出“当前”位置。
28不要添加与标题无关的动画。定量动画必须基于数值计算得出。
29
30### 证据面板（点击后从右侧滑入）
31- 宽度 720px。从右侧滑入，背景变暗。通过 X、Esc 或点击背景关闭。
32- 自上而下结构：位置上下文（“当前状态 > 项目名称”）→ 判断（1-2 行）→ 标签页（最多 2 个，如“明细 / 来源与假设”）→ 小图表/表格 → 来源。
33- 主页放不下详细数字就放在这里。几乎每页都要配备。
34
35### 整体文稿
36- 支持从第 1 页概览缩放导航至具体页面。允许从方案页跳转到证据页。
37- 快捷键：→ 和空格下一页，← 上一页，数字键跳转，Esc 关闭/返回，O 全页概览，D 自动演示（箭头光标按脚本移动，以概览结束。给交互元素加上 data-demo 命名标签）。
38- 页面约 3 秒内组装完成：标题 → 主图表（柱状图从 0 生长，错开 60ms）→ 数字 → 证据面板。使用 CSS 过渡/延迟；若用 JS，则将 requestAnimationFrame 与 50ms 定时器配合使用。
39- 支持 #static URL 参数和“减弱动态效果”设置，直接展示最终组装状态（对于交互页，展示能让标题判断成立的状态，例如所有方案开启）。必须也能作为静态文稿阅读。
40- 将 1920x1080 画布缩放适配屏幕。外部加载仅限 Google Fonts Noto Sans JP。
41
42### 最低标准（仅在没有上述文稿创建提示词时适用）
431. 根据素材建立数据台账（项目、数值、日期、来源、总体基数）。缺失数字标为“xx”并备注。无数值的项目排在最后。
442. 每页传达一个信息。标题是结合事实与判断的完整句子，每行最多 36 字符。避免“A。B”两段式、“共有 3 个…”数数式，或以名词结尾的残句。
453. 先写好所有标题，检查纵向逻辑流（概览→证据→方案），再制作图表。
464. 根据标题的结构意图选择图表类型（见上文“每页一个交互”）。
475. 图表标题：“对象、时间、单位”。标题中不加判断。页脚和证据面板都要注明出处。
486. 颜色：1 个主色，3 个浅渐变色，灰色。默认主色 #1976D2。强调色（琥珀色 #D97706）整篇文稿只用一次。最小字号 18px。
497. 不要把相关性说成因果。估算值需标注“估算”，并在屏幕上展示公式和假设。
50
51### 输出
52- HTML：Claude 用 Artifact，ChatGPT 用 Canvas（都不支持则用单个代码块）。一次性写完。控制页数并将组件封装为函数以缩短代码。若被截断，用户输入“继续”时接着写同一文档（不要让用户手动粘贴）。
53- 第 1 行声明方法：“内容 = 文稿提示词 / 交互 = 交互模块”或“仅用交互模块（内容采用简化规则）”。
54- 页面清单（标题/结构/操作/证据面板内容）、数据台账、使用说明放在 HTML 之外（回复正文中），简明扼要。不要写在 HTML 里面。
55- HTML 总大小目标约 40KB。必要时精简文字（绝不能精简图表、证据面板和操作）。
56- 结尾给出 2-3 个进一步优化的建议，并请用户选择。
57
58### 最终检查
59输出前复查并修正：每页都有“验证标题的操作”和“带来源的证据面板” / 没有捏造数字 / 没有空白条带、重叠、溢出或小于 18px 的文字 / 各页标题句式统一（别全是“应该…”） / 自动演示脚本没有引用不存在的元素。
60
61（此处接一个示例页面的代码。附带示例能显著提升质量。含代码的完整版在 note 上。）