slide-maker

幻灯片制作器

制作真正令人惊艳且符合品牌风格的演示文稿幻灯片——无论是单页幻灯片还是完整演示文稿，都支持审阅迭代，并可导出为 HTML/PDF/PPTX。此技能提供所需的一切：由设计令牌驱动的设计套件、制作指南、粗制滥造检查器、现成的 React 演示文稿、编辑模式协作功能，以及导出器。它适用于演示文稿所需的任何设计系统——你自己的设计系统、推荐的设计系统，或中性默认设计系统。

它以针对具体任务的工作流运行。 先判断用户要完成哪项任务（见下文），然后打开相应的工作流文件并按其执行。自然顺序是头脑风暴 → 生成 → 导出，但用户也可以直接跳到任意步骤（例如，在已有演示文稿上说“将这份演示文稿导出为 PDF”）。

选择工作流

用户想要……	工作流
确定演示文稿要讲什么／如何组织（想法模糊，或说“我需要一份关于 X 的演示文稿”）	slide-brainstorm
制作实际的幻灯片并反复迭代（生成、审阅、修改）	slide-generate
获取可编辑的 PowerPoint（接收者可以编辑文本／形状）	export-editable-pptx
获取像素级还原、仅供查看的 PowerPoint	export-image-pptx
获取单个独立的 HTML 文件（可离线打开）	export-standalone-html
获取 PDF（用于打印／讲义）	export-pdf

brainstorm ──▶ generate ──▶ ┬─▶ editable PPTX
(idea→skeleton) (HTML deck,  ├─▶ image PPTX
                review loop) ├─▶ standalone HTML
                             └─▶ PDF

每个工作流的结尾都会指向下一步。如果用户的请求无法明确对应到某项任务，请先问一个简短的问题，不要自行猜测——头脑风暴并制作演示文稿，与导出已有演示文稿是截然不同的工作。如果用户的想法仍然模糊，却要求“制作幻灯片”，请从头脑风暴开始（不要基于未经梳理的想法直接生成）。

确定设计系统（在头脑风暴／生成开始时执行）

版式由设计令牌驱动：颜色、字体和间距均来自主题文件，绝不在幻灯片中硬编码。开始制作前，先确定由哪个设计系统提供这些令牌。按顺序执行此流程，遇到第一个适用分支时即停止：

1. 询问用户是否有自己的设计系统／品牌令牌。 如果有 → 将颜色／字体／间距映射到令牌规范中，并写入 design-system/themes/clean-light.css（或新建一个由入口文件导入的主题文件）。版式永不更改；只更改主题文件中的令牌值。
2. 否则，检查是否已安装 nextlevelbuilder/ui-ux-pro-max-skill。 如果已安装 → 调用它，为演示文稿的内容／构想推荐最合适的设计系统，然后将推荐结果映射到主题文件中。
3. 否则，推荐安装该技能并引导用户永久安装：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill——这是首选方案。
4. 否则（用户不愿永久安装）：先询问，再浅克隆 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 到 /tmp，且仅用于本轮操作，不要将其保存到此技能或用户的项目中。未经明确同意，绝不要执行此网络获取操作——克隆前务必先询问。
5. 否则（用户也拒绝获取）：使用内置的 clean-light 主题。

clean-light 是保证可用的底线——此流程总能以一个可用主题结束，因此技能不会受阻。无论最终采用哪种方案，当前启用的主题文件都是颜色／字体的唯一可信来源：读取该文件，并将令牌值写入其中，而不是在版式中硬编码。

选择演示文稿的写入位置（生成开始时）

在搭建框架前，先询问用户要将演示文稿放在哪里。提出一个默认位置，并允许用户自行指定：

• 默认输出目录： 用户当前项目中的 ./slides/<deck-name>/。
• 导出目录： ./slides/<deck-name>/export/。
• 将 deck-template/ 脚手架复制到该位置，而不是技能目录中。 这样既能保持技能安装目录整洁，也能让多个演示文稿并排共存。技能自带的 deck-template/ 是原始模板；工作副本位于用户的项目中。

另一种用途：仅提供设计层

此技能也可只为其他幻灯片生成器（例如 slides-generator）提供设计层（设计令牌、组件、模式）。该生成器运行自己的工作流，但会从这里获取主题，而不是选择通用风格：

• React + Tailwind → 将 tailwind-theme.md 中的主题代码块放入 tailwind.config.js，并导入当前字体。这样 Tailwind 实用类就会解析为当前设计系统的令牌。
• 纯 HTML/CSS → 链接 <skill>/design-system/styles.css；使用其中公开的 CSS 自定义属性进行样式设置（例如 var(--fs-h1)、var(--space-8) 和主题的颜色令牌），不要使用字面量十六进制值。

设计套件（事实来源——请阅读，不要猜测）

包含在此技能中，因此可以独立使用：

<skill>/design-system/
├── styles.css                ← token entry point (imports tokens + the active theme; link for HTML slides)
├── tokens/                   ← colors, typography, spacing, fonts — THE source of truth
├── themes/clean-light.css    ← the active theme (bundled neutral default; the guaranteed floor)
├── slides/*.html             ← 34 premade slide layouts (the catalog)
└── assets/logos/             ← mark.svg, logo-full.svg (neutral placeholders; swap for the deck's real logos)

当前主题文件决定颜色和字体。 如果布局似乎与令牌不一致，以令牌/主题为准——请打开并阅读相关文件。切勿在布局中硬编码十六进制值或字体；应改动主题文件。

制作规则（适用于每种工作流，无论由谁驱动）

• 当前设计系统是颜色和字体的事实来源。 布局由令牌驱动——绝不硬编码十六进制值或字体。 修改主题文件中的令牌值，而不是布局。不确定某个值时，请阅读 <skill>/design-system/tokens/ 和当前主题。
• 默认字体使用系统字体栈。 PPTX 导出器会嵌入 Inter（SIL OFL），确保在没有演示文稿所用字体的计算机上，编辑后的输出也能一致呈现。
• 一个视觉焦点，真正的留白。 每张幻灯片都应有一个突出的主视觉，并遵循清晰的眉题→标题→分隔线→正文节奏、≥35% 的留白以及舒缓的动效。重视层次与克制，而非装饰。并非每张幻灯片都需要大面积铺满画面的处理——将这种处理留给分隔页、章节导航线和结尾页，以通过对比凸显其分量。
• 要惊艳，而不只是合规。 符合品牌 ≠ 令人印象深刻。惊艳 = 克制 + 一个视觉焦点 + 层次感。工艺指南是上限：wow-guide.md。check-slop.mjs 验证器是下限。
• “完成” = 将用户的请求复述为一项通过的测试，并用数字展示结果。 不要说“我很确定”或“现在看起来没问题”。修复前，请用用户的话写出验收标准（“将竞技场与最后一步对齐” → arena.bottom == step.bottom ±2px AND footer.bottom ≤ 648），只有在能够证明通过时，才能声称完成。如果两项要求冲突（既要将 A 与 B 对齐，又要让页脚保持在画面内 ⇒ 内容过高），请说明冲突并提出取舍方案——不要交付重叠的结果，还称其为完成。

验证 — 三项检查，各自都发现了下一项检查无法发现的问题

三项检查都要做；增加其中一项的次数，永远不能替代其他检查。

触发条件	执行操作	发现其他检查遗漏的问题
你渲染了幻灯片	查看 — 使用多个子 Agent 分批检查 PNG，每个子 Agent 负责几张幻灯片	主视觉元素缩得过小、标签被裁切、圆角丢失。检查器只会验证告知它们的内容；恰恰是关卡通过时，偏差最容易藏起来。
请求中提到 对齐 / 同高 / 相等 / 重叠 / 适配 / 边缘 / 下方 / 上方 / 接触 / 裁切 / 边距	测量 — inspect.mjs → geometry.json，断言不等式（y+h ≤ 648、abs(A.bottom − B.bottom) ≤ 2）	10–30px 的偏差，在整张幻灯片的 PNG 中难以察觉。数字胜过目测；报告具体数字，不要只说感觉。
你生成了导出文件	比对 — node scripts/verify-export.mjs，报告平均值和最大值	整体偏差（每个内容块都向下偏了几 px，一列偏窄）——在每张幻灯片上看起来都合理，在排序表中却一目了然。

检查 XML、渲染并查看，以及重新检查你修改过的幻灯片，这些都只能确认 你想做的改动确实发生了。差异比对则能发现你无意中造成的问题。方法、规范边界和布局方案（不使用魔法像素高度； 等宽列使用 items-stretch；页脚置于文档流中并使用 mt-auto）： visual-review.md — 几何关卡和 检查导出文件。

参考资料库（工作流会链接到所需资料）

文件	内容
house-style.md	34 种预制布局、各自的适用场景、由设计令牌驱动的样式、设计模式、徽标用法
wow-guide.md	演示文稿设计技巧：层级、数据可视化、层次感、动效、信息密度、排版 + 代码片段
tailwind-theme.md	可直接使用的 tailwind.config.js 主题代码块 + 图表系列调色板
validation.md	check-slop.mjs：各项检查的含义 + 自查 AI 生成痕迹的要点
diagrams.md	何时手写 SVG 图表、何时生成图表、让图表清晰易读的惯例、完整示例
visual-review.md	查看、测量、比对 — 自查渲染后的幻灯片、几何关卡，以及将导出文件与 HTML 进行比对
deck-template.md	现成的 React 演示文稿框架：结构、开发、编辑模式、HTML/PDF/图像导出
edit-mode.md	点选并添加注释的反馈覆盖层 + 程序化检查 API
pptx-editable.md	可编辑 PPTX 深入指南：测量→OOXML、验证关卡 + 确认机制、字体、注意事项

如需渲染 34 种布局预览以供检查，请使用 deck-template/scripts/shoot-layouts.mjs。

research/ 收录了带日期的方案，这些方案经过评估但未实现 — 只有在考虑是否采用相关改动时才阅读。