我开源了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 就可以按照相对稳定的流程完成工作。

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

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

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

以上就是本文的全部内容啦！如果觉得这篇文章有帮助，希望您能点个赞、点个推荐，给公众号点个星标⭐，还可以转发给身边的朋友，我们下期再见

这里是科技小亮

持续分享AI等有趣内容