用三个 PPT Skill 做 HTML 演示的工作流

适用：你已安装的 guizang-ppt-skill / frontend-slides / frontend-slides-editable
这三套都是「输出单文件 HTML 网页 PPT」的能力，浏览器直开、零依赖、可分享，但定位不同。
安装位置（项目级）：D:\29876\Documents\wuddy\PPT\.workbuddy\skills\

一、先选对 skill（决策树）

三者产物相同（单文件 HTML、横向翻页、可分享），但侧重点不同，按需求选：

关系：frontend-slides-editable 是 frontend-slides 的超集，多了一个浏览器内编辑器。guizang 是另一条路线（更偏设计作品感 + 强演讲者体系）。

二、通用前置准备（三个都适用）

动手前先备齐，能省 70% 返工：

2. 大纲：标题 + 每页一句话核心 + 必要数据/截图
      - 演讲型：15 分钟 ≈ 10 页，30 分钟 ≈ 20 页，45 分钟 ≈ 25–30 页
4. 图片：单张 ≥ 1600px 宽；JPG 照片 / PNG UI 图；总大小 < 10MB（影响翻页流畅）
6. 想清楚四件事：用途（pitch/教学/发布会）、受众、页数、密度（演讲型 1–3 条/页 vs 阅读型 4–8 条/页）

三、guizang-ppt-skill 流程（6 步）

风格选择：人文/故事/行业观察 → 风格 A 电子杂志风；科技/数据/工程/产品 → 风格 B 瑞士国际主义。

关键不变量：风格 A/B 类名互不通用；一份 deck 只用一套主题色；瑞士风禁止渐变/阴影/圆角、单锚点色、大字字重 200。

四、frontend-slides 流程（6 Phase）

关键不变量：固定 1920×1080 stage、整体缩放、禁止响应式重排、禁止 display:none 切页；字体永不用 Inter/Roboto/Arial（反 AI-slop 核心）。

五、frontend-slides-editable 流程

前面 6 Phase 与 frontend-slides 一致，但多了两点：

2. Discovery Gate（硬规则）：除非你一轮给齐 Phase 1 的 7 项 checklist（Purpose/Length/Content/Style/Editing/Images/Mobile），否则必须先跑 Phase 1 集体问，不能因为 Skill 已挂上就跳过。
4. 编辑器运行时默认开启（生成后浏览器里直接改）：
      - E 进编辑模式；左上 hover 出 Edit / Pages / Add element / Undo / Redo / Done
      - 拖拽对象（⠿）、Ctrl+click 多选、拖角 resize 自动 reflow
      - 浮动工具栏：B/I + Font/Scale/Px；Ctrl+Z/Ctrl+Y 撤销重做
      - Pages 侧栏：缩略图、拖动重排、Copy、删除、+New Page
      - Ctrl+S 存 localStorage + 导出 portable 单文件 HTML（已剥离编辑态，但保留 Laser/Fullscreen）
      - 演示工具：hover 左上出 Laser 激光笔 + Fullscreen

适合：客户评审后继续改、团队协作、PPT 转网页后继续编辑。

六、输出与交付

三者产物都是单文件 HTML，不是 .pptx。要进 PowerPoint 得走「截图型 PPTX」或「导出 PDF」。

七、避坑清单

• guizang：类名缺失版式必崩 → 动手前必读模板 ``；主题色只能选预设，别硬改 hex。
• frontend-slides：固定 stage 别响应式重排；字体别用 Inter/Roboto/Arial。
• frontend-slides-editable：导出文件已剥离 transient 编辑态，但 Laser/Fullscreen 仍在。
• 三套都不自动更新，需要新版时手动 git pull 对应仓库（仓库地址见安装报告）。
• 装的是项目级 skill，只在当前 PPT workspace 生效；换项目需重装。

八、触发方式

• 直接说："用归藏风格做 N 页演讲 PPT" / "做份 pitch deck 给我三套预览" / "生成后还要能拖拽改" → 对应 skill 命中。
• 当前会话里 agent 会手动读 SKILL.md 走流程；下次新开会话时三个 skill 的 description 自动注入可用列表，可 Skill 工具直接调用。