CanvasFlow PPT Skill
作者: WuWenBin-BeiJing-ST
30秒出杂志级PPT，仅需要输入主题或大纲，AI一键生成杂志级高端PPT！自动排版、配色、图表、动画，秒变专业演示神器，无需设计基础。
这个 Skill 做什么
CanvasFlow PPT —— 流畅的画布，流动的演示。
生成一份单文件 HTML 的横向翻页演示文档，视觉基调是：
- Canvas（画布）：WebGL 流体背景，像艺术画布一样呈现内容
- Flow（流动）：横向翻页，主题平滑过渡，视觉节奏流动
- 衬线标题 + 非衬线正文 + 等宽元数据 三级字体分工
- Lucide 线性图标（不用 emoji）
- 键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 全方位导航
- 5 套主题色预设：墨水经典 / 靛蓝瓷 / 森林墨 / 牛皮纸 / 沙丘
何时使用
合适的场景：
- 线下分享 / 行业内部讲话 / 私享会
- AI 新产品发布 / demo day
- 带有强烈个人风格的演讲
不合适的场景：
- 大段表格数据、图表叠加（用常规 PPT）
- 培训课件（信息密度不够）
- 需要多人协作编辑（静态 HTML）
依赖说明
无外部依赖。HTML 单文件包含所有 CSS/JS/字体 CDN，浏览器直接打开即可。
如需生成 PPTX 格式：
pip3 install python-pptx
标准工作流
Step 0 · 环境检测（必做）
在生成任何 slide 之前，必须先读取 assets/template.html 的 <style> 块，确认所有需要的类都已定义。
这是所有生成问题的源头——如果 template.html 里没有 h-hero / stat-card / pipeline 等类定义，浏览器会 fallback 到默认样式，导致整页样式崩坏。
Step 1 · 需求澄清（动手前必做）
如果用户已经给了完整的大纲 + 图片，可以跳过直接进 Step 2。
如果用户只给了主题或一个模糊想法，用这 6 个问题逐个对齐：
| # | 问题 | 为什么要问 |
|---|---|---|
| 1 | 受众是谁？分享场景？（行业内部 / 商业发布 / demo day / 私享会） | 决定语言风格和深度 |
| 2 | 分享时长？ | 15 分钟 ≈ 10 页，30 分钟 ≈ 20 页 |
| 3 | 有没有原始素材？（文档 / 数据 / 旧 PPT / 文章链接） | 有素材就基于素材 |
| 4 | 想要哪套主题色？ | 见 references/themes.md，5 套预设 |
| 5 | 有没有硬约束？（必须包含 XX 数据 / 不能出现 YY） | 避免返工 |
| 6 | 输出格式？（HTML / PPTX / 双格式） | HTML 适合线上分享，PPTX 适合企业汇报 |
大纲协助（如果用户没有大纲）
用"叙事弧"模板搭骨架：
钩子(Hook) → 1 页 : 抛一个反差 / 问题 / 硬数据
定调(Context) → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个
主体(Core) → 3-5 页 : 核心内容，用 Layout 3/4/5/6 穿插
转折(Shift) → 1 页 : 打破预期 / 提出新观点
收束(Takeaway) → 1-2 页 : 金句 / 悬念问题 / 行动建议
Step 2 · 拷贝模板 + 主题选择
从 assets/template.html 拷贝到目标位置，同时选定主题色。
5 套主题色预设：
| # | 主题 | 适合 |
|---|---|---|
| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |
| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |
| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |
| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |
| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
硬规则：只允许从 5 套预设里选，不接受自定义 hex 值——颜色搭配错了画面瞬间变丑，保护美学比给自由更重要。
Step 3 · 规划主题节奏（和类预检同等重要）
在挑布局之前，必须先列出每一页的主题 class（hero dark / hero light / light / dark）。
主题节奏硬规则：
- 每页 section 必须带
light/dark/hero light/hero dark之一 - 连续 3 页以上同主题 = 视觉疲劳，不允许
- 8 页以上必须有 ≥1 个
hero dark+ ≥1 个hero light - 整个 deck 不能只有
light正文页，必须有dark正文页制造呼吸 - 每 3-4 页插入 1 个 hero 页（封面/幕封/问题/大引用）
按布局的主题默认值：
| Layout | 默认主题 | 原因 |
|---|---|---|
| 1. 开场封面 | hero dark | 开场仪式感 |
| 2. 章节幕封 | hero dark 与 hero light 交替 | 呼吸节奏 |
| 3. 数据大字报 | light | 数字需纸白底 |
| 4. 左文右图 | light / dark 交替 | 正文节奏主力 |
| 5. 图片网格 | light | 截图需亮底 |
| 6. Pipeline | light | 流程图需清晰 |
| 7. 问题页 | hero dark | 强视觉冲击 |
| 8. 大引用 | dark 优先 | 金句仪式感靠暗底 |
| 9. 对比页 | light | 双列需清晰 |
| 10. 图文混排 | light / dark 交替 | 节奏 |
Step 4 · 挑布局填充内容
打开 references/layouts.md，里面有 10 种现成布局骨架，每种都是完整可粘贴的 <section> 代码块。
关键约束：
- 图片比例规范：永远用标准比例（16:10 / 4:3 / 3:2 / 1:1 / 16:9），不要用原图奇葩比例
- 图片网格用
height:Nvh，不用aspect-ratio（会撑破） - 图片只裁底部：用
object-position: top center - 不要用 emoji 作图标：用 Lucide 图标库
- 衬线/非衬线字体分工：标题衬线、正文非衬线、元数据等宽
- 大标题 ≤ 5 字且
nowrap：避免 1 字 1 行
Step 5 · 对照检查清单自检
打开 references/checklist.md，逐项对照。P0 级问题必须全过。
特别要注意：
- 大标题必须是衬线字体——如果显示成非衬线，99% 是类名在 template.html 里缺失
- 图片网格里只用
height:Nvh，不用aspect-ratio - chrome 和 kicker 不要写同一句话（chrome = 栏目标签，kicker = 本页钩子）
- 主题节奏要有交错，不要全是 light
Step 6 · 本地预览
open "项目/XXX/ppt/index.html"
不需要本地服务器，图片走相对路径 images/xxx.png。
参考文档
核心设计原则
这些原则是"一人公司"分享 PPT 的 5 轮迭代总结出来的。违反其中任何一条，视觉感都会垮。
- 克制优于炫技 — WebGL 背景只在 hero 页透出，普通页几乎看不见
- 结构优于装饰 — 不用阴影、不用浮动卡片，一切信息靠大字号 + 字体对比 + 网格留白
- 内容层级由字号和字体共同定义 — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据
- 图片是第一公民 — 图片只裁底部，保证顶部和左右完整
- 节奏靠 hero 页 — hero 和 non-hero 交替，才不累眼睛
- 术语统一 — Skills 就是 Skills，不要中英混合翻译
致谢
本 Skill 基于设计师歸藏（op7418）开源的 guizang-ppt-skill 优化而来，融合了其 10 年设计经验与审美智慧。
设计哲学来源："克制胜于华丽、结构胜于装饰" — 歸藏
CanvasFlow PPT —— 让演示流动起来。
名字寓意：
- Canvas（画布）：WebGL 背景，像艺术画布一样承载内容
- Flow（流动）：翻页流畅，主题过渡自然，视觉节奏呼吸