zarazhangrui/beautiful-html-templates · 上手攻略
- 仓库：zarazhangrui/beautiful-html-templates
- 链接：https://github.com/zarazhangrui/beautiful-html-templates
- 分类：HTML 幻灯片 · 演示模板 · Agent 生成工具
- 作者：Tom
- 更新：2026-08-07
这是什么
这是一个专门给 AI 编码 agent 使用的 HTML 幻灯片模板库，共收录 34 套模板，每套包含封面页、过渡页、内容页等多种版式。它解决的核心问题是：让 agent 能根据用户的简单描述，自动产出专业级 HTML 演示文稿，而不是每次都生成平庸的默认样式。
每套模板都是一个独立文件夹，包含：
template.html：主模板文件（完整的可运行 HTML）styles.css：样式表deck-stage.js：演示交互逻辑（翻页动画等）index.json：元数据（模板名称、配色、字体、适用场景等）
模板风格覆盖：从「学术期刊风」到「像素复古风」，从「企业蓝专业风」到「日式樱花卡带风」，适合不同场合和情绪需求。
注意：这是一个给 agent 用的库，普通用户可以通过让 AI 编码工具克隆并填充内容来使用，核心使用流程由 agent 遵循 AGENTS.md 操作手册驱动。
解决什么问题
| 痛点 | beautiful-html-templates 对策 |
|---|---|
| AI 生成的 PPT 丑 | 34 套专业设计模板，视觉系统完整 |
| 每次都要手写 CSS | 模板自带样式，直接替换内容即可 |
| 多人协作样式不统一 | 选定模板后所有 slide 继承同一设计系统 |
| 不确定该用哪个模板 | index.json 含 mood/tone/best_for 等元数据，agent 可自动推荐 |
| 模板缺某些版式 | 设计系统延伸规则——缺失版式按模板风格从零设计，保证一致性 |
模板一览
34 套模板按风格分类（部分示例）：
| 模板名 | 风格描述 | 字体 | 适用场景 |
|---|---|---|---|
| soft-editorial | 暖纸 + 鼠尾草/腮红/柠檬色 | Cormorant Garamond serif | 编辑感季度汇报 |
| editorial-forest | 森林绿 + 玫瑰粉 + 奶油白 | Source Serif 4 | 安静季度评审 |
| pin-and-paper | 黄色纸张 + 安全别针插图 + 手写 Caveat | Caveat（手写） | 复古手工感 |
| sakura-chroma | 奶油纸 + 彩虹丝带 + JIS 风格勾选框 | — | 日式复古卡带包装 |
| cobalt-grid | 电光钴蓝斜体 + 坐标纸背景 | — | 科技感演示 |
| vellum | 深海军蓝 + 暖黄斜体 + 铜绿点缀 | Cormorant serif | 学术沉静风 |
| emerald-editorial | 宝石绿 + 海军蓝 + 铜版纸双线装饰 | Bodoni-style serif | 杂志封面商务风 |
| neo-grid-bold | 编辑新粗暴主义 + 霓虹黄点缀 | — | 前卫大胆展示 |
| 8-bit-orbit | 像素艺术霓虹街机风 | — | 游戏/科技/复古主题 |
| bold-poster | 编辑海报风 + Shrikhand 大字报 | Shrikhand display | 视觉冲击力强的演讲 |
| monochrome | 象牙账本纸 + 全黑字 | Lora serif + Jost | 极简无彩色 |
| peoples-platform | 蓝橙红三色 + Alfa Slab + Caveat Brush | activist poster | 社会议题/活动宣言 |
完整 34 套见 仓库 index。
快速使用（给 AI agent 的指令模板）
如果你想让 AI 编码工具帮你生成演示文稿，直接复制这段话：
克隆 https://github.com/zarazhangrui/beautiful-html-templates 并按 AGENTS.md 的说明，
为我构建一套漂亮的 HTML 幻灯片。
Agent 使用流程（详细）
第一步：了解需求
在使用模板前，agent 会问用户两个澄清问题：
- 场合是什么？（如：创始人融资演讲、学术综述、团队品牌宣言、课堂开场等）
- 想要什么情绪/氛围？（如：自信有力、安静文艺、温暖活泼、暗夜奢侈等）
第二步：读取 index.json 并推荐 3 个候选
Agent 读取仓库根目录的 index.json，根据用户的场合 + 情绪匹配模板，选出 3 个风格差异足够大的候选（避免三个模板都是同一风格）。
第三步：生成预览并让用户选择
对每个候选模板：
1. 读取 template.html 了解其视觉系统
2. 取封面页，用用户真实主题替换占位内容
3. 保存为独立预览 HTML（如 previews/01-template-a.html）
4. 在浏览器中打开预览
Agent 发给用户：
"三个候选对比： - [路径 A] - [路径 B] - [路径 C] 选哪个？"
第四步：用户选完后，生成完整 deck
- 克隆用户选中的模板整个文件夹到用户工作区
- 按 AGENTS.md §3 规则填充每页内容
- 页数不够则复制现有布局延伸，页数过多则从底部删除
- 更新页码标签
- 若需模板没有的版式，使用模板设计系统从零设计——不能引入新的视觉语言
第五步：交付
在浏览器打开最终 deck，发送路径给用户。
最小可跑命令
以下供有动手能力的用户参考；若委托给 agent，直接给上面的「AI agent 指令模板」即可。
# 1. 克隆模板库
git clone https://github.com/zarazhangrui/beautiful-html-templates.git
cd beautiful-html-templates
# 2. 查看 index.json（选模板参考）
cat index.json | python3 -m json.tool | less
# 3. 选定模板后，复制其文件夹
cp -r templates/soft-editorial /path/to/your-deck/
# 4. 编辑 template.html 中的占位内容（标题/副标题/作者/日期）
# 5. 用浏览器打开预览
open template.html # macOS
# 或
xdg-open template.html # Linux
# 6. 添加更多 slide：复制已有 slide 块，按内容替换
技术要求：纯 HTML/CSS/JS，无需后端，任意现代浏览器均可打开。字体使用 Google Fonts，需联网加载。
典型适用场景
- 融资/提案 deck：选 cobalt-grid、emerald-editorial、bold-poster 等高冲击视觉风格
- 学术报告：选 vellum（深蓝学术感）、soft-editorial（安静编辑感）
- 品牌/创意展示：选 sakura-chroma（日式复古）、8-bit-orbit（像素风）
- 课堂/工作坊开场：选 pin-and-paper（温暖手工感）、peoples-platform（活力社会议题）
- 内部汇报：选 blue-professional（干净专业）、monochrome（极简无干扰）
坑与注意
| 坑 | 说明 |
|---|---|
| 字体依赖 Google Fonts | 无网络环境无法加载字体，显示降级为系统 fallback |
| 模板非 PowerPoint | 这是 HTML 原生幻灯片，需要浏览器或 PDF 转换工具（如 puppeteer）来导出 |
| 34 套不算海量 | 与 Slidev、 reveal.js 等全功能框架相比，模板数量有限，但每套完成度极高 |
| index.json 需正确解析 | 部分字段（best_for、avoid_for）是自然语言描述，agent 匹配精度依赖 LLM 理解能力 |
| 缺失版式需自设计 | 若 deck 需要模板没有的布局（如双栏对比、三图并排），需按设计系统规则从零造，可能产生不一致风险 |
| 中文支持未专项优化 | 模板主要针对英文场景设计，中文长文本可能在某些版式中溢出或换行异常 |
与同类对比
| 工具 | 类型 | 模板数 | Agent 友好 | 输出格式 | 设计质量 |
|---|---|---|---|---|---|
| beautiful-html-templates | HTML 模板库 | 34 套 | ✅ AGENTS.md 完整操作手册 | HTML | 高（专业设计师作品） |
| Slidev | 开发者幻灯片框架 | 主题系统（可自定义） | 需手写 Markdown | HTML + 主题 | 取决于用户水平 |
| reveal.js | HTML 幻灯片框架 | 官方主题几个 | 基础 | HTML | 基础 |
| Canva | 在线设计工具 | 模板市场海量 | ❌ 不可 AI 驱动 | 图片/PDF | 高 |
| Gamma.app | AI PPT 生成 | 动态 | ✅ AI 原生 | HTML/PPTX | 中高 |
核心差异：beautiful-html-templates 是目前唯一一个专为 AI agent 使用场景设计、提供完整 AGENTS.md 操作手册的 HTML 模板库。34 套模板均由设计师完成，视觉质量有保障，不像一般 HTML 幻灯片框架那样依赖用户自身的设计能力。
一句话推荐结论
如果你需要让 AI 编码工具帮你或你的用户生成高质量演示文稿，又不想折腾 Slidev / reveal.js 的主题配置，beautiful-html-templates 是目前最省心的选择——34 套专业设计模板 + 完整 agent 操作手册，一句话就能驱动。
注意：这是 HTML 原生幻灯片，不是 PPT/PDF，团队协作时需确认对方能接受 HTML 格式或自己转换。
原始 commit/PR/issue：https://github.com/zarazhangrui/beautiful-html-templates