用 HTML 做 PPT
AI 时代人人都该会的技能

比传统 PPT 更高级、更好看，还能让 AI 一键生成。从装 Skill 到打包分享、部署上线，从 0 到 1 走完全程。

装 Skill 生成页面改字换图打包分享链接部署

整个流程只有五个环节：装好 Agent 与 Skill → 让 Skill 调用模板库 → 建文件夹生成 PPT → 用编辑工具微调并替换素材 → 打包或部署分享。全程只需要把链接、文件夹丢给 Agent，让它自己动手。

全流程五步走

准备一个 Agent

演示用的是 Claude，如果没有可以看主页上期的零基础安装视频。用其他同类工具，用法基本一致。

安装两个 Skill

第一个是负责“教 Agent 怎么用 HTML 做出好 PPT”的 skill，在 GitHub 上已有 17000+ 星；第二个是博主张 Aria 做的 beautiful html template，里面集合了大量有设计感的 HTML 模板。安装方式很简单：把两个项目链接发给 Agent，它就会自动完成整个安装流程。

让生成 Skill 直接调用模板库

否则两个项目是分开的：要先用第一个生成，再拿第二个的模板去改，很麻烦。做法是调用生 PPT 的 skill，告诉它去调用模板项目里的 Agent 文件，Agent 就会帮你改好，之后生成时自动套用那些好看的模板。也可以按自己的需求做个性化定制。

建独立文件夹，开始创作

单独建一个项目文件夹作为工作目录，把文件夹拖进终端，再启动 Agent，后续所有 PPT 文件都会落在这个文件夹里。然后调用 skill、把文案发过去，等它开始工作。

微调与替换素材

生成后，用自制编辑工具调整字体大小、替换图片和视频，最后保存并覆盖原文件。

生成前，它会先问你几件事

想做多少页幻灯片
需不需要在浏览器里直接编辑文字
希望观众看完 PPT 有什么感受（风格方向，可多选）

比较贴心的一点：正式开工前，它会先做三张不同风格的标题页让你挑，选定后再一次性把全部内容做完。这样不会等全做完才发现风格不对。

自制编辑工具能做什么

调整字体

选中任意一行字即可放大缩小，比如 1.5 倍；连标点符号（问号改感叹号）也能直接改。

替换图片

点击“插入图片”，把素材换进去，还能拖动调整大小。

替换视频

点击“插入视频”填入素材，大小可调，并且能直接播放。

保存方式

改完后点击“覆盖原文件”，会直接在原 HTML 文件上完成修改。

为什么还要手动微调？AI 做出来的东西大致够用，但它没有视觉，不像人能实时预览，所以总爱把字体设得偏小。基本都要用工具再过一遍字号和大小。

怎么插入图片和视频

模型能读图

直接告诉它在第几页插入什么内容的图片，把图片拖给 Agent，它就能帮你加进去。

模型不能读图

用“图片占位符”“视频占位符”替代，让 AI 先占好位置，之后再用编辑工具把图片与视频替换进去。

重要提醒：如果模型不能读图（比如 DeepSeek 等），千万不要把图片塞进对话里，无法识别会造成 token 爆炸。

做完了怎么分享

方式一文件分享

方式二链接分享

文件方式

没有用到图片、视频等额外素材，直接发 HTML 文件，浏览器打开就能预览。

用到了图片和视频，就要把整个文件夹打包一起发，对方打开 HTML 才能正常显示素材。

链接方式

要转成链接，就得把网页部署到云服务器上。传统买服务器、域名、备案流程复杂麻烦；如果只是分享给身边朋友同事，用免费网站就够了，生成的链接在国内也能打开。

注册账号后上传文件或文件夹，改一下链接名字，点击更新项目即可完成部署，然后在顶部复制网页链接分享出去。

关键数据

17000+GitHub 星标
HTML PPT 技能

2 个需要安装的
核心 Skill

3 种先出风格样张
供你挑选

行动建议

先装好两个 Skill，再花一步让它们互相打通，省掉后续手工搬模板的麻烦。
每个 PPT 单独建一个项目文件夹，所有产物都留在里面，素材不丢。
选风格时认真挑那三张样张，风格对了后面才省事。
模型不能读图时，一律用占位符，别把图片直接丢进对话。
熟练之后，去定制属于自己的 HTML 模板库。

“随着模型能力的发展，用 HTML 做 PPT 会变得越来越方便，越来越好用。”

熟练之后，你就能定制出自己的好看模板。

从 0 到 1 走完一遍
你也能用 HTML 做出高级感 PPT

装 Skill · 建项目 · 生成 · 微调 · 分享，五步闭环，剩下的交给 AI。

用 HTML 做 PPTAI 时代人人都该会的技能