我开源了PPT Skill，自动配图。

大家好，我是用Html做PPT的小亮。

过去一段时间，我做了很多 HTML PPT。于是，我干脆把自己制作 HTML PPT 的方法，整理成了一个 Skill。下面是演示效果。

HTML PPT 很适合交给 AI 制作。

页面里的标题、卡片、图片、排版和交互，本质上都可以通过前端3件套实现。只要把内容交给 Codex，它就能直接编写代码，在浏览器里生成一整套可以翻页的 PPT。

项目名称叫：xiaoliang-html-ppt-skill

//01-它可以做什么？

这个 Skill 的功能很直接：

把一篇中文文章、教程、讲稿，以及对应的图片素材，制作成一套可以直接在浏览器中打开的 HTML PPT。

它目前支持两种输出形式。

第一种是 16:9 横版课件。

这种形式适合课程讲解、录屏视频、产品演示、GitHub 项目介绍和工具使用教程。

例如，我写完一篇关于 AI 工具的公众号文章后，可以把文章和操作截图一起交给 Codex。Skill 会重新拆分内容，把背景、核心功能、操作步骤、案例和总结分别安排到不同页面中。

最终得到的 HTML，可以直接用浏览器打开，通过键盘或鼠标翻页，也可以进入全屏模式录制视频。

第二种是 3:4 竖版图文卡片。

这种形式更适合图文、朋友圈知识卡片等场景。

竖版内容会根据手机阅读习惯重新组织。每一张图片只讲一个完整观点，即使读者没有听到口播，也能单独看懂这一页。

也就是说，同一篇文章可以生成两套内容：一套用于讲解，一套用于图文发布。

//02-它会先理解内容，再开始排版

我在制作这个 Skill 时，最重视的一点，就是让 AI 先把内容讲顺。

现在很多 AI PPT 工具的使用方式，是上传一份文档，然后等待系统自动生成十几页 PPT。

速度确实很快，但生成结果经常停留在文章摘要层面。

原文可能详细解释了一个工具的安装、配置、使用和常见问题，最后却被浓缩成功能强大、操作简单、提升效率几个要点。

这种 PPT 看起来很规整，信息量却非常有限。

xiaoliang-html-ppt-skill 会先完整阅读文章，从中找到真正的讲解路径。

例如，一篇教程通常可以拆成：为什么要使用这个工具；它能解决哪些具体问题；安装之前需要准备什么；每一步应该如何操作；操作完成后会看到什么结果；使用过程中容易遇到哪些问题；最后可以扩展到哪些场景。

有了这条路径之后，AI 才会开始规划页面。

每一页只负责解决一个问题，或者讲清一个操作步骤。原文中需要重点解释的部分，也会保留足够的篇幅，不会被强行压缩成几句总结。

这也是我理解的教程型 PPT。

它需要帮助观众一步步理解内容，同时也方便创作者顺着页面完成讲解。

//03-有截图时，先把图片看明白

对于工具教程和产品演示来说，图片非常重要。

我平时写文章时，经常会准备大量截图：软件首页、设置界面、某个按钮、操作过程，以及最终效果。

以前直接让 AI 制作 PPT 时，经常会遇到一种情况：

文章读完了，图片文件名也找到了，但 AI 并没有真正理解图片内容。

于是，一张设置页面可能被放到了项目介绍部分，一张最终效果图也可能提前出现在操作步骤里。

为了解决这个问题，我在 Skill 里增加了图片素材盘点流程。

当用户提供图片目录后，Codex 需要先查看所有图片，弄清楚每张图展示的内容，再决定它应该放在哪个位置。

例如：介绍软件界面时，使用完整界面截图；讲解某个操作时，展示对应按钮或设置区域；介绍最终效果时，再放生成结果或案例图片；

需要查看小字和细节时，给截图留出更大的展示空间。

这样生成出来的 PPT，图片与文字之间会形成更明确的对应关系。

观众看到某个操作步骤时，旁边就能看到真实界面；创作者录制视频时，也不用频繁离开 PPT 去寻找素材。

//04-我只给它保留了一种风格

很多 AI PPT 产品会提供大量模板。

商务风、科技风、极简风、赛博风、渐变风，看起来选择很多，但生成出来的内容也很容易失去个人特色。

所以，在 xiaoliang-html-ppt-skill 的公开版本中，我只保留了一种视觉方向：

小亮实验室。

它使用暖色纸张背景、手绘粗线条、错位黑色投影、贴纸标签和少量鲜艳的点缀色。

整体感觉有点像一份创作者的实验笔记。

它不会追求复杂的渐变、发光面板和大量装饰，更适合教程、工具测评、AI 项目和知识讲解。

只保留一种风格，也方便我持续优化。

字体大小是否合适，截图应该占多大面积，标题应该如何换行，竖版封面的图片应该放在哪里，这些细节都可以在真实使用中不断迭代。

对于内容创作者来说，稳定的视觉风格也很重要。

当公众号文章、视频课件和图文卡片都使用同一套视觉语言时，内容会逐渐形成自己的辨识度。

//05-如何使用这个 Skill？

目前，我主要在 Codex 中使用它。

可以先把项目链接发送给 Codex，让它读取并安装。

安装完成后，把文章和图片素材放到项目目录中便于管理。

然后调用Skill，就能在对应的项目目录中会生成对应的 HTML 文件。

用浏览器打开，就可以直接查看、翻页和全屏演示。

最近一年，我做了很多和 Skill 有关的尝试。

我越来越觉得，Skill 的价值并不只在于多增加一个功能。

它更像是把一个人长期积累下来的经验、规则和工作方法，整理成一套可以被 AI 重复执行的流程。

以前，我制作一套 HTML PPT，需要一遍遍告诉 AI 应该如何读文章、如何拆内容、如何使用截图和如何调整页面。

现在，这些经验被写进 Skill 之后，只需要提供文章和素材，Codex 就可以按照相对稳定的流程完成工作。

以后，我也会继续使用这个项目制作自己的文章配图、教程课件和视频内容，并根据真实使用中遇到的问题持续优化。

也欢迎大家使用，并根据自己的风格不断调整。

我是小亮，我们下期再见。