# 演示幻灯片

> 演示幻灯片 is an Agent Skill for documents published in the maka-agent/maka-agent repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

当用户需要做演示文稿、幻灯片、pitch deck、路演/发布会 PPT、提案稿等一页页的演示物料时使用。典型问法："帮我做一份幻灯片"、"做个 pitch deck"、"这些内容做成 PPT"、"做套演示稿"。产出单文件 HTML，键盘翻页，可导出。

- Skill name: `演示幻灯片`
- Category: [Documents](https://www.openparable.com/skill/documents/1)
- Source: https://github.com/maka-agent/maka-agent/blob/HEAD/apps/desktop/resources/bundled-skills/html-slides/SKILL.md
- Repository: maka-agent/maka-agent (675 GitHub stars when collected)

## SKILL.md

# 演示幻灯片

## 目标

用**单文件 HTML** 制作幻灯片：每页一个 `<section>`，键盘左右翻页，统一视觉体系。产物是一个自包含 HTML，浏览器打开即可全屏演示。核心是"**每页一个观点、真实放映条件（投影/Zoom/手机）下清晰可读**"。

幻灯片是视觉辅助不是文档。优先级：清晰 > 可读 > 层次 > 简洁。一致性 > 创意，降低认知负荷。

## 核心规则（不可协商）

- **一页一个观点**。标题直接说结论（takeaway），不是话题标签。
- 内容在要求字号下放不下就**拆页或删减，绝不缩字**。
- 短语 > 句子，不要整段文字，不要段落。细节进备注/附录。
- **字号地板**（16:9，1920×1080 画布）：正文 ≥ 28px（宜 28-36），标题 ≥ 56px（宜 56-80），区块标题 ≥ 40px，标签/caption ≥ 22px（绝不再小），关键数字 56-96px（单个英雄 KPI 可上 120+）。
- 最多 2 个字族，靠 weight 拉层次不靠堆字号。行高用像素值不用无单位倍数。避免 ALL CAPS（标签除外）。
- 内容距边缘 ≥ 100px 安全区。文字/背景永远高对比。

## 工作流步骤

### 1. 理清叙事结构

先把内容组织成一条线索：每页承担一个信息点，页与页之间有推进关系（问题→洞察→方案→证据→行动）。判断语境调性：企业=结构化；创业=极简大胆；营销=利益驱动；内部=可略密；keynote=极视觉。规则始终适用。

### 2. 规划每页的布局契约

给每页选一个骨架，同类页复用同一契约以保持一致：

- **封面**：居中标题(64-96 Bold) + 副标题(32-40) + meta(24-28)；或左块式大标题 + logo 右下。
- **章节分隔**：小标签(28 弱化) + 大标题(56-72)，大留白，只这两样。
- **金句/主张**：单条陈述(48-64，≤2 行)，可选署名(28)，只一个信息。
- **概念+视觉**：左右 50/50，一侧标题(40-48)+正文(28-32，≤4 行)，一侧图，间距 ≥ 40，垂直居中。
- **三支柱/特性**：3 列等宽，每列视觉 + 标签(32) + 描述(24，≤2 行)，同顶线、同基线。
- **对比**：2 列，各标题(32-40) + 要点(28，2-4 条)，内容平衡。
- **单 KPI**：标签(28 弱) + 巨大数字(120-200) + 上下文(28-32)，数字是绝对主角。
- **两/三 KPI**：等权数字(96-120 / 72-96) + 标签，同基线。
- **流程**：一排 3-5 步，图标/序号 + 标签(32) + 一行描述(24)，等间距同基线。
- **数据+洞察**：图表(约 60% 高) + 加粗洞察句(28-32)，一个高亮点，无 chart junk。
- **列表**：标题(48) + 3-5 项(28-32)，不换行、大间距。
- **收尾**：headline(56-72) + 副标题(28-32) + 联系方式(24-28)，干净，留最后印象。

### 3. 建立统一视觉体系

- **配色**：2-3 个核心色 + 中性色，强调色只用于强调，正文中性，尽量色盲友好。整套 deck 一套灰阶。
- **排版**：整套统一字体栈，用 CSS 变量集中管理颜色/字号/间距，保证跨页一致。
- **视觉支撑意义不做装饰**：数据优先用图表而非文字，一图一洞察，简化图表，高亮关键数据点。图标同风格同尺寸。
- **首尾两页是"陈述"不是"信息"**：追求情绪与印象，强视觉配强文字。纯文字页就让排版做情绪主角，敢用超大字号与非对称，但不牺牲可读。

### 4. 实现翻页与放映

- 每页一个 `<section class="slide">`，占满视口（`100vw × 100vh`，`16:9` 用 `aspect-ratio` 或 letterbox 居中）。
- JS 内联实现：← / → 或 PageUp/PageDown 翻页，`F` 或双击进入全屏，可选页码指示与进度条。当前页 `display:flex` 居中，其余 `display:none`。
- 用 `scale` 或 `vw/vh` 单位让内容随窗口等比缩放，保证投影/手机上比例不变。
- 过渡克制：翻页做 150-300ms 的淡入/位移即可，不做花哨特效。

## 生成前后自查

- 每页是否只有一个观点、标题是否说了结论。
- 有没有整段文字（有就拆成短语或移到备注）。
- 所有字号是否达标（正文≥28、标题≥56、caption≥22）。
- 内容是否距边 ≥ 100px、对比是否够。
- 同类页是否复用同一布局、整套是否一套配色一套字体。
- 假数据用可信真实感内容，不用 "John Doe" / "Acme" / "99.99%" 这类 AI 味儿占位。

## 输出格式

1. 先给出 deck 大纲：每页序号 + 该页的布局契约 + 一句话观点；再声明配色（hex）与字体。
2. 用 **Write** 生成单文件 HTML：`<style>` 内联（含 CSS 变量体系与打印分页 `@media print { .slide { page-break-after: always } }`），每页一个 `<section>`，翻页 JS 内联在 `<script>`，字体用 Google Fonts `<link>`。
3. 用 **Bash** 打开预览：macOS `open <HTML绝对路径>`，提示用户按方向键翻页、`F` 全屏。
4. 如需导出 PDF，可提示用浏览器「打印 → 存为 PDF」（配合上面的 `@media print` 规则每页一张）。
5. 简述 deck 结构、视觉决策与如何演示/导出。

## 边界

- 只产出自包含单文件 HTML（内联 CSS/JS），不引构建工具、不拆多文件、不依赖本地不存在资源。
- 不接真实数据源；需要数据时用可信假数据并如实标注。
- 若用户明确要 `.pptx` 文件而非可放映网页，这不是本 skill 的交付物，应改用处理 PowerPoint 的工具；用户说"演示稿/幻灯片/HTML/网页版"或未指定格式则留在本 skill。
- 内容语言默认跟随用户 prompt，保留英文术语原样。

---

Source: https://www.openparable.com/skill/documents/%E6%BC%94%E7%A4%BA%E5%B9%BB%E7%81%AF%E7%89%87 (OpenParable). Cite the canonical URL above.
