guizang-ppt-skill
调研报告
生成「电子杂志 × 电子墨水」风格的横向翻页网页 PPT，单 HTML 文件实现高端演示。
项目仓库 · op7418/guizang-ppt-skill
调研日期 · 2026-04-29
项目概述
guizang-ppt-skill 是一个用于生成杂志风格网页 PPT 的 AI Skill，输出单文件 HTML，支持横向翻页、WebGL 背景动画、主题色切换等功能。
- 单 HTML 文件，无依赖构建
- WebGL 流体/等高线背景
- 5 套预设主题色
- 10 种布局模板
- 键盘/滚轮/触屏翻页
- Motion One 入场动效
美学定位：像 Monocle 杂志贴上了代码后的样子。拒绝商务 PPT 风格，追求 editorial magazine 质感。
核心设计原则
1. 克制优于炫技
WebGL 背景只在 hero 页透出，普通页几乎看不见。
2. 结构优于装饰
不用阴影、浮动卡片，一切靠大字号 + 字体对比 + 网格留白。
3. 字体分工明确
衬线=标题，非衬线=正文，等宽=元数据。
4. 图片第一公民
图片只裁底部，保证顶部完整；网格用 height 固定。
5 套预设主题色
不允许自定义 hex 值，保护美学一致性。
墨水经典
通用 / 商业发布 / 默认选择
靛蓝瓷
科技 / 研究 / 数据 / 技术发布会
森林墨
自然 / 可持续 / 文化 / 非虚构
牛皮纸
怀旧 / 人文 / 文学 / 独立杂志
沙丘
艺术 / 设计 / 创意 / 画廊
10 种页面布局
- 开场封面 · Hero Title
- 章节幕封 · Section Divider
- 数据大字报 · Big Stats
- 左文右图 · Quote + Image
- 图片网格 · Image Grid
- 两列流水线 · Pipeline
- 悬念收束 / 问题页 · Question
- 大引用页 · Big Quote
- 并列对比 · Before / After
- 图文混排 · Lead Image + Side Text
所有布局可直接从 references/layouts.md 复制粘贴到 template.html 中使用。
生成工作流
Step 1 · 需求澄清
6 问清单：受众、时长、素材、图片、主题色、硬约束
Step 2 · 拷贝模板
从 assets/template.html 复制到项目目录
Step 3 · 填充内容
选择布局 + 插入图片 + 调整文案
Step 4 · 对照检查
按 checklist.md 逐项自检
技术实现
字体系统
- Noto Serif SC + Playfair Display · 衬线标题
- Noto Sans SC + Inter · 非衬线正文
- IBM Plex Mono · 等宽元数据
交互动效
- 键盘 ← → 翻页
- 滚轮横向滑动
- 触屏手势支持
- 底部圆点导航
- ESC 索引视图
# 拷贝模板命令 mkdir -p "项目/XXX/ppt/images" cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html" # 本地预览 open "项目/XXX/ppt/index.html"
适用 vs 不适用场景
✓ 合适场景
- 线下分享 / 行业内部讲话
- AI 新产品发布 / Demo Day
- 带有强烈个人风格的演讲
- 需要"一次做完，不用翻页工具"
✗ 不合适场景
- 大段表格数据、图表叠加
- 培训课件（信息密度不够）
- 需要多人协作编辑
资源文件结构
guizang-ppt-skill/
├── SKILL.md ← 主文档
├── assets/
│ ├── template.html ← 完整可运行模板
│ └── motion.min.js ← Motion One 本地副本
└── references/
├── components.md ← 组件手册
├── layouts.md ← 10 种布局骨架
├── themes.md ← 5 套主题色
├── image-prompts.md ← 配图提示词
└── checklist.md ← 质量检查清单
总结
guizang-ppt-skill 为「一人公司」场景设计，输出极具美学辨识度的单文件网页 PPT。适合追求独特视觉风格的个人演讲者、AI 产品发布会、独立创作者。
GitHub · op7418/guizang-ppt-skill
Stars · 3.8K · Forks · 391