作者说:可能是全网最好用的HTML PPT Skill

摘要：有人花一晚上做的 PPT ，被 AI 用 3 分钟超越了。 html-ppt-skill ， 36 套主题+47 种动画，纯静态 HTML ，一行命令装好。这不是未来，这是现在。

做 PPT ，曾经是我最厌恶的工作之一。

不是因为懒。是因为浪费。

调字体，对齐，换配色，找素材，一套流程走完，两小时没了。最后领导说：「这个背景换个蓝色？」

你只能笑着点头，然后在心里默默问苍天：做 PPT 到底有没有更好的方式？

答案出现了。它叫 html-ppt-skill。

它是什么？先说结论

一句话：一个能让 AI Agent 帮你「写」幻灯片的开源工具。

安装方式极其简单：

npxskillsaddhttps://github.com/lewislulu/html-ppt-skill 

装完之后，你只需要对 AI 说：

「帮我做一份 8 页的技术分享，用 cyberpunk 主题」

然后你去泡个咖啡。回来， PPT 好了。

不是草稿。是真正可以放映的成品。

36 套主题，凭什么说「专业」

我见过太多「开箱即用」的工具，结果样式丑到不能看。

html-ppt-skill 不一样。它的 36 套主题里，我随手截了几个，给几个设计师朋友看，他们都问：「这是哪个设计公司出的？」

几个让我印象最深的：

neo-brutalism — 粗线条、高饱和，有种纸媒杂志的力量感。适合产品发布会。

glassmorphism — 毛玻璃质感，配上渐变，看起来像 2025 年的 iOS 。适合科技展示。

xiaohongshu-white — 白底小清新，文字布局干净，专门为小红书图文风格打造的。

tokyo-night — 暗色系，对程序员来说有种天然的亲切感。代码展示首选。

swiss-grid — 瑞士网格设计，这是平面设计教材里会出现的审美系统。

这些主题不是「换个颜色」那么简单。它用的是 Token 驱动设计系统——所有颜色、圆角、阴影、字体，全部存在 CSS 变量里。换主题，只需要换一个 <link> 标签。整套视觉系统秒更新，一个样式不乱。

47 种动画，分两档

很多工具声称有「动画」，实际上是几个 CSS transition 凑数。

这个项目把动画分成两类，逻辑很清晰：

CSS 动画（ 27 种）—— 轻量、流畅、零成本

Canvas FX （ 20 种）—— 电影级特效

这一类是真正的重量级。

14 套完整模板：不用从零开始

如果你不想从空白页开始，项目还内置了 14 套完整演示模板，场景涵盖：

我最推荐 xhs-white-editorial。白底、杂志排版、留白感极强，用来做公众号图文配套 slides 的效果出乎意料地好。

31 种页面布局，不用手动排版

常规 PPT 软件，排版靠拖。拖到你怀疑人生。

html-ppt-skill 内置 31 种布局模板，想用哪个，告诉 AI 就行：

不需要你会设计，不需要你会 CSS 。

告诉 AI 「这一页用 timeline 布局」，它自动套用。

技术层面说几句

这个项目在技术选型上有一个我特别欣赏的决定：零构建。

没有 webpack ，没有 vite ，没有 node_modules 地狱。

纯静态 HTML + CSS + JS ，打开浏览器就跑。

这意味着： - 任何人都能用，不需要懂前端工具链 - 部署方式极简，一个 git clone + 双击 HTML 文件就是 - AI 生成的代码，复制粘贴即可用，不用再跑构建

另外，它还内置了 中英文优先支持——预装 Noto Sans SC / Noto Serif SC ，这对中文内容展示来说至关重要。中文字体渲染问题，在这里直接被解决了。

实际能解决什么问题？

坦白说， html-ppt-skill 本质上是一个 AI Agent 的工具库。

它解决的不是「我想做 PPT 」，而是「我想让 AI 替我做 PPT ，而且要做得好看」。

之前 AI 生成的 HTML 幻灯片，往往丑、乱、没有美感。原因是 AI 缺少设计系统约束——它不知道什么是好的排版，只能随机堆砌 CSS 。

html-ppt-skill 给 AI 一套规则： 36 套主题， 31 种布局， 47 种动画，全部结构化、可组合。AI 不再自由发挥，而是在一套设计系统里填内容。

结果质量就稳了。

怎么开始用？

方式一：作为 Agent Skill 使用（推荐）

npxskillsaddhttps://github.com/lewislulu/html-ppt-skill 

然后对你的 AI 说：

帮我用 tokyo-night 主题，做一份10页的产品发布 slides 关键内容：[你的内容] 

方式二：手动操作

gitclonehttps://github.com/lewislulu/html-ppt-skill cdhtml-ppt-skill  ./scripts/new-deck.shmy-talk  opentemplates/theme-showcase.html  opentemplates/layout-showcase.html 

键盘快捷键记一下：T 切换主题，O 进入概览模式，F 全屏，A 播放当前页动画。

最后说一句

PPT 的本质是「把一件事说清楚」。

技术上， html-ppt-skill 已经帮你把「好看」这个问题解决了。剩下的，是你有没有清晰的思路值得去表达。

工具只是工具。

但一个好的工具，能让你把时间放在真正重要的事上——想清楚，说清楚。

项目地址： https://github.com/lewislulu/html-ppt-skill