幻灯片 Skill 怎么用：用大纲驱动生成数据化 HTML 演示

做幻灯片的时间都花在哪

你有多少次卡在 PPT 的配色对齐里，半小时过去，内容大纲还一个字没动？工具越自由，决策越累。选模板、调字体、拉参考线、复制粘贴图表——这些视觉杂务吞掉了本该打磨叙事的时间。更糟的是，数据图表更新后，又得手动重调尺寸和颜色。

幻灯片 Skill 的解法很直接：把"设计决策"变成"规则执行"。你先写大纲，它按预设的布局模式、设计令牌和文案公式生成 HTML 文件。Chart.js 图表随数据自动渲染，响应式布局自己适配屏幕。你专注内容结构，它处理视觉一致性。

Slides Skill 的能力边界

这个 Skill 不是万能幻灯片生成器，它有明确边界。

能做的事：生成战略性 HTML 演示文稿；嵌入 Chart.js 数据可视化；应用响应式布局模式；按文案公式优化内容；通过上下文幻灯片策略组织叙事节奏。输出是可直接在浏览器打开的 HTML，无需额外编译。

不能做的事：不生成 .pptx 或 .key 格式；不提供交互式编辑界面；不自动抓取外部数据源。它假设你已经整理好数据和叙事逻辑，它来执行"成片"。

兼容工具限定为 Claude Code、OpenClaw 和 Hermes Agent，来源是 nextlevelbuilder/ui-ux-pro-max-skill，MIT 许可。

上手步骤

启用 Skill 后，核心交互只有一个子命令：create。路由逻辑很干净：解析参数第一个词为子命令，加载 references/create.md，剩余参数作为执行输入。

实际调用格式：

幻灯片 create [你的主题和大纲参数]

背后加载的知识库包括五份参考文件：布局模式（layout-patterns.md）、HTML 模板（html-template.md）、文案公式（copywriting-formulas.md）、幻灯片策略（slide-strategies.md），以及 create 子命令本身的参考。这些文件定义了"怎么排""怎么写""怎么转场"，你不需要背诵，但要知道它们存在——你的大纲会被这些规则翻译为最终视觉。

没有安装命令，在兼容的 AI 工具中启用该 Skill 即可使用。

从大纲到成片的实操

关键原则：大纲先行，越细越好。不要扔一个"帮我做个产品介绍"就期待惊喜。

第一步，拆解叙事结构。用幻灯片策略里的上下文逻辑，把内容切成"问题-冲突-解决方案-证据-行动"的序列。每页只承载一个认知单元。

第二步，标注数据点。需要图表的位置，写明数据类型和比较关系（趋势？占比？对比？）。Skill 会匹配对应的 Chart.js 配置。

第三步，标注文案强度。哪里用标题公式抓注意力，哪里用社会证明公式建信任，在括号里注明。Skill 调用文案公式库自动改写。

第四步，执行生成。把完整大纲作为参数传给 create，Skill 按布局模式分配图文比例，注入设计令牌控制色彩字体，输出完整 HTML。

第五步，浏览器打开，检查响应式断点。需要调整就改大纲重新生成，而不是手动改 HTML——保持"大纲即源文件"的工作流。

典型场景

营销路演最典型。产品发布、融资 pitch、客户提案，这些场景对"专业感"和"数据说服力"要求极高，但制作时间极紧。用幻灯片 Skill，上午定大纲，下午出成片，图表随数据更新自动重绘。

内部数据汇报也合适。周报月报里的趋势图、对比图，直接嵌进 HTML 演示，发链接即可，对方手机打开也不崩版。

还有一个隐性场景：设计评审。用布局模式快速搭出几种版式方向，HTML 原型比静态图更直观，比完整 PPT 更快迭代。

效果不好怎么办

输出混乱，先检查大纲颗粒度。如果一页里塞了三个主题，布局模式会失效——它按"一页一义"设计的。

图表不显示，确认数据格式。Chart.js 需要明确的数据集结构，大纲里写"放个增长图"太模糊，要写"折线图，X 轴 Q1-Q4，Y 轴营收，四组数据"。

视觉风格不对，回到设计令牌。色彩、字体、间距由令牌控制，但令牌值在知识库里，你不能直接改——需要通过大纲里的语义标签间接影响，比如标注"强调色""中性页"等策略指令。

最后，HTML 是最终产物，不是中间格式。如果你团队强制要求 .pptx，这个 Skill 不适合，它的价值恰恰在于跳过格式转换，直接用浏览器交付。