如何用 AI 写网页版 PPT

用 PPT 做技术演示，为什么总不够顺手

传统 PPTX 在技术分享和在线演示场景里有几处天然的别扭。它依赖特定软件打开，跨设备、发链接分享时容易掉版式、丢字体；交互和动效受限，想做点逐步展开或自定义效果就要绕路；内容一多，单页很容易塞得过满，投屏时下半截被裁掉或需要滚动。这些问题都指向同一个根源：演示和浏览器、和"一个链接就能打开"的现代分享方式没有对齐。

这个技能怎么把内容变成网页演示

它的产出物是一个自包含的单文件 HTML：CSS 和 JS 全部内联，浏览器双击即开，发链接即能在线演示。流程上它先识别三类任务——从零新建演示、把 PPTX 转成 HTML、或增强一份已有的 HTML 演示，再收集用途、长度、内容准备度和是否需要浏览器内编辑。它的特点是不直接闷头生成，而是先给出多种风格预览，让人通过视觉样张挑方向，再按所选风格制作全套页面。每一页都强制遵守 100vh 视口适配、clamp 字号、无滚动、内容密度上限和动画降级，确保投屏时不溢出、不裁切。

怎么用它

用法是把要做的演示类型、长度和内容来源用自然语言说清楚，由它识别模式并先给风格样张。例如可以这样对它说：

它适合这些场景：制作可通过浏览器打开和在线分享的技术演讲页面；把 PPTX 内容提取后转为更有动效的网页演示；已有 HTML 演示需要补充内容、图像或风格但不能溢出；会议或产品 Demo 需要可编辑、可导航且无构建依赖的演示文件。

大家常问

为什么把演示文稿做成单文件 HTML，而不是用传统 PPT 文件？

传统 PPTX 本质是压缩包，里面有 XML 布局、二进制图片和字体，依赖专用客户端解析。单文件 HTML 演示是一份自包含的网页，浏览器就是播放器，翻页只是切换 CSS 类名，零依赖、可在线托管、可嵌入网页、可用 Git 做版本对比，方便在线分享技术演讲。

单文件 HTML 演示文稿里所谓 100vh 视口适配是什么意思？

1vh 是浏览器视口高度的 1%，每一页 slide 设成 height:100vh 就刚好填满一屏。配合 overflow:hidden 取消滚动条、position:absolute 让所有页面叠放在同一位置，再用 transform 控制当前显示哪一页，就实现了"一页一屏"。移动端要注意 100vh 包含地址栏，常用 100dvh 或 JS 修正。

用代码写演示文稿和用图形界面排版演示文稿在做法上有什么本质区别？

图形界面是画布加绝对坐标，每页一张固定尺寸的板子，元素靠拖拽对齐；前端写法是文档流加 CSS 规则，内容用 Markdown 写、样式用 CSS 变量统一管，动画是状态机式的关键帧。前者所见即所得，后者所写即所得，纯文本可做 Git diff，换主题改一份 CSS 全套幻灯片就跟着变。

HTML 演示文稿里说的 Speaker Notes 是什么，跟主页面什么关系？

Speaker Notes 是给演讲者看的隐藏备注，常存在每页 section 的 data-notes 属性或 HTML 注释里，观众屏看不到。两屏是同源数据的多视图渲染：主屏只渲染 slide 内容，演讲者屏额外渲染当前页备注、下一页预览和计时器，两个窗口通过 BroadcastChannel 或 localStorage 同步页码。