deck-creator

Deck Creator

创建具有统一视觉风格、引人入胜的文案、AI 生成的幻灯片图片，以及可选互动式 HTML 演示器（支持视频背景）的专业演示文稿。

适用场景

• 创建演示文稿或幻灯片
• 制作融资路演、提案或销售演示文稿
• 为产品发布、公司简介或合作伙伴关系设计幻灯片
• 根据文档、需求或简报生成完整的演示文稿
• 为现有演示文稿更换不同的艺术风格
• 为现场演示制作互动式 HTML 演示器
• 为演示文稿添加氛围视频背景
• 使用“deck playground”“visual deck editor”或“deck builder UI”

互动式 Playground

使用可视化界面交互式设计和生成演示文稿：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/playground_server.ts --dir <deck-dir>

Playground 提供风格浏览、逐张幻灯片编辑、实时预览和一键生成。支持 Gemini PNG 和带文字图层的 HTML 模式。

重要： 使用 Skill 工具（Skill("deck-creator")）调用此技能。请勿在未先加载此技能的情况下手动执行各阶段。请按步骤完成工作流，不要跳过任何阶段。

快速启动默认设置（尽量减少阻碍）

优先考虑速度，而不是详尽提问。只询问必要信息，其余内容自行推断，并尽快让用户进入 UI。

首先一次性简要询问：

1. 演示文稿的目标／主题
2. 受众
3. 大致幻灯片数量
4. 输出模式（pdf、html+pdf 或 web/publish）

缺少信息时使用以下默认值：

• 幻灯片数量：10
• 模式：用于现场演示／网页使用时选 html+pdf，否则选 pdf
• 主题：现代、高对比度的商务风格
• 视频背景：none
• 艺术风格：除非用户提出要求，否则不使用

创建 THEME.md 和 DECK-PLAN.md 后，立即启动 Playground，并预先加载目标演示文稿目录：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/playground_server.ts --dir <deck-dir>

然后只问一个二选一的问题：

• 选项 A（推荐）：“现在并行生成幻灯片，同时在 Deck Creator 中查看吗？”
• 选项 B：“先打开 Deck Creator，等一会儿再生成吗？”

未经用户明确确认，不要自动生成幻灯片（注意成本），但可以提供一键快速启动选项，先生成第 1 张幻灯片。

流程概览

分六个阶段，按顺序执行：

1. 需求探索 - 收集背景信息、示例和参考资料
2. 启动 - 初始化文件，并打开预先加载演示文稿的 Deck Creator UI
3. 主题 - 确定视觉风格、配色方案和可选的艺术风格
4. 文案 - 运用营销原则规划并撰写幻灯片内容
5. 生成 - 并行创建所有幻灯片，保持风格统一，并合并为 PDF
6. 演示／发布 - 构建互动式 HTML 演示器，并发布／分享链接（可选）

阶段 1：需求探索

打开 UI 前，只收集所需的最少信息。

分层提问：

第 1 层（始终询问）： 受众、目的、内容来源／材料、幻灯片数量（建议 10-16 张）

第 2 层（背景信息）： 演示场合、品牌指南、风格参考、现有素材

第 3 层（用于现场演示／会议／网络研讨会）： 仅需 PDF，还是也需要 HTML 演示器？是否需要视频背景？要可视化浏览风格，还是自动推荐？

如果用户提供了示例演示文稿或参考资料，请分析其视觉风格、布局规律、字体排版和信息传达方式。

阶段 2：启动（默认的前置步骤）

1. 创建或确认 <deck-dir>
2. 根据最合理的默认值初始化 THEME.md 和 DECK-PLAN.md
3. 使用 --dir <deck-dir> 启动 Deck Creator，让用户直接进入演示文稿
4. 询问选项 A／选项 B 的生成选择问题

这是常规流程。不要等所有细节都敲定后才启动 UI。

第 3 阶段：主题选择

生成幻灯片前，先建立一致的视觉体系。

选项 A：Theme Factory（推荐）- 安装并调用 theme-factory skill，打造协调统一的配色方案。

选项 B：手动设置 - 根据品牌指南定义 Background、Primary、Secondary、Text 和 Accent 颜色。

记录主题变量时，优先使用纯 CSS 值。十六进制颜色值也可以附带一个便于理解的说明标签，例如 - background: #0a0f1a (deep navy-charcoal)；Deck Creator 会在将其用作 CSS 值前移除该标签。

样式参数

Aspect Ratio: 16:9 (--size 2K produces 1376x768)
Art Style: (optional) Any style ID from browsing-styles skill (e.g., pixl, cybr, deco)
Typography: Headlines Bold 48-64px, Body 18-24px, Stats Extra Bold 72-96px
Layout: Card-based with generous whitespace

使用 --style <id> 在所有幻灯片中应用一致的艺术风格。通过 browsing-styles skill 浏览 169 种风格。指定风格后，请将 --style <id> 添加到每条生成命令中。

如果用户需要 HTML 演示文稿，请在 THEME.md 中添加 Presenter Settings 区块：

## Presenter Settings
Format: html+pdf
Video Background: none | url(<url>) | veo-global | veo-per-slide
Transition: 500ms
Auto-Advance: false

在 THEME.md 中完整记录主题。

第 4 阶段：文案与内容规划

运用文案写作原则：每张幻灯片传达一个信息，标题讲述故事，用展示代替说明，采用问题—解决方案—证明的结构，具体胜过抽象，最后以行动收尾。

创建 DECK-PLAN.md，编写演示文稿概览和逐页计划（标题、内容要点、视觉概念、关键信息）。持续收集内容，直到完整规划好 10-16 张幻灯片。内容计划完成前，不要开始生成。

参阅 references/copywriting.md，了解标题公式、说服模式和针对不同受众的表达方式。参阅 references/slide-types.md，了解各类幻灯片的详细模板。

第 5 阶段：幻灯片生成

生成前检查清单

• 已定义主题（颜色、字体排版、风格）
• 已规划所有幻灯片（10-16 张）
• 每张幻灯片都包含：标题、内容、视觉概念
• 已创建输出目录

生成幻灯片

同时启动所有幻灯片生成 Agent。使用 Task 工具，为每张幻灯片启动一个 gemskills:content-specialist Agent。提供主题规格、幻灯片提示词、输出路径和图像生成命令：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "prompt" --aspect 16:9 --size 2K [--style <id>] --output <path>

并行生成最多 12 张。若有 14 张或更多，请分两批生成。

生成后处理

确认所有幻灯片均已生成，将其合并为 PDF，验证 PDF，创建 DECK-INDEX.md，并提供摘要。参阅 references/generation.md，了解详细的提示词模板、PDF 合并方法和生成后步骤。

不要将生成的幻灯片图像读回上下文。请用户进行目视检查。

第 6 阶段：演示／发布（可选）

如果用户需要 HTML 演示文稿（或 THEME.md 指定了 Format: html+pdf）：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/build_presenter.ts --dir <deck-dir> [--open]

对于视频背景，可以通过 --video <url> 使用用户提供的 URL，也可以先通过 Veo 3.1 生成环境氛围循环视频。参阅 references/presenter.md，了解完整的 CLI 选项、视频模式、键盘快捷键和验证清单。

如果用户要求网页、分享或发布，请引导他们在 playground 中前往 Deck > Publish & Share...，并完成一条发布路径（Vercel、Zip 或 Cloudflare Tunnel）。对于网页模式，以“发布链接已交付”为完成标准。

输出结构

project/deck/
├── THEME.md              # Visual style definition
├── DECK-PLAN.md          # Content planning document
├── DECK-INDEX.md         # Final deck inventory
├── deck.pdf              # Stitched presentation PDF
├── presenter.html        # Interactive HTML presenter (optional)
├── ambient.mp4           # AI-generated video background (optional)
├── PRESENTER-CONFIG.json # Per-slide video config (optional)
└── slides/
    ├── 01-title.png
    └── ...

最佳实践

1. 风格统一 - 每张幻灯片都使用相同的主题参数
2. 术语一致 - 在全文中使用相同的词语指代相同概念
3. 视觉层级 - 标题最大，辅助文字较小
4. 留白充足 - 避免幻灯片过于拥挤
5. 重要元素居中 - 考虑裁切影响
6. 高对比度 - 确保在投影仪上清晰易读
7. 避免孤立页面 - 每张幻灯片都要与叙事相连

参考文件

• references/slide-types.md - 各类幻灯片的扩展模板
• references/copywriting.md - 营销文案原则和标题公式
• references/generation.md - 提示词模板、并行生成、PDF 合并
• references/presenter.md - HTML 演示文稿构建、视频模式、键盘快捷键
• assets/videos/ - 附带的环境氛围视频背景（首次使用时复制到 ~/.gemskills）