32个HTML幻灯片模板开源，让AI别再做出丑PPT了

大家好，我是 Ai 学习的老章

PPT 这个话题在咱们号最近高频出现，前阵子写过

今天再补一块拼图，一个纯模板仓库（github.com/zarazhangrui/beautiful-html-templates）

AI 出图越来越牛，AI 出网页/PPT 始终一言难尽，最大的问题不是不能跑，是审美

让大模型从零写一份 HTML 幻灯片，结果大概率是：上世纪末的渐变背景、Times New Roman 居中标题、四个项目符号点对齐失败，看一眼就想关掉

解法其实简单粗暴——别让 AI 从零设计，让它从一堆设计师手搓的好模板里选一个填内容，今天这个仓库，专门干这件事

简介

仓库一句话定位：一个 HTML 幻灯片模板库，专为 coding agent 设计

• 32 套模板，每套 8~13 张演示幻灯片，覆盖封面/中段/尾段三种典型布局

• 纯 HTML + CSS（少量 JS 用于翻页），打开就能看，不依赖任何构建工具

• 每套都有完整的视觉系统：字体、配色、装饰元素、间距韵律

• 配套index.json元数据 +AGENTS.md操作手册，agent 可以自动读取、匹配、克隆、改写

• MIT 协议，随便用

模板风格跨度非常大，老章简单挑几张感受下

软编辑风（Soft Editorial）——衬线字体配奶油色背景，做品牌、做研究汇报很合适

Soft Editorial

新极简（Neo-Grid Bold）——一抹荧光黄做点睛，编辑性 neo-brutalism，做产品发布会有那种自信感

Neo-Grid Bold

8-Bit Orbit——像素街机风，深蓝底色霓虹色块，做游戏、做开发者技术分享会有点意思

8-Bit Orbit

Broadside——暗色编辑风，中英双语字体栈，国内做技术 deck 友好

Broadside

剩下还有蓝调专业风、招贴海报风、儿童手绘风、像素卡通风、深夜霓虹风……32 套基本能覆盖大多数演讲场景

这个仓库最值钱的不是模板，是 AGENTS.md

模板谁都能做，但这个仓库专门为 AI agent 写了一份非常结构化的"操作手册"

index.json里每个模板都标了多维度元数据

{
  "slug": "neo-grid-bold",
"name": "Neo-Grid Bold",
"tagline": "Editorial neo-brutalism with a single neon yellow accent on off-white paper.",
"mood": ["confident", "punchy", "editorial", "modern"],
"occasion": ["product launch", "design review", "founder pitch"],
"tone": ["bold", "minimal", "design-led", "graphic"],
"formality": "medium",
"density": "high",
"scheme": "light",
"best_for": "...",
"avoid_for": "...",
"slide_count": 12
}

agent 不用打开 HTML 就能根据 mood/tone/occasion 几个维度做初筛，省掉一堆不必要的读文件

AGENTS.md给的工作流也很有讲究，强制了 6 步

1. 先问用户两个问题：场景是什么？想要什么氛围？（不允许跳过——AI 容易自作主张）

2. 读index.json，匹配出3 个候选，注意要"风格不同"，让用户有真正的选择

3. 对 3 个候选只生成封面预览 HTML，把用户的真实标题/作者/日期填进去

4. open命令在浏览器打开 3 个预览，让用户用眼睛挑

5. 用户选完，再 clone 整套模板，逐页改写内容

6. 内容超出原模板槽位时，用同一套设计语言新增页面，禁止换模板，禁止引入新视觉

这套流程的精妙之处在于——它假设了 AI 没品味，强制把"选风格"这步留给人，AI 只负责执行

怎么用

最朴素的用法，把仓库 README 给的那句话原样贴给 Claude Code/Codex/Cursor 就行

Clone https://github.com/zarazhangrui/beautiful-html-templates and follow
the instructions in AGENTS.md to build me a beautiful HTML slide deck.

剩下的事 agent 会按AGENTS.md一步步问你

不想走 agent 流程，纯手动也行

git clone https://github.com/zarazhangrui/beautiful-html-templates.git
cd beautiful-html-templates/templates/ 
<你看上的那套>
open template.html

每个模板目录是自包含的，把整个文件夹复制到自己项目里改文字、改颜色、加页面都很顺手

实测体验

我用软编辑风格（Soft Editorial）把这篇文章转成HTML PPT，过程很丝滑

随便截取几张

• 字体已经用引好了，不用再折腾

• 颜色变量集中在 CSS 顶部，改一个字段全局换肤

• 翻页用 J/K 或方向键，演讲时直接全屏打开浏览器就行

不过也有几个真实的不爽

• 图表/数据可视化没有：模板里基本不带 chart，要做柱状图饼图得自己塞 SVG 或 echarts

• 中文字体支持参差：很多模板的字体栈是为拉丁字母调过的，中文显示有些会"塌"，需要手动覆盖一层中文 fallback

• 导出 PDF 偶尔翻车：浏览器打印有些模板的装饰元素（绝对定位的色块）会跑位

• 32 套听起来多，其实集中在编辑风：design review、founder pitch 这类场景特别富，但学术汇报、路演、企业财报这种偏严肃的没几套合适

适合谁——愿意用 HTML 当 PPT 用的人，写技术分享、产品发布、品牌提案、设计 review 的小团队

不适合谁——只想点一下生成完整 PPT 不想动一行代码的人，这仓库是毛坯房，需要 agent 或人去精装

一点延伸

这事让老章想到的是另一个趋势——HTML 正在重新成为内容载体

Markdown 早就溢出了文字范围（参见前面那篇 Markdown 可视化的文章），HTML 又被重新发现可以替代 PPT、海报、邀请函、电子贺卡

底层逻辑很简单：HTML 是浏览器原生格式，所有人都能打开，AI 训练语料里也最多，agent 写 HTML 比写 PPTX 二进制格式靠谱一万倍

模板仓库其实是这条路上的"标准件"——AI 负责干，人负责挑，标准件越多，AI 干活越靠谱

zarazhangrui/beautiful-html-templates这套思路我蛮喜欢，没把宝押在 AI 自动设计上，而是认清 AI 当前的能力边界，把好东西先存起来给 AI 调用

制作不易，如果这篇文章觉得对你有用，可否点个关注。给我个三连击：点赞、转发和在看。若可以再给我加个，谢谢你看我的文章，我们下篇再见！