适合人群
- 有 Claude Code 使用基础，想让 AI 帮你做 PPT 的开发者
- 对设计有要求，不想用千篇一律模板的人
- 需要快速出高质量演示文稿的产品经理、创业者
- 对前端 HTML/CSS 感兴趣，想学习高级视觉效果的人
准备清单
- Claude Code 已安装并配置好（Claude Code 完整配置教程）
- 一个浏览器（Chrome / Edge / Safari 均可）
- 不需要安装 npm、不需要任何依赖包
- 基本了解 Markdown 语法
这是什么？
guizang-ppt-skill 是一个开源的 Claude Code 技能包，它能让 AI 直接生成 单文件 HTML 横向滑动幻灯片。
听起来很普通？但它生成的效果一点都不普通：
- WebGL 流体背景 — 首页 Hero 页有动态流体/扩散效果，不是静态图
- 10 种专业排版布局 — 封面、分章节、大数据展示、图文混排、对比页、引用页等
- 5 套精选主题 — 水墨经典、靛蓝瓷器、森林水墨、牛皮纸、沙丘
- 杂志级排版 — 思源宋体 + Playfair Display 标题，等宽字体元数据
- 纯 HTML 输出 — 一个文件搞定，浏览器直接打开，不依赖任何服务
而且整个过程 不需要 API Key、不需要安装任何东西、不需要后端服务。纯靠 Claude 读指令生成 HTML。
操作步骤
1. 下载技能包
# 克隆仓库
git clone https://github.com/op7418/guizang-ppt-skill.git
仓库结构很简单：
guizang-ppt-skill/
├── SKILL.md # 核心技能指令（AI 读这个）
├── assets/
│ └── template.html # HTML 模板种子文件
└── references/
├── components.md # 组件目录（排版、颜色、网格、图标等）
├── layouts.md # 10 种布局骨架 HTML
├── themes.md # 5 套主题配色 CSS 变量
└── checklist.md # 质量检查清单
2. 安装到 Claude Code 技能目录
把技能包放到 Claude Code 能找到的位置：
# 复制到 Claude Code 技能目录
mkdir -p ~/.claude/skills/
cp -r guizang-ppt-skill/magazine-web-ppt ~/.claude/skills/
Claude Code 会自动扫描 ~/.claude/skills/ 目录下的 SKILL.md 文件，无需手动注册。
3. 开始生成你的第一份演示文稿
在项目目录下启动 Claude Code，直接告诉它你要做什么：
帮我做一份杂志风格的演示文稿，主题是"2024 年 AI 行业回顾"，
10 页左右，用水墨经典主题。需要有封面、3个数据页、2个对比页、
1个引用页、1个图文混排页和结尾页。
Claude Code 会自动识别到已安装的技能，然后按这个流程工作：
- 理解需求 — 分析你要多少页、什么主题、什么风格
- 复制模板 — 从 template.html 开始
- 选择主题 — 应用对应的 CSS 变量配色方案
- 拼装布局 — 从 10 种布局中选择合适的骨架
- 填充内容 — 根据你的主题生成文字和结构
- 自我检查 — 对照 checklist.md 检查质量
最终输出一个 index.html 文件，双击打开就能看。
4. 10 种布局详解
这是技能最核心的部分。每种布局都是一个即用的 HTML 区块：
| 布局 | 用途 | 特点 |
|---|---|---|
| 封面 (Cover) | 开场首页 | 大标题 + 副标题 + WebGL 背景 |
| 章节分隔 (Act Divider) | 分章节过渡 | 大字章节编号 + 标题 |
| 大数据 (Big Numbers) | 数据展示 | 超大数字 + 说明文字 |
| 图文主导 (Lead Image + Text) | 重点图文 | 左图右文或上文下图 |
| 图片网格 (Image Grid) | 多图展示 | 2x2 或 3x3 图片排列 |
| 流程图 (Pipeline) | 步骤流程 | 线性流程展示 |
| Hero 问题 (Hero Question) | 引发思考 | 全屏大问题 + 背景 |
| 大引用 (Big Quote) | 名言金句 | 引号 + 名言 + 出处 |
| 前后对比 (Before/After) | 对比展示 | 左右或上下对比 |
| 图文混排 (Image + Text Mix) | 综合展示 | 图文交错排版 |
5. 5 套主题配色
每套主题都是一组 CSS 自定义属性，改一个变量就全局生效：
水墨经典 (Ink Classic)
- 黑白为主，适合严肃商务、学术
- 水墨纹理背景
靛蓝瓷器 (Indigo Porcelain)
- 蓝白配色，适合科技、产品
- 仿瓷器质感的渐变
森林水墨 (Forest Ink)
- 深绿为主，适合环保、自然主题
- 层次丰富的深色调
牛皮纸 (Kraft Paper)
- 暖棕色调，适合手工艺、设计
- 纸张纹理背景
沙丘 (Dune)
- 金沙色调，适合旅行、生活方式
- 柔和渐变
6. 自定义修改
生成的 HTML 是纯前端代码，你可以直接修改：
换主题颜色： 找到 CSS 变量区域，修改颜色值：
:root {
--color-primary: #1a1a2e; /* 主色 */
--color-secondary: #16213e; /* 辅色 */
--color-accent: #e94560; /* 强调色 */
--color-text: #f5f5f5; /* 文字色 */
--color-bg: #0f0f23; /* 背景色 */
}
换字体：
:root {
--font-headline: 'Noto Serif SC', serif;
--font-body: 'Noto Sans SC', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
添加新页面： 在 HTML 中找到对应的布局骨架（从 references/layouts.md 复制），插入内容即可。
7. 导航交互
生成的演示文稿支持多种导航方式：
- 键盘方向键 ← → 翻页
- 鼠标滚轮 上下滚动翻页
- 触摸滑动 手机端左右滑动
- 底部圆点 点击跳转任意页
- ESC 键 缩略图全局预览
8. 高级技巧
用自定义内容生成：
如果你有现成的文字内容，可以直接给 Claude Code：
请根据以下内容做一份演示文稿，用靛蓝瓷器主题：
[粘贴你的内容...]
要求：每页不超过 3 个要点，配图用 picsum 随机图片。
嵌入真实图片：
把图片 URL 替换到 HTML 的 img 标签中即可：
<img src="https://your-image-url.jpg" alt="描述">
导出 PDF：
用浏览器打开 HTML 后，Ctrl+P 打印，选择"另存为 PDF"即可。
常见问题
Q: 需要 Claude Pro 订阅吗？
A: 需要 Claude Code 的使用权限。Claude Pro 订阅 可以直接使用 Claude Code。也可以通过 API 方式使用，按量付费。
Q: 生成的 HTML 文件太大怎么办？
A: 文件主要包含 CSS 和少量 JavaScript。WebGL 着色器代码占一定体积，但通常整个文件不超过 200KB，加载速度很快。如果图片过多，建议用 CDN 托管图片。
Q: 可以在手机上展示吗？
A: 可以。演示文稿支持触摸滑动，但建议在电脑上查看完整效果，因为 WebGL 流体效果在移动端可能有性能差异。
Q: 能不能不用 Claude Code，直接手动做？
A: 可以。仓库的 assets/template.html 是完整可运行的模板，references/ 文件夹有所有布局和主题的代码。你可以手动复制粘贴拼装。但用 Claude Code 效率高得多，几分钟就能生成完整演示文稿。
Q: 输出能转成 PPTX 格式吗？
A: 不能直接转。但你可以通过浏览器打印为 PDF，再导入 PowerPoint。或者用浏览器截图功能，把每页截图插入 PPT。
参考来源
下一步建议
- 试试用不同主题生成同一份内容，对比视觉效果
- 学习 Claude Code 35 个隐藏命令 解锁更多高级用法
- 了解 Top 30 MCP 服务器配置 让 Claude Code 更强大
- 探索 Claude Code 完整配置优化 提升使用效率