# 归藏 HTML PPT 代理技能
> 通过此PPT代理技能，生成具有两种独特视觉风格的HTML演示文稿，并集成图像生成和多平台封面制作功能。在几秒钟内制作出专业且视觉吸引力强的演示文稿。
- Canonical: https://nanoskill.ai/zh/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/zh/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: zh-CN
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
归藏 HTML PPT 代理技能使AI代理能够轻松生成专业的单文件HTML演示文稿。该技能专为如Claude Code和Codex等平台设计，简化了视觉吸引力内容的创作，提供两种独特的美学体系：以叙述为主的电子杂志风格和以事实驱动的瑞士国际主义风格。用户可以快速将文章转化为引人入胜的演示文稿，制作详细的产品分析，并生成一致的多平台封面，同时保持高视觉质量。
该技能通过提供轻量级HTML输出，无需复杂设置即可轻松分享和查看，从而脱颖而出。它集成了先进功能，如通过Codex中的GPT-Image 2.0 / GPT-M 2.0进行AI驱动的图像生成，允许上下文感知的视觉内容和信息图表。此外，它提供结构化的布局和严格的设计原则，尤其是针对瑞士风格，确保从幻灯片到社交媒体封面等所有生成内容都拥有精美一致的外观。
适用于各种场景，从内部演讲和产品发布到个人分享和方法演示，归藏 HTML PPT 代理技能简化了内容创建工作流程。它使用户能够将长篇内容转化为简洁的演示文稿，增强产品截图以适应特定模板比例，并确保在所有沟通渠道中保持一致的视觉形象。该技能专注于结构化工作流程和预定义的视觉规则，以最少的努力确保高质量、美观的结果。
## Key features
- **双重视觉系统**: 在“风格 A：电子杂志 × 电子墨水”用于叙事和个人表达，或“风格 B：瑞士国际主义”用于事实、产品分析和方法论之间进行选择，确保您的信息有效传达。
- **单文件 HTML 输出**: 生成轻量级、自包含的 HTML 演示文稿，无需构建过程或服务器，使其易于在任何网络浏览器中打开、分享和演示。
- **AI 代理兼容性**: 专为克劳德代码、科德克斯以及其他具有 Shell 访问权限的 AI 代理设计，允许通过自然语言命令无缝生成、修改和迭代 HTML PPT。
- **科德克斯图片生成**: 在科德克斯中集成 GPT-图像 2.0 / GPT-M 2.0，生成高质量、与上下文相关的图片、信息图和 UI 场景，完美缩放并插入到您的幻灯片中。
- **多平台封面生成**: 根据演示文稿的核心内容，自动为不同平台（如微信公众号（21:9，1:1）、小红书（3:4）和视频号（16:9））创建一致、视觉统一的封面。
## Use cases
- **将文章转化为演示文稿**: 将长篇文章或文档转换为简洁、引人入胜的 HTML PPT，用于演讲、内部讲座或私密分享会，提取核心观点并将其结构化为引人注目的叙述。
- **创建专业产品分析**: 利用结构化的“风格 B：瑞士国际主义”来呈现产品分析、方法论或 AI 产品发布，重点关注事实、数据和清晰的视觉传达。
- **设计一致的多平台内容**: 在演示文稿、配套图片和各种社交媒体封面之间生成统一的视觉标识，确保在所有传播渠道上品牌的一致性和影响力。
- **增强 PPT 的截图**: 重新设计和调整产品截图以适应演示模板，保留关键信息，同时实现适合专业 HTML PPT 的一致视觉风格。
## Result preview
查看由此代理技能从一篇文章生成的真实PPT。
## Result walkthrough
### 步骤1：安装
将技能添加到您的代理中。
### 步骤2：提供内容
输入主题、笔记，或上传现有材料（例如，报告、大纲、想法）。
### 步骤3：获取您的PPT
查看您可以直接使用的HTML演示文稿。
## Skill definition
一款适用于 Claude Code、Codex 等编码智能体环境的智能体技能。可生成**单文件 HTML 水平滑动演示文稿**、演示画面及社交封面页面。
它内置两套视觉系统：
- **风格 A：编辑杂志 × 电子墨水**。想象一下加入了代码的《Monocle》杂志。最适合叙事型演讲、观点分享、沙龙及个人化表达。
- **风格 B：瑞士国际主义印刷风格**。网格优先，一种高饱和度锚定色，锐利矩形，极细分割线，极端的字体对比。最适合事实呈现、产品介绍、分析报告及框架阐释。
> 由 [Guizang](https://x.com/op7418) 从线下演讲提炼而成，如“一个人的公司：被AI折叠的组织”和“一种新的工作方式”。制作这些演示文稿时踩过的每一个坑都记录在了 `checklist.md` 中。
**旧主题 · 风格 A 编辑杂志**
**新主题 · 风格 B 瑞士国际**
## 30秒快速开始
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
或者将以下内容粘贴给具有 shell 访问权限的 AI 智能体：
```text
为我安装 guizang-ppt-skill。将 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill，然后验证 SKILL.md、assets/ 和 references/ 是否存在。
```
如果已安装，请使用以下命令更新：
```text
为我更新 guizang-ppt-skill。进入 ~/.claude/skills/guizang-ppt-skill，运行 git pull，然后告诉我最新的提交。
```
然后向你的智能体提问：
```text
根据这篇文章创建一个瑞士风格的演示文稿，大约7张幻灯片，包含2-3张生成的可视化图。
```
其他有用的提示词：
```text
将这份 Markdown 文件变成编辑杂志风格的演示文稿。
根据这个演示文稿的核心思想生成一张 21:9 的社交封面。
将这张产品截图重新设计为 16:10 的幻灯片视觉元素。
```
## 你能得到什么
- 🖋 **两套视觉系统**：风格A用于编辑叙事，风格B用于事实性的瑞士结构
- 📐 **水平滑动导航**：← → 箭头 / 滚轮 / 触摸滑动 / 底部圆点 / ESC键索引
- 🧩 **风格A的10种布局**：封面、分隔页、大数字、图文、图片网格、流程图、对比等
- 🧱 **风格B的22种锁定布局**：封面、声明、KPI塔、循环图、双项对比、图片主视觉、结语宣言等
- 🎨 **精选主题预设**：5款电子墨水主题供风格A使用，4款瑞士锚定色主题供风格B使用
- 🖼 **可选的 Codex 图像流程**：使用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统图及用户界面场景，并以模板安全比例插入
- 📰 **社交封面**：生成 21:9 微信公众号封面、1:1 分享卡片、3:4 小红书封面、视频缩略图及相关变体
- 📴 **低功耗静态模式**：按下 `B` 键可将 WebGL / canvas 动画转换为静态视觉
- 📄 **单HTML文件** — 无需构建、无需服务器，直接在浏览器中打开
## 适用 / 不适用场景
**✅ 适用**：线下演讲、行业主题演讲、私人沙龙、AI产品发布、演示日、具有强烈个人表达风格的演示文稿
**❌ 不适用**：数据密集型表格、培训课件（密度太低）、多用户协作编辑（静态HTML）
## 常见用例
| 任务 | 推荐流程 |
|------|------------------|
| 长文章转演讲文稿 | 提取核心论点，然后构建6-10张幻灯片的节奏 |
| 框架 / 产品分析 | 使用风格B瑞士风格与锁定布局和21:9主视觉图 |
| 个人演讲 / 观点文章 | 使用风格A编辑杂志以获得更强的叙事节奏 |
| 演示文稿视觉元素 | 在 Codex 中生成照片、信息图、流程图、系统图或用户界面场景 |
| 社交封面 | 从同一创意生成21:9主封面、1:1分享卡片、3:4竖版封面和视频缩略图 |
| 截图规范化 | 在将原始截图插入幻灯片之前，将其重新设计为模板安全比例 |
## 为什么选择HTML演示文稿
- **智能体原生编辑**：HTML / CSS 是纯文本，智能体可以直接阅读、编辑和验证。
- **比 Markdown 更高的视觉密度**：精确的布局、定位、动画、交互性和封面格式。
- **轻量交付**：一个HTML文件即可打开、演示、发送、截图或录制。
- **更好的质量关卡**：瑞士风格验证器可以捕捉布局偏移、不安全的图片放置、居中的正文标题和SVG文本陷阱。
- **跨输出统一视觉体系**：演示文稿、生成的视觉元素、封面和截图重新设计可以共享相同的样式规则。
## 平台支持
| 平台 | 状态 | 说明 |
|----------|--------|-------|
| Claude Code | 支持 | 创建和迭代HTML演示文稿的原生技能工作流 |
| Codex | 支持 | 适合演示文稿生成、图像生成和基于浏览器的视觉质量检查 |
| Cursor / 其他本地智能体 | 可用 | 需要文件系统访问和 shell 执行权限 |
| WorkBuddy | 适配中 | 面向市场的版本正在单独准备中 |
| 纯聊天机器人 | 不推荐 | 没有文件系统和浏览器预览，完整的演示文稿生成难以稳定 |
## 安装
### 方式一：一行命令安装（推荐）
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
### 方式二：将以下内容粘贴给AI
> 为我安装 `guizang-ppt-skill` Claude Code 技能。步骤如下：
>
> 1. 确保 `~/.claude/skills/` 存在（如不存在则创建）
> 2. 运行 `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. 验证：`ls ~/.claude/skills/guizang-ppt-skill/` 应显示 `SKILL.md`、`assets/`、`references/`
> 4. 完成后告知我。之后，说出诸如“给我做一个杂志风格的演示文稿”之类的话即可触发此技能。
将上述内容块粘贴到 Claude Code / Cursor / 任何具有 shell 访问权限的 AI 智能体中，它会处理安装。
### 方式三：手动命令行
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
```
### 如何触发
安装后，Claude Code 会自动检测该技能。触发短语：
- “给我做一个杂志风格的演示文稿”
- “给我做一个瑞士风格的演示文稿”
- “生成一个水平滑动的演示文稿”
- “编辑杂志风格的演示文稿”
- “为我的演讲准备电子墨水幻灯片”
- “从这篇文章创建一个21:9的微信公众号封面”
- “从这个演示文稿创建一个1:1的分享卡片”
## 工作流程
该技能是一个结构化的流程；智能体会引导你完成每一步：
1. **选择风格** — 风格 A 编辑杂志，或风格 B 瑞士国际
2. **明确意图** — 7个问题清单：风格、受众、时长、源材料、图像/截图、主题、硬性限制
3. **复制模板** — 风格 A 使用 `assets/template.html`；风格 B 使用 `assets/template-swiss.html`
4. **填充内容** — 创建节奏计划，然后选择并调整匹配的布局框架
5. **可选图像生成** — 在 Codex 中，询问是否使用 GPT-Image 2.0 / GPT-M 2.0 图像，然后以适合页面的比例插入
6. **自查** — 对照 `references/checklist.md` 检查；P0 问题必须全部通过；瑞士风格演示文稿还必须通过布局验证器
7. **预览** — 在浏览器中打开 HTML
8. **迭代** — 使用内联样式调整字体大小、高度、间距
完整规范见 [`SKILL.md`](./SKILL.md)。
## 风格 B 瑞士
瑞士主题是一套严格的布局系统，而不仅仅是一个 CSS 皮肤。
- **22种命名布局**：正文幻灯片必须使用 `S01` 到 `S22`；不得发明新结构
- **4种锚定色**：国际克莱因蓝、柠檬黄、柠檬绿、安全橙
- **网格锁定**：16列网格，锐利矩形，1像素极细线，无阴影，无渐变，无圆角卡片
- **中文标题缩放**：全中文标题应缩小一级，以为内容和图像留出空间
- **图像/文字底部对齐**：在左右图文布局中，文本和图像块应对齐于底部，同时避开翻页控件
- **图像插槽**：图像必须放置在模板定义的 `data-image-slot` 区域内，通常以21:9或16:10的比例生成
- **硬性验证**：验证器会捕捉居中的正文标题、实验性布局、可见的 SVG 文本以及放置在插槽外的图像
瑞士风格验证：
```bash
node scripts/validate-swiss-deck.mjs path/to/index.html
```
## Codex 图像流程
在 Codex 中，当第一版演示文稿草稿准备好后，智能体会询问用户是否需要生成的视觉元素。一旦确认，选择一种图像类型或风格。常见类型包括：
- 纪实照片：类似 Fuji / Leica 风格的真实世界场景，增添人文质感
- 信息图 / 流程图 / 对比图 / 系统图：用于难以用照片解释的概念
- 截图装裱 / 截图重新设计：首先使用捆绑的背景素材和 CleanShot X 风格的画布保留原始截图；仅在需要重建截图时才使用 UI 场景生成
- 数据海报 / 图表：将关键数字转化为可直接插入的视觉素材
- 多图合成：适用于超宽插槽，避免三张不相关的16:9图片破坏网格
生成的图像必须遵循四项核心规则：
- 将图像视为嵌入式素材，而非独立幻灯片：内部不得包含页脚、页面底部、标题、页码、角标、签名或装饰性边框
- 匹配演示文稿语言：中文演示文稿在信息图内使用中文标签，英文演示文稿使用英文标签
- 生成前匹配插槽比例：许多瑞士风格的主视觉插槽为21:9，常见主视觉为16:9 / 16:10，UI 场景为16:10，图片网格使用固定的等高
- 当必须忠实保留原始截图时，请先阅读 `references/screenshot-framing.md`，并使用捆绑的 `assets/screenshot-backgrounds/` 背景以及程序化缩放、内边距和对齐，而不是默认重绘截图
图像提示词位于 [`references/image-prompts.md`](./references/image-prompts.md)。截图装裱位于 [`references/screenshot-framing.md`](./references/screenshot-framing.md)。
## 封面生成
该技能还可以将文章或演示文稿创意转化为平台封面：
- **微信公众号主封面**：21:9，标题优先，带有一个视觉锚点
- **微信分享卡片**：1:1，与21:9封面视觉上配对
- **小红书封面/轮播**：3:4，大标题，批量中保持一致的字体比例
- **视频缩略图**：16:9，标题 + 副标题 + 一个焦点视觉
同样适用此规则：使用少量有力关键词，将标题作为视觉中心，不要在画布上填充正文。
## 示例提示词
将以下任一提示词复制到你的智能体中，然后附上你的文章、Markdown 文件或图像素材：
```text
根据这篇文章创建一个8张幻灯片的瑞士风格演示文稿，配有3张与模板图像插槽匹配的生成视觉元素。
```
```text
将这份产品分析文档转变为一个具有强烈叙事节奏的编辑杂志风格演示文稿。
```
```text
根据这个演示文稿的核心创意，生成两张封面：一张21:9主封面和一张视觉上配对的1:1分享卡片。
```
```text
将这些产品截图重新设计为统一的16:10幻灯片视觉元素。保留关键UI信息；不要在图像内部添加幻灯片标题或页脚。
```
## 目录
```
guizang-ppt-skill/
├── SKILL.md ← 主技能文件：工作流程、原则、常见错误
├── README.md ← 中文 README
├── README.en.md ← 本文件
├── assets/
│ ├── template.html ← 风格 A 编辑杂志模板
│ ├── template-swiss.html ← 风格 B 瑞士模板
│ └── screenshot-backgrounds/ ← 捆绑的 WebP 截图背景：5个风格A / 4个风格B
├── scripts/
│ └── validate-swiss-deck.mjs ← 瑞士布局验证器
└── references/
├── components.md ← 组件目录（类型、颜色、网格、图标、标注、统计、流程图）
├── layouts.md ← 10种布局框架（即用型）
├── layouts-swiss.md ← 22种瑞士锁定布局
├── swiss-layout-lock.md ← 瑞士风格保真度及布局硬性规则
├── themes.md ← 5种主题预设（选择使用，不要自定义）
├── themes-swiss.md ← 4种瑞士锚定色主题
├── image-prompts.md ← GPT-Image 2.0 / GPT-M 2.0 图像类型、比例及基础提示词
├── screenshot-framing.md ← CleanShot X 风格截图装裱语义
└── checklist.md ← 质量检查清单（P0 / P1 / P2 / P3 等级）
```
## 主题预设
从 `references/themes.md` 中选择。**不允许使用自定义十六进制颜色值** — 保护审美比选择自由更重要。
### 风格 A 编辑主题
| 预览 | 主题 | 核心颜色及适用场景 |
|---------|-------|--------------------------|
| 
| 🖋 **墨水经典** | `#0a0a0b` / `#f1efea`。通用默认，商业发布，不确定时使用。 |
| 
| 🌊 **靛蓝瓷器** | `#0a1f3d` / `#f1f3f5`。科技、研究、AI、技术主题演讲。 |
| 
| 🌿 **森林墨水** | `#1a2e1f` / `#f5f1e8`。自然、可持续发展、文化、非虚构。 |
| 
| 🍂 **牛皮纸** | `#2a1e13` / `#eedfc7`。怀旧、人文、文学、独立杂志。 |
| 
| 🌙 **沙丘** | `#1f1a14` / `#f0e6d2`。艺术、设计、创意、时尚、画廊式演示。 |
切换主题只需替换 `template.html` 中 `:root{}` 块顶部的6个变量 — 所有其他 CSS 通过 `var(--...)` 流动。
### 风格 B 瑞士主题
从 `references/themes-swiss.md` 中选择。**此处同样不允许使用自定义十六进制颜色值**。
| 预览 | 主题 | 锚定色及适用场景 |
|---------|-------|---------------------------|
| 
| 🔵 **国际克莱因蓝** | `#002FA7`。默认，商业发布，AI产品，框架。 |
| 
| 🟡 **柠檬黄** | `#FFD500`。青春、体育、零售、消费品、Y2K复古。 |
| 
| 🟢 **柠檬绿** | `#C5E803`。生态、可持续发展、健康、Z世代品牌。 |
| 
| 🟠 **安全橙** | `#FF6B35`。预警、新闻、工业话题、体育、充满活力的主题。 |
如果用户要求瑞士风格演示文稿但未指定颜色，默认使用国际克莱因蓝。
## 核心设计原则
1. **克制优于华丽** — WebGL 背景仅在主视觉页面微露
2. **结构优于装饰** — 信息层级通过字号 + 字体 + 网格留白实现，而非阴影或浮动卡片
3. **图像是头等公民** — 将其与正文内容区域对齐，保持比例稳定，仅从底部裁剪，保留顶部和侧面
4. **生成的可视化元素是素材** — 仅保留核心照片/图标/UI；不要在图像内部渲染幻灯片标题、页脚或角标
5. **节奏存在于主视觉页面** — 主视觉/非主视觉交替出现，防止视觉疲劳
6. **动态效果必须可选** — `B` 键切换静态模式，让动画永远不成为阅读负担
7. **术语保持一致** — Skills 就是 Skills；不混用翻译
8. **瑞士布局保持锁定** — 风格B应恢复并复用原有的22页布局系统，而非发明无关页面
## 视觉参考
- [*Monocle*](https://monocle.com) 杂志排版
- YC Garry Tan — “薄马具，厚技能”
- Massimo Vignelli / Helvetica Forever / 瑞士国际主义印刷风格
- Guizang 的线下演讲文稿系列
## 路线图
- 添加更多真实案例和可打开的HTML演示文稿演示
- 扩展更多发布平台的封面格式
- 增加更多瑞士布局验证规则
- 改进截图重新设计和信息图生成工作流
- 准备面向 WorkBuddy 等市场的特定版本
- 添加更多精选主题包，同时保持对自定义颜色的限制
## 常见问题
**能导出为PPTX吗？**
主要输出是HTML。你可以用浏览器演示、截图或录制。PPTX转换可作为独立工作流完成，但目前不是核心路径。
**为什么不允许自定义颜色？**
该技能旨在实现稳定的视觉输出。任意颜色往往会破坏系统，因此演示文稿必须使用精选的预设色。
**我可以添加自己的布局吗？**
可以。风格A的布局可在 `references/layouts.md` 中扩展。风格B更严格：需同时更新 `template-swiss.html`、`layouts-swiss.md`、`swiss-layout-lock.md` 和验证器。
**Codex图像生成是必需的吗？**
不是。没有生成图像，演示文稿也能工作。仅当你需要照片、信息图、UI场景或封面时才会用到图像流程。
**如何更新技能？**
再次运行安装命令，或在本地技能目录中运行 `git pull`。
## 贡献
错误、布局问题、新布局请求 — 欢迎提交 Issue 和 PR。优先事项：
- 先向 `template.html` 添加新类；不要让 `layouts.md` 引用未定义的类
- 更改 `template-swiss.html` 时，需同步更新 `layouts-swiss.md` 和 `swiss-layout-lock.md`
- 添加瑞士规则时，更新 `scripts/validate-swiss-deck.mjs`
- 将遇到的坑记录到 `checklist.md` 的相应 P0 / P1 / P2 / P3 等级
- 新主题颜色放入 `themes.md` 并附上推荐用例
## 许可证
MIT © 2026 [op7418](https://github.com/op7418)
## FAQ
### 什么是归藏 HTML PPT 代理技能？
归藏 HTML PPT 技能是一款兼容 AI 代理的工具，旨在生成单文件 HTML 演示文稿、配套图片以及多平台封面。它提供两种独特的视觉风格：电子杂志和瑞士国际主义。
### 如何安装归藏 HTML PPT 代理技能？
您可以通过在终端运行 \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` 来安装，或者指示一个具有 Shell 访问权限的 AI 代理将仓库克隆到您的技能目录中。
### 我可以自定义 HTML PPT 的颜色吗？
不可以，不允许使用自定义 HEX 值。该技能为风格 A（电子杂志）和风格 B（瑞士国际主义）提供了一系列预设主题，以确保美学一致性和高质量输出。
### 提供了哪两种视觉风格？
风格 A“电子杂志 × 电子墨水”非常适合叙事、观点和个人表达。风格 B“瑞士国际主义”最适合以基于网格的极简设计呈现事实、产品分析和方法论。
### 能否将 HTML PPT 导出为 PPTX 格式？
核心交付物是 HTML，可以直接在浏览器中演示、截图或录制。虽然直接导出 PPTX 不是主要功能，但您可以根据需要将 HTML 页面作为视觉草稿进行转换。
### 该技能是否支持为我的 HTML PPT 生成图片？
是的，在科德克斯环境中使用时，该技能可以利用 GPT-图像 2.0 / GPT-M 2.0 生成各种类型的图片、信息图和 UI 场景，然后根据模板比例插入到您的演示文稿中。