html-ppt-skill Full-Deck 模板全解析：15 套开箱即用的整场演示方案

本文基于 html-ppt-skill 仓库中的 references/full-decks.md 文档，系统讲解 templates/full-decks/ 目录下 15 套「整场演示」模板：8 套从真实项目中提炼的定制模板与 7 套通用场景模板。读完你就能按场景选对模板、理解其视觉基因与结构骨架、掌握键盘导航与演讲者模式等共享运行时能力，并学会在保留结构类名的前提下替换内容完成二次定制。

---

一、什么是 Full-Deck 模板

Full-Deck 模板是自带完整叙事结构的整场 HTML 演示，存放在仓库的 templates/full-decks/ 目录下，每个模板为一个独立文件夹，包含三个约定文件：

• index.html — 完整的多页 deck：封面（cover）→ 章节（section）→ 内容（content）→ 代码（code）→ 图表或架构图（chart/diagram）→ CTA → 致谢（thanks），通常 7 页以上；
• style.css — 以 .tpl-<name> 类前缀做作用域隔离，保证多套模板可以在同一页面共存而不互相冲突；
• README.md — 简述设计动机、灵感来源与适用场景。

所有模板统一从技能根目录引入共享资源：assets/fonts.css（字体）、assets/base.css（基础样式）与 assets/runtime.js（运行时）。演示时用 ← → 或 Space 翻页，F 进入全屏，O 打开总览缩略图。

选用 Full-Deck 模板的核心判断标准是：你需要一整套视觉连贯、立场鲜明的整场演示，而不是把单页布局拼凑在一起。每个模板的视觉辨识度都足够高，一眼即可认出。

如果只需要单个页面（封面、对比、时间线、架构图等），仓库另有 templates/single-page/ 的 37 个单页布局可用；二者配合可以快速搭出混合型演示。

---

二、8 套定制模板：来源、视觉基因与适用场景

下面 8 套模板都是从真实演示项目中提炼而来，每套都有自己的「设计母题」——从源码灵感、配色系统到信息层级都高度自洽。

1. xhs-white-editorial — 白底杂志风

• 源码灵感：20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html + 20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html
• 核心视觉特征：纯白背景、顶部 10 色彩虹条、80–110px 巨型展示标题、紫→蓝→绿→橙→粉的渐变品牌文字、macaron 软色卡片组（soft-purple / pink / blue / green / orange）、黑底白字的 .focus 强重点胶囊、带淡阴影的 hero 引言框。
• 适用场景：既能当小红书图文、又能当横屏 deck 的白底内容帖；文字多、重点密集、需要一眼抓住关键词的内容；以中文读者为主。
• 路径：templates/full-decks/xhs-white-editorial/index.html

2. graphify-dark-graph — 暗底知识图谱

• 源码灵感：20260413-graphify/ppt/graphify.html
• 核心视觉特征：#06060c → #0e1020 深夜渐变底、漂移的模糊光斑（orb）、封面上的 SVG 力导向图谱覆盖层、彩虹位移渐变标题、JetBrains Mono 命令行光晕（.cmd-glow）、玻璃拟态卡片（warm / blue / green / purple / danger 五变体）。强调色为琥珀 #e8a87c、薄荷 #7ed3a4、雾蓝 #7eb8da、丁香 #b8a4d6。
• 适用场景：开发者工具 / CLI / 知识图谱 / 数据可视化类产品的发布；希望现场演示呈现「AI 原生 + 科幻 + 温度」气质的场合。
• 路径：templates/full-decks/graphify-dark-graph/index.html

3. knowledge-arch-blueprint — 奶油蓝图架构

• 源码灵感：20260405-Karpathy-知识库/20260405 架构图v2.html
• 核心视觉特征：奶油纸底 #F0EAE0、单一锈红 accent #B5392A、48px 蓝图网格遮罩、硬朗 2px 黑边卡片、一字排开的 pipeline step-box（其中 hero box 凸起）、右侧锈红 insight callout、Playfair 衬线大号数字、SVG 虚线反馈回路箭头。零渐变、零柔阴影，克制到极致。
• 适用场景：系统架构图、数据流向图、工程白皮书；需要严肃、可打印、适合直接截图放进 README 的内容。
• 路径：templates/full-decks/knowledge-arch-blueprint/index.html

4. hermes-cyber-terminal — 暗终端 honest-review

• 源码灵感：20260414-hermes-agent/ppt/hermes-record.html + hermes-vs-openclaw.html
• 核心视觉特征：#0a0c10 黑底、56px 赛博网格 + CRT vignette + 扫描线叠层、窗口红绿灯（traffic-light）chrome、$ prompt 开头的命令行式标题、薄荷绿 #7ed3a4 glow 大字、全文 JetBrains Mono、仅描边的柱状图、闪烁光标、琥珀/绿/红分级标签、深色代码盒。
• 适用场景：对 CLI / Agent / 开发者工具的评测，展示 trace、diff 与跑分数据；需要「技术人 honest review」的即时语气；适合长 trace / 长代码内容。
• 路径：templates/full-decks/hermes-cyber-terminal/index.html

5. obsidian-claude-gradient — GitHub 暗紫渐变

• 源码灵感：20260406-obsidian-claude/slides.html
• 核心视觉特征：GitHub-dark #0d1117 底、紫 + 蓝 radial ambient 光晕 + 60px 遮罩网格、居中对齐布局、紫色圆角 pill 标签、三停渐变文字 #a855f7 → #60a5fa → #34d399、GitHub 风格代码配色（#010409 背景 + 紫/蓝/橙/绿 token）、紫色左边框 highlight 块。
• 适用场景：开发者工作流 / MCP / Agent / 开发者工具教程；气质接近 GitHub Blog / Linear Changelog；配置 + 步骤密集的内容。
• 路径：templates/full-decks/obsidian-claude-gradient/index.html

6. testing-safety-alert — 红琥珀警示

• 源码灵感：20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html
• 核心视觉特征：顶部与底部 45° 红黑斜条纹警示带、红色删除线式否定大字标题、L1/L2/L3 三档色卡（绿/琥珀/红）、带圆形状态指示灯的 alert-box、带红色左边框的 policy-yaml 深色代码块 + bad 关键词高亮、红/绿对勾 checklist、Q1 事故堆叠柱状图。
• 适用场景：安全 / 风控 / 事故复盘 / 红队测试 / AI 上线前评估 / policy-as-code；需要让观众立刻感到「这事严肃，别马虎」。
• 路径：templates/full-decks/testing-safety-alert/index.html

7. xhs-pastel-card — 柔和马卡龙慢生活

• 源码灵感：20260412-obsidian-skills/html/xhs-obsidian-skills.html + 与 20260409 v2-白底版共享的 pastel 软色系统
• 核心视觉特征：奶油 #fef8f1 底、三颗柔光模糊 blob、Playfair italic 衬线展示标题与 sans 正文混排、整色 28px 圆角马卡龙卡片（peach / mint / sky / lilac / lemon / rose）、斜体 Playfair 序号 01-04、SVG 环形图、chip + page 顶部条。
• 适用场景：生活方式 / 个人成长 / 慢生活 / 情感向内容；想要「杂志、手作、不那么科技」的气质；适合「慢」「休息」「温柔」类主题。
• 路径：templates/full-decks/xhs-pastel-card/index.html

8. dir-key-nav-minimal — 方向键 8 色极简

• 源码灵感：20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html
• 核心视觉特征：8 张幻灯片各配独立单色背景（indigo / cream / crimson / emerald / slate / violet / white / charcoal），每张有自己的 accent 色、160px 巨型展示标题 + 4px 短粗 accent 分隔线、→ 前缀的 Mono 列表、左下角 ← → 键盘提示 + 右下角页码标签、大量呼吸留白。
• 适用场景：keynote 式极简演讲——「有话要说、没太多图」，一张幻灯片只讲一件事；公开分享 / 发布会 / 演讲稿。
• 路径：templates/full-decks/dir-key-nav-minimal/index.html

---

三、7 套通用场景模板：拿来即用的内容骨架

与上文的定制模板不同，下面 7 套不是从单一来源提取的，而是为最常见的演示工作设计的通用脚手架——开箱即带完整内容结构，视觉各不相同：

#	名称	页数	视觉气质	适用场景
9	pitch-deck	10	白底 + 蓝→紫渐变，YC/VC 风格，超大数字、traction 图表	融资路演、初创 pitch、投资人会议
10	product-launch	8	暗色 hero + 浅色内容，暖橙→桃色渐变，特性卡片、定价层级、CTA	产品发布、launch keynote
11	tech-sharing	8	GitHub-dark、JetBrains Mono、终端代码块、议程 + Q&A	技术分享、内部技术 talk、会议演讲
12	weekly-report	7	企业级清晰度、8 格 KPI 网格、shipped 列表、8 周柱状图、下周计划表	周报、团队状态同步、业务 review
13	xhs-post	9	3:4 @ 810×1080、暖 pastel、虚线贴纸卡片、页码圆点	小红书图文、Instagram carousel
14	course-module	7	暖纸底 + Playfair 衬线、常驻左侧学习目标侧栏、MCQ 自测	教学模块、在线课程、工作坊单元
15	presenter-mode-reveal 🎤	6	演讲者模式专用 · tokyo-night 默认 · 5 主题 T 键切换 · 每页带 150–300 字逐字稿示例	技术分享 / 演讲 / 课程——需要按 S 看逐字稿的场景

每个文件夹同样是 index.html + 作用域 style.css（.tpl-<name> 前缀）+ README.md 的三件套结构。

值得注意的模板细节

pitch-deck（templates/full-decks/pitch-deck/）是经典的 10 页 YC/VC 种子轮路演结构：cover → problem → solution → product → market → business model → traction → team → ask → thanks。它的核心视觉变量全部收敛在 .tpl-pitch-deck 的 CSS 自定义属性上，例如 style.css 中的：

.tpl-pitch-deck{
  --bg:#ffffff; --text-1:#0d1130; --text-2:#4a5070;
  --accent:#3b5bff; --accent-2:#7a46ff; --accent-3:#d94cff;
  --grad:linear-gradient(135deg,#3b5bff 0%,#7a46ff 55%,#d94cff 100%);
  --radius:20px; --radius-lg:28px;
  ...
}

换肤只需覆盖 --grad 这一个变量即可整体重染色——这就是「结构性类名 + 设计变量」解耦带来的灵活性。

xhs-post（templates/full-decks/xhs-post/index.html）是为小红书九宫格设计的 3:4 竖版，它在 .deck 上显式写死画布尺寸：

<div class="deck" data-w="810" data-h="1080">

每张 .slide 直接按 810×1080 截图导出即可保持比例，右上角带 N / 9 页码贴纸，最后一页带话题 tag。

course-module 的亮点是内容页常驻的左侧学习目标侧栏：随演讲进度逐个打勾，学生始终知道自己在模块中的位置。

🎤 无论技术分享、课程还是路演，references/full-decks.md 都推荐优先使用 presenter-mode-reveal；也可以参考 references/presenter-mode.md 指南，给其他模板手动添加 <aside class="notes"> 逐字稿。

---

四、演讲者模式模板实战：presenter-mode-reveal

这是 15 套模板中功能最特殊的一套：专为带逐字稿的技术分享设计，核心卖点是真正可用的「磁吸卡片式演讲者视图」——当前页预览 + 下一页预览 + 大字号逐字稿 + 计时器，4 个卡片可任意拖拽缩放，全部内置在共享运行时 assets/runtime.js 中，零外部依赖。

快速开始

cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
open examples/my-talk/index.html

键盘操作速查

键	动作
S	打开演讲者窗口（新窗口弹出，原页面保持观众视图不动）
T	循环切换主题（5 种预设）
← →	翻页
Space / PgDn	下一页
F	全屏
O	总览缩略图
R	重置计时器（仅演讲者视图下有效）
Esc	关闭所有浮层

主题切换机制

模板在 <html> 标签上声明主题列表，按 T 循环切换：

<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">

data-themes 可替换为 assets/themes/ 下任意主题（如 aurora、cyberpunk-neon、rose-pine 等）；若想固定主题，直接改 <link id="theme-link" href="..."> 即可。

逐字稿写作规范

每一页的 <aside class="notes"> 里写 150–300 字，三条铁律：

1. 不是讲稿，是提示信号 —— 核心点加粗、过渡句成段、数据列清楚；
2. 150–300 字/页 —— 按 2–3 分钟/页的节奏；
3. 用口语写 —— 「因此」→「所以」；「该方案」→「这个方案」；读一遍不拗口才对。

示例：

<aside class="notes">
  <p>大家好，今天跟大家聊一个 <strong>很多人忽略的问题</strong>——...</p>
  <p>我先抛一个观点：<em>做 PPT 和讲 PPT 是两件事</em>。</p>
  <p>接下来我会用 3 个例子证明这个观点...</p>
</aside>

支持的 inline 标签：<strong>（高亮，橘色）、<em>（斜体强调，蓝色）、<code>（等宽字体）、<p>（分段，推荐每段对应 30–60 秒内容）。

演讲者窗口的 4 张卡片

按 S 弹出的窗口包含：

• 🔵 CURRENT — 当前页 iframe 预览，加载 ?preview=N 模式，像素级完美，与观众端共享同一份 CSS / 主题 / 字体；
• 🟣 NEXT — 下一页预览，帮助准备过渡；
• 🟠 SPEAKER SCRIPT — 大字号逐字稿，可滚动；
• 🟢 TIMER — 经过时间 + 页码 + Prev / Next / Reset 按钮。

卡片操作：拖顶部条（彩色圆点 + 标题）移动卡片，拖右下角调整大小；位置与尺寸自动存入 localStorage，下次打开恢复；底部「重置布局」按钮一键恢复默认排列。

底层实现：preview 模式与双向同步

从 assets/runtime.js 源码可以看到这套能力的具体实现路径：

• 运行时解析 URL 中的 preview 参数（/[?&]preview=(\d+)/）进入 preview-only 模式：直接展示指定 slide、隐藏演讲者专属 UI（.progress-bar, .notes-overlay, .overview），并给 <html>/<body> 打上 data-preview="1" 标记，同时自动探测主题基础路径以便在预览中同步换主题；
• 父窗口与 iframe 通过 postMessage 通信：preview-goto 切换可见 slide 不重新加载（iframe 只加载一次，翻页无闪烁），preview-theme 让预览中的 <link id="theme-link"> 跟随观众窗口换 CSS；
• 两个窗口通过 BroadcastChannel 双向同步翻页状态（源码中 new BroadcastChannel(CHANNEL_NAME) 并 postMessage({ type:'go', idx:n })）。

---

五、作者注意事项：如何正确地二次创作

references/full-decks.md 末尾给出了三条重要的创作纪律：

1. 每套模板的 CSS 都以 .tpl-<name> 做作用域，因此两套甚至多套模板可以在同一页面同时加载而不冲突——这是混排多个模板或做模板对比页的基础；
2. 可以替换演示内容，但保留结构性类名（.slide、.h1、.kicker、.card、.stack 等）——正是这些结构类名赋予了每套模板的视觉身份，删改它们会破坏模板的设计系统；
3. 共享运行时 assets/runtime.js 已内置键盘导航、全屏、总览网格、主题循环，你不需要为这些能力写任何 JavaScript。

关于图表与动效

• 模板中的图表均为手写内联 SVG，无 CDN 依赖（这也是这些模板可以离线双击即用的原因）；若需要交互式数据可视化，可自行替换为 chart.js / ECharts。
• 需要给元素加动效时，在元素上加 data-anim="fade-up" 等属性即可，具体动画清单见 references/animations.md，动效样式来自 assets/animations/animations.css 与 assets/animations/fx-runtime.js。

整体资源依赖一览

所有 full-deck 模板在 <head> 中的引资源顺序保持一致，以 templates/full-decks/presenter-mode-reveal/index.html 为例：

<link rel="stylesheet" href="../../../assets/fonts.css">
<link rel="stylesheet" href="../../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../../assets/themes/tokyo-night.css">
<link rel="stylesheet" href="../../../assets/animations/animations.css">
<link rel="stylesheet" href="style.css">

即：字体 → 基础样式 → 主题 → 动画 → 模板自身样式。模板的 style.css 永远只承载模板专属视觉，公共能力全部下沉到 assets/ 共享层——这也是「换主题只需改一个 data-themes 属性」能够成立的架构前提。

---

六、选型速查与延伸阅读

你的诉求	选哪套
融资路演、投资人会议	pitch-deck
产品发布、launch 现场	product-launch
技术分享、带逐字稿的正式演讲	presenter-mode-reveal
开发者工具 / 知识图谱 / 数据可视化发布	graphify-dark-graph
系统架构 / 数据流 / 白皮书式严肃内容	knowledge-arch-blueprint
CLI / Agent 工具评测（honest review）	hermes-cyber-terminal
MCP / 工作流 / 配置步骤类教程	obsidian-claude-gradient
安全风控 / 事故复盘 / 红队报告	testing-safety-alert
周报 / 团队同步 / 业务 review	weekly-report
公司内技术分享 / 会议 talk	tech-sharing
教学模块 / 在线课程 / 工作坊	course-module
小红书图文 / Instagram carousel	xhs-post
白底杂志风、重点密集的中文内容	xhs-white-editorial
生活方式 / 情感 / 慢生活主题	xhs-pastel-card
keynote 式极简演讲、一页一观点	dir-key-nav-minimal

深入理解共享运行时（键盘导航、overview、主题循环、preview 模式）可阅读 assets/runtime.js；单页布局搭配方案见 references/layouts.md；动画系统见 references/animations.md；主题切换机制见 references/themes.md。完整的模板演示可打开仓库根目录的 templates/full-decks-index.html 与 templates/deck.html 在浏览器中直接体验。