Reveal.js PPT Skill

Overview

触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。

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

设计原则

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

内容驱动设计

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

必须遵守：

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

配色方案选择

创意选色原则：

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

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

编号	名称	颜色组合
1	Classic Blue	深海军蓝 `#1C2833`、石板灰 `#2E4053`、银色 `#AAB7B8`、米白 `#F4F6F6`
2	Teal & Coral	青色 `#5EA8A7`、深青 `#277884`、珊瑚 `#FE4447`、白色 `#FFFFFF`
3	Bold Red	红 `#C0392B`、亮红 `#E74C3C`、橙 `#F39C12`、黄 `#F1C40F`、绿 `#2ECC71`
4	Warm Blush	淡紫 `#A49393`、腮红 `#EED6D3`、玫瑰 `#E8B4B8`、奶油 `#FAF7F2`
5	Burgundy Luxury	酒红 `#5D1D2E`、深红 `#951233`、铁锈 `#C15937`、金色 `#997929`
6	Deep Purple & Emerald	紫色 `#B165FB`、深蓝 `#181B24`、翡翠 `#40695B`、白色 `#FFFFFF`
7	Cream & Forest	奶油 `#FFE1C7`、森林绿 `#40695B`、白色 `#FCFCFC`
8	Pink & Purple	粉红 `#F8275B`、珊瑚 `#FF574A`、玫瑰 `#FF737D`、紫色 `#3D2F68`
9	Lime & Plum	青柠 `#C5DE82`、李子 `#7C3A5F`、珊瑚 `#FD8C6E`、蓝灰 `#98ACB5`
10	Black & Gold	金色 `#BF9A4A`、黑色 `#000000`、奶油 `#F4F6F6`
11	Sage & Terracotta	鼠尾草 `#87A96B`、赤陶 `#E07A5F`、奶油 `#F4F1DE`、炭灰 `#2C2C2C`
12	Charcoal & Red	炭灰 `#292929`、红色 `#E33737`、浅灰 `#CCCBCB`
13	Vibrant Orange	橙色 `#F96D00`、浅灰 `#F2F2F2`、炭灰 `#222831`
14	Forest Green	黑色 `#191A19`、绿色 `#4E9F3D`、深绿 `#1E5128`、白色 `#FFFFFF`
15	Retro Rainbow	紫 `#722880`、粉 `#D72D51`、橙 `#EB5C18`、琥珀 `#F08800`、金 `#DEB600`
16	Vintage Earthy	芥末 `#E3B448`、鼠尾草 `#CBD18F`、森林绿 `#3A6B35`、奶油 `#F4F1DE`
17	Coastal Rose	老玫瑰 `#AD7670`、海狸 `#B49886`、蛋壳 `#F3ECDC`、灰绿 `#BFD5BE`
18	Orange & Turquoise	浅橙 `#FC993E`、灰青 `#667C6F`、白色 `#FCFCFC`

幻灯片内容多样化

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

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

保持可扫描性：

短要点，不是段落
每页尽可能只有一个主要观点
使用图标（Font Awesome）增加视觉趣味

内容少时放大：当幻灯片内容较少时，使用更大的字号填充空间，不要留下大片空白配小字。

视觉细节选项

几何图案 (Geometric Patterns)：

对角线分隔符代替水平线
不对称列宽（30/70、40/60、25/75）
90° 或 270° 旋转文字标题
圆形/六边形图片框架
角落三角形装饰
重叠形状增加深度

边框与框架处理 (Border & Frame Treatments)：

单侧粗边框（10-20pt）
双线边框配对比色
角括号代替完整边框
L 形边框（上+左或下+右）
标题下划线强调（3-5pt 粗）

ppt-skill

Install via CLI (Recommended)