메뉴
触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示; 使用场景：用户需要生成演示文稿、汇报材料或教学幻灯片。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | ppt-skill |
| version | 0.2.0 |
| description | 触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示; 使用场景：用户需要生成演示文稿、汇报材料或教学幻灯片。 |
触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示 使用场景：用户需要生成基于 Reveal.js 的 HTML 演示文稿，在浏览器中运行。
使用 Reveal.js 创建专业的 HTML 演示文稿，支持丰富的过渡效果、图表集成、演讲者备注等功能。
关键要求：在创建任何演示文稿之前，必须先分析内容并选择合适的设计元素。
必须遵守：
创意选色原则：
精选配色方案（选择一个、调整它，或创建你自己的）：
| 编号 | 名称 | 颜色组合 |
|---|---|---|
| 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` |
多样化展示是关键。即使幻灯片有相似的内容类型，也要变化视觉呈现：
保持可扫描性：
内容少时放大：当幻灯片内容较少时，使用更大的字号填充空间，不要留下大片空白配小字。
几何图案 (Geometric Patterns)：
边框与框架处理 (Border & Frame Treatments)：
排版处理 (Typography Treatments)：
图表与数据样式 (Chart & Data Styling)：
布局创新 (Layout Innovations)：
背景处理 (Background Treatments)：
图表/表格布局规则：
使用 Reveal.js 实现（功能强大、专业演示库、支持丰富的过渡效果和主题）
优势：
CDN 引入： ```html
\`\`\````html
第一页内容
⭐ 关键布局样式（必须包含）： ```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）
禁止：
注意：
在 `` 标签中定义以下 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; } ```
```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
关键洞察
这是一个重要的信息盒子
```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
💡 提示
这是一个蓝色的提示标注
✅ 成功
操作已成功完成
```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 插件为幻灯片添加专业图表。
在 CDN 资源部分添加： ```html
```
初始化时添加插件： ```javascript Reveal.initialize({ // ... 其他配置 plugins: [ RevealChart ], chart: { defaults: { color: "lightgray", borderColor: "lightgray" } } }); ```
⚠️ 关键：图表必须使用 flexbox 容器模式，否则会溢出！
```html
```html
关键洞察
```html
摘要：Q4 表现强劲，所有区域均超额完成目标。
支持的类型：`bar`、`line`、`pie`、`doughnut`、`radar`、`polarArea`、`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"] ```
点击逐步显示内容：
```html
点击后出现
向上滑入
变红高亮
\`\`\`动画类型：
按 `S` 键打开演讲者视图：
```html
可见内容
演讲者私人备注： - 记得提及 X - 过渡到下一个话题```html
在幻灯片之间自动动画过渡，匹配 `data-id` 的元素会平滑过渡：
```html
```html
def hello():
print("Hello")
```
行号高亮（点击逐步）： ```html
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
```
```html
字体选择：
```html
\`\`\`视觉层次：
⭐ 信息结构增强：
信息密度控制：
标题层级规范：
逻辑递进结构： ``` 封面页 → 目录/议程 → 背景/问题 → 分析/方案 → 数据/论证 → 结论/行动 → 致谢/Q&A ```
| 按键 | 功能 |
|---|---|
| ← → | 上一页/下一页 |
| F | 全屏模式 |
| S | 演讲者视图 |
| ESC | 概览/退出 |
| B / . | 黑屏暂停 |
| O | 幻灯片概览 |
| ? | 快捷键帮助 |
```
```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>
```
详细的图表配置和高级特性，请参阅：
可用的辅助脚本（位于 `revealjs/scripts/` 目录）：
A curated collection of 2109+ best OpenClaw skills — AI tools, productivity, marketing, frontend, mobile, backend, DevOps and more. Weekly updated by MyClaw.ai — Powered by MyClaw.ai
Complete startup metrics command center — from raw data to investor-ready dashboards. Covers every stage (pre-seed to Series B+), every model (SaaS, marketplace, consumer, hardware), with diagnostic frameworks, benchmark databases, and board-ready reporting.
Analyze blast radius, attack paths, and threat landscape across your AI infrastructure. Use when: "blast radius", "threat intel", "risk score", "attack path", "lateral movement", "context graph", "who can reach what".
AI compliance and policy engine — evaluate scan results against OWASP, NIST, SOC 2, ISO 27001, CMMC, EU AI Act, AISVS v1.0, and related frameworks. Generate SBOMs and compliance reports. Use when: "compliance report", "NIST", "SOC 2", "ISO 27001", "OWASP", "EU AI Act", "AISVS", "generate SBOM", "policy check".
Discover AI agents, MCP servers, and configurations on this machine or environment. Use when: "find agents", "what's configured", "doctor", "what MCP servers", "show me what's installed", "mcp inventory".
Enforce security policies on MCP tool calls and block dangerous operations at runtime. Use when: "block risky calls", "apply policy", "proxy", "runtime protection", "policy enforcement", "intercept MCP calls".