关于 revealjs-presenter
revealjs-presenter 是一项写作技能,可将提纲或文档转为 RevealJS 演示文稿。它指导主题选择、幻灯片结构与内容节奏,并生成独立的 HTML 文件。
主要功能
- 01将提纲转换为幻灯片
- 02按主题规划内容与样式
- 03复用幻灯片类型与组件
- 04制作内嵌图表和示意图
- 05规划演示文稿节奏
适用场景
- 01根据提纲制作路演演示文稿
- 02将文档改编为技术演讲
- 03按选定主题制作教学幻灯片
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ jwynia/ agent-skills --skill revealjs-presenter安装后在 Claude Code 中输入/revealjs-presenter确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
themes/bold.mdcorporate.mddelft.md详细介绍
RevealJS 演示者技能
何时使用此技能
适用于以下情况:
- 根据内容/大纲创建 RevealJS 演示文稿
- 将文档内容转换为幻灯片格式
- 制作融资演示文稿、技术演讲或教育类演示文稿
- 用户要求“幻灯片”“演示文稿”“演示文稿套件”或提到 RevealJS
此技能会生成一个独立的 HTML 文件,其中嵌入 CSS 并引用 CDN。
第 1 部分:RevealJS 基础
1.1 必需配置
始终使用以下设置初始化 RevealJS:
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
backgroundTransition: 'fade',
width: 1920,
height: 1080,
margin: 0.08,
minScale: 0.2,
maxScale: 2.0
});
这些值的用途:
center: true— 让 RevealJS 处理垂直居中。不要用 section 上的 flexbox 与其对抗。width: 1920, height: 1080— 标准 HD 比例。内容会自动缩放。margin: 0.08— 为视口边缘留出余量。transition: 'fade'— 专业、不分散注意力。避免使用 'zoom'、'convex' 等效果。
1.2 基础 HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PRESENTATION TITLE]</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Theme variables and styles go here */
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
<script>
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
backgroundTransition: 'fade',
width: 1920,
height: 1080,
margin: 0.08,
minScale: 0.2,
maxScale: 2.0
});
</script>
</body>
</html>
1.3 基础 CSS 重置
应用以下样式以统一 RevealJS 的行为:
/* === RESET & NORMALIZATION === */
.reveal {
font-family: var(--font-body);
font-weight: 400;
color: var(--text-primary);
}
.reveal .slides section {
text-align: left;
padding: 60px;
box-sizing: border-box;
}
.reveal .slides section.centered {
text-align: center;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-primary);
text-transform: none;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 0.5em 0;
}
.reveal p {
margin: 0 0 1em 0;
line-height: 1.5;
}
.reveal ul, .reveal ol {
margin: 0;
padding: 0;
list-style-position: outside;
margin-left: 1.5em;
}
.reveal li {
margin-bottom: 0.5em;
line-height: 1.4;
}
第 2 部分:主题选择
主题是完整的规范。 生成任何幻灯片前,请先阅读 themes/ 目录中相应的主题文件。主题会同时控制视觉样式和内容策略。
2.1 主题控制的内容
每个主题文件都指定:
- CSS 变量 — 颜色、字体大小、间距、字体
- 排版应用方式 — CSS 变量如何应用于各元素
- 字数限制 — 每种幻灯片类型的最大字数
- 幻灯片类型偏好 — 哪些类型优先使用、少用或避免
- 内容节奏 — 冲击型幻灯片与信息型幻灯片的比例
- 结构规则 — 项目符号数量上限、卡片数量、拆分指导
2.2 默认主题
除非用户另有指定,否则使用 themes/bold.md。
2.3 如何应用主题
- 生成幻灯片前,阅读完整的主题文件
- 遵循主题的内容策略部分,确定字数限制和幻灯片类型选择
- 包含主题变量和排版部分中的所有 CSS
- 与第 1.3 部分的基础 CSS 重置结合使用
2.4 可用主题
| 主题 | 文件 | 内容方式 |
|---|---|---|
| Bold | themes/bold.md | 文字精简、冲击力强、结构简单,冲击型幻灯片占比至少 40% |
| Corporate | themes/corporate.md | 信息密集、内容详尽,允许复杂结构 |
未来的主题可能包括 minimal.md(简洁、低调的设计)。
第 3 部分:核心组件
3.1 横条(强调元素)
用作视觉锚点和章节指示的水平横条。
.bar {
width: var(--bar-width);
height: var(--bar-height);
background: var(--accent-1);
margin-bottom: var(--space-md);
}
.bar-accent-2 { background: var(--accent-2); }
.bar-accent-3 { background: var(--accent-3); }
.bar-accent-4 { background: var(--accent-4); }
.centered .bar {
margin-left: auto;
margin-right: auto;
}
用法:
<div class="bar"></div>
<h2>Section Title</h2>
3.2 内容容器
适用于需要限制宽度的幻灯片:
.content-wrap {
max-width: var(--content-max-width);
width: 100%;
}
.centered .content-wrap {
margin: 0 auto;
}
3.3 卡片组件
.card {
background: var(--bg-secondary);
border-radius: var(--card-radius);
padding: var(--card-padding);
border-left: 4px solid var(--accent-1);
}
.card-accent-2 { border-left-color: var(--accent-2); }
.card-accent-3 { border-left-color: var(--accent-3); }
.card-accent-4 { border-left-color: var(--accent-4); }
.card h3 {
font-size: var(--size-h4);
margin-bottom: var(--space-xs);
}
.card p {
font-size: var(--size-body);
color: var(--text-secondary);
margin: 0;
}
3.4 网格布局
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
/* For uneven splits */
.grid-2-1 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-lg);
}
.grid-1-2 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-lg);
}
3.5 幻灯片页脚
用于品牌标识或背景信息的常驻页脚元素。放置在幻灯片容器之外。
.slide-footer {
position: fixed;
bottom: 30px;
left: var(--slide-padding);
font-size: var(--size-label);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
z-index: 1000;
}
/* Adapt for dark backgrounds */
section[data-background-color] .slide-footer,
.dark-slide .slide-footer {
color: rgba(255, 255, 255, 0.4);
}
HTML 放置位置(在 reveal div 之前):
<body>
<div class="slide-footer">Company Name | Presentation Title</div>
<div class="reveal">
...
</div>
</body>
适用场景: 企业演示文稿、会议演讲,以及任何常驻品牌标识有帮助的场景。 常见错误: 信息过多、字体过大、分散对内容的注意力。
第 4 部分:幻灯片类型
每种幻灯片类型都包含:HTML 结构、适用场景和常见错误。
4.1 标题幻灯片
开场幻灯片,用于确定基调并交代背景。
<section class="centered">
<p class="label">Category or Context</p>
<h1>Presentation Title</h1>
<div class="bar"></div>
<p class="lead">Subtitle or tagline goes here</p>
</section>
适用场景: 仅用于开场幻灯片。
常见错误: 文字过多、加入议程、添加 Logo 或页脚造成杂乱。
4.2 章节过渡页
主要章节之间的过渡。通过色彩营造视觉停顿,并确立章节的视觉标识。
<section class="centered" data-background-color="var(--bg-dark)">
<h1 class="text-on-dark">Section Title</h1>
<div class="bar bar-accent-2"></div>
<p class="lead text-on-dark">Optional brief context</p>
</section>
通过色彩轮换营造视觉节奏: 轮换章节过渡页的背景,为每个主要主题打造鲜明的视觉标识。建议按以下顺序轮换:
| 章节 | 背景 | 色条强调色 |
|---|---|---|
| 1(问题/背景) | var(--bg-dark) | bar-accent-3 |
| 2(解决方案) | var(--accent-1) | bar-accent-2 |
| 3(详情) | var(--accent-2) | 默认 |
| 4(未来/CTA) | var(--bg-dark) | bar-accent-2 |
强调色背景示例:
<section class="centered" data-background-color="#D45D00">
<h1 class="text-on-dark">The Problem</h1>
<p class="text-on-dark" style="opacity: 0.8;">Why the current paradigm is broken.</p>
</section>
**适用场景:**主要章节之间(每份演示文稿通常设置 3–5 个)。 **常见错误:**每次切换主题都使用、不仅显示章节名称还添加其他内容、所有章节过渡页都使用相同颜色。
4.3 单词/短语
最大化冲击力。用超大字号呈现一个观点。
<section class="centered">
<h1 style="font-size: var(--size-stat-hero);">Simplify.</h1>
</section>
**适用场景:**强调关键概念、营造高潮、实现过渡停顿。
**常见错误:**使用过多(每份演示文稿超过 2–3 次)、用于需要解释的概念。
4.4 主打数据
戏剧性的数据显示时刻。一个数字占据主导地位。
<section class="centered">
<p class="label">Context Label</p>
<p class="stat-hero text-accent-1">87%</p>
<p class="stat-label">of users completed onboarding</p>
</section>
**适用场景:**最重要的数据点。每份演示文稿通常只使用 1–2 次。
**常见错误:**每项统计数据都采用主打样式、将其埋没在其他内容中。
4.5 常规数据
醒目的数据,但不是主打时刻。
<section class="centered">
<p class="label">Expected Outcome</p>
<div class="bar"></div>
<p class="stat text-accent-2">50%</p>
<p class="stat-label">reduction in development time</p>
</section>
**适用场景:**辅助数据点、次要指标。
**常见错误:**所有数据都使用相同字号、缺少上下文标签。
4.6 数据组合
将 2–3 项相关统计数据放在一起,以便比较。
<section>
<h2>Key Metrics</h2>
<div class="bar"></div>
<div class="grid-3" style="margin-top: var(--space-lg);">
<div class="centered">
<p class="stat text-accent-1">50%</p>
<p class="stat-label">faster development</p>
</div>
<div class="centered">
<p class="stat text-accent-2">75%</p>
<p class="stat-label">prototype success</p>
</div>
<div class="centered">
<p class="stat text-accent-3">30%</p>
<p class="stat-label">reduced overhead</p>
</div>
</div>
</section>
**适用场景:**比较相关指标、展示前后变化、呈现仪表盘式摘要。
**常见错误:**统计数据超过 3 项、混合不相关的数据。
4.7 引言
带有出处说明并通过视觉方式突出的引言。
<section class="centered">
<blockquote style="font-size: var(--size-h2); font-style: italic; max-width: 900px; margin: 0 auto;">
"The best interface is no interface."
</blockquote>
<p class="text-muted" style="margin-top: var(--space-md);">— Golden Krishna</p>
</section>
**适用场景:**体现专家权威、呈现令人难忘的短语、展示用户评价。 **常见错误:**引言过长(尽量少于 20 个词)、缺少出处说明。
4.8 单句论断(影响力陈述)
值得单独占据一张幻灯片的有力陈述。采用强调效果的排版,并可选择添加行内高亮。
<section class="centered">
<p class="impact">AI agents are the <span class="highlight-2">primary developers</span>.</p>
</section>
主打样式:
<section class="centered">
<p class="impact-hero">Languages built for <span class="highlight-3">humans</span>
create failure modes for <span class="highlight-1">AI</span>.</p>
</section>
添加上下文标签:
<section class="centered">
<p class="label">The Inversion</p>
<div class="bar"></div>
<p class="impact">Human interaction becomes the <span class="highlight-2">refinement layer</span>.</p>
</section>
**适用场景:**论点陈述、范式转变、定义论证的关键主张。这些时刻适合让观众停下来,专注体会一个观点。 **常见错误:**使用过多(每份演示文稿最多 2–4 次)、添加辅助文本、用于次要观点、忘记用高亮强调重点。
4.9 论断 + 证据
最常用的幻灯片。用直观证据支撑清晰论断。
<section>
<h2>User engagement increased 43% after redesign</h2>
<div class="bar"></div>
<div class="grid-1-2">
<div>
<p class="lead">Key insight or context that supports the assertion goes here. Keep it brief.</p>
</div>
<div>
<img src="chart.svg" alt="Engagement chart showing increase">
</div>
</div>
</section>
**适用场景:**大多数内容页。展示信息时的默认选择。
**常见错误:**将论断埋在正文中、缺少直观证据、用项目符号列表代替视觉内容。
4.10 卡片网格(2–4 项)
以相同的视觉权重呈现多个项目。
<section>
<h2>Platform Capabilities</h2>
<div class="bar"></div>
<div class="grid-2" style="margin-top: var(--space-lg);">
<div class="card">
<h3>Intelligent Agents</h3>
<p>AI-powered assistants that reason across organizational knowledge</p>
</div>
<div class="card card-accent-2">
<h3>Context Networks</h3>
<p>Unified access to information across all systems</p>
</div>
<div class="card card-accent-3">
<h3>Custom Applications</h3>
<p>Accelerated development with built-in AI</p>
</div>
<div class="card card-accent-4">
<h3>Automated Workflows</h3>
<p>Event-driven processes without manual triggers</p>
</div>
</div>
</section>
**适用场景:**功能、优势、选项、类别等重要程度相同的项目。
**常见错误:**项目超过 4 个(拆分成多张幻灯片)、卡片中堆满文字。
4.11 时间线/阶段
展示随时间推进的顺序。
<section>
<h2>Implementation Roadmap</h2>
<div class="bar"></div>
<div class="grid-4" style="margin-top: var(--space-lg);">
<div>
<p class="stat text-accent-1" style="font-size: var(--size-h2);">01</p>
<h4>Foundation</h4>
<p class="text-muted">Months 1–3</p>
<p class="text-secondary">Core infrastructure and tooling</p>
</div>
<div>
<p class="stat text-accent-2" style="font-size: var(--size-h2);">02</p>
<h4>Integration</h4>
<p class="text-muted">Months 4–6</p>
<p class="text-secondary">Platform connections</p>
</div>
<div>
<p class="stat text-accent-3" style="font-size: var(--size-h2);">03</p>
<h4>Intelligence</h4>
<p class="text-muted">Months 7–9</p>
<p class="text-secondary">Advanced capabilities</p>
</div>
<div>
<p class="stat text-accent-4" style="font-size: var(--size-h2);">04</p>
<h4>Maturity</h4>
<p class="text-muted">Months 10–12</p>
<p class="text-secondary">Optimization</p>
</div>
</div>
</section>
**适用场景:**项目阶段、历史进程、分步流程。
**常见错误:**阶段超过 5 个(简化或拆分)、每个阶段包含过多细节。
4.12 对比(A 与 B)
直接对比两个选项或状态。
<section>
<h2>Before & After</h2>
<div class="bar"></div>
<div class="grid-2" style="margin-top: var(--space-lg);">
<div class="card" style="border-left-color: var(--text-muted);">
<p class="label text-muted">Before</p>
<h3>Manual Process</h3>
<p>Hours of repetitive work, prone to errors, inconsistent results</p>
</div>
<div class="card">
<p class="label">After</p>
<h3>Automated Workflow</h3>
<p>Minutes to complete, accurate, consistent every time</p>
</div>
</div>
</section>
**适用场景:**问题/解决方案、新/旧、我们/他们等对比。
**常见错误:**对比不公平、文字过多、项目超过 2 个。
4.13 图标网格
用视觉锚点呈现一组相关概念。图标提供便于快速浏览的视觉标记。
<section>
<h2>Core Principles</h2>
<div class="bar"></div>
<div class="grid-3" style="margin-top: var(--space-lg);">
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-1)">
<path d="..."/>
</svg>
</div>
<h4>Security</h4>
<p class="text-secondary">Enterprise-grade protection</p>
</div>
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-2)">
<path d="..."/>
</svg>
</div>
<h4>Scalability</h4>
<p class="text-secondary">Grows with your needs</p>
</div>
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-3)">
<path d="..."/>
</svg>
</div>
<h4>Simplicity</h4>
<p class="text-secondary">Easy to use and maintain</p>
</div>
</div>
</section>
**适用场景:**原则、价值观、功能类别等借助视觉锚点更易理解的抽象概念。
**常见错误:**使用无助于理解的通用图标、项目过多。
4.14 代码块
适用于技术演示。必须进行语法高亮。
<section>
<h2>API Integration</h2>
<div class="bar"></div>
<pre><code class="language-javascript">// Initialize the client
const client = new MagicConstructor({
apiKey: process.env.SECRET_KEY,
workspace: 'production'
});
// Query with context
const result = await client.query({
prompt: "Summarize Q3 sales",
context: ['sales-data', 'quarterly-reports']
});</code></pre>
<p class="text-muted" style="margin-top: var(--space-sm);">Full documentation at docs.coolproject.io</p>
</section>
代码块的 CSS:
.reveal pre {
font-family: var(--font-mono);
font-size: var(--size-small);
background: var(--bg-dark);
color: var(--text-on-dark);
padding: var(--space-md);
border-radius: var(--card-radius);
text-align: left;
width: 100%;
box-sizing: border-box;
}
.reveal pre code {
font-family: inherit;
line-height: 1.6;
}
适用场景: 技术演讲、API 演示、实现示例。
常见错误: 代码太多(最多约 15 行)、没有语法高亮、展示样板代码。
4.15 带说明文字的图片
使用完整或大幅图片,文字尽量精简。
<section class="centered">
<img src="product-screenshot.png" alt="Product interface"
style="max-height: 70vh; border-radius: var(--card-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
<p class="text-muted" style="margin-top: var(--space-md);">New dashboard interface</p>
</section>
适用场景: 需要占据主要版面的产品截图、照片、图表。
常见错误: 图片太小、周围文字太多、图片质量差。
4.16 留白页
内容精简。让观众稍作停顿并消化信息。
<section class="centered" data-background-color="var(--bg-secondary)">
<p class="label">Key Takeaway</p>
<div class="bar"></div>
<h2>Complexity is the enemy of execution.</h2>
</section>
适用场景: 内容密集的部分之后、重要转场之前、强调关键信息时。
常见错误: 添加更多内容、使用过于频繁。
4.17 结束页 / CTA
最后一页。明确下一步行动。
<section class="centered" data-background-color="var(--bg-dark)">
<h1 class="text-on-dark">Ready to Begin?</h1>
<div class="bar bar-accent-2"></div>
<p class="lead text-on-dark">Contact us at [email protected]</p>
<p class="text-muted" style="margin-top: var(--space-xl);">example.com/demo</p>
</section>
适用场景: 最后一页。
常见错误: 没有明确的 CTA、联系信息太多、只写“有问题吗?”
第 5 部分:内嵌可视化
适用于无需外部工具的演示专用图表。
5.1 流程图(水平)
<div class="process-flow">
<div class="process-step">
<div class="process-node" style="background: var(--accent-1);"></div>
<p class="process-label">Input</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-node" style="background: var(--accent-2);"></div>
<p class="process-label">Process</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-node" style="background: var(--accent-3);"></div>
<p class="process-label">Output</p>
</div>
</div>
.process-flow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
.process-step {
text-align: center;
}
.process-node {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto var(--space-xs);
}
.process-arrow {
font-size: 2rem;
color: var(--text-muted);
}
.process-label {
font-size: var(--size-body);
font-weight: 500;
}
5.2 简易柱状图(SVG)
<svg viewBox="0 0 400 200" style="max-width: 600px;">
<rect x="50" y="120" width="60" height="60" fill="var(--accent-1)"/>
<rect x="130" y="80" width="60" height="100" fill="var(--accent-2)"/>
<rect x="210" y="40" width="60" height="140" fill="var(--accent-3)"/>
<rect x="290" y="20" width="60" height="160" fill="var(--accent-4)"/>
<text x="80" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q1</text>
<text x="160" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q2</text>
<text x="240" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q3</text>
<text x="320" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q4</text>
</svg>
5.3 概念关系图(中心辐射式)
<svg viewBox="0 0 400 300" style="max-width: 500px;">
<line x1="200" y1="150" x2="100" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="300" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="100" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="300" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
<circle cx="200" cy="150" r="50" fill="var(--accent-1)"/>
<text x="200" y="155" text-anchor="middle" fill="white" font-weight="600">Core</text>
<circle cx="100" cy="60" r="35" fill="var(--accent-2)"/>
<text x="100" y="65" text-anchor="middle" fill="white" font-size="12">Feature A</text>
<circle cx="300" cy="60" r="35" fill="var(--accent-3)"/>
<text x="300" y="65" text-anchor="middle" fill="white" font-size="12">Feature B</text>
<circle cx="100" cy="240" r="35" fill="var(--accent-4)"/>
<text x="100" y="245" text-anchor="middle" fill="white" font-size="12">Feature C</text>
<circle cx="300" cy="240" r="35" fill="var(--accent-1)"/>
<text x="300" y="245" text-anchor="middle" fill="white" font-size="12">Feature D</text>
</svg>
5.4 何时使用外部工具
以下情况使用内嵌 SVG/HTML:
- 简单流程图(3-5 个步骤)
- 基本柱状图 / 折线图比较
- 概念图(中心辐射式、类似维恩图)
- 基于图标的插图
以下情况使用外部工具(Chart.js、D3、Mermaid):
- 数据点超过 5-7 个
- 交互式可视化
- 复杂关系
- 精确的数据呈现
第 6 部分:通用内容原则
无论主题如何,这些原则都适用。有关具体的字数限制、幻灯片类型偏好和节奏规则,请参阅主题文件(第 2 部分)。
6.1 每张幻灯片只讲一个概念
每张幻灯片都应回答:“我希望他们从中记住的唯一一点是什么?”
如果无法用一句话回答,就拆分这张幻灯片。
6.2 论点—证据结构
用以下内容替代项目符号:
- 论点: 用完整句子陈述观点(作为标题)
- 证据: 支持论点的视觉内容
不要这样做:
Benefits:
• Faster development
• Better quality
• Lower costs
改为使用三张独立的幻灯片:
- “自动化工具使开发时间缩短 50%” + 图表
- “实施后缺陷率有所下降” + 数据
- “总拥有成本每年降低 200 万美元” + 对比
6.3 幻灯片数量建议
- 演讲时间每分钟 1 张幻灯片是一个大致的上限
- 20 分钟的演讲通常使用 15-25 张幻灯片
- 每张内容较少的多张幻灯片,优于内容密集的少数幻灯片
- 章节分隔页和留白页也计入总数
6.4 渐进式展示
对于复杂信息,使用 RevealJS 片段依次展示:
<section>
<h2>Three Key Factors</h2>
<div class="bar"></div>
<div class="grid-3">
<div class="fragment">
<h4>Factor One</h4>
<p>Explanation here</p>
</div>
<div class="fragment">
<h4>Factor Two</h4>
<p>Explanation here</p>
</div>
<div class="fragment">
<h4>Factor Three</h4>
<p>Explanation here</p>
</div>
</div>
</section>
6.5 字数限制与节奏
请参阅主题文件,了解各类幻灯片的具体字数限制和内容节奏规则。不同主题之间差异很大:
- Bold 主题: 限制严格(论点约 12 个词),影响力幻灯片占 40% 以上
- Corporate 主题: 限制宽松(论点和证据合计约 50 个词),信息密度较高
第 7 部分:反模式
7.1 演示反模式
数据倾倒
每张幻灯片都塞满数据,却没有解读。
解决方法: 每张幻灯片只呈现一个洞见。先说明结论。
照稿宣读
幻灯片以项目符号列出讲者的完整讲稿。
解决方法: 幻灯片展示你无法说出的内容;你讲述无法展示的内容。
模板陷阱
不考虑设计如何服务于信息,就套用通用模板。
解决方法: 从沟通需求出发,而不是从模板选项出发。
动画马戏团
所有内容都加上转场和特效。
解决方法: 仅在渐进式展示或强调重点时使用动画。默认不使用。
项目符号泛滥
每张幻灯片都是项目符号列表。
解决方法: 使用论点—证据结构。如果需要列表,先考虑它是否真的需要单独做成一张幻灯片。
7.2 RevealJS 特有的反模式
与框架对着干
设置 center: true 时又添加 flexbox 居中,反之亦然。
修正: 选择一种方式。本技能使用 center: true,并设置章节级文本对齐。
视口单位不断扩大
使用 vw 单位设置字体大小,却不设上限,导致文本大得离谱。
修正: 始终使用 clamp(),并以 rem 为单位设置最大值:clamp(4rem, 10vw, 8rem)。
固定像素尺寸
将字体和间距硬编码为无法缩放的像素值。
修正: 使用 CSS 变量和 clamp() 实现响应式尺寸。
忽略幻灯片尺寸
忘记 RevealJS 会缩放内容以适应配置的尺寸。
修正: 按 1920×1080 进行设计,并在多种窗口尺寸下测试。
背景颜色内联样式
在章节上使用 style="background: color",而不是 data-background-color。
修正: 使用 data-background-color="var(--bg-dark)",让 RevealJS 正确处理背景。
排版工具类的优先级
创建 .stat、.label、.lead 等工具类,却没有设置足够的优先级。
问题: .reveal p(类 + 元素)的优先级高于单独的 .stat(仅类),因此 <p> 元素上的排版工具类会被覆盖。
修正: 始终为排版工具类加上 .reveal 前缀:使用 .reveal .stat、.reveal .label、.reveal .lead 等。这样可确保这些样式覆盖 .reveal p 的基础样式。
颜色工具类的优先级
创建 .text-on-dark 等颜色工具类,却没有设置足够的优先级。
问题: .reveal .lead(两个类)的优先级高于 .text-on-dark(一个类),因此 class="lead text-on-dark" 会显示 lead 的颜色,而不是白色。
修正: 始终为颜色工具类加上 .reveal 前缀:使用 .reveal .text-on-dark、.reveal .text-muted、.reveal .highlight-1 等。
统计数据缺少边距重置
统计数据和 stat-hero 元素会继承 .reveal p 的 margin-bottom,造成多余间距。
修正: 在 .reveal .stat 和 .reveal .stat-hero 规则中添加 margin-bottom: 0。
章节背景覆盖
为 .reveal .slides section 添加 background,导致 data-background-color 无法显示。
问题: RevealJS 会在章节元素后面应用 data-background-color。如果章节具有不透明背景,颜色就会被白色或其他颜色的色块遮住。
修正: 切勿在 .reveal .slides section 上设置 background。只在 .reveal 上设置整个页面的背景。为单个章节设置彩色背景时,使用 data-background-color。
第 8 部分:演讲者备注
8.1 RevealJS 备注语法
演讲者备注要添加在带有 notes 类的 <aside> 元素中:
<section>
<h2>Slide Headline</h2>
<div class="bar"></div>
<p class="lead">Visible content here</p>
<aside class="notes">
Speaker notes go here. These are visible in speaker view (press 'S')
but not shown to the audience.
Multiple paragraphs work fine.
</aside>
</section>
演示期间按 S 键即可打开演讲者视图。新窗口中会显示当前幻灯片、下一张幻灯片、备注和计时器。
8.2 TTS/视频录制备注
如果备注将由 TTS 朗读或录制为旁白,请按适合口头表达的方式组织:
节奏标记:
<aside class="notes">
This is the opening statement. [PAUSE]
Now we transition to the key insight. [PAUSE]
The data speaks for itself—forty-three percent improvement.
</aside>
发音提示(用于 TTS 或不熟悉的术语):
<aside class="notes">
The API uses OAuth (OH-auth) for authentication.
Results show a 50% improvement in MTTR (mean time to recovery,
or "em-tee-tee-arr" if using the acronym).
</aside>
强调标记(录制时使用,TTS 会剔除):
<aside class="notes">
This is [EMPHASIS: critical] to understand before we proceed.
We saw not ten, not twenty, but [EMPHASIS: fifty] percent gains.
</aside>
8.3 时长与字数
语速参考:
- 缓慢/从容:约每分钟 120 个单词
- 对话语速:约每分钟 150 个单词
- 富有活力:约每分钟 170 个单词
每张幻灯片的时长目标:
| 幻灯片类型 | 目标时长 | 字数(每分钟 150 个单词) |
|---|---|---|
| 标题 | 15-30 秒 | 40-75 个单词 |
| 章节分隔页 | 10-20 秒 | 25-50 个单词 |
| 单词/短语 | 10-15 秒 | 25-40 个单词 |
| 主视觉统计数据 | 20-40 秒 | 50-100 个单词 |
| 普通统计数据 | 15-30 秒 | 40-75 个单词 |
| 断言 + 证据 | 45-90 秒 | 110-225 个单词 |
| 卡片网格 | 60-120 秒 | 150-300 个单词 |
| 时间线 | 60-90 秒 | 150-225 个单词 |
| 结束页 | 30-60 秒 | 75-150 个单词 |
演示总时长:将各张幻灯片的时长相加,再增加约 10% 的过渡缓冲时间。
8.4 从演讲稿到幻灯片的工作流
从书面演讲稿出发并将其拆分为幻灯片时:
步骤 1:确定论点边界
标出演讲稿中每个提出独立主张或转换话题的位置。每处都可作为一张幻灯片的候选内容。
[SLIDE] Our platform reduces development time significantly.
We measured teams before and after adoption. [SLIDE] The data
showed a 50% reduction in time-to-deployment. [SLIDE] But
speed isn't the only benefit...
步骤 2:为每个片段分类
对于标出的每个片段,确定幻灯片类型:
- 是单个关键数字吗?→ 数据幻灯片
- 是有细节支撑的主张吗?→ 主张 + 证据
- 是话题间的过渡吗?→ 章节分隔页或留白页
- 是在列举多个项目吗?→ 卡片网格(2–4 项)或进一步拆分
步骤 3:提取视觉内容
从每个片段中提取:
- 标题:核心主张(最多一句话)
- 视觉需求:需要什么图片/图表/示意图来支撑?
- 备注:其余口述内容
步骤 4:平衡视觉内容与口述内容
幻灯片展示难以说清的内容。备注写下难以展示的内容。
| 幻灯片上 | 备注中 |
|---|---|
| “开发时间缩短了 50%” | “我们对 12 个团队进行了 6 个月的测量,比较他们采用平台前后的开发速度,结果始终如一……” |
| [展示缩减幅度的柱状图] | “请注意,提升立竿见影——在第一个冲刺周期内就已显现,并在整个期间持续保持。” |
| 关键数据点 | 背景、注意事项、方法 |
| 结论 | 推理过程 |
8.5 从幻灯片到演讲稿的工作流
为现有幻灯片生成演讲者备注时:
针对每张幻灯片,回答:
- 观众需要哪些屏幕上没有的背景信息?
- 如何从上一张幻灯片过渡到这一张?
- 该视觉内容需要配合怎样的解读或见解?
- 如何衔接到下一张幻灯片?
每条备注的结构:
<aside class="notes">
[TRANSITION: How this connects to previous slide]
[MAIN CONTENT: The spoken explanation, context, story]
[BRIDGE: Setup for what comes next]
</aside>
示例:
<section class="centered">
<p class="label">Key Metric</p>
<p class="stat text-accent-1">50%</p>
<p class="stat-label">reduction in development time</p>
<aside class="notes">
So what did we actually measure? [PAUSE]
We tracked twelve teams over six months—half using the platform,
half using their existing workflows. Same project types, same
skill levels.
The platform teams shipped in half the time. Not by cutting
corners—their defect rates actually improved. They shipped
faster AND better.
But speed is just one dimension. Let's look at what happened
to those prototypes that used to die in pilot purgatory...
</aside>
</section>
8.6 针对不同输出形式的备注格式
用于现场演示(演讲者视图):
- 使用完整句子和自然段落
- 提醒提示语:“[CHECK TIME]”、“[DEMO HERE]”、“[ASK AUDIENCE]”
- 可能会在压力下忘记的关键数据/名称
用于 TTS 处理:
- 除节奏标记 [PAUSE] 外,不使用方括号
- 数字用文字书写,以确保正确发音:“fifty percent”而不是“50%”
- 首次出现时展开缩写或标注读音
- 使用较短的句子(便于 TTS 断句)
用于视频录制脚本:
- 逐字包含所有口述内容
- 标注重音和节奏
- 注明视线方向(看镜头或屏幕)
- 为每张幻灯片标注目标时长
8.7 启用演讲者备注插件
演讲者备注默认可用,但若要使用独立的演讲者视图窗口:
Reveal.initialize({
// ... other config
// Optional: configure notes behavior
showNotes: false, // Don't show notes in main view (default)
// For speaker view keyboard shortcut
keyboard: {
83: function() { Reveal.toggleOverview(); } // 'S' key
}
});
要启用带计时器和预览的独立演讲者备注窗口,请在演示期间按 S。演示文稿必须通过 HTTP 提供(不能只是作为本地文件打开),这样弹出窗口才能在大多数浏览器中正常工作。
8.8 备注中的反模式
照搬讲稿
粘贴整段需要逐字朗读的内容,导致过度依赖备注。
解决方法: 备注应是提示和背景信息,而不是提词器脚本(明确用于 TTS 的情况除外)。
过于简略
备注只是重复幻灯片上的内容:“谈谈 50% 的缩减。”
解决方法: 备注应补充幻灯片上没有的内容——背景信息、过渡、解读。
健忘型
完全不写备注,认为自己会记得。
解决方法: 至少记录幻灯片之间的过渡逻辑,以及可能记错的数据。
小说家型
为一张只展示 30 秒的幻灯片写 500 个词的备注。
解决方法: 备注长度应与幻灯片展示时长相匹配。请参见上方的时间表。
第 9 部分:演示前检查清单
交付演示文稿前:
结构
- 前 2 张幻灯片内明确传达核心信息
- 全程每张幻灯片只讲一个概念
- 各主要话题之间设有章节分隔页
- 结尾包含明确的行动号召
内容
- 每张幻灯片均未超出字数限制
- 使用主张-证据结构(而非项目符号列表)
- 数据包含背景信息(标签、对比)
- 没有孤立幻灯片(仅含一张幻灯片的章节)
视觉效果
- 统一使用点缀色
- 字体层级清晰
- 文本字号不小于
--size-small - 图片分辨率足够高
演讲者备注
- 每张幻灯片都有备注(即使很简短)
- 标注幻灯片之间的过渡
- 包含关键数据和名称,便于记忆
- 总字数符合目标时长
- 如果使用 TTS:数字用文字书写,并妥善处理首字母缩略词
- 如果制作视频:标注每张幻灯片的目标时长
技术
- 所有字体均能加载(Google Fonts 链接正确)
- RevealJS 初始化时没有错误
- 在多种视口尺寸下均能正常显示
- 片段动画按预期运行
- 演讲者视图能正常打开(按下 'S')
无障碍
- 色彩对比度符合 WCAG AA(文本为 4.5:1)
- 有意义的图片均添加替代文本
- 文本未嵌入图片中
- 不使用动画也能轻松阅读
完整示例:精简演示文稿
此示例展示了精简的演示文稿结构。对于完整演示文稿,请使用 themes/bold.md 中的完整 CSS。为简洁起见,此示例仅使用其中一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Update</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--bg-dark: #1a1a2e;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #7a7a7a;
--text-on-dark: #ffffff;
--accent-1: #0066cc;
--accent-2: #00a86b;
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--size-stat: clamp(4rem, 10vw, 8rem);
--size-h1: clamp(6rem, 8vw, 9rem);
--size-h2: clamp(4rem, 12vw, 7rem);
--size-body: clamp(1.25rem, 2vw, 2rem);
--size-body-lg: clamp(1.5rem, 2.5vw, 2.25rem);
--size-label: clamp(1.5rem, 2.5vw, 2.25rem);
--space-sm: 1rem;
--space-md: 2rem;
--bar-width: 120px;
--bar-height: 8px;
}
.reveal { font-family: var(--font-body); color: var(--text-primary); }
.reveal h1, .reveal h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.5em 0; }
.reveal h1 { font-size: var(--size-h1); }
.reveal h2 { font-size: var(--size-h2); }
.reveal p { font-size: var(--size-body); line-height: 1.5; margin: 0 0 1em 0; }
.reveal .slides section { text-align: left; padding: 60px; }
.reveal .slides section.centered { text-align: center; }
.reveal .label { font-family: var(--font-mono); font-size: var(--size-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-1); }
.reveal .lead { font-size: var(--size-body-lg); color: var(--text-secondary); }
.bar { width: var(--bar-width); height: var(--bar-height); background: var(--accent-1); margin-bottom: var(--space-md); }
.centered .bar { margin-left: auto; margin-right: auto; }
.reveal .stat { font-family: var(--font-mono); font-size: var(--size-stat); font-weight: 700; line-height: 1; color: var(--accent-1); margin-bottom: 0; }
.reveal .stat-label { font-size: var(--size-body-lg); color: var(--text-secondary); margin-top: var(--space-sm); }
.text-on-dark { color: var(--text-on-dark); }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="centered">
<p class="label">Q3 Update</p>
<h1>Project Alpha</h1>
<div class="bar"></div>
<p class="lead">Engineering Progress Report</p>
<aside class="notes">
Good morning everyone. Today I'll walk you through where we stand
on Project Alpha as we close out Q3.
We've got good news to share, and a clear path to our October
target. Let's start with the results.
</aside>
</section>
<section class="centered" data-background-color="#1a1a2e">
<h1 class="text-on-dark">Results</h1>
<aside class="notes">
[PAUSE for transition]
So—where do we actually stand?
</aside>
</section>
<section class="centered">
<p class="label">Key Metric</p>
<p class="stat">73%</p>
<p class="stat-label">milestone completion rate</p>
<aside class="notes">
Seventy-three percent of our planned milestones are complete.
That's ahead of where we projected in the Q2 review.
More importantly, the remaining twenty-seven percent are all
in active development—no blockers, no unknowns.
</aside>
</section>
<section>
<h2>On track for October launch</h2>
<div class="bar"></div>
<p class="lead">Core features complete. Final testing phase begins next week.</p>
<aside class="notes">
What does this mean for the timeline? We're green for October.
Core features locked last Friday. The team is now focused
entirely on hardening—edge cases, performance tuning, and
the integration test suite.
Testing phase kicks off Monday. We'll have preliminary
results by end of next week.
</aside>
</section>
<section class="centered" data-background-color="#1a1a2e">
<h1 class="text-on-dark">Questions?</h1>
<div class="bar" style="background: var(--accent-2);"></div>
<p class="text-on-dark">[email protected]</p>
<aside class="notes">
That's the summary. Happy to dig into any area—timeline,
technical details, resource allocation.
What questions do you have?
[WAIT FOR QUESTIONS]
If anything comes up later, reach out to the team alias.
</aside>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
<script>
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
width: 1920,
height: 1080,
margin: 0.08
});
</script>
</body>
</html>
附录:创建自定义主题
创建自定义主题的步骤:
- 将
themes/bold.md复制到新文件(例如themes/corporate.md) - 修改 CSS 变量,使其符合你的品牌风格:
:root {
/* Corporate theme example */
--bg-primary: #ffffff;
--bg-dark: #003B5C;
--accent-1: #00A3E0;
--accent-2: #78BE20;
--accent-3: #D45D00;
--font-display: 'Libre Franklin', sans-serif;
}
- 将你的主题添加到第 2.3 部分的「可用主题」表格中
- 生成演示文稿时引用你的主题
主题文件应包含完整演示文稿所需的所有 CSS 变量和字体排版规则。