Menu
触发关键词：演示、PPT、幻灯片、slides、presentation、keynote、deck、汇报、展示; 使用场景：用户需要生成演示文稿、汇报材料或教学幻灯片。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional 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 2409+ best OpenClaw skills — AI tools, productivity, marketing, frontend, mobile, backend, DevOps and more. Weekly updated by MyClaw.ai — Powered by MyClaw.ai
将1688的商品铺货到俄罗斯电商平台Ozon（上架），通过Ozon官方API实现商品信息的上传和状态查询。适用于需要将单个1688的商品上架到Ozon的场景。
ActiveCampaign API integration with managed OAuth. Marketing automation, CRM, contacts, deals, and email campaigns. Use this skill when users want to manage contacts, deals, tags, lists, automations, or campaigns in ActiveCampaign. For other third party apps, use the api-gateway skill (https://clawhub.ai/byungkyu/api-gateway). Requires network access and valid Maton API key.
Acuity Scheduling API integration with managed OAuth. Manage appointments, calendars, clients, and availability. Use this skill when users want to schedule, reschedule, or cancel appointments, check availability, or manage clients and calendars. For other third party apps, use the api-gateway skill (https://clawhub.ai/byungkyu/api-gateway).
World-Class Adaptability & Learning Playbook. Use for: market trend awareness, horizon scanning, PESTLE analysis, organisational agility, Kaizen, PDCA cycles, 5S, lean operations, experimentation culture, hypothesis-driven development, A/B testing, MVP design, knowledge management, decision logs, ADRs, after-action reviews, competitive intelligence, SWOT, Porter's Five Forces, battlecards, pivoting strategy, lean startup, business model canvas, signal detection, scenario planning, learning velocity, value stream mapping, Gemba walks. Trigger when discussing ANY organisational learning, strategic adaptability, continuous improvement, competitive analysis, experimentation, knowledge systems, or pivot/persevere decisions. Also for startup strategy around product-market fit or validated learning. If it touches learning faster, adapting better, or competing smarter — use this skill.
Digital legacy agent — dead man's switch, final message executor, and ghost mode responder that preserves your digital presence. Use when the user wants to set up a dead man's switch, manage their digital will, or enable ghost mode.