如何用 AI 写网页版 PPT
「前端演示文稿」是「龙虾部署大师」技能市场中的演示生成技能:作用是产出浏览器可直接运行的单文件 HTML 演示,而非传统 PPTX。它会先识别任务属于新建、PPT 转换还是增强现有 HTML 三种模式,再收集用途、长度和内容准备度,先给风格预览供选择,最后生成内联 CSS/JS、自包含、遵守 100vh 视口适配和无滚动约束的整套演示页面。 技能效果 把一份微服务演进提纲交给它时,它做成了五页的单文件 HTML 演示,支持方向键翻页、底部圆点指示器和移动端滑动。 用 PPT 做技术演示,为什么总不够顺手 传统 PPTX 在技术分享和在线演示场景里有几处天然的别扭。它依赖特定软件打开,跨设备、发链接分享时容易掉版式、丢字体;交互和动效受限,想做点逐步展开或自定义效果就要绕路;内容一多,单页很容易塞得过满,投屏时下半截被裁掉或需要滚动。这些问题都指向同一个根源:演示和浏览器、和"一个链接就能打开"的现代分享方式没有对齐。 传统 PPTX · 依赖软件,分享掉版式 · 交互动效受限 · 内容溢出 / 需滚动 单文件 HTML 演示 · 浏览器打开,链接即分享 · 内联动画,键盘翻页 · 100vh 适配,无滚动 这个技能怎么把内容变成网页演示 它的产出物是一个自包含的单文件 HTML:CSS 和 JS 全部内联,浏览器双击即开,发链接即能在线演示。流程上它先识别三类任务——从零新建演示、把 PPTX 转成 HTML、或增强一份已有的 HTML 演示,再收集用途、长度、内容准备度和是否需要浏览器内编辑。它的特点是不直接闷头生成,而是先给出多种风格预览,让人通过视觉样张挑方向,再按所选风格制作全套页面。每一页都强制遵守 100vh 视口适配、clamp 字号、无滚动、内容密度上限和动画降级,确保投屏时不溢出、不裁切。 新建 PPT 转 HTML 增强现有 HTML 先给风格预览视觉样张选方向 单文件 HTML 演示 100vh · 无滚动 · 自包含 用前须知 生成 HTML 本身无需 API Key 和构建工具。若要把 PPTX 转成网页演示,需要本机具备 Python 和 python-pptx;生成过程中还会读取 viewport-base.css 等本地模板文件。 怎么用它 用法是把要做的演示类型、长度和内容来源用自然语言说清楚,由它识别模式并先给风格样张。例如可以这样对它说: 可以这样对它说 "把这份技术分享做成单文件 HTML 演示,支持键盘翻页和在线演示。" "现有 HTML 演示太挤了,帮我拆页并保证每页 100vh,不出现滚动条。" "把这个 pptx 转成网页演示,保留图片、顺序和备注,输出单页文件。" 它适合这些场景:制作可通过浏览器打开和在线分享的技术演讲页面;把 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 同步页码。 想用上这个技能? 「前端演示文稿」就在「龙虾部署大师」的技能市场里,打开 技能市场 就能一键安装使用。 还没装龙虾?先 一键部署「龙虾部署大师」,在本地跑起来后再装技能即可。 注:技能的实际效果与所选用的 AI 模型能力有关,不同模型下的表现可能存在差异。

提示