本文介绍如何为 Claude Code 编写一个专业的 PPT 生成 Skill，让 AI Agent 能够自动创建结构清晰、视觉美观的演示文稿。
PPT Skill 的核心职责是：
当用户出现以下请求时，自动调用此 Skill：
.claude/skills/
└── ppt/
├── skill.md # Skill 主文件（触发规则 + 执行逻辑）
├── templates/
│ ├── dark.html # 深色主题模板
│ ├── light.html # 浅色主题模板
│ └── minimal.html # 极简主题模板
└── examples/
└── sample.html # 示例输出
---
name: ppt
description: >
生成专业演示文稿（PPT/Slide）。当用户要求制作PPT、幻灯片、
演示文稿时触发。输出为独立 HTML 文件，支持深色/浅色主题切换。
triggers:
- "PPT"
- "幻灯片"
- "演示文稿"
- "Slide"
- "presentation"
output: html
---
## 任务
根据用户提供的主题，生成一份完整的 HTML 演示文稿。
## 执行步骤
### Step 1：分析需求
- 提取核心主题
- 确定目标受众（技术/商业/通用）
- 选择合适主题（dark/light/minimal）
### Step 2：规划结构
按以下框架设计页面：
1. 封面页 — 标题 + 副标题 + 日期
2. 目录页 — 3-5 个章节概览
3. 内容页（每章 2-4 页）— 要点 + 说明
4. 总结页 — 核心结论
5. 结尾页 — 联系方式 / 致谢
### Step 3：内容原则
- 每页只传达 **1 个核心观点**
- 每页文字不超过 **50 字**
- 要点数量控制在 **3-5 条**
- 标题写**结论句**，而非描述句
### Step 4：生成 HTML
使用深色主题模板，输出完整可运行的 HTML 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 深色主题基础样式 */
:root {
--bg: #0f0f1a;
--surface: #1a1a2e;
--accent: #7c3aed;
--text: #e2e8f0;
--muted: #94a3b8;
}
.slide {
width: 100vw;
height: 100vh;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
background: var(--bg);
color: var(--text);
}
.slide.active { display: flex; }
h1 { font-size: 3rem; color: var(--accent); }
h2 { font-size: 2rem; border-left: 4px solid var(--accent); padding-left: 16px; }
/* 键盘导航 */
body { margin: 0; font-family: 'Segoe UI', sans-serif; }
</style>
</head>
<body>
<!-- 封面页 -->
<div class="slide active" id="slide-1">
<h1>演示文稿标题</h1>
<p class="subtitle">副标题 · 2026</p>
</div>
<!-- 内容页 -->
<div class="slide" id="slide-2">
<h2>章节标题</h2>
<ul>
<li>要点一</li>
<li>要点二</li>
<li>要点三</li>
</ul>
</div>
<script>
let current = 0;
const slides = document.querySelectorAll('.slide');
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === 'Space') next();
if (e.key === 'ArrowLeft') prev();
});
function next() {
slides[current].classList.remove('active');
current = Math.min(current + 1, slides.length - 1);
slides[current].classList.add('active');
}
function prev() {
slides[current].classList.remove('active');
current = Math.max(current - 1, 0);
slides[current].classList.add('active');
}
</script>
</body>
</html>
在输出 PPT 前，Skill 应自动验证：
| 功能 | 实现方式 |
|---|---|
| 主题切换 | URL 参数 ?theme=dark/light |
| 演讲者备注 | 隐藏 <aside> 元素，按 N 键显示 |
| 导出 PDF | 调用 Playwright 截图每一页 |
| 动画效果 | CSS @keyframes + transition |
| 图表支持 | 内嵌 Chart.js 或 Mermaid |
用户输入：
帮我做一个关于"微服务架构最佳实践"的PPT，面向技术团队，约10页
Skill 输出：
microservices-best-practices.htmlSkill 设计原则：输入越简单，输出越专业。让 AI 承担所有排版和设计决策，用户只需提供主题。