把大纲变成网页PPT,这个Skill连讲稿也帮你准备
- 2026-11-06 16:20:01

AI技能图鉴 / AI SKILL ATLAS
ARCHIVE 074 · HTML PPT
FIELD GUIDE/OPEN SOURCE/AI SKILL
把大纲变成网页PPT:这个Skill连讲稿也帮你准备

分类:演示文稿制作 / 内容排版
来源:https://github.com/lewislulu/html-ppt-skill
CATALOG / 目录
PHASE01
准备
·先确定内容和风格
PHASE02
制作
·用模板安排每一页
·给页面加上动效
PHASE03
演示
·准备讲稿和演讲窗口
PHASE04
交付
·打开演示并导出
做 PPT 时,大纲写好了,页面还要一张张安排。哪页用图表,哪页放截图,标题和正文怎么搭,都要花心思。
html-ppt 把常用的主题、模板和页面布局准备好了。装进支持 AgentSkills 的 AI 工具后,你可以把大纲交给 AI,让它做成一份网页 PPT。生成的文件用浏览器就能打开,还能翻页、全屏演示。
要拿去讲课或做分享,它也会按演讲需求准备逐页讲稿,并提供查看讲稿、下一页和时间的演讲者窗口。
关注AI技能图鉴,持续介绍AI技能
它解决什么问题
做一份 PPT,经常要同时考虑内容和排版。写周报要放指标和进度,介绍产品要放功能和截图,讲一个技术方案又要用到流程图、架构图。
html-ppt 给这些内容准备了不同的版式。数据可以放进图表,过程可以用时间线,截图也有专门的图片页。有了现成的选择,就更容易把大纲安排成一页页能展示的内容。
整份文稿的配色、字体和卡片样式也由主题统一管理。选好风格后,各页可以沿用同一套样式。
把大纲交给它之后,会发生什么
以一场团队分享为例。
我要给团队做一场 20 分钟的分享,主题是我们最近做的项目。这是内容大纲,帮我做成 PPT。

大纲交给 AI 后,会结合主题和版式安排页面,最后生成可演示的网页。
先确定内容和风格
选好整份文稿的样子
开始制作前,它会确认内容、观众和篇幅,再推荐合适的主题和模板。已经有偏好,也可以直接说想要浅色、深色或杂志风。
项目有 36 套主题。正式汇报可以用白底和蓝色搭配,技术分享有深色主题,文字较多的内容有杂志和论文风格,小红书图文也有柔和配色。
选主题时,配色和字体会一起确定。项目还提供主题预览页,可以先看效果再选。
用模板安排每一页
文字、数据和图片各有位置
它有 15 套整套模板,包括周报、产品发布、融资路演、技术分享和课程等。每套都有多页内容和自己的排版,可以选一套贴近用途的模板,再换成你的材料。
具体到每一页,还有 36 种单页布局。封面、目录、双栏文字、数据表格、柱状图、折线图、流程图、时间线和代码页都能选用。
比如,介绍项目背景可以用文字页,讲方案步骤可以用流程图,展示进度可以用时间线。不同内容有不同的呈现方式。
图片也有 5 种专门的布局。可以放一张完整截图,让照片铺满页面,也可以把图和说明放在两边,或者做多图展示、前后对比。截图和架构图可以完整显示,保留图里的信息。
如果提供了公司或产品的 Logo,还可以统一放在各页指定的位置,并选择在哪些页面显示。
给页面加上动效
重点内容可以逐步出现
项目准备了 27 种 CSS 动效,主要用来让文字、卡片和数字动起来,比如淡入、逐项出现和数字递增。另有 20 种 Canvas 特效,可以展示粒子、星空、烟花和知识图谱等效果。
讲数据时,数字可以从零逐步增加;讲步骤时,列表可以依次出现。封面和产品发布页,则可以用更醒目的效果。
制作指南建议按页面内容选动效。正文以简单的出现效果为主,需要强调的页面再用更明显的特效。Canvas 特效会在进入所在页时启动,离开后停止。
准备讲稿和演讲窗口
讲的时候能看到下一页
前面的请求已经说明要给团队做分享。Skill 会按演讲场景准备逐页讲稿,用口语写,把重点词加粗,并把换到下一页时要说的话单独放一段。
打开文稿后,按S键就能弹出演讲者窗口。里面有当前页、下一页预览、讲稿和计时器四张卡片。卡片可以拖动、调整大小,排好的位置也会保存。

大屏展示幻灯片,自己面前的窗口用来看讲稿、下一页和时间。
有外接屏或投影时,可以把观众页面放到大屏幕,把演讲者窗口留在自己面前。观众看幻灯片,你看讲稿和时间,两边翻页会同步。
下一页预览加载的是同一份文稿,沿用相同的主题和排版。讲到哪里、下一页是什么,都能在演讲窗口里看到。
打开演示并导出
网页、PDF和图片都能用
完成后,得到的是 HTML 演示文稿,以及用到的样式、脚本和图片文件。制作指南还安排了浏览器检查,要逐页查看内容和排版。
演示时,左右方向键可以翻页,F键进入全屏,O键查看全部页面。文稿配置了候选主题后,还可以按T键切换,看看哪种更合适。手机和平板支持左右滑动翻页。
需要把材料发给别人,可以通过浏览器打印保存为 PDF。项目也附带 PNG 截图脚本,在 macOS 上用 Chrome 截取单页或整套图片。
最常见的使用方式
做工作汇报,可以提供本周指标、完成事项和下一步计划,采用周报模板。它已经安排了指标区、图表和计划表,适合把这些材料放到一起。
讲课程,可以提供教学大纲和例子,采用课程模板。模板里有学习目标和自测内容;需要现场讲解时,还可以结合逐页讲稿使用。
发小红书图文,可以把内容整理成卡片页。项目有一套 9 页、3:4 比例的竖版模板,做完后将页面导出或截图,就能得到一组图文素材。
它为什么能工作
这套 Skill 把制作规则和现成文件放在了一起。AI 可以读取主题、布局和演讲指南,再使用对应模板制作页面。
主题负责配色和字体,布局负责安排文字、图表和图片,运行脚本负责翻页、全屏和演讲者窗口。各页共用同一套基础样式,改换主题时,整份文稿可以一起换样子。
生成的演示文稿是静态网页,不需要再运行构建命令,浏览器就能展示。
安装与前置条件
在支持 AgentSkills 的工具里,可以使用项目提供的安装命令:
npx skills add https://github.com/lewislulu/html-ppt-skill用这条命令安装,需要有 Node.js、npm 和网络连接。项目也支持手动复制安装,把完整的 Skill 文件夹放进 AI 工具识别的技能目录即可。
装好后,准备要展示的内容。如果要用自己的截图、照片或 Logo,也一并提供给 AI。生成的网页用浏览器打开。
适合谁
需要做工作汇报、团队分享或课程的人,可以用它把已有内容整理成演示页面。经常制作图文卡片的创作者,也可以用竖版模板安排内容。
如果手头已经有一份大纲,可以先把它交给 AI,说清楚给谁看、准备讲多久。确认喜欢的风格后,就可以开始做这份网页 PPT。
关注AI技能图鉴,持续介绍AI技能