Guizang PPT Skill

核心能力

单文件 HTML 横向翻页 PPT

生成独立的 .html 文件，无需依赖翻页工具或在线平台。内置完整的 CSS、WebGL Shader、JavaScript 翻页逻辑，以及 Motion One 入场动效系统（本地 + CDN 双保险）。支持键盘方向键、鼠标滚轮、触屏滑动三种翻页方式，按 ESC 呼出幻灯片索引页，按 B 键切换低功耗静态模式。

双风格视觉系统

风格	美学定位	字体	背景	适用场景
A · 电子杂志 × 电子墨水	Monocle 杂志贴代码	Noto Serif SC + Playfair Display 衬线标题，非衬线正文，等宽元数据	WebGL 流体 / 等高线 / 色散背景	人文分享、行业观察、商业发布、故事驱动
B · 瑞士国际主义	Massimo Vignelli + Helvetica Forever	Inter + Helvetica + Noto Sans SC 全程无衬线	WebGL 极细网格 + 点阵	科技产品、数据汇报、工程领域、年度总结

两种风格不可混用：类名、模板文件、布局系统、主题色文件各自独立。

页面布局模板

风格 A（10 种布局）

1. 开场封面 — 主视觉 + 标题 + 元数据
2. 章节幕封 — 幕间过渡页
3. 数据大字报 — 硬数据冲击（KPI、统计）
4. 左文右图 — Quote + Image，身份反差/故事
5. 图片网格 — 多图对比 / 截图实证
6. 两列流水线 — 工作流程步骤
7. 悬念收束 / 问题页 — 幕末 / 收尾
8. 大引用页 — 衬线金句 / Takeaway
9. 并列对比 — Before / After
10. 图文混排 — 信息密集的图文页

风格 B（22 种登记版式 S01-S22）

严格版式锁定系统，每页必须标注 data-layout="Sxx"：

• 信息架构：S04 Six Cells、S05 Three Layers、S17 System Diagram、S15 Matrix + Hero Stat
• 时间演进：S02 Vertical Timeline、S11 Horizontal Timeline
• 对比论证：S03 Split Statement、S08 Duo Compare、S19 Four Cards
• 数据视觉：S06 KPI Tower、S07 H-Bar Chart、S20 Stacked KPI Ledger、S21 Tech Spec Sheet、S22 Image Hero
• 概念表达：S09 Dot Matrix Statement、S12 Manifesto + Ink Banner、S13 Three Forces、S14 Loop Form、S18 Why Now
• 封面与收尾：S01 Index Cover、S10 Split Closing
• 扩展组件：S08 + Swiss Map Component（MapLibre 地图：点位、连线、卡片、缩放控制）

主题色预设

风格 A — 5 套预设（不可自定义 hex）

#	主题	氛围	适合
1	🖋 墨水经典	通用稳重	默认 / 商业发布
2	🌊 靛蓝瓷	科技冷静	研究 / 数据 / 技术发布会
3	🌿 森林墨	自然沉稳	可持续 / 文化 / 非虚构
4	🍂 牛皮纸	怀旧温暖	人文 / 文学 / 独立杂志
5	🌙 沙丘	艺术空灵	设计 / 创意 / 画廊

风格 B — 4 套高反差功能色（不可混用）

• 🔵 克莱因蓝 IKB — 经典瑞士科技
• 🟡 柠檬黄 — 高能量预警
• 🟢 柠檬绿 — 生机与创新
• 🟠 安全橙 — 行动与决策

图片与截图工作流

• 图片管理：images/ 文件夹 + {页号}-{语义}.{ext} 命名规范
• 比例规范：21:9（主视觉）、16:10（左文右图）、16:9（全屏）、3:2/3:4（混排小图）、1:1（方形）
• 截图美化：内置 assets/screenshot-backgrounds/ 背景资产，支持 CleanShot X 式程序化适配
• 截图再设计：GPT-M 2.0 生成，按版式槽位匹配比例
• 占位策略：无图时可先用色块占位，后期同名覆盖替换

质量保障机制

• 类名预检：动手前读取模板 `