34 套精心打磨的 HTML 幻灯片模板，一行命令让 AI Agent 自动帮你做出惊艳 PPT！
💡 做演示文稿最痛苦的不是写内容，而是排版和设计——配色、字体、间距、装饰，哪一个搞不好都像 PPT 模板批发市场出来的。Beautiful HTML Templates 把这一切都解决了：34 套专业级 HTML 幻灯片模板，AI Agent 自动匹配风格、克隆模板、替换内容——你只需要说"我想做什么"，剩下的交给 Agent。
目录
- 1. 项目简介
- 2. 核心理念：Tone-First Matching
- 3. 34 套模板全览
- 4. Agent 工作流：6 步出片
- 5. 设计系统规则：什么是可以改的？
- 6. 5 大精选模板深度解读
- 7. 快速上手
- 8. 适用场景与优缺点
- 9. 总结
📌 1. 项目简介
市面上 PPT 模板千千万，但大多数都有一个通病：填完内容就变丑。为什么？因为模板和内容之间缺少一个"翻译层"——字体怎么换、配色怎么调、装饰元素留不留，全靠用户自己判断，而大多数用户不是设计师。
Beautiful HTML Templates 从根本上解决了这个问题——它不是给你一堆模板让你自己选、自己改，而是让 AI Agent 帮你选、帮你改。
它是一个专为 Coding Agent 设计的 HTML 幻灯片模板库，包含 34 套精心打磨的视觉系统。每套模板都有完整的元数据标签（mood / tone / occasion / formality），Agent 可以根据你的需求自动匹配最合适的模板，然后克隆、替换内容、甚至扩展新布局——全程不需要你打开任何设计软件。
🎯 一句话定义：34 套专业 HTML 幻灯片模板 × AI Agent 自动匹配 = 一句话出片。
- 🔗 GitHub 地址：https://github.com/zarazhangrui/beautiful-html-templates
- 🛠️ 适用于：任何支持文件读写的 Coding Agent（Claude Code / Cursor / Windsurf 等）
- 📐 每套模板：完整 HTML + CSS + JS + 元数据 JSON + 截图预览
🧠 2. 核心理念：Tone-First Matching
这是 Beautiful HTML Templates 最独特的设计哲学——按"感觉"匹配，不按"行业"匹配。
传统方式 vs Tone-First
| “你是做金融的？用深蓝色模板” | “你想让人感觉什么？” → 按感觉匹配 |
| “你是做教育？用绿色模板” | “你的受众是谁？” → 按正式度筛选 |
| 行业 = 模板风格 | 感觉 = 模板风格 |
这意味着：
- 一个"自信编辑风"的模板完全可以承载一场技术演讲——如果演讲者想传递"品味先行"的信号
- 一个"活泼粉彩"的模板完全可以承载一场财务回顾——如果汇报者想打破传统财务报告的刻板印象
- 用户的品味永远是第一位的
元数据驱动匹配
每套模板都有 8 维元数据标签：
| mood | 情感形容词，匹配用户的"感觉"关键词 | confident, playful, editorial |
| occasion | 适用场景，软信号不是硬过滤 | founder pitch, design review |
| tone | 声音/个性描述 | bold, literary, warm |
| formality | 正式度（low → high） | medium-high |
| density | 每页内容密度 | high |
| scheme | 明暗（light / dark / mixed） | light |
| best_for | 最适合的"感觉"+场景 | 自信编辑风的产品发布 |
| avoid_for | 不适合的场景（软警告） | 需要安静的正式场合 |
🎨 3. 34 套模板全览
按气质分类，一目了然：
📰 编辑/杂志风（10 套）
| Soft Editorial | 温暖编辑 | 暖纸 + 鼠尾草绿/腮红/柠檬 | Cormorant Garamond | 温柔的季度回顾 |
| Editorial Forest | 安静编辑 | 森林绿 + 灰粉 + 暖奶油 | Source Serif 4 | 安静有意图的季度审阅 |
| Emerald Editorial | 杂志封面 | 翡翠 + 海军蓝 + 纸色 | Bodoni-style serif | 杂志封面商业演示 |
| Editorial Tri-Tone | 三色编辑 | 灰粉 + 芥末奶油 + 深酒红 | Bricolage + Instrument Serif | 三色编辑系统 |
| Cobalt Grid | 设计研究 | 钴蓝斜体 + 方格纸 | Italic serifs | 设计趋势/研究报告 |
| Vellum | 学者气质 | 深海军蓝 + 暖黄斜体 + 青绿 | Cormorant serifs | 安静的学术/文化演示 |
| Neo-Grid Bold | 新粗野主义 | 米白 + 单一霓虹黄 | Editorial bold | 产品发布/设计评审 |
| Bold Poster | 海报气质 | 单一消防红强调 | Shrikhand massive display | 品牌宣言/创始人愿景 |
| Broadside | 报纸头条 | 深色 + 单一火橙 + 中英双语 | Latin/Chinese type stack | 品牌宣言/中英双语 |
| Biennale Yellow | 荷兰编辑 | 太阳黄 + 暖羊皮纸 + 靛蓝衬线 | Atmospheric gradients | 展览/艺术机构/设计会议 |
🌿 温暖/自然风（5 套）
| Grove | 森林古典 | 森林绿 + 奶油色 + 铁锈 | Playfair serifs | 古典优雅的文化演示 |
| Mat | 中世纪现代 | 深鼠尾草 + 骨白 + 焦橙 | Mid-century modern | 木质调的温暖品牌 |
| Cartesian | 安静古典 | 暖中性色 | Playfair serifs | 投资论点/白皮书/研究报告 |
| Coral | 温暖图形 | 奶油 + 珊瑚 + 近黑 | Bebas Neue oversized | 时尚/美妆/生活方式 |
| Long Table | 晚餐俱乐部 | 暖奶油 + 铁锈红 | Uppercase grotesk + Fraunces | 温暖的聚会/品牌 |
🎮 活泼/趣味风（7 套）
| Daisy Days | 阳光友好 | 粉彩 + 手绘雏菊/星星/彩虹 | Friendly | 教育/儿童/社区/婚礼 |
| Scatterbrain | 便利贴 | 粉彩便利贴 + 手写字 | Caveat + Shrikhand + Zilla Slab | 头脑风暴/创意工坊 |
| Playful | 阳光蜜桃 | 蜜桃色 + Syne display | Friendly indie | 独立产品发布/团队启动 |
| Capsule | 胶囊卡片 | 骨白 + 全粉彩调色板 | Pill-shaped cards | 生活方式/DTC/美妆 |
| Creative Mode | 创意自信 | 奶油纸 + 多彩(绿/粉/橙/黄) | Archivo Black | 创意代理/设计工作室 |
| Pin & Paper | 手工纸 | 黄纸 + 安全别针插画 + 墨蓝手写 | Caveat handwritten | 手工艺/教育/温暖品牌 |
| Sakura Chroma | 日系复古 | 奶油纸 + 彩虹斜纹 + JIS 复选框 | Condensed bold | 日式美学/包装设计/文化 |
🏛️ 专业/商务风（4 套）
| Blue Professional | 现代专业 | 奶油纸 + 电钴蓝 | Clean modern | B2B SaaS/咨询/投资者报告 |
| Signal | 机构权威 | 深海军蓝 + 骨白 + 暗金 | Institutional | 机构级/正式商务/金融 |
| Monochrome | 极简单色 | 象牙账本纸 + 全黑 | Lora + Jost | 极简/学术/不需要色彩 |
| Stencil & Tablet | 考古品牌 | 骨白纸 + 模板切割标题 + 六色大地 | Stencil-cut | 品牌/考古/手工 |
🔥 暗色/高冲击力风（5 套）
| Studio | 设计工作室 | 黑色画布 + 电光黄 | High-voltage | 设计工作室/创意品牌 |
| Pink Script | 午夜奢华 | 黑色 + 热粉 + 珍珠奶油 | Instrument Serif | 深夜编辑奢华/时尚 |
| 8-Bit Orbit | 像素街机 | 深海军蓝 + 霓虹像素 | Pixel-art neon | 游戏/Hackathon/Web3 |
| BlockFrame | 新粗野 | 粉彩霓虹色块 + 粗黑边框 | Neobrutalist | 创意代理/独立SaaS |
| Retro Windows | Windows 95 | 灰色标题栏 + MS Sans Serif | Pixel typography | 复古/怀旧/开发者 |
✊ 特殊/个性风（3 套）
| People’s Platform | 活动家海报 | 蓝/橙/红 + 奶油 | Alfa Slab + Caveat Brush | 社会运动/品牌宣言 |
| Retro Zine | 复古小册子 | 米色纸 + 绿色强调 | Bebas Neue + Caveat | Riso印刷/独立出版 |
| Raw Grid | 新粗野网格 | 粗边框 + 偏移阴影 + 粉/鼠尾草/墨 | Neo-brutalist | 设计评审/创意评审 |
🤖 4. Agent 工作流：6 步出片
Beautiful HTML Templates 为 Agent 定义了严格的 6 步工作流，每一步都有明确的输入/输出和规则：
Step 1 — 询问场合与感觉
🗣️ "两个快速问题：
不跳过这一步。 即使用户的描述看起来很明确，也要问——因为用户的品味往往比需求描述透露更多信息。
Step 2 — 读取 index.json，选出 3 个候选
Agent 读取 index.json，根据用户的场合+感觉，匹配每套模板的 mood、tone、best_for、formality，选出 3 个风格差异足够大的候选——不是三个编辑风，而是一个编辑风 + 一个温暖替代 + 一个重新诠释的意外之选。
Step 3 — 构建标题页预览
对每个候选模板：
Step 4 — 浏览器打开 3 个预览，让用户选
🗣️ "三个选项对比：
哪个感觉对？"
Show, Don’t Tell——一个标题页预览胜过千言万语的描述。
Step 5 — 用选定模板构建完整演示
Step 6 — 打开浏览器，交付文件
🗣️ “完成。你的演示文稿在 /path/to/deck/template.html——已在浏览器中打开。”
🏗️ 5. 设计系统规则：什么是可以改的？
Beautiful HTML Templates 对"改什么"有严格定义——这不是限制，而是保护设计一致性的关键：
✅ 永远保留（这些就是设计系统本身）
| 字体 | 排版就是设计系统。Cormorant Garamond 不是"跟 Inter 差不多"——它是整个气质的根基 |
| 配色 | 所有 :root CSS 变量和颜色值。即使微小的强调色偏移也会破坏调色板和谐 |
| 布局网格 | 网格列、绝对定位、flex 层级——它们定义了视觉节奏 |
| 幻灯片级 CSS 类 | .s-toc、.slide–quote、.layout-cover——这些承载了视觉身份 |
| 装饰元素 | 角括号、纸纹、几何图形、手绘涂鸦——它们是系统的一部分，不是可选装饰 |
| 导航运行时 | deck-stage.js / 键盘处理 / scroll-snap——无论模板用什么，继续用 |
✅ 永远替换（这是用户的内容）
- 标题 <h1> / <h2> / <h3>
- 正文 <p>、列表项、说明文字
- 数字和统计值（47%、2.4M、+142%）
- 姓名、日期、署名
- 章节标签（[Topic]、[Year]、[Studio] 等占位符）
- 图片占位符 → 用户的真实图片
⚠️ 扩展新布局的 7 条铁律
当用户的演示需要模板中没有的布局时，Agent 必须用模板现有的设计系统从零设计：
检验标准： 把新幻灯片夹在两张现有幻灯片之间打开——如果它看起来"属于"这套模板，成功了；如果它看起来像另一个模板嫁接过来的，失败了。
🌟 6. 5 大精选模板深度解读
📰 Soft Editorial — 温暖编辑的标杆
- 视觉系统： Cormorant Garamond 衬线字体铺在温暖纸色上，鼠尾草绿、腮红粉、柠檬黄三色点缀
- 气质： 安静、温暖、有品味——像一本精致的独立杂志
- 最佳场景： 季度回顾、研究综合、文化机构、任何需要"温暖但专业"的场合
- formality： medium-high — 不失庄重，但不会冷冰冰
- 为什么特别： 三色点缀系统（sage / blush / lemon）是点睛之笔——不是单色强调，而是精心调配的三色和弦
🌸 Sakura Chroma — 日系复古的独特存在
- 视觉系统： 奶油纸底 + 对角彩虹丝带 + 粗体压缩字 + JIS 风格复选框
- 气质： 复古日式磁带包装美学——精密、有仪式感、带着昭和时代的温柔
- 最佳场景： 日式美学品牌、包装设计、文化展览、任何需要"异域精致感"的场合
- formality： medium — 不是严肃商务，但绝不轻浮
- 为什么特别： JIS 风格复选框 + 对角彩虹丝带是全球模板库中独一无二的设计语言
🖥️ Retro Windows — 怀旧像素的极致还原
- 视觉系统： Windows 95 灰色标题栏 + MS Sans Serif + 像素排版
- 气质： 全开怀旧——灰色 3D 边框、像素字体、完整的 Win95 视觉还原
- 最佳场景： 开发者演示、Hackathon、技术分享、任何想"穿越回 90 年代"的场合
- formality： low — 但低正式度恰恰是它的魅力
- 为什么特别： 不是"借鉴"复古，而是"还原"复古——像素级精确
🏛️ Broadside — 中英双语的编辑力量
- 视觉系统： 深色编辑画布 + 单一火橙强调 + 拉丁/中文双语字体栈
- 气质： 报纸头条般的冲击力——大声、有立场、不可忽视
- 最佳场景： 品牌宣言、创始人愿景、中英双语演示、杂志/文化提案
- formality： medium-high — 戏剧性不等于不正式
- 为什么特别： 20 张幻灯片（是模板中最多的）+ 原生双语支持——国际团队的福音
🟡 Biennale Yellow — 荷兰编辑的艺术海报
- 视觉系统： 太阳黄 + 暖羊皮纸 + 深靛蓝衬线 + 日光辉光渐变
- 气质： 艺术双年展海报——温暖、有深度、带着文化机构的分量
- 最佳场景： 展览/双年展、艺术机构、设计/字体会议、策展提案、博物馆季刊
- formality： high — 文化机构的正式感
- 为什么特别： 日光辉光渐变（sun-glow gradients）赋予每张幻灯片一种"被阳光照射"的氛围感
🚀 7. 快速上手
一句话开始
复制这段话给你的 Coding Agent：
Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck.
工作流程
1. Agent 询问 → 你回答场合 + 想要的感觉
2. Agent 选 3 个候选 → 构建标题页预览
3. 你看预览 → 选一个
4. Agent 构建完整演示 → 浏览器打开 → 交付
技术要求
- 任何支持文件读写的 Coding Agent（Claude Code / Cursor / Windsurf / GitHub Copilot 等）
- 浏览器（用于预览和最终查看）
- 无需 Node.js / npm / 任何构建工具
⚖️ 8. 适用场景与优缺点
✅ 适合你，如果……
- 你用 Coding Agent，想快速生成高质量 HTML 演示文稿
- 你不是设计师，但想要有设计感的 PPT
- 你需要给不同场合不同风格的演示文稿
- 你做技术分享/产品路演/品牌宣言/学术报告
- 你需要中英双语演示（Broadside 模板原生支持）
- 你追求零依赖、长期可用的 HTML 格式
❌ 可能不适合，如果……
- 你不使用 Coding Agent（核心依赖）
- 你需要原生 PowerPoint 格式（.pptx）
- 你需要复杂动画/视频嵌入
- 你需要多人协作编辑
- 你需要精细到像素级的自定义设计
优缺点对比
| 🎨 视觉质量 | ⭐⭐⭐⭐⭐ | 34 套精心打磨的视觉系统，每套有独特的设计语言 |
| 🤖 Agent 集成 | ⭐⭐⭐⭐⭐ | 完整的 AGENTS.md 操作手册 + index.json 元数据驱动 |
| 🎯 匹配精度 | ⭐⭐⭐⭐⭐ | 8 维元数据标签 + Tone-First 哲学 |
| 📦 零依赖 | ⭐⭐⭐⭐⭐ | 纯 HTML/CSS/JS，双击即用 |
| 🔄 可扩展性 | ⭐⭐⭐⭐⭐ | 7 条铁律保证新布局与模板一致 |
| 📐 设计规范 | ⭐⭐⭐⭐⭐ | "保留/替换"规则 + "不混搭"铁律 |
| 🌍 多语言 | ⭐⭐⭐ | Broadside 原生中英双语，其他模板需要适配 |
| 🎬 动画效果 | ⭐⭐⭐ | 依赖各模板自身的 CSS 动画，非重点特性 |
📚 9. 总结
Beautiful HTML Templates 不是又一个 PPT 模板网站——它是 AI Agent 时代的演示文稿基础设施：
🌟 推荐指数：⭐⭐⭐⭐⭐（5/5）
- 适合：使用 Coding Agent 的任何人，尤其是非设计师但追求审美的演讲者
- 亮点：34 套模板 × Tone-First 匹配 × Agent 6 步工作流 × 零依赖
- 不足：强依赖 Coding Agent；不支持原生 PPT 格式；动画效果有限
一句话总结：如果你用 AI Agent，又想做出有审美的演示文稿——这是目前最完整的解决方案。34 套模板，总有一套是你的感觉。
📢 项目链接：https://github.com/zarazhangrui/beautiful-html-templates 💡 一句话开始：Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck.
标签：#HTML模板 #演示文稿 #CodingAgent #PPT #设计系统 #ToneFirst
