技能介绍

问题

制作网页版演示材料时，普通静态 HTML 容易在视觉层级、翻页体验和版式一致性上失控：标题字体、卡片网格、图片比例、主题切换一旦不一致，页面就会从“演示稿”变成“拼贴页”。ppt skills 针对这类问题，提供一套从需求澄清到模板填充的生成流程，目标是产出单文件 HTML 的横向翻页 PPT。

工作方式

它先要求对齐风格、受众、时长、素材、截图需求和硬约束，再根据选择使用两套模板之一：

风格 A：电子杂志 × 电子墨水，偏衬线标题、人文叙事和商业发布。
风格 B：瑞士国际主义，偏无衬线、网格、KPI 和工程/产品汇报。

核心流程包括 template.html 或 template-swiss.html 拷贝、替换 [必填] 占位符、从预设主题色中选一套，以及按 layouts.md / layouts-swiss.md 粘贴布局骨架。技能特别强调类名必须在模板 CSS 中有定义，避免浏览器 fallback 导致字体、卡片、pipeline 和图片位置错乱。

对瑞士风，它采用较严格的版式约束：正文页使用登记的 S01 到 S22，每页写 data-layout="Sxx"，并通过封面、时间线、对比、矩阵、KPI 等版式保持结构变化。图片部分会约定 images/ 目录、{页号}-{语义}.{ext} 命名、标准比例（如 16:9、16:10、21:9）和安全区，避免图片滑到分页组件下方。若用户提供截图，它会先判断是保真美化还是再设计，优先用内置背景做适配，而不是直接重画。

适用边界

适合个人分享、行业内部讲话、AI 产品发布、demo day 等需要较强风格表达的网页版 slides。不适合大段表格、密集图表、培训课件，也不适合需要多人协作编辑的场景。使用时注意：两种风格的类名不通用，主题色不能混配，瑞士风不要临时发明未登记版式；交付前最好检查主题节奏、图片比例和底部分页安全区。