Upstream

---
name: ppt-design-system
description: >
  PPT/演示文稿设计系统技能。从 Open Design (129 套设计系统) 和 guizang-ppt-skill (5 主题 × 10 布局) 蒸馏而来。
  提供 5 套完整风格预设 + 10 种布局模板 + 字体三层体系 (衬线标题/非衬线正文/等宽元数据)。
  支持 HTML 单页版和 PPTX 文件两种输出格式。
  当用户要求制作 PPT、演示文稿、汇报材料、课件、设计方案时使用。
agent_created: true
---

# PPT 设计系统技能

## 设计哲学 (蒸馏自 guizang-ppt-skill + Open Design)

1. **克制优于炫技** — 依靠字体对比 + 网格留白，不靠阴影和浮动装饰
2. **结构优于装饰** — 信息层级由字号和字体共同定义
3. **排版三层体系** — 衬线标题 / 非衬线正文 / 等宽元数据
4. **图片是第一公民** — 标准比例，只裁底部不裁顶部
5. **节奏靠暗亮交替** — hero 页与正文页交替，避免视觉疲劳
6. **反模式** — 禁止紫色渐变、禁止 emoji 图标(用 Lucide)、禁止圆角卡片左边界线

## 触发条件

当用户提到以下任何关键词时，加载本技能：
- "做一份 PPT"、"做个演示"、"做 slides"
- "工程汇报"、"进度报告"、"技术方案"
- "课件"、"培训材料"、"教学 PPT"
- "项目提案"、"商业演示"、"方案展示"
- "杂志风"、"deck"、"presentation"
- 任何涉及 PPT 制作的需求，即使没有明确说要做

## 启动流程

### 第一步：确认场景与风格

先问用户 3 个关键问题，不超过 3 个问题：
1. **用途场景？** — 工程汇报 / 教学培训 / 商务方案 / 数据报告 / 创意展示
2. **想要哪种风格？** — 展示 5 套预设让用户选（见 `references/themes.md`）
3. **有没有素材？** — 已有文档/数据/图片，还是从头写？

如果用户只给了模糊想法，基于内容推荐最匹配的风格（见 `references/presets.md`）。

**不允许用户自定义色值** — 只从 5 套预设中选，保护美学。

### 第二步：确定输出格式

| 格式 | 适用场景 | 实现方式 |
|------|---------|---------|
| **HTML 单页版** | 自己演示、分享链接、视觉效果优先 | 使用 `assets/template.html` 为基底，填入内容 |
| **PPTX 文件** | 发给甲方/领导、需他人编辑、正式场合 | 使用 pptx 技能 + PptxGenJS 生成 |

如果用户没明确，默认询问："要 HTML 版（浏览器直接看效果更好）还是 PPTX 文件（能发给人改）？"

### 第三步：制作

#### A. 制作 HTML 版
1. 拷贝 `assets/template.html` 到目标位置，按场景改标题和页眉
2. 选定主题色，替换 CSS 变量（见 `references/themes.md`）
3. 打开 `references/layouts.md` 挑选布局骨架粘贴
4. 填入内容、图片路径
5. 如果用户需要配图，生成并放入 `images/` 目录，使用标准比例
6. 装自检清单检查（见下方 Checklist）

#### B. 制作 PPTX 版
1. 加载 pptx 技能获取 PptxGenJS 使用方法
2. 根据选定风格的主题色（`references/themes.md`）设置幻灯片背景和配色
3. 参考 `references/layouts.md` 的布局思想设计每页排版
4. 字体映射规则（Windows 环境下）：
   - 衬线标题 → 微软雅黑 Bold（中文）/ Georgia Bold（英文）
   - 非衬线正文 → 微软雅黑 Regular（中文）/ Calibri（英文）
   - 等宽元数据 → Consolas
5. 每个 slide 加上页眉（场景名 + 页码）和页脚
6. 数据卡片用矩形 + 左侧细色块强调条实现
7. 完成后用 `python -m markitdown output.pptx` 做内容 QA

### 第四步：自检清单 (Checklist)

**P0 (必须通过)：**
- [ ] 大标题层级正确（衬线/微软雅黑 Bold，≥28pt）
- [ ] 正文用非衬线（微软雅黑/Calibri Regular，≥11pt）
- [ ] 元数据用等宽（Consolas/Nunito Mono）
- [ ] 没有 emoji（改用图标或文字描述）
- [ ] 没有紫色渐变
- [ ] 标题没有出现一字一行的情况
- [ ] 所有页面数据完整无遗漏

**P1 (强烈建议)：**
- [ ] 暗亮页交替 ≥1 次（不要全是白底）
- [ ] 图片使用标准比例（16:9 / 4:3 / 3:2）
- [ ] 每页内容不拥挤，留白充分
- [ ] 数据卡片左侧有强调色块
- [ ] 字体颜色与背景对比度充足

**P2 (推荐)：**
- [ ] 页眉页脚统一格式
- [ ] 页码标注
- [ ] 封面有场景标识 + 日期

## 5 套风格一览

| 风格 | 场景 | 调性 |
|------|------|------|
| 🟦 **靛蓝瓷** | 工程汇报、技术方案 | 冷静专业 · 深蓝 `#0a1f3d` + 瓷白 `#f1f3f5` |
| ⬛ **墨水经典** | 商务演示、项目提案 | 杂志质感 · 纯墨黑 `#0a0a0b` + 暖米白 `#f1efea` |
| 🟩 **森林墨** | 教学培训、课件 | 沉稳亲和 · 森林绿 `#1a2e1f` + 象牙 `#f5f1e8` |
| 🟫 **沙丘** | 创意展示、设计分享 | 高级克制 · 炭灰 `#1f1a14` + 沙色 `#f0e6d2` |
| ⬜ **极简数据** | 数据报告、Dashboard | 干净利落 · 纯黑 `#0c0c09` + 素白 `#f4f4f1` |

详细色值、字体搭配见 `references/themes.md`。
场景推荐和案例见 `references/presets.md`。

## 布局模板

10 种页面布局骨架在 `references/layouts.md`，可直接粘贴使用：
1. 开场封面 — Hero Cover
2. 章节幕封 — Act Divider
3. 数据大字报 — Big Numbers Grid
4. 左文右图 — Quote + Image
5. 图片网格 — Image Grid
6. 流水线 — Pipeline
7. 悬念问题 — Hero Question
8. 大引用 — Big Quote
9. 并列对比 — Before / After
10. 图文混排 — Lead Image + Side Text

## 参考资源

- `references/themes.md` — 5 套主题色的完整 CSS 变量定义和使用说明
- `references/layouts.md` — 10 种布局的完整 HTML 骨架代码和要点
- `references/presets.md` — 场景推荐、风格搭配速查、配色技巧
- `assets/template.html` — 可直接运行的 HTML 演示文稿模板