用途
Make a Deck 用于在用户请求演示文稿、路演 deck、slides 或 keynote 时,构建一份 HTML 幻灯片。目标是做出「看起来像经过设计、而不是 AI 生成」的 deck。它使用 starters/deck_stage.js 提供键盘导航、缩放、演讲备注与打印为 PDF 的能力。
主要流程与能力
Phase 0 — 上下文预检(自动检测,最多问一个问题) 在提出设计问题之前,先静默检测上下文:读取 .claude/design-tokens.json 项目 tokens;通过 Bash(ls ~/.claude/design-systems/ 2>/dev/null) 检查组织级注册表,若 brief 中的品牌名匹配某个文件夹则自动应用;在项目根目录用 Glob 查找 tailwind.config.、theme.{ts,js,json}、tokens.{css,scss}、_variables.;扫描用户消息与附件中的 GitHub URL(先调用 Skill: ingest-github)、Figma URL(先调用 Skill: ingest-figma)、图片附件(先调用 Skill: ingest-screenshot)、.md/.txt/.pdf 文件(读取)。若未检测到任何上下文,则用 AskUserQuestion 提一个单选问题(使用现有设计系统 / 来自代码库 / 来自截图 / 来自 Figma / 无上下文则调用 frontend-design / 由 Claude 决定)。
Phase 1 — 歧义门控 检查 brief 中的受众、风格、长度三类信号。若满足 ≥2 项则跳过长问卷,最多 1–2 个澄清问题;否则用 AskUserQuestion 询问受众、语气、长度、视觉、变体等问题。
Phase 1.5 — 演讲备注启发式(由 agent 决定,无开关) 根据信号决定是否生成演讲备注:简短/standup/lightning/recap/少于 100 字符 → 关闭;for investors/董事会/keynote/All Hands → 开启;附带 PRD 或长文档(>500 词)→ 开启;仅 1–3 张 → 关闭;10+ 张 → 开启;含糊时问一个 yes/no。开启时在 </body> 末尾生成 <script type="application/json" id="speaker-notes">[...]</script>,每张幻灯片一个字符串,为完整对话式叙述。
Phase 2 — 视觉系统 确定分区标题布局、标题布局、图片布局;全 deck 最多 1–2 种背景色;字体层级(display / H1 / body / caption);调色板(来自已加载 tokens 或由 Skill: frontend-design 生成)。先用一段话说明该系统再写幻灯片。
Phase 3 — 构建 创建 artifacts/<slug>.html,使用 deck-stage 外壳,将 starters/deck_stage.js 复制到 HTML 同目录。规则:第 1 张不要是纯标题页;1920×1080 上文本 ≥ 24px;使用 text-wrap: pretty;用 CSS Grid 布局;无渐变、无 emoji、不使用 Inter/Roboto/Arial;不用 SVG 绘制图像,改用带标签的占位 div;各页布局节奏要有变化。
垂直预算:<deck-stage> 的 section 有 overflow: hidden,溢出会静默消失。典型 chrome 布局约占 1080 中的 ~430px,内容预算约 650px。硬性上限:主卡片 min-height ≤ 500px;深层内容列 ≤ 620px;最多 5 行 anatomy(每行约 110px)或 4 行(每行约 130px);短 h2(1 行)用 140px,长 h2(2 行)用 200px。若内容过高,去掉 kicker 或合并 kicker+h2,不要让卡片变大。若一页太挤,拆页或删内容。
长词断字:在 <section> 上设置 hyphens: manual; -webkit-hyphens: manual; 防止浏览器在词中插入软连字符。
Phase 4 — 验证 运行 /done artifacts/<slug>.html(在浏览器打开、检查控制台、保存截图),修复错误直到干净。执行强制程序化溢出审计脚本(通过 mcp__chrome-devtools__evaluate_script 运行),逐页测量内容底部位置,状态为 FAIL(溢出 > 0,内容被裁剪,不可声称完成)、WARN(headroom < 40px)、OK。常见修复:减小卡片 min-height、缩小标题字号、删行、合并 kicker+title、收紧垂直间距。若浏览器显示溢出而脚本认为没有,使用 ignoreCache 硬刷新。调用 Skill: verify-artifact 做视觉检查,并在回合总结中引用 .claude/last-preview.png。
Phase 5 — 提供下一步 /export-pptx、/export-pdf、/export-standalone、/register-asset,以及演讲备注模式与可调整模式。
反模式(硬性禁止)
标题页放在最前、填充内容、AI 式卡片套路(圆角 + 左边框强调)、通用渐变背景、编造数字/统计、编造颜色(应使用 oklch() 与现有调色板协调)。
适用场景
需要制作 HTML 演示文稿、路演 deck、幻灯片或 keynote,且希望成品具有设计感而非模板化的场景。
限制
具体收费、价格、平台支持范围等资料未提供。