文章正文
这份源码是歸藏出品的 PPT 生成 Skill，产物是一份单文件 HTML 的横向翻页网页 PPT。
它最大的特点是审美取向很明确，只给两套基调让你选：电子杂志风，和瑞士国际主义风。
杂志风走衬线大标题加流体 WebGL 背景的路线，像把一本 Monocle 贴上了代码；瑞士风则是无衬线、网格点阵、克莱因蓝或柠檬黄那种高反差。
翻页靠键盘方向键、滚轮、触屏滑动，按 ESC 还能调出索引页，线下分享时不用额外装翻页工具。
模板把 CSS、WebGL shader、翻页 JS 和字体图标 CDN 都预设好了，你基本只往 `` 里填内容。
它还内置了低功耗模式（按 B 停掉 WebGL 和动画），以及在 Codex 环境里调用模型生成配图的 optional 流程，整体很适合做发布会或私享会那种”一次做完、直接讲”的网页 slides。
源码简介
这是 guizang-ppt-skill（歸藏）的 AI Skill 源码，用来生成单文件 HTML 的横向翻页网页 PPT。
提供电子杂志风与瑞士国际主义风两套视觉基调，内置 WebGL 背景、Lucide 图标与 Motion 动效。
源码包含两套完整可运行模板、布局骨架、主题色预设与静态校验脚本，适合想做高质感网页幻灯片、或偏好瑞士/杂志审美的开发者下载参考。
适用场景
- 线下分享、私享会、AI 产品发布或 demo day
- 瑞士风适合科技产品、数据汇报、年度总结等强结构内容
- 杂志风适合人文观察、行业分享、需要”杂志感”的演讲
技术栈与运行环境
- 前端：原生 HTML / CSS / JS，单文件交付，无需构建
- 视觉：WebGL shader 背景（内嵌模板）、Motion One（assets/motion.min.js 本地副本 + CDN 兜底）、Lucide 图标
- 校验：Node.js（scripts/validate-swiss-deck.mjs 风格 B 静态校验）
- 配图（可选）：Codex 环境可调用 GPT-M 2.0 生成配图
- 运行环境：支持 markdown skill 的 agent（Claude Code / Codex 等）
功能亮点
- 单文件 HTML 横向翻页：assets/template.html 与 template-swiss.html 均为完整可运行种子文件，仅留 SLIDES_HERE 占位符。
- 两套视觉基调：风格 A 电子杂志风（衬线 + 流体 WebGL + 暖色，5 套主题）；风格 B 瑞士国际主义（无衬线 + 网格点阵 + 4 套高反差主题）。
- WebGL 背景 + Motion 动效 + Lucide 图标：模板内置 shader 背景、motion.min.js 离线兜底，图标用 Lucide 不手画 SVG。
- 多方式翻页与索引：键盘 ←→、滚轮、触屏、ESC 索引页，离线时动画自动降级为”无动画但可读”。
- 瑞士风 22 版式锁定 + 静态校验：references/swiss-layout-lock.md 登记 S01-S22，scripts/validate-swiss-deck.mjs 校验版式/图片槽位/对齐。
- 低功耗模式与可选配图：B 键切换 body.low-power 停 WebGL/ASCII canvas；Codex 下可走 image-prompts.md 生成配图。
安装与部署提示
- 在支持 skill 的 agent 环境按 SKILL.md 运行，先确定风格 A 还是 B。
- 拷贝对应模板到目标 index.html，替换标题占位符并选一套主题色（不允许自定义 hex）。
- 风格 B 生成后运行 node scripts/validate-swiss-deck.mjs 做静态校验。
- 可选配图：在 Codex 环境按 references/image-prompts.md 调用模型生成并放入 images/。
截图与演示说明
- 风格 A 产物 assets/template.html（电子杂志风，衬线大标题 + 流体背景）。
- 风格 B 产物 assets/template-swiss.html（瑞士国际主义，网格 + 高反差 accent）。
- references/layouts.md 的 10 种杂志风布局骨架。
- references/swiss-layout-lock.md / layouts-swiss.md 的 22 个瑞士版式（S01-S22）。
- scripts/validate-swiss-deck.mjs 的校验输出，以及 assets/screenshot-backgrounds/ 内置背景。
常见问题
#### 需要联网或构建吗？
产物是单文件 HTML，无需 npm 和构建；字体/图标走 CDN，离线时动效降级但内容可读。风格 B 校验需本地 Node.js。
#### 适合二次开发吗？
两套模板 CSS 高度参数化，布局骨架（layouts.md / swiss-layout-lock.md）可直接粘贴改造，校验脚本也可按需扩展。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本项目为 AI Skill 加前端模板，运行依赖对应 agent 环境与 Node.js（仅校验脚本需要）。
GitHub项目开源地址：https://github.com/op7418/guizang-ppt-skill
