# Make A Deck

> 把用户提供的内容制作成单个 HTML 文件中的 16:9 演示文稿，包含固定尺寸幻灯片、适配任意视口的等比缩放、键盘或点击导航和打印输出。用户要求“做 Deck”“制作演示文稿”“做 Slides”“做 Pitch”并希望获得 HTML 交付物时使用；需要 PPTX 或其他格式时不要强行转换为 HTML。

- Skill: `onevium/make-a-deck` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/make-a-deck`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/make-a-deck/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/make-a-deck

---


# 制作 HTML 演示文稿

在一个可独立打开的 HTML 文件中制作完整 Deck。幻灯片使用固定 16:9 画布，并在不同视口中等比缩放和留黑边，不依赖手工调整每页尺寸。

## 1. 确认简报

读取全部来源材料，确认受众、演讲时长或页数、语气、品牌、宽高比，以及是否需要讲者备注。上下文充分时直接开始；没有品牌且视觉方向会影响结果时，先确定方向。

讲者备注默认关闭，只有用户明确要求才添加。

## 2. 规划叙事与版式系统

先写出每页的一句话目标和整体叙事顺序，再确定 4–6 种可复用版式，例如封面、章节页、内容页、对比页、重点引语和结尾行动页。

限制背景和强调色数量，统一标题位置、正文区域、页码和品牌标识。每页只承载一个主信息，删除没有叙事作用的填充页。

## 3. 构建 Deck 外壳

创建固定尺寸舞台，默认 `1920×1080`。每页为直接子 `<section>`，提供 1 开始的 `data-screen-label`。外壳至少支持：

- 根据视口等比缩放并居中留边。
- 键盘方向键、空格及可用的点击或触摸导航。
- 当前页和总页数。
- 打印或导出 PDF 时一页一张幻灯片。

是否保存当前页到 `localStorage` 取决于用户需求，不要让持久化增加不必要复杂度。

## 4. 逐页制作

- 1920×1080 画布正文通常不小于 24px，标题通常为 60–96px；根据语言和内容密度调整。
- 所有页面复用设计 token，不在单页发明新色值和间距。
- 图像使用品牌素材、合法素材或明确标注尺寸的诚实占位符。
- 图表只保留支持当前结论的数据。
- 每完成 1–2 张先预览方向，再扩展到整套 Deck。

## 5. 验证与交付

逐页检查多种视口下的缩放、溢出、导航、页码、文字可读性、对比度、打印分页和资源加载。无法真实验证的行为要明确说明。

交付最终 HTML，简要列出页数、叙事结构、仍需替换的素材和需要用户确认的决定。

## 示例

**输入：**“根据这份 PRD 做 5 页工程全员会 Deck，深色主题，不要讲者备注。”

**输出：**生成单个 `deck.html`，包含封面、问题、架构、发布计划和结尾行动五页，使用 1920×1080 舞台、键盘导航、页码和打印样式，并验证常见视口无溢出。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。