HTML PPT Skill — 完整生成产出
一、SKILL.md
```markdown
---
skill_id: html-ppt-skill
version: 1.0.0
description: 将自然语言主题描述转化为具备专业PPT风格的自包含HTML演示文件
trigger_keywords:
- HTML PPT, 网页演示, 在线幻灯片, HTML presentation, web slides
- 生成PPT, 制作演示, 创建幻灯片, 演示文稿, 演示稿
- 前端PPT, reveal.js, HTML slides, 网页版PPT, 在线PPT
- 浏览器演示, 交互式幻灯片
input_schema:
topic: string (required)
style: string (optional, default: minimal_business)
num_slides: number (optional, default: 10, range: 5-20)
language: string (optional, default: zh-CN)
include_diagrams: boolean (optional, default: true)
output_schema:
html_file: string (自包含HTML文件路径)
slide_count: number
file_size_kb: number
wcag_compliance: string (AA/AAA)
compatibility:
platform: universal
browser: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+
mobile: iOS Safari 14+, Android Chrome 90+
---
# HTML PPT Skill — 标准作业程序
## 触发条件
当用户输入包含以下任意关键词组合时，自动激活本Skill：
- "生成PPT"、"制作演示"、"创建幻灯片"、"演示文稿"、"网页演示"
- "HTML PPT"、"HTML slides"、"在线幻灯片"、"网页版PPT"
- "reveal.js"、"web presentation"
## 输入参数提取
从用户输入中提取以下参数，缺失参数使用默认值：
- `topic`：必填，从用户消息主体中提取
- `style`：选填，默认 `minimal_business`
- `num_slides`：选填，默认 10
- `language`：选填，默认 zh-CN
- `include_diagrams`：选填，默认 true
## 7步工作流
### Step 1: 内容架构分析与提纲生成
**输入**：topic 字符串
**动作**：
1. 基于叙事逻辑（SCQA框架/金字塔原理）分析主题
2. 拆解为结构化提纲：封面 → 目录/议程 → 背景/问题 → 方案/论证 × N → 案例/数据 → 总结/行动号召
3. 每页信息密度控制：封面1个核心标题，正文页2-3个关键点，总结页3-5个要点
**输出**：JSON格式 `outline` 对象，每节点含 `{slide_type, title, key_points[], notes}`
### Step 2: 风格适配与设计令牌注入
**输入**：style 参数
**动作**：
1. 从12套内嵌主题中激活对应风格
2. 注入CSS自定义属性（设计令牌）：`--primary-color`、`--bg-color`、`--text-color`、`--accent-color`、`--font-heading`、`--font-body`、`--card-bg`、`--border-radius`、`--shadow` 等至少15个令牌
3. 生成完整 `<style>` 块，包含：全局排版、6级标题样式、代码块、表格、引用块、卡片、按钮、徽章、时间线等20+组件样式
**验收标准**：颜色方案满足WCAG AA级对比度（≥4.5:1），设计令牌≥15个
### Step 3: 幻灯片视觉布局决策
**动作**：根据每页 `slide_type` 和 `key_points` 数量，从布局模式库匹配最佳版式：
- 封面 → title-slide 布局
- 1个要点 → single-column 布局
- 2个要点 → two-column 对比布局
- 3个要点 → three-column 网格布局
- 图文结合 → left-right split 布局
- 数据展示 → chart-focused 布局
- 代码展示 → code-block 布局
- 时间线 → timeline 布局
- 步骤流程 → steps 布局
**输出**：每页HTML结构注释（布局类名 + 内容映射）
### Step 4: 图表与可视化生成
**动作**：
1. 识别需要数据可视化的页面
2. 生成 Mermaid.js 图表代码（流程图/时序图/饼图/甘特图）
3. 嵌入 `<div class="mermaid">...</div>` 标记
4. 初始化脚本中配置 `mermaid.initialize({ startOnLoad: true, theme: 'default' })`
### Step 5: HTML骨架组装
**结构模板**：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>【主题】</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<style>/* 全部自定义样式内联 */</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 封面页 -->
<section class="title-slide" data-transition="fade">
<h1>主标题</h1>
<p class="subtitle">副标题</p>
</section>
<!-- 内容页 -->
<section data-transition="slide">
<h2>章节标题</h2>
<div class="two-column">...</div>
</section>
<!-- 更多页面 -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
Reveal.initialize({
hash: true,
transition: 'slide',
pdfMaxPagesPerSlide: 1,
controls: true,
progress: true
});
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
注意：仅3个CDN依赖（Reveal.js CSS + JS、Mermaid JS），其余全部内联
Step 6: 动画与转场注入
动作：
1. 页面级转场：封面用 fade，内容页默认 slide，重点页用 zoom
2. 元素级动画：列表项添加 class="fade-in-then-semi-out"，数据卡片添加 data-fragment-index="1,2,3"
3. 代码块启用 data-line-numbers="1|2-3|4" 逐行高亮
验收标准：≥60%的内容页包含渐进显示动画
Step 7: 16项质量QA检查
逐项验证并修复：
1. ✅ <section> 嵌套于 <div class="slides"> 中
2. ✅ <meta viewport> 包含 user-scalable=no
3. ✅ 隐藏页使用 data-visibility="hidden" 而非 hidden
4. ✅ 颜色对比度 ≥ 4.5:1
5. ✅ 图片有 alt 属性（占位用 Unsplash CDN）
6. ✅ 键盘导航无死循环
7. ✅ 移动端触摸滑动流畅，触控区域 ≥ 44×44px
8. ✅ 打印样式配置正确
9. ✅ 文件 < 200KB（不含CDN）
10. ✅ 动画不触发超过15个DOM元素同时变化
11. ✅ 代码块高亮无转义错误
12. ✅ Mermaid图表无渲染报错
13. ✅ 链接使用HTTPS
14. ✅ 控制台无JavaScript错误
15. ✅ ≥30%幻灯片含演讲者备注
16. ✅ PDF导出功能正常
输出规范
完成工作流后，输出完整HTML代码，并以以下格式告知用户：
```
✅ 演示文稿生成完成！
📄 文件名：topic_sanitized.html
📊 幻灯片数量：x 页
🎨 风格：style_name
📦 文件大小：约 xx KB
💻 使用方法：复制代码保存为 .html 文件，双击用浏览器打开
⌨️ 操作：← → 翻页 | F 全屏 | Esc 鸟瞰 | Ctrl+P 导出PDF
```
```
---
## 二、核心模板文件
### templates/deck.html（主骨架）
```html
<!DOCTYPE html>
<html lang="{{LANGUAGE}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>{{TITLE}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<style>
:root {
--primary-color: #2c3e50;
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #3498db;
--font-heading: 'Segoe UI', system-ui, sans-serif;
--font-body: 'Segoe UI', system-ui, sans-serif;
--card-bg: #f8f9fa;
--border-radius: 8px;
--shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* 全局样式、组件样式在此展开 */
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
{{SLIDES}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
Reveal.initialize({
hash: true,
transition: 'slide',
pdfMaxPagesPerSlide: 1
});
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
```
themes/tokens.css（12套设计令牌集合）
```css
/* 1. 极简商务 */
.theme-minimal_business {
--primary-color: #1a365d;
--bg-color: #ffffff;
--text-color: #2d3748;
--accent-color: #3182ce;
--font-heading: 'Helvetica Neue', sans-serif;
--font-body: 'Arial', sans-serif;
--card-bg: #f7fafc;
--border-radius: 4px;
--shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 2. 现代科技 */
.theme-modern_tech {
--primary-color: #00d4ff;
--bg-color: #0a0a2e;
--text-color: #e2e8f0;
--accent-color: #7c3aed;
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--card-bg: rgba(255,255,255,0.05);
--border-radius: 12px;
--shadow: 0 4px 24px rgba(0,212,255,0.15);
}
/* 3. 学术论文 */
.theme-academic_serif {
--primary-color: #8b0000;
--bg-color: #fefefe;
--text-color: #1a1a1a;
--accent-color: #b8860b;
--font-heading: 'Georgia', serif;
--font-body: 'Times New Roman', serif;
--card-bg: #faf8f5;
--border-radius: 2px;
--shadow: none;
}
/* 4. 创意杂志 */
.theme-creative_editorial {
--primary-color: #000000;
--bg-color: #ffffff;
--text-color: #111111;
--accent-color: #ff3366;
--font-heading: 'Playfair Display', serif;
--font-body: 'Helvetica Neue', sans-serif;
--card-bg: transparent;
--border-radius: 0;
--shadow: none;
}
/* 5. 政府公务 */
.theme-government_official {
--primary-color: #cc0000;
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #ffd700;
--font-heading: 'FZHei-B01S', 'SimHei', sans-serif;
--font-body: 'FZShuSong-Z01', 'SimSun', serif;
--card-bg: #fef8f8;
--border-radius: 2px;
--shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* 6. 教育培训 */
.theme-educational_friendly {
--primary-color: #ff6b35;
--bg-color: #fffdf7;
--text-color: #333333;
--accent-color: #4ecdc4;
--font-heading: 'Nunito', sans-serif;
--font-body: 'Nunito', sans-serif;
--card-bg: #ffffff;
--border-radius: 16px;
--shadow: 0 4px 16px rgba(0,0,0,0.06);
}
/* 7. 融资路演 */
.theme-pitch_deck_venture {
--primary-color: #ffffff;
--bg-color: #0d0d0d;
--text-color: #e0e0e0;
--accent-color: #00ff88;
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--card-bg: rgba(255,255,255,0.03);
--border-radius: 8px;
--shadow: 0 0 30px rgba(0,255,136,0.1);
}
/* 8. 苹果风 */
.theme-apple_keynote {
--primary-color: #1d1d1f;
--bg-color: #ffffff;
--text-color: #1d1d1f;
--accent-color: #0071e3;
--font-heading: 'SF Pro Display', system-ui, sans-serif;
--font-body: 'SF Pro Text', system-ui, sans-serif;
--card-bg: #f5f5f7;
--border-radius: 18px;
--shadow: 0 8px 32px rgba(0,0,0,0.04);
}
/* 9. 玻璃拟态 */
.theme-glassmorphism {
--primary-color: #ffffff;
--bg-color: #1a1a2e;
--text-color: #ffffff;
--accent-color: #e94560;
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--card-bg: rgba(255,255,255,0.1);
--border-radius: 16px;
--shadow: 0 8px 32px rgba(0,0,0,0.2);
backdrop-filter: blur(12px);
}
/* 10. 赛博朋克 */
.theme-cyberpunk_neon {
--primary-color: #ff00ff;
--bg-color: #000000;
--text-color: #00ff00;
--accent-color: #00ffff;
--font-heading: 'Orbitron', monospace;
--font-body: 'Share Tech Mono', monospace;
--card-bg: rgba(255,0,255,0.05);
--border-radius: 0;
--shadow: 0 0 20px rgba(255,0,255,0.4), 0 0 60px rgba(0,255,255,0.2);
}
/* 11. 环保自然 */
.theme-eco_nature {
--primary-color: #2d6a4f;
--bg-color: #f0f7f4;
--text-color: #1b4332;
--accent-color: #95d5b2;
--font-heading: 'Quicksand', sans-serif;
--font-body: 'Quicksand', sans-serif;
--card-bg: #ffffff;
--border-radius: 12px;
--shadow: 0 4px 12px rgba(45,106,79,0.1);
}
/* 12. 数据驱动 */
.theme-data_driven {
--primary-color: #2962ff;
--bg-color: #0d1117;
--text-color: #c9d1d9;
--accent-color: #58a6ff;
--font-heading: 'JetBrains Mono', monospace;
--font-body: 'Inter', sans-serif;
--card-bg: #161b22;
--border-radius: 6px;
--shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
```
---
三、完整Skill文件结构
```
skills/html-ppt-skill/
├── SKILL.md # ✅ 已完成（上方完整内容）
├── templates/
│ ├── deck.html # ✅ 已完成（上方主骨架模板）
│ ├── cover.html # 封面页专用模板
│ ├── section.html # 单页幻灯片模板
│ └── chart.html # 图表页模板
├── themes/
│ ├── tokens.css # ✅ 已完成（上方12套设计令牌）
│ └── animations.css # 动画预设库
├── assets/
│ └── icons.svg # 常用矢量图标集
└── examples/
├── ai_agent_intro.html # 示例：AI Agent介绍
└── quarterly_report.html # 示例：季度报告
```
---
四、使用示例
将 Skill 安装后，发送以下指令即可生成 PPT：
```
请按照 html-ppt-skill 规范，生成演示文稿。
【主题】2026年AI Agent技术变革趋势
【风格】modern_tech
【页数】12
【语言】zh-CN
【是否包含图表】true
```
Agent 将输出一个完整的 .html 文件，保存后双击用浏览器打开即可演示。
---
以上即为 html-ppt-skill 的完整生成产出，SKILL.md 包含全部元数据、工作流和验收标准，可直接部署使用。
