Reveal.js PPT Skill

Overview

触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示

使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。

使用 Reveal.js 创建专业的 HTML 演示文稿，支持丰富的过渡效果、图表集成、演讲者备注等功能。

设计原则

关键要求：在创建任何演示文稿之前，必须先分析内容并选择合适的设计元素。

内容驱动设计

1. 分析主题：这个演示文稿是关于什么的？它暗示了什么样的基调、行业或情绪？
2. 检查品牌：如果用户提到公司/组织，考虑其品牌色彩和身份
3. 匹配配色：选择反映主题的颜色
4. 声明方案：在编写代码之前，解释你的设计选择

必须遵守：

• ✅ 在编写代码之前，声明你的内容驱动设计方案
• ✅ 使用网络安全字体或通过 \@import\ 引入 Google Fonts
• ✅ 通过大小、粗细和颜色创建清晰的视觉层次
• ✅ 确保可读性：强对比度、适当的文字大小、整洁的对齐
• ✅ 保持一致性：在所有幻灯片中重复使用相同的模式、间距和视觉语言

配色方案选择

创意选色原则：

• 超越默认：什么颜色真正匹配这个特定主题？避免自动驾驶式的选择
• 多角度考虑：主题、行业、情绪、能量水平、目标受众、品牌身份
• 大胆尝试：尝试意想不到的组合——医疗演示不一定要用绿色，金融不一定要用深蓝
• 构建调色板：选择 3-5 种协调的颜色（主色 + 辅助色 + 强调色）
• 确保对比度：文字必须在背景上清晰可读

精选配色方案（选择一个、调整它，或创建你自己的）：

幻灯片内容多样化

多样化展示是关键。即使幻灯片有相似的内容类型，也要变化视觉呈现：

• 在不同幻灯片使用不同布局：一页用分栏，另一页用堆叠盒子，第三页用带图标的标注
• 混合容器样式：纯文本、盒子、标注、引用块
• 使用视觉层次：\\ 标记关键词，不同颜色区分类别
• 用其他元素（引用、标注、分栏）打破列表的单调
• 不要在连续幻灯片上重复相同的布局模式

保持可扫描性：

• 短要点，不是段落
• 每页尽可能只有一个主要观点
• 使用图标（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 变量定义

在 \

\\\`

关键要点

1. ✅ 先输出 DOM：用户可以立即看到幻灯片结构和内容
2. ✅ 后加载资源：CDN 资源放在 DOM 之后，避免阻塞渲染
3. ✅ 延迟初始化：使用轮询检查 Reveal.js 是否加载完成
4. ✅ 容器适配：移除所有文档级标签，直接输出可嵌入的片段
5. ✅ 流式友好：按顺序输出，支持逐步渲染
6. ✅ 组件复用：CSS 变量和组件类便于统一管理主题

参考文档

详细的图表配置和高级特性，请参阅：

• 图表详细文档
• 高级特性文档
• CSS 变量参考

脚本工具

可用的辅助脚本（位于 \revealjs/scripts/\ 目录）：

• \create-presentation.js\：生成演示文稿脚手架
• \check-overflow.js\：检查内容溢出
• \check-charts.js\：检查图表配置