Back to Details

revealjs-presenter

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

RevealJS Presenter Skill

RevealJS 演示文稿制作指南

When to Use This Skill

适用场景

Use this skill when:
  • Creating a RevealJS presentation from content/outline
  • Converting document content into slide format
  • Building a pitch deck, technical talk, or educational presentation
  • User requests "slides," "presentation," "deck," or mentions RevealJS
This skill produces a single self-contained HTML file with embedded CSS and CDN references.
在以下场景中使用本指南：
  • 从内容/大纲创建RevealJS演示文稿
  • 将文档内容转换为幻灯片格式
  • 制作推介演示文稿、技术讲座或教育类演示
  • 用户要求制作「幻灯片」「演示文稿」「演示集」，或提及RevealJS时
本指南产出的是包含嵌入式CSS和CDN引用的独立HTML文件。

Part 1: RevealJS Foundation

第一部分：RevealJS 基础

1.1 Required Configuration

1.1 必需配置

Always initialize RevealJS with these settings:
javascript
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
});
Why these values:
  • center: true
    — Let RevealJS handle vertical centering. Do not fight this with flexbox on sections.
  • width: 1920, height: 1080
    — Standard HD ratio. Content scales automatically.
  • margin: 0.08
    — Provides breathing room at viewport edges.
  • transition: 'fade'
    — Professional, non-distracting. Avoid 'zoom', 'convex', etc.
请始终使用以下设置初始化RevealJS：
javascript
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
    — 标准高清比例，内容会自动适配缩放
  • margin: 0.08
    — 在视口边缘预留呼吸空间
  • transition: 'fade'
    — 专业且不分散注意力的过渡效果，避免使用'zoom'、'convex'等效果

1.2 Base HTML Structure

1.2 基础HTML结构

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>
  
  <!-- RevealJS -->
  <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">
  
  <!-- Fonts -->
  <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">
      <!-- Slides go here -->
    </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>
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>
  
  <!-- RevealJS -->
  <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">
  
  <!-- Fonts -->
  <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>
    /* 主题变量和样式写在这里 */
  </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 Base CSS Reset

1.3 基础CSS重置

Apply these styles to normalize RevealJS behavior:
css
/* === 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;
}
应用以下样式来统一RevealJS的表现：
css
/* === 重置与标准化 === */
.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;
}

Part 2: Theme Selection

第二部分：主题选择

Themes are complete specifications. Before generating any slides, read the appropriate theme file from the 
themes/
directory. Themes control both visual styling AND content strategy.
主题是完整的规范集合。在生成任何幻灯片之前，请从
themes/
目录中读取对应的主题文件。主题同时控制视觉样式和内容策略。

2.1 What Themes Control

2.1 主题管控范围

Each theme file specifies:
  1. CSS Variables — Colors, typography sizes, spacing, fonts
  2. Typography Application — How CSS variables apply to elements
  3. Word Limits — Maximum words per slide type
  4. Slide Type Preferences — Which types to prefer, use sparingly, or avoid
  5. Content Rhythm — Impact vs information slide ratios
  6. Structure Rules — Max bullets, card counts, splitting guidance
每个主题文件定义以下内容：
  1. CSS变量 — 颜色、排版尺寸、间距、字体
  2. 排版应用规则 — CSS变量如何应用到元素
  3. 字数限制 — 每种幻灯片类型的最大字数
  4. 幻灯片类型偏好 — 优先使用、谨慎使用或避免的幻灯片类型
  5. 内容节奏 — 冲击型幻灯片与信息型幻灯片的比例
  6. 结构规则 — 最大项目符号数量、卡片数量、内容拆分指南

2.2 Default Theme

2.2 默认主题

Use 
themes/bold.md
unless the user specifies otherwise.
除非用户特别指定，否则使用
themes/bold.md
主题。

2.3 How to Apply a Theme

2.3 主题应用方法

  1. Read the entire theme file before generating slides
  2. Follow the theme's Content Strategy section for word limits and slide type choices
  3. Include all CSS from the theme's variables and typography sections
  4. Combine with the base CSS reset from Part 1.3
  1. 在生成幻灯片前完整阅读主题文件
  2. 遵循主题中「内容策略」部分的字数限制和幻灯片类型选择规则
  3. 包含主题变量和排版部分的所有CSS
  4. 与第一部分1.3的基础CSS重置结合使用

2.4 Available Themes

2.4 可用主题

ThemeFileContent Approach
Bold
themes/bold.md
Minimal words, dramatic impact, simple structures, 40%+ impact slides
Corporate
themes/corporate.md
Information-dense, detailed content, complex structures allowed
Future themes may include 
minimal.md
(clean, understated design).
主题文件内容策略
醒目型
themes/bold.md
极简文字，强烈视觉冲击，简洁结构，冲击型幻灯片占比40%以上
企业型
themes/corporate.md
信息密度高，内容详细，允许使用复杂结构
未来可能会新增
minimal.md
主题（简洁、低调的设计）。

Part 3: Core Components

第三部分：核心组件

3.1 The Bar (Accent Element)

3.1 装饰条（强调元素）

A horizontal bar used as a visual anchor and section indicator.
css
.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;
}
Usage:
html
<div class="bar"></div>
<h2>Section Title</h2>
作为视觉锚点和章节指示器的水平条。
css
.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;
}
用法：
html
<div class="bar"></div>
<h2>章节标题</h2>

3.2 Content Container

3.2 内容容器

For slides that need width constraint:
css
.content-wrap {
  max-width: var(--content-max-width);
  width: 100%;
}

.centered .content-wrap {
  margin: 0 auto;
}
用于需要限制宽度的幻灯片：
css
.content-wrap {
  max-width: var(--content-max-width);
  width: 100%;
}

.centered .content-wrap {
  margin: 0 auto;
}

3.3 Card Component

3.3 卡片组件

css
.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;
}
css
.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 Layouts

3.4 网格布局

css
.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);
}
css
.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);
}

/* 非均分布局 */
.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

3.5 幻灯片页脚

A persistent footer element for branding or context. Placed outside the slides container.
css
.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 placement (before the reveal div):
html
<body>
  <div class="slide-footer">Company Name | Presentation Title</div>
  <div class="reveal">
    ...
  </div>
</body>
When to use: Corporate presentations, conference talks, any context where persistent branding helps. Mistakes: Too much information, large font size, distracting from content.
用于品牌展示或上下文说明的固定页脚元素，放置在幻灯片容器外部。
css
.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;
}

/* 适配深色背景 */
section[data-background-color] .slide-footer,
.dark-slide .slide-footer {
  color: rgba(255, 255, 255, 0.4);
}
HTML放置位置（在reveal容器之前）：
html
<body>
  <div class="slide-footer">公司名称 | 演示文稿标题</div>
  <div class="reveal">
    ...
  </div>
</body>
适用场景： 企业演示文稿、会议讲座、任何需要持续展示品牌的场景。 常见错误： 包含过多信息、字体过大、分散内容注意力。

Part 4: Slide Types

第四部分：幻灯片类型

Each slide type includes: HTML structure, when to use, and common mistakes.
每种幻灯片类型包含：HTML结构、适用场景和常见错误。

4.1 Title Slide

4.1 标题幻灯片

The opening slide. Sets tone and context.
html
<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>
When to use: Opening slide only.
Mistakes: Too much text, including agenda, adding logos/footer clutter.
开场幻灯片，奠定整体基调与上下文。
html
<section class="centered">
  <p class="label">分类或上下文</p>
  <h1>演示文稿标题</h1>
  <div class="bar"></div>
  <p class="lead">副标题或标语</p>
</section>
适用场景： 仅作为开场幻灯片。 常见错误： 文字过多、包含议程、添加过多Logo或页脚元素造成杂乱。

4.2 Section Break

4.2 章节过渡页

Transitions between major sections. Creates visual pause and establishes section identity through color.
html
<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>
Color rotation for visual rhythm: Vary section break backgrounds to create distinct visual identities for each major topic. Suggested rotation:
SectionBackgroundBar Accent
1 (Problem/Context)
var(--bg-dark)
bar-accent-3
2 (Solution)
var(--accent-1)
bar-accent-2
3 (Details)
var(--accent-2)
default
4 (Future/CTA)
var(--bg-dark)
bar-accent-2
Example with accent background:
html
<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>
When to use: Between major sections (3-5 per presentation typically). Mistakes: Using for every topic change, adding content beyond the section name, using the same color for all section breaks.
用于主要章节之间的过渡，创造视觉停顿，并通过颜色区分章节身份。
html
<section class="centered" data-background-color="var(--bg-dark)">
  <h1 class="text-on-dark">章节标题</h1>
  <div class="bar bar-accent-2"></div>
  <p class="lead text-on-dark">可选的简短上下文说明</p>
</section>
创造视觉节奏的颜色轮换策略： 通过改变章节过渡页的背景色，为每个主要主题创建独特的视觉标识。建议轮换方案：
章节背景色装饰条颜色
1（问题/背景）
var(--bg-dark)
bar-accent-3
2（解决方案）
var(--accent-1)
bar-accent-2
3（细节）
var(--accent-2)
默认
4（未来/行动号召）
var(--bg-dark)
bar-accent-2
强调色背景示例：
html
<section class="centered" data-background-color="#D45D00">
  <h1 class="text-on-dark">现存问题</h1>
  <p class="text-on-dark" style="opacity: 0.8;">当前模式为何失效。</p>
</section>
适用场景： 主要章节之间（通常一个演示文稿包含3-5个）。 常见错误： 每个小主题都使用、添加章节名称以外的内容、所有章节过渡页使用相同颜色。

4.3 Single Word / Phrase

4.3 单字/短语幻灯片

Maximum impact. One idea, massive type.
html
<section class="centered">
  <h1 style="font-size: var(--size-stat-hero);">Simplify.</h1>
</section>
When to use: Emphasizing a key concept, creating a moment, transitional pause.
Mistakes: Overuse (more than 2-3 per presentation), using for concepts that need explanation.
最大化视觉冲击，仅展示一个核心观点，使用超大字号。
html
<section class="centered">
  <h1 style="font-size: var(--size-stat-hero);">简化。</h1>
</section>
适用场景： 强调核心概念、创造停顿时刻、过渡环节。 常见错误： 使用过度（一个演示文稿最多2-3张）、用于需要解释的复杂概念。

4.4 Hero Stat

4.4 核心数据幻灯片

The dramatic data moment. ONE number dominates.
html
<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>
When to use: Your most important data point. Usually only 1-2 per presentation.
Mistakes: Using hero treatment for every stat, burying in other content.
展示关键数据的震撼时刻，仅突出一个数字。
html
<section class="centered">
  <p class="label">上下文标签</p>
  <p class="stat-hero text-accent-1">87%</p>
  <p class="stat-label">用户完成了注册流程</p>
</section>
适用场景： 最重要的数据点，通常一个演示文稿仅使用1-2张。 常见错误： 对所有数据都使用核心数据样式、将数据淹没在其他内容中。

4.5 Standard Stat

4.5 标准数据幻灯片

Prominent data, but not the hero moment.
html
<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>
When to use: Supporting data points, secondary metrics.
Mistakes: Making all stats the same size, no context labels.
突出展示数据，但并非核心数据时刻。
html
<section class="centered">
  <p class="label">预期成果</p>
  <div class="bar"></div>
  <p class="stat text-accent-2">50%</p>
  <p class="stat-label">开发时间减少</p>
</section>
适用场景： 辅助数据点、次要指标。 常见错误： 所有数据使用相同字号、缺少上下文标签。

4.6 Stat Cluster

4.6 数据集群幻灯片

2-3 related statistics shown together for comparison.
html
<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>
When to use: Comparing related metrics, showing before/after, dashboard-style summary.
Mistakes: More than 3 stats, mixing unrelated data.
同时展示2-3个相关数据用于对比。
html
<section>
  <h2>关键指标</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">开发速度提升</p>
    </div>
    <div class="centered">
      <p class="stat text-accent-2">75%</p>
      <p class="stat-label">原型成功率</p>
    </div>
    <div class="centered">
      <p class="stat text-accent-3">30%</p>
      <p class="stat-label">管理成本降低</p>
    </div>
  </div>
</section>
适用场景： 对比相关指标、展示前后变化、仪表盘式总结。 常见错误： 包含超过3个数据、混合不相关的数据。

4.7 Quote

4.7 引用幻灯片

Attributed quotation with visual emphasis.
html
<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>
When to use: Expert authority, memorable phrases, user testimonials. Mistakes: Long quotes (aim for under 20 words), missing attribution.
带有视觉强调的署名引用。
html
<section class="centered">
  <blockquote style="font-size: var(--size-h2); font-style: italic; max-width: 900px; margin: 0 auto;">
    "最佳的界面是没有界面。"
  </blockquote>
  <p class="text-muted" style="margin-top: var(--space-md);">—— Golden Krishna</p>
</section>
适用场景： 专家观点、难忘语句、用户证言。 常见错误： 引用过长（控制在20字以内）、缺少署名。

4.8 Single Assertion (Impact Statement)

4.8 单一主张（冲击型陈述）幻灯片

A dramatic statement that deserves its own slide. Uses impact typography with optional inline highlights.
html
<section class="centered">
  <p class="impact">AI agents are the <span class="highlight-2">primary developers</span>.</p>
</section>
With hero treatment:
html
<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>
With context label:
html
<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>
When to use: Thesis statements, paradigm shifts, key assertions that define your argument. The moments where you want the audience to pause and absorb a single idea. Mistakes: Overuse (2-4 per presentation max), adding supporting text, using for minor points, forgetting highlights for emphasis.
展示值得单独成页的震撼性陈述，使用冲击型排版，可选择内联高亮。
html
<section class="centered">
  <p class="impact">AI agents是<span class="highlight-2">主要开发者</span>。</p>
</section>
核心样式版本：
html
<section class="centered">
  <p class="impact-hero">为<span class="highlight-3">人类</span>打造的语言，会为AI带来失效模式。</p>
</section>
带上下文标签版本：
html
<section class="centered">
  <p class="label">反转模式</p>
  <div class="bar"></div>
  <p class="impact">人类交互成为<span class="highlight-2">优化层</span>。</p>
</section>
适用场景： 核心论点、范式转变、定义你的论证的关键主张。用于希望观众停顿并吸收单一观点的时刻。 常见错误： 使用过度（一个演示文稿最多2-4张）、添加辅助文本、用于次要观点、忘记使用高亮强调。

4.9 Assertion + Evidence

4.9 主张+证据幻灯片

The workhorse slide. Clear claim supported by visual proof.
html
<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>
      <!-- Visual evidence: chart, diagram, image, etc. -->
      <img src="chart.svg" alt="Engagement chart showing increase">
    </div>
  </div>
</section>
When to use: Most content slides. Default choice when presenting information.
Mistakes: Burying assertion in body text, no visual evidence, bullet lists instead of visuals.
最常用的工作型幻灯片，清晰的主张搭配视觉化证据。
html
<section>
  <h2>重新设计后用户参与度提升43%</h2>
  <div class="bar"></div>
  <div class="grid-1-2">
    <div>
      <p class="lead">支持该主张的核心见解或上下文，请保持简洁。</p>
    </div>
    <div>
      <!-- 视觉证据：图表、示意图、图片等 -->
      <img src="chart.svg" alt="展示参与度提升的图表">
    </div>
  </div>
</section>
适用场景： 大多数内容幻灯片，是展示信息的默认选择。 常见错误： 将主张隐藏在正文中、缺少视觉证据、使用项目符号列表而非可视化内容。

4.10 Card Grid (2-4 items)

4.10 卡片网格（2-4个项目）

Multiple items with equal visual weight.
html
<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>
When to use: Features, benefits, options, categories—items with equal importance.
Mistakes: More than 4 items (split into multiple slides), walls of text in cards.
展示多个视觉权重相等的项目。
html
<section>
  <h2>平台能力</h2>
  <div class="bar"></div>
  <div class="grid-2" style="margin-top: var(--space-lg);">
    <div class="card">
      <h3>智能Agent</h3>
      <p>跨组织知识库进行推理的AI助手</p>
    </div>
    <div class="card card-accent-2">
      <h3>上下文网络</h3>
      <p>统一访问所有系统中的信息</p>
    </div>
    <div class="card card-accent-3">
      <h3>自定义应用</h3>
      <p>内置AI加速开发流程</p>
    </div>
    <div class="card card-accent-4">
      <h3>自动化工作流</h3>
      <p>无需手动触发的事件驱动流程</p>
    </div>
  </div>
</section>
适用场景： 功能、优势、选项、分类等重要性相等的项目。 常见错误： 包含超过4个项目（拆分为多张幻灯片）、卡片内包含大段文字。

4.11 Timeline / Phases

4.11 时间线/阶段幻灯片

Sequential progression over time.
html
<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>
When to use: Project phases, historical progression, step-by-step processes.
Mistakes: More than 5 phases (simplify or split), too much detail per phase.
展示随时间推进的序列流程。
html
<section>
  <h2>实施路线图</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>基础阶段</h4>
      <p class="text-muted">第1–3个月</p>
      <p class="text-secondary">核心基础设施与工具</p>
    </div>
    <div>
      <p class="stat text-accent-2" style="font-size: var(--size-h2);">02</p>
      <h4>集成阶段</h4>
      <p class="text-muted">第4–6个月</p>
      <p class="text-secondary">平台连接</p>
    </div>
    <div>
      <p class="stat text-accent-3" style="font-size: var(--size-h2);">03</p>
      <h4>智能化阶段</h4>
      <p class="text-muted">第7–9个月</p>
      <p class="text-secondary">高级功能</p>
    </div>
    <div>
      <p class="stat text-accent-4" style="font-size: var(--size-h2);">04</p>
      <h4>成熟阶段</h4>
      <p class="text-muted">第10–12个月</p>
      <p class="text-secondary">优化完善</p>
    </div>
  </div>
</section>
适用场景： 项目阶段、历史进程、分步流程。 常见错误： 包含超过5个阶段（简化或拆分）、每个阶段包含过多细节。

4.12 Comparison (A vs B)

4.12 对比（A vs B）幻灯片

Direct contrast between two options or states.
html
<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>
When to use: Problem/solution, old/new, us/them comparisons.
Mistakes: Unfair comparisons, too much text, more than 2 items.
直接对比两个选项或状态。
html
<section>
  <h2>前后对比</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">之前</p>
      <h3>手动流程</h3>
      <p>数小时重复工作，容易出错，结果不一致</p>
    </div>
    <div class="card">
      <p class="label">之后</p>
      <h3>自动化工作流</h3>
      <p>数分钟即可完成，准确无误，结果始终一致</p>
    </div>
  </div>
</section>
适用场景： 问题/解决方案、新旧对比、我方/他方对比。 常见错误： 不公平对比、文字过多、包含超过2个对比项。

4.13 Icon Grid

4.13 图标网格幻灯片

Concept cluster with visual anchors. Icons provide scannable landmarks.
html
<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">
        <!-- Inline SVG icon here -->
        <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>
When to use: Principles, values, feature categories—abstract concepts that benefit from visual anchors.
Mistakes: Generic icons that don't aid understanding, too many items.
带有视觉锚点的概念集群，图标提供可快速识别的标识。
html
<section>
  <h2>核心原则</h2>
  <div class="bar"></div>
  <div class="grid-3" style="margin-top: var(--space-lg);">
    <div class="centered">
      <div class="icon-wrap">
        <!-- 内联SVG图标 -->
        <svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-1)">
          <path d="..."/>
        </svg>
      </div>
      <h4>安全性</h4>
      <p class="text-secondary">企业级防护</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>可扩展性</h4>
      <p class="text-secondary">随业务需求增长</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>简洁性</h4>
      <p class="text-secondary">易于使用和维护</p>
    </div>
  </div>
</section>
适用场景： 原则、价值观、功能分类等需要视觉锚点的抽象概念。 常见错误： 使用无法辅助理解的通用图标、包含过多项目。

4.14 Code Block

4.14 代码块幻灯片

For technical presentations. Syntax highlighting required.
html
<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 for code blocks:
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;
}
When to use: Technical talks, API demos, implementation examples.
Mistakes: Too much code (max ~15 lines), no syntax highlighting, showing boilerplate.
用于技术演示文稿，必须包含语法高亮。
html
<section>
  <h2>API集成</h2>
  <div class="bar"></div>
  <pre><code class="language-javascript">// 初始化客户端
const client = new MagicConstructor({
  apiKey: process.env.SECRET_KEY,
  workspace: 'production'
});

// 带上下文的查询
const result = await client.query({
  prompt: "总结第三季度销售额",
  context: ['sales-data', 'quarterly-reports']
});</code></pre>
  <p class="text-muted" style="margin-top: var(--space-sm);">完整文档请访问 docs.coolproject.io</p>
</section>
代码块CSS样式：
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 Image with Caption

4.15 带说明的图片幻灯片

Full or large image with minimal text.
html
<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>
When to use: Product screenshots, photos, diagrams that need to dominate.
Mistakes: Small images with lots of surrounding text, poor image quality.
全屏或大尺寸图片搭配少量文字。
html
<section class="centered">
  <img src="product-screenshot.png" alt="产品界面" 
       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);">全新仪表盘界面</p>
</section>
适用场景： 产品截图、照片、需要突出展示的示意图。 常见错误： 图片尺寸过小且周围文字过多、图片质量差。

4.16 Breath Slide

4.16 呼吸幻灯片

Minimal content. Creates pause, lets audience process.
html
<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>
When to use: After dense sections, before major transitions, emphasizing key messages.
Mistakes: Adding more content, using too frequently.
极简内容，创造停顿，让观众消化信息。
html
<section class="centered" data-background-color="var(--bg-secondary)">
  <p class="label">核心要点</p>
  <div class="bar"></div>
  <h2>复杂性是执行的敌人。</h2>
</section>
适用场景： 内容密集的章节之后、主要过渡之前、强调核心信息。 常见错误： 添加过多内容、使用过于频繁。

4.17 Closing / CTA

4.17 结尾/行动号召幻灯片

Final slide. Clear next step.
html
<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 hello@example.com</p>
  <p class="text-muted" style="margin-top: var(--space-xl);">example.com/demo</p>
</section>
When to use: Final slide.
Mistakes: No clear CTA, too much contact info, "Questions?" as the only content.
最后一张幻灯片，展示清晰的下一步行动。
html
<section class="centered" data-background-color="var(--bg-dark)">
  <h1 class="text-on-dark">准备好开始了吗？</h1>
  <div class="bar bar-accent-2"></div>
  <p class="lead text-on-dark">联系我们：hello@example.com</p>
  <p class="text-muted" style="margin-top: var(--space-xl);">example.com/demo</p>
</section>
适用场景： 仅作为结尾幻灯片。 常见错误： 没有清晰的行动号召、包含过多联系信息、仅使用「有问题吗？」作为内容。

Part 5: Inline Visualizations

第五部分：内联可视化

For presentation-specific diagrams that don't require external tools.
用于演示文稿专属的示意图，无需外部工具。

5.1 Process Flow (Horizontal)

5.1 水平流程示意图

html
<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>
css
.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;
}
html
<div class="process-flow">
  <div class="process-step">
    <div class="process-node" style="background: var(--accent-1);"></div>
    <p class="process-label">输入</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">处理</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">输出</p>
  </div>
</div>
css
.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 Simple Bar Chart (SVG)

5.2 简单柱状图（SVG）

html
<svg viewBox="0 0 400 200" style="max-width: 600px;">
  <!-- Bars -->
  <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)"/>
  
  <!-- Labels -->
  <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>
html
<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 Concept Relationship (Hub and Spoke)

5.3 概念关系图（中心辐射式）

html
<svg viewBox="0 0 400 300" style="max-width: 500px;">
  <!-- Lines to spokes -->
  <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"/>
  
  <!-- Center hub -->
  <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>
  
  <!-- Spokes -->
  <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>
html
<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">核心</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">功能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">功能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">功能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">功能D</text>
</svg>

5.4 When to Use External Tools

5.4 何时使用外部工具

Use inline SVG/HTML for:
  • Simple process flows (3-5 steps)
  • Basic bar/line comparisons
  • Concept diagrams (hub-spoke, venn-like)
  • Icon-based illustrations
Use external tools (Chart.js, D3, Mermaid) for:
  • Data with more than 5-7 points
  • Interactive visualizations
  • Complex relationships
  • Precise data representation
内联SVG/HTML适用于：
  • 简单流程（3-5个步骤）
  • 基础柱状/折线对比
  • 概念图（中心辐射、类维恩图）
  • 图标式插图
外部工具（Chart.js、D3、Mermaid）适用于：
  • 包含超过5-7个数据点的数据集
  • 交互式可视化
  • 复杂关系图
  • 精确的数据展示

Part 6: Universal Content Principles

第六部分：通用内容原则

These principles apply regardless of theme. For specific word limits, slide type preferences, and rhythm rules, consult the theme file (Part 2).
这些原则适用于所有主题。具体的字数限制、幻灯片类型偏好和节奏规则，请参考第二部分的主题文件。

6.1 One Concept Per Slide

6.1 每张幻灯片一个核心概念

Every slide should answer: "What is the ONE thing I want them to take from this?"
If you can't answer in one sentence, split the slide.
每张幻灯片都应该能回答：「我希望观众从这张幻灯片中获取的唯一信息是什么？」
如果无法用一句话回答，就拆分幻灯片。

6.2 Assertion-Evidence Structure

6.2 主张-证据结构

Replace bullet points with:
  1. Assertion: Complete sentence stating the point (as headline)
  2. Evidence: Visual that supports the assertion
Instead of:
Benefits:
• Faster development
• Better quality
• Lower costs
Use three separate slides:
  • "Development time drops 50% with automated tooling" + chart
  • "Defect rates decreased after implementation" + data
  • "Total cost of ownership reduced by $2M annually" + comparison
用以下结构替代项目符号列表：
  1. 主张： 完整的句子陈述核心观点（作为标题）
  2. 证据： 支持该主张的可视化内容
替代前：
优势：
• 开发速度更快
• 质量更高
• 成本更低
替代方案（使用三张独立幻灯片）：
  • "自动化工具使开发时间缩短50%" + 图表
  • "实施后缺陷率降低" + 数据
  • "每年总拥有成本减少200万美元" + 对比图

6.3 Slide Count Guidance

6.3 幻灯片数量指南

  • 1 slide per minute of speaking time is a rough maximum
  • 20-minute talk = 15-25 slides typical
  • More slides with less content each is better than fewer dense slides
  • Section breaks and breath slides count toward total
  • 大致每1分钟演讲对应1张幻灯片（上限）
  • 20分钟的演讲通常需要15-25张幻灯片
  • 多使用内容简洁的幻灯片，优于少但内容密集的幻灯片
  • 章节过渡页和呼吸幻灯片计入总数量

6.4 Progressive Disclosure

6.4 渐进式展示

For complex information, reveal sequentially using RevealJS fragments:
html
<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>
对于复杂信息，使用RevealJS的fragment功能逐步展示：
html
<section>
  <h2>三个关键因素</h2>
  <div class="bar"></div>
  <div class="grid-3">
    <div class="fragment">
      <h4>因素一</h4>
      <p>解释内容</p>
    </div>
    <div class="fragment">
      <h4>因素二</h4>
      <p>解释内容</p>
    </div>
    <div class="fragment">
      <h4>因素三</h4>
      <p>解释内容</p>
    </div>
  </div>
</section>

6.5 Word Limits and Rhythm

6.5 字数限制与节奏

Consult the theme file for specific word limits per slide type and content rhythm rules. These vary significantly between themes:
  • Bold theme: Strict limits (~12 words for assertions), 40%+ impact slides
  • Corporate theme: Generous limits (~50 words for assertion+evidence), information-dense
请参考主题文件获取每种幻灯片类型的具体字数限制和内容节奏规则，不同主题之间差异显著：
  • Bold主题： 严格限制（主张类幻灯片约12字），冲击型幻灯片占比40%以上
  • Corporate主题： 宽松限制（主张+证据类幻灯片约50字），信息密度高

Part 7: Anti-Patterns

第七部分：反模式

7.1 Presentation Anti-Patterns

7.1 演示文稿通用反模式

The Data Dump
Every slide full of data without interpretation.
Fix: One insight per slide. State conclusion first.
The Script Reader
Slides contain the speaker's full script as bullet points.
Fix: Slides show what you can't say; you say what you can't show.
The Template Trap
Generic template applied without considering how design serves message.
Fix: Start from communication need, not template options.
The Animation Circus
Transitions and effects on everything.
Fix: Animation only for progressive disclosure or emphasis. Default to none.
Bullet Point Disease
Every slide is a bullet list.
Fix: Use assertion-evidence structure. If you need a list, question whether it needs to be a slide.
数据堆砌
每张幻灯片都充满数据但没有解读。 解决方法： 每张幻灯片一个核心见解，先陈述结论。
照本宣科
幻灯片包含演讲者的完整脚本，以项目符号形式呈现。 解决方法： 幻灯片展示你无法用语言表达的内容；你讲述幻灯片无法展示的内容。
模板陷阱
不加思考地套用通用模板，不考虑设计如何服务于信息传达。 解决方法： 从沟通需求出发，而非模板选项。
动画马戏团
所有元素都添加过渡和特效。 解决方法： 仅为渐进式展示或强调目的使用动画，默认不使用。
项目符号病
每张幻灯片都是项目符号列表。 解决方法： 使用主张-证据结构。如果确实需要列表，质疑是否需要单独成页。

7.2 RevealJS-Specific Anti-Patterns

7.2 RevealJS专属反模式

Fighting the Framework
Adding flexbox centering when 
center: true
is set, or vice versa.
Fix: Choose one approach. This skill uses 
center: true
with section-level text alignment.
Viewport Unit Escalation
Using 
vw
units for font sizes without upper bounds, leading to absurdly large text.
Fix: Always use 
clamp()
with rem-based maximums: 
clamp(4rem, 10vw, 8rem)
.
Fixed Pixel Dimensions
Hardcoding pixel values for fonts and spacing that don't scale.
Fix: Use CSS variables with 
clamp()
for responsive sizing.
Ignoring Slide Dimensions
Forgetting that RevealJS scales content to fit configured dimensions.
Fix: Design for 1920×1080. Test at multiple window sizes.
Background Color Inline Styles Using 
style="background: color"
on sections instead of 
data-background-color
. Fix: Use 
data-background-color="var(--bg-dark)"
for RevealJS to handle properly.
Typography Utility Specificity Creating utility classes like 
.stat
, 
.label
, 
.lead
without sufficient specificity. Problem: 
.reveal p
has higher specificity (class + element) than 
.stat
alone (just class), so typography utilities on 
<p>
elements get overridden. Fix: Always prefix typography utilities with 
.reveal
: use 
.reveal .stat
, 
.reveal .label
, 
.reveal .lead
, etc. This ensures they override the base 
.reveal p
styles.
Color Utility Specificity Creating color utilities like 
.text-on-dark
without sufficient specificity. Problem: 
.reveal .lead
(two classes) has higher specificity than 
.text-on-dark
(one class), so 
class="lead text-on-dark"
shows the lead's color instead of white. Fix: Always prefix color utilities with 
.reveal
: use 
.reveal .text-on-dark
, 
.reveal .text-muted
, 
.reveal .highlight-1
, etc.
Missing Margin Reset on Stats Stats and stat-hero elements inherit 
margin-bottom
from 
.reveal p
, creating unwanted gaps. Fix: Add 
margin-bottom: 0
to 
.reveal .stat
and 
.reveal .stat-hero
rules.
Section Background Override Adding 
background
to 
.reveal .slides section
blocks 
data-background-color
from showing. Problem: RevealJS applies 
data-background-color
behind the section element. If the section has an opaque background, the color is hidden behind a white/colored box. Fix: Never set 
background
on 
.reveal .slides section
. Set overall page background on 
.reveal
only. Use 
data-background-color
on individual sections for colored backgrounds.
对抗框架
在设置
center: true
的情况下添加flexbox居中，反之亦然。 解决方法： 选择一种方式。本指南使用
center: true
搭配section级别的文本对齐。
视口单位滥用
使用
vw
单位设置字体大小但不设置上限，导致文字过大。 解决方法： 始终使用
clamp()
搭配基于rem的上限：
clamp(4rem, 10vw, 8rem)
。
固定像素尺寸
硬编码字体和间距的像素值，无法自适应缩放。 解决方法： 使用带
clamp()
的CSS变量实现响应式尺寸。
忽略幻灯片尺寸
忘记RevealJS会将内容缩放到配置的尺寸。 解决方法： 为1920×1080分辨率设计，在多种窗口尺寸下测试。
行内样式设置背景色 在section上使用
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和stat-hero元素继承
.reveal p
的
margin-bottom
，造成不必要的间距。 解决方法： 在
.reveal .stat
和
.reveal .stat-hero
规则中添加
margin-bottom: 0
。
Section背景覆盖 为
.reveal .slides section
添加
background
样式，导致
data-background-color
无法显示。 问题： RevealJS将
data-background-color
应用在section元素的后方。如果section有不透明背景，颜色会被白色/彩色盒子遮挡。 解决方法： 永远不要为
.reveal .slides section
设置
background
。仅在
.reveal
上设置整体页面背景。为单个section使用
data-background-color
设置彩色背景。

Part 8: Speaker Notes

第八部分：演讲者备注

8.1 RevealJS Notes Syntax

8.1 RevealJS备注语法

Speaker notes are added inside an 
<aside>
element with class 
notes
:
html
<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>
Access speaker view by pressing 
S
during presentation. Opens a new window with current slide, next slide, notes, and timer.
演讲者备注通过添加带有
notes
类的
<aside>
元素实现：
html
<section>
  <h2>幻灯片标题</h2>
  <div class="bar"></div>
  <p class="lead">可见内容</p>
  
  <aside class="notes">
    演讲者备注内容。这些内容在演讲者视图中可见（按'S'键），但不会展示给观众。
    
    支持多段落。
  </aside>
</section>
在演示过程中按
S
键可打开演讲者视图，会弹出新窗口显示当前幻灯片、下一张幻灯片、备注和计时器。

8.2 Notes for TTS/Video Recording

8.2 用于TTS/视频录制的备注

When notes will be read by TTS or recorded as voiceover, structure them for spoken delivery:
Pacing markers:
html
<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>
Pronunciation hints (for TTS or unfamiliar terms):
html
<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>
Emphasis markers (for recording, stripped for TTS):
html
<aside class="notes">
This is [EMPHASIS: critical] to understand before we proceed.

We saw not ten, not twenty, but [EMPHASIS: fifty] percent gains.
</aside>
当备注将被TTS读取或作为配音录制时，需为口语表达优化结构：
停顿标记：
html
<aside class="notes">
这是开场陈述。[PAUSE]

现在过渡到核心见解。[PAUSE]

数据说明了一切——提升了43%。
</aside>
发音提示（针对TTS或生僻术语）：
html
<aside class="notes">
该API使用OAuth（OH-auth）进行身份验证。

结果显示MTTR（平均恢复时间，或首次使用时读作"em-tee-tee-arr"）缩短了50%。
</aside>
强调标记（用于录制，TTS处理时会忽略）：
html
<aside class="notes">
这一点[EMPHASIS: 至关重要]，在继续之前必须理解。

我们看到的不是10%，不是20%，而是[EMPHASIS: 50%]的提升。
</aside>

8.3 Timing and Word Count

8.3 时长与字数参考

Speaking pace reference:
  • Slow/deliberate: ~120 words per minute
  • Conversational: ~150 words per minute
  • Energetic: ~170 words per minute
Per-slide timing targets:
Slide TypeTarget DurationWord Count (150 wpm)
Title15-30 sec40-75 words
Section Break10-20 sec25-50 words
Single Word/Phrase10-15 sec25-40 words
Hero Stat20-40 sec50-100 words
Standard Stat15-30 sec40-75 words
Assertion + Evidence45-90 sec110-225 words
Card Grid60-120 sec150-300 words
Timeline60-90 sec150-225 words
Closing30-60 sec75-150 words
Total presentation timing: sum of slide durations, plus ~10% buffer for transitions.
演讲语速参考：
  • 缓慢/沉稳：约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 Speech-to-Slides Workflow

8.4 演讲稿转幻灯片流程

When starting with a written speech and decomposing into slides:
Step 1: Identify assertion boundaries
Mark every place the speech makes a distinct claim or shifts topic. Each becomes a slide candidate.
[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...
Step 2: Classify each segment
For each marked segment, identify the slide type:
  • Is it a single key number? → Stat slide
  • Is it a claim with supporting detail? → Assertion + Evidence
  • Is it a transition between topics? → Section Break or Breath Slide
  • Is it listing multiple items? → Card Grid (if 2-4) or split further
Step 3: Extract visual content
From each segment, pull out:
  • Headline: The core assertion (one sentence max)
  • Visual need: What image/chart/diagram supports this?
  • Notes: The remaining spoken content
Step 4: Balance visual and spoken
The slide shows what's hard to say. The notes say what's hard to show.
On SlideIn Notes
"Development time dropped 50%""When we measured twelve teams over six months, comparing their velocity before and after platform adoption, the results were consistent..."
[Bar chart showing reduction]"Notice how the improvement was immediate—within the first sprint—and sustained over the full period."
Key data pointsContext, caveats, methodology
ConclusionsReasoning process
当从书面演讲稿分解为幻灯片时：
步骤1：识别主张边界
标记演讲稿中提出明确主张或转换主题的每个位置，每个标记点都是一个幻灯片候选。
[SLIDE] 我们的平台显著缩短了开发时间。
我们对比了平台采用前后的团队表现。[SLIDE] 数据显示部署时间缩短了50%。[SLIDE] 但速度不是唯一的优势...
步骤2：分类每个片段
为每个标记的片段确定幻灯片类型：
  • 是单个关键数字？→ 数据幻灯片
  • 是带有支持细节的主张？→ 主张+证据幻灯片
  • 是主题之间的过渡？→ 章节过渡页或呼吸幻灯片
  • 是列出多个项目？→ 卡片网格（如果2-4个）或进一步拆分
步骤3：提取可视化内容
从每个片段中提取：
  • 标题： 核心主张（最多一句话）
  • 可视化需求： 支持该主张的图片/图表/示意图
  • 备注： 剩余的口语内容
步骤4：平衡视觉与口语内容
幻灯片展示难以用语言表达的内容。备注讲述幻灯片无法展示的内容。
幻灯片上的内容备注中的内容
"开发时间缩短50%""我们在六个月内跟踪了12个团队，对比他们采用平台前后的交付速度，结果一致..."
[展示缩短的柱状图]"注意，提升是立竿见影的——在第一个迭代周期内就显现出来，并且在整个周期内保持稳定。"
关键数据点上下文、说明、方法论
结论推理过程

8.5 Slides-to-Speech Workflow

8.5 为现有幻灯片生成演讲者备注的流程

When generating speaker notes for existing slides:
For each slide, answer:
  1. What context does the audience need that isn't on screen?
  2. What's the transition from the previous slide?
  3. What interpretation or insight accompanies the visual?
  4. What's the bridge to the next slide?
Structure for each note:
html
<aside class="notes">
[TRANSITION: How this connects to previous slide]

[MAIN CONTENT: The spoken explanation, context, story]

[BRIDGE: Setup for what comes next]
</aside>
Example:
html
<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>
为现有幻灯片生成演讲者备注时，针对每张幻灯片回答以下问题：
  1. 观众需要哪些幻灯片上没有的上下文？
  2. 与上一张幻灯片的过渡内容是什么？
  3. 伴随可视化内容的解读或见解是什么？
  4. 引出下一张幻灯片的过渡内容是什么？
每张备注的结构：
html
<aside class="notes">
[过渡：与上一张幻灯片的关联]

[主要内容：口语化的解释、上下文、故事]

[过渡：为下一张幻灯片做铺垫]
</aside>
示例：
html
<section class="centered">
  <p class="label">关键指标</p>
  <p class="stat text-accent-1">50%</p>
  <p class="stat-label">开发时间缩短</p>
  
  <aside class="notes">
我们实际测量的是什么？[PAUSE]

我们在六个月内跟踪了12个团队——一半使用平台，一半使用现有工作流。项目类型相同，技能水平相当。

使用平台的团队交付时间缩短了一半。他们没有偷工减料——缺陷率实际上还降低了。他们交付得更快，也更好。

但速度只是一个方面。让我们看看那些曾经在试点阶段夭折的原型发生了什么...
  </aside>
</section>

8.6 Notes Formatting for Different Outputs

8.6 针对不同输出的备注格式

For live presentation (speaker view):
  • Full sentences, natural paragraphs
  • Reminder cues: "[CHECK TIME]", "[DEMO HERE]", "[ASK AUDIENCE]"
  • Key stats/names you might forget under pressure
For TTS processing:
  • No brackets except pacing markers [PAUSE]
  • Numbers written as words for correct pronunciation: "fifty percent" not "50%"
  • Acronyms expanded or pronunciation-guided on first use
  • Shorter sentences (easier for TTS phrasing)
For video recording script:
  • Include all spoken content verbatim
  • Mark emphasis and pacing
  • Note where to look (at camera, at screen)
  • Include timing targets per slide
现场演示（演讲者视图）：
  • 完整句子，自然段落
  • 提示线索："[查看时间]", "[此处演示]", "[提问观众]"
  • 压力下可能忘记的关键数据/名称
TTS处理：
  • 除停顿标记[PAUSE]外，不使用括号
  • 数字用单词书写以确保正确发音："fifty percent"而非"50%"
  • 首字母缩写词首次使用时展开或添加发音提示
  • 使用较短的句子（便于TTS断句）
视频录制脚本：
  • 逐字包含所有口语内容
  • 标记强调和停顿
  • 注明视线方向（看镜头、看屏幕）
  • 包含每张幻灯片的时长目标

8.7 Enabling Speaker Notes Plugin

8.7 启用演讲者备注插件

Speaker notes work by default, but for the separate speaker view window:
javascript
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
  }
});
To enable the separate speaker notes window with timer and preview, press 
S
during presentation. This requires the presentation to be served over HTTP (not just opened as a local file) for the popup window to work in most browsers.
演讲者备注默认可用，但要使用独立的演讲者视图窗口：
javascript
Reveal.initialize({
  // ... 其他配置
  
  // 可选：配置备注行为
  showNotes: false,  // 不在主视图显示备注（默认）
  
  // 演讲者视图键盘快捷键
  keyboard: {
    83: function() { Reveal.toggleOverview(); }  // 'S'键
  }
});
要启用带计时器和预览的独立演讲者备注窗口，在演示过程中按
S
键。这需要演示文稿通过HTTP服务（不能仅作为本地文件打开），才能在大多数浏览器中正常弹出窗口。

8.8 Notes Anti-Patterns

8.8 备注反模式

The Script Dump
Pasting entire paragraphs meant to be read verbatim, creating dependency on notes.
Fix: Notes should be prompts and context, not a teleprompter script (unless explicitly for TTS).
The Bare Minimum
Notes that just repeat what's on the slide: "Talk about the 50% reduction."
Fix: Notes add what's NOT on the slide—context, transitions, interpretation.
The Forgetter
No notes at all, assuming you'll remember.
Fix: At minimum, note the transition logic between slides and any stats you might misremember.
The Novelist
500 words of notes for a slide you'll show for 30 seconds.
Fix: Match note length to slide duration. See timing table above.
脚本堆砌
粘贴整段需要逐字朗读的内容，形成对备注的依赖。 解决方法： 备注应是提示和上下文，而非提词器脚本（除非明确用于TTS）。
极简主义过头
备注仅重复幻灯片上的内容："谈谈50%的提升。" 解决方法： 备注添加幻灯片上没有的内容——上下文、过渡、解读。
健忘症
完全没有备注，假设自己会记住所有内容。 解决方法： 至少备注幻灯片之间的过渡逻辑和可能忘记的关键数据。
小说家
为一张仅展示30秒的幻灯片写500词的备注。 解决方法： 备注长度与幻灯片时长匹配，参考上方的时长表格。

Part 9: Pre-Flight Checklist

第九部分：预演检查清单

Before delivering the presentation:
在交付演示文稿之前：

Structure

结构

  • Main message clear within first 2 slides
  • One concept per slide throughout
  • Section breaks between major topics
  • Closing has clear call to action
  • 核心信息在前2张幻灯片中清晰呈现
  • 每张幻灯片一个核心概念
  • 主要主题之间有章节过渡页
  • 结尾页有清晰的行动号召

Content

内容

  • No slide exceeds word count limits
  • Assertion-evidence structure used (not bullet lists)
  • Stats have context (labels, comparisons)
  • No orphan slides (single slide sections)
  • 没有幻灯片超过字数限制
  • 使用主张-证据结构（而非项目符号）
  • 数据带有上下文（标签、对比）
  • 没有孤立的幻灯片（单个幻灯片的章节）

Visual

视觉

  • Consistent use of color accents
  • Typography hierarchy clear
  • No text smaller than 
    --size-small
  • Images high enough resolution
  • 一致使用强调色
  • 排版层级清晰
  • 没有小于
    --size-small
    的文字
  • 图片分辨率足够

Speaker Notes

演讲者备注

  • Every slide has notes (even if brief)
  • Transitions between slides noted
  • Key stats/names included as memory aids
  • Total word count matches target duration
  • If TTS: numbers written as words, acronyms handled
  • If video: timing targets per slide noted
  • 每张幻灯片都有备注（即使简短）
  • 备注了幻灯片之间的过渡内容
  • 包含关键数据/名称作为记忆辅助
  • 总字数与目标时长匹配
  • 如果用于TTS：数字用单词书写，首字母缩写词已处理
  • 如果用于视频：备注了每张幻灯片的时长目标

Technical

技术

  • All fonts load (Google Fonts links correct)
  • RevealJS initializes without errors
  • Works at multiple viewport sizes
  • Fragment animations work as expected
  • Speaker view opens correctly (press 'S')
  • 所有字体加载正常（Google Fonts链接正确）
  • RevealJS初始化无错误
  • 在多种视口尺寸下正常显示
  • 片段动画按预期工作
  • 演讲者视图可正常打开（按'S'键）

Accessibility

可访问性

  • Color contrast meets WCAG AA (4.5:1 for text)
  • Alt text on meaningful images
  • Text not embedded in images
  • Readable without animations
  • 颜色对比度符合WCAG AA标准（文本对比度4.5:1）
  • 有意义的图片带有替代文本
  • 文字未嵌入在图片中
  • 关闭动画后仍可正常阅读

Complete Example: Minimal Presentation

完整示例：极简演示文稿

This example shows a minimal presentation structure. For full presentations, use the complete CSS from 
themes/bold.md
. This example uses a subset for brevity.
html
<!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">
      
      <!-- Title -->
      <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 Break -->
      <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>
      
      <!-- Stat -->
      <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>
      
      <!-- Content -->
      <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>
      
      <!-- Closing -->
      <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">team@example.com</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
中的完整CSS。为简洁起见，本示例仅使用了部分CSS。
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>
    :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">第三季度更新</p>
        <h1>Alpha项目</h1>
        <div class="bar"></div>
        <p class="lead">工程进度报告</p>
        
        <aside class="notes">
大家早上好。今天我将介绍Alpha项目在第三季度末的进展情况。

我们有好消息要分享，也有清晰的路径实现十月的目标。让我们从结果开始。
        </aside>
      </section>
      
      <!-- 章节过渡页 -->
      <section class="centered" data-background-color="#1a1a2e">
        <h1 class="text-on-dark">结果</h1>
        
        <aside class="notes">
[PAUSE 过渡]

那么——我们实际进展如何？
        </aside>
      </section>
      
      <!-- 数据页 -->
      <section class="centered">
        <p class="label">关键指标</p>
        <p class="stat">73%</p>
        <p class="stat-label">里程碑完成率</p>
        
        <aside class="notes">
我们计划的里程碑完成了73%。这比第二季度回顾时的预期要高。

更重要的是，剩余的27%都在积极开发中——没有障碍，没有未知因素。
        </aside>
      </section>
      
      <!-- 内容页 -->
      <section>
        <h2>按计划在十月发布</h2>
        <div class="bar"></div>
        <p class="lead">核心功能已完成。最终测试阶段下周开始。</p>
        
        <aside class="notes">
这对时间线意味着什么？我们的十月发布目标处于绿灯状态。

核心功能在上周五已锁定。团队现在完全专注于强化——边缘案例、性能调优和集成测试套件。

测试阶段周一开始。我们将在下周结束前获得初步结果。
        </aside>
      </section>
      
      <!-- 结尾页 -->
      <section class="centered" data-background-color="#1a1a2e">
        <h1 class="text-on-dark">有问题吗？</h1>
        <div class="bar" style="background: var(--accent-2);"></div>
        <p class="text-on-dark">team@example.com</p>
        
        <aside class="notes">
以上是总结。欢迎深入探讨任何方面——时间线、技术细节、资源分配。

大家有什么问题？

[等待提问]

如果之后有任何问题，请联系团队邮箱。
        </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>

Appendix: Creating Custom Themes

附录：创建自定义主题

To create a custom theme:
  1. Copy 
    themes/bold.md
    to a new file (e.g., 
    themes/corporate.md
    )
  2. Modify the CSS variables to match your brand:
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;
}
  1. Add your theme to the Available Themes table in Part 2.3
  2. Reference your theme when generating presentations
Theme files should include all CSS variables and typography rules needed for a complete presentation.
创建自定义主题的步骤：
  1. 复制
    themes/bold.md
    到新文件（例如
    themes/corporate.md
    ）
  2. 修改CSS变量以匹配你的品牌：
css
:root {
  /* 企业主题示例 */
  --bg-primary: #ffffff;
  --bg-dark: #003B5C;
  --accent-1: #00A3E0;
  --accent-2: #78BE20;
  --accent-3: #D45D00;
  --font-display: 'Libre Franklin', sans-serif;
}
  1. 在第二部分2.3的可用主题表格中添加你的主题
  2. 在生成演示文稿时引用你的主题
主题文件应包含完整演示文稿所需的所有CSS变量和排版规则。",