触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示
使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。
保持可扫描性：
- 短要点，不是段落
- 每页尽可能只有一个主要观点
- 使用图标（Font Awesome）增加视觉趣味
内容少时放大：当幻灯片内容较少时，使用更大的字号填充空间，不要留下大片空白配小字。
视觉细节选项
几何图案 (Geometric Patterns)：
- 对角线分隔符代替水平线
- 不对称列宽（30/70、40/60、25/75）
- 90° 或 270° 旋转文字标题
- 圆形/六边形图片框架
- 角落三角形装饰
- 重叠形状增加深度
边框与框架处理 (Border & Frame Treatments)：
- 单侧粗边框（10-20pt）
- 双线边框配对比色
- 角括号代替完整边框
- L 形边框（上+左 或 下+右）
- 标题下划线强调（3-5pt 粗）
排版处理 (Typography Treatments)：
- 极端尺寸对比（72pt 标题 vs 11pt 正文）
- 全大写标题配宽字间距
- 超大编号显示
- 等宽字体用于数据/统计/技术内容
- 窄体字体用于密集信息
- 轮廓文字强调
图表与数据样式 (Chart & Data Styling)：
- 单色图表配单一强调色
- 水平条形图代替垂直
- 点图代替条形图
- 最少或无网格线
- 数据标签直接在元素上（无图例）
- 超大数字显示关键指标
布局创新 (Layout Innovations)：
- 全出血图片配文字叠加
- 侧边栏列（20-30% 宽度）用于导航/上下文
- 模块化网格系统（3×3、4×4 块）
- Z 形或 F 形内容流
- 浮动文字框覆盖彩色形状
- 杂志风格多栏布局
背景处理 (Background Treatments)：
- 纯色块占据 40-60% 幻灯片
- 渐变填充（仅垂直或对角线）
- 分割背景（两色，对角线或垂直）
- 边缘到边缘色带
- 负空间作为设计元素
布局技巧
图表/表格布局规则：
- ✅ 两栏布局（首选）：标题横跨全宽，下方两栏 - 一栏文字/要点，另一栏特色内容。使用不等宽 flexbox（如 40%/60%）优化空间
- ✅ 全屏布局：让特色内容（图表/表格）占据整个幻灯片以获得最大冲击力和可读性
- ❌ 禁止垂直堆叠：不要将图表/表格放在文字下方的单列中 - 这会导致可读性差和布局问题
核心规范
技术选型
使用 Reveal.js 实现（功能强大、专业演示库、支持丰富的过渡效果和主题）
优势：
- 专为演示文稿设计，支持嵌套幻灯片（垂直/水平导航）
- 内置多种过渡动画和主题样式
- 支持 Markdown、代码高亮、演讲者备注
- 完善的键盘导航和触控支持
- 响应式设计，自动适配不同屏幕
CDN 引入：
```html
\`\`\`
HTML 结构
```html
\`\`\`
布局要求
- 每页视口：100% 宽度 × 100% 高度（必须铺满容器）
- 内容居中：Reveal.js 自动处理水平+垂直居中
- 字号：标题 48-72px，正文 24-32px
- 每页建议：1 个主标题 + 3-5 个要点
- 内容必须适应单页，不能溢出
⭐ 关键布局样式（必须包含）：
```css
/* 确保 Reveal.js 铺满容器 */
.reveal {
width: 100% !important;
height: 100% !important;
}
.reveal .slides {
width: 100% !important;
height: 100% !important;
}
.reveal .slides section {
width: 100% !important;
height: 100% !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
```
交互配置
Reveal.js 初始化（必须包含）：
```javascript
Reveal.initialize({
hash: true,
controls: true,
progress: true,
center: true,
transition: "slide",
keyboard: true,
touch: true,
mouseWheel: false,
autoSlide: 0,
// ⭐ 关键：使用 100% 确保铺满容器
width: "100%",
height: "100%",
margin: 0,
minScale: 1,
maxScale: 1
});
```
支持：键盘导航（← → ↑ ↓）、触摸滑动、全屏模式（F）、概览模式（ESC）
约束规范
禁止：
- 垂直滚动（每页内容必须适应视口）
- 复杂表单交互
- 需要滚动才能看到的内容
- 过多文字（每页控制在 50 字以内）
注意：
- 按逻辑段落分页，每页一个主题
- 确保引入 Reveal.js CDN 资源
- 在 DOMContentLoaded 后初始化 Reveal
CSS 组件库
CSS 变量定义
在 `` 标签中定义以下 CSS 变量，便于统一管理主题：
```css
:root {
/* 背景色 */
--background-color: #ffffff;
--section-divider-bg: #f5f5f5;
/* 主题色 */
--primary-color: #2196F3;
--secondary-color: #ff9800;
--text-color: #222;
--muted-color: #666;
/* 组件色 */
--box-bg: #f5f5f5;
--box-border: #ddd;
--box-radius: 8px;
/* Callout 颜色 */
--blue: #2196F3;
--blue-bg: #e3f2fd;
--orange: #ff9800;
--orange-bg: #fff3e0;
--green: #4caf50;
--green-bg: #e8f5e9;
--gray: #666;
--gray-bg: #f5f5f5;
}
```
Boxes 盒子组件
```css
/* 基础盒子 - 填充背景 */
.box {
background: var(--box-bg);
border: 1px solid var(--box-border);
border-radius: var(--box-radius);
padding: 20px;
margin: 10px 0;
}
/* 轮廓盒子 - 仅边框 */
.box-outlined {
border: 1px solid var(--box-border);
border-radius: var(--box-radius);
padding: 20px;
margin: 10px 0;
background: transparent;
}
```
使用示例：
```html
\`\`\`
Callouts 标注组件
```css
/* 基础标注 */
.callout {
border-left: 6px solid var(--primary-color);
padding: 15px 20px;
margin: 15px 0;
background: #f9f9f9;
border-radius: var(--box-radius);
}
/* 颜色变体 */
.callout-blue { border-left-color: var(--blue); background: var(--blue-bg); }
.callout-orange { border-left-color: var(--orange); background: var(--orange-bg); }
.callout-green { border-left-color: var(--green); background: var(--green-bg); }
.callout-gray { border-left-color: var(--gray); background: var(--gray-bg); }
/* 顶部边框变体 */
.callout-top {
border-left: none;
border-top: 6px solid var(--primary-color);
}
```
使用示例：
```html
\`\`\`
Blockquotes 引用块
```css
.reveal blockquote {
border-left: 4px solid var(--primary-color);
padding-left: 20px;
margin: 20px 0;
font-style: italic;
background: none;
box-shadow: none;
width: 100%;
}
.reveal blockquote cite {
display: block;
margin-top: 10px;
font-style: normal;
color: var(--muted-color);
}
```
使用示例：
```html
"设计不仅仅是外观和感觉，设计是它如何工作的。"
— Steve Jobs
\`\`\`
文字尺寸工具类
基础文字为 16pt，使用以下类在内容较少时放大：
```css
.text-lg { font-size: 18pt !important; } /* 稍大 /
.text-xl { font-size: 20pt !important; } / 中等强调 /
.text-2xl { font-size: 24pt !important; } / 强调 /
.text-3xl { font-size: 28pt !important; } / 很大 /
.text-4xl { font-size: 32pt !important; } / 最大正文 */
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
```
多栏布局
始终使用内联 CSS Grid（不要创建工具类）：
```html
\`\`\`
图表集成
使用 Chart.js 插件为幻灯片添加专业图表。
引入 Chart.js
在 CDN 资源部分添加：
```html
```
初始化时添加插件：
```javascript
Reveal.initialize({
// ... 其他配置
plugins: [ RevealChart ],
chart: {
defaults: {
color: "lightgray",
borderColor: "lightgray"
}
}
});
```
图表布局模式
⚠️ 关键：图表必须使用 flexbox 容器模式，否则会溢出！
全屏图表
```html
\`\`\`
左右分栏（图表 + 内容）
```html
\`\`\`
上下分栏（内容 + 图表）
```html
\`\`\`
图表类型
支持的类型：`bar`、`line`、`pie`、`doughnut`、`radar`、`polarArea`、`scatter`
常用场景：
- bar：比较类别
- line：展示趋势
- pie/doughnut：展示占比
- scatter：展示变量关系
图表样式
```json
"datasets": [{
"data": [12, 19, 8, 15],
"backgroundColor": ["#2196F3", "#ff9800", "#4caf50", "#e91e63"]
}]
```
常用配色数组：
```javascript
// 蓝色系
["#1565c0", "#1976d2", "#1e88e5", "#2196f3", "#42a5f5"]
// 暖色系
["#c62828", "#ef6c00", "#f9a825", "#2e7d32", "#1565c0"]
// 分类色（区分度高）
["#2196F3", "#ff9800", "#4caf50", "#e91e63", "#9c27b0"]
```
高级特性
Fragments 渐进式展示
点击逐步显示内容：
```html
点击后出现
向上滑入
变红高亮
\`\`\`
动画类型：
- `fade-in`（默认）、`fade-out`
- `fade-up`、`fade-down`、`fade-left`、`fade-right`
- `highlight-red`、`highlight-green`、`highlight-blue`
- `strike`（删除线）
演讲者备注
按 `S` 键打开演讲者视图：
```html
幻灯片标题
可见内容
演讲者私人备注：
- 记得提及 X
- 过渡到下一个话题
\`\`\`
自定义背景
```html
\`\`\`
Auto-Animate 自动动画
在幻灯片之间自动动画过渡，匹配 `data-id` 的元素会平滑过渡：
```html
\`\`\`
代码高亮
```html
def hello():
print("Hello")
```
行号高亮（点击逐步）：
```html
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
```
过渡效果
```html
\`\`\`
最佳实践
专业设计规范
字体选择：
- 标题：使用无衬线字体（Inter、思源黑体、Noto Sans SC），字重 600-700
- 正文：字号不低于 24px 确保投影可读性，字重 400-500
- 数据/强调：可使用等宽字体（JetBrains Mono）突出关键数字
```html
\`\`\`
视觉层次：
- 建立清晰的信息层级：标题 > 副标题 > 正文 > 注释
- 运用留白管理呼吸空间，避免信息拥挤
- 通过字体大小、粗细、颜色差异引导视觉流线
- 重要信息使用色块、边框或图标辅助强调
⭐ 信息结构增强：
- 强烈推荐：使用 Infographic skill 来生成专业信息图，代替纯文字列表
- 优势：视觉冲击力强、信息传达高效、专业感更强
内容结构优化
信息密度控制：
- 每页不超过 7 个要点（符合认知负荷原则）
- 每个要点控制在 15 字以内
- 优先使用图表、图标替代纯文字
- 复杂数据拆分为多页递进展示
标题层级规范：
- H1：仅用于封面标题和章节分隔页
- H2：每页主标题，概括本页核心内容
- H3：小节标题，用于内容分组
- 避免超过 3 级标题层次
逻辑递进结构：
```
封面页 → 目录/议程 → 背景/问题 → 分析/方案 → 数据/论证 → 结论/行动 → 致谢/Q&A
```
快捷键速查
| 按键 | 功能 |
|---|
| ← → | 上一页/下一页 |
| F | 全屏模式 |
| S | 演讲者视图 |
| ESC | 概览/退出 |
| B / . | 黑屏暂停 |
| O | 幻灯片概览 |
| ? | 快捷键帮助 |
专业模板
重要说明
- 本场景运行在已有的 HTML 容器内，不要输出 ``、``、``、`` 等文档级标签
- 必须先输出完整的 DOM 结构，再加载 Reveal.js 资源，确保用户可以实时看到元素上屏
- 样式可以通过 `` 标签内联，脚本通过 `<script>` 标签引入
标准输出顺序
```
- Tailwind CSS CDN
- 内联样式 () - 包含 CSS 变量和组件类
- Reveal.js 容器结构 (<div class="reveal">)
- 所有幻灯片内容 (
- 自定义导航按钮
- CDN 资源引入 ( 和
- 初始化脚本
```
完整模板
```html
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");
/* CSS 变量 */
:root {
--primary-color: #2196F3;
--secondary-color: #ff9800;
--text-color: #222;
--muted-color: #666;
--box-bg: #f5f5f5;
--box-border: #ddd;
--box-radius: 8px;
--blue: #2196F3;
--blue-bg: #e3f2fd;
--orange: #ff9800;
--orange-bg: #fff3e0;
--green: #4caf50;
--green-bg: #e8f5e9;
}
/* 关键：确保铺满容器 */
.reveal {
font-family: "Noto Sans SC", "Inter", sans-serif;
width: 100% !important;
height: 100% !important;
}
.reveal .slides {
width: 100% !important;
height: 100% !important;
}
.reveal .slides > section {
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
box-sizing: border-box;
}
/* 组件类 */
.box {
background: var(--box-bg);
border: 1px solid var(--box-border);
border-radius: var(--box-radius);
padding: 20px;
margin: 10px 0;
}
.callout {
border-left: 6px solid var(--primary-color);
padding: 15px 20px;
margin: 15px 0;
background: #f9f9f9;
border-radius: var(--box-radius);
}
.callout-blue { border-left-color: var(--blue); background: var(--blue-bg); }
.callout-orange { border-left-color: var(--orange); background: var(--orange-bg); }
.callout-green { border-left-color: var(--green); background: var(--green-bg); }
/* 文字尺寸 */
.text-lg { font-size: 18pt !important; }
.text-xl { font-size: 20pt !important; }
.text-2xl { font-size: 24pt !important; }
.reveal .slide-number { @apply text-sm text-gray-500 bg-transparent px-4 py-2; }
.reveal .progress { @apply h-1; }
.reveal .controls { @apply hidden; }
<!-- 目录页 -->
<section>
<h2 class="text-4xl font-bold mb-8">议程</h2>
<ol class="text-xl space-y-4">
<li>背景介绍</li>
<li>核心方案</li>
<li>数据支撑</li>
<li>下一步计划</li>
</ol>
</section>
<!-- 内容页示例 -->
<section>
<h2 class="text-4xl font-bold mb-8">内容标题</h2>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
<div class="callout callout-blue">
<p><strong>💡 关键洞察</strong></p>
<p>这是一个重要的信息</p>
</div>
<div class="callout callout-green">
<p><strong>✅ 成功指标</strong></p>
<p>达成率 127%</p>
</div>
</div>
<aside class="notes">演讲者备注内容</aside>
</section>
<!-- 数据展示页 -->
<section>
<h2 class="text-4xl font-bold mb-8">业绩增长概览</h2>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
<div class="text-center p-6 bg-blue-50 rounded-2xl">
<span class="text-6xl font-bold text-blue-600">+127%</span>
<span class="block mt-4 text-xl text-gray-600">营收增长</span>
</div>
<div class="text-center p-6 bg-green-50 rounded-2xl">
<span class="text-6xl font-bold text-green-600">3.2M</span>
<span class="block mt-4 text-xl text-gray-600">活跃用户</span>
</div>
</div>
</section>
```
关键要点
- ✅ 先输出 DOM：用户可以立即看到幻灯片结构和内容
- ✅ 后加载资源：CDN 资源放在 DOM 之后，避免阻塞渲染
- ✅ 延迟初始化：使用轮询检查 Reveal.js 是否加载完成
- ✅ 容器适配：移除所有文档级标签，直接输出可嵌入的片段
- ✅ 流式友好：按顺序输出，支持逐步渲染
- ✅ 组件复用：CSS 变量和组件类便于统一管理主题
参考文档
详细的图表配置和高级特性，请参阅：
脚本工具
可用的辅助脚本（位于 `revealjs/scripts/` 目录）：
- `create-presentation.js`：生成演示文稿脚手架
- `check-overflow.js`：检查内容溢出
- `check-charts.js`：检查图表配置
