归藏 HTML PPT 代理技能

一款适用于 Claude Code、Codex 等编码智能体环境的智能体技能。可生成单文件 HTML 水平滑动演示文稿、演示画面及社交封面页面。

它内置两套视觉系统：

• 风格 A：编辑杂志 × 电子墨水。想象一下加入了代码的《Monocle》杂志。最适合叙事型演讲、观点分享、沙龙及个人化表达。
• 风格 B：瑞士国际主义印刷风格。网格优先，一种高饱和度锚定色，锐利矩形，极细分割线，极端的字体对比。最适合事实呈现、产品介绍、分析报告及框架阐释。

由 Guizang 从线下演讲提炼而成，如“一个人的公司：被AI折叠的组织”和“一种新的工作方式”。制作这些演示文稿时踩过的每一个坑都记录在了 checklist.md 中。

旧主题 · 风格 A 编辑杂志

新主题 · 风格 B 瑞士国际

30秒快速开始

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

或者将以下内容粘贴给具有 shell 访问权限的 AI 智能体：

为我安装 guizang-ppt-skill。将 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill，然后验证 SKILL.md、assets/ 和 references/ 是否存在。

如果已安装，请使用以下命令更新：

为我更新 guizang-ppt-skill。进入 ~/.claude/skills/guizang-ppt-skill，运行 git pull，然后告诉我最新的提交。

然后向你的智能体提问：

根据这篇文章创建一个瑞士风格的演示文稿，大约7张幻灯片，包含2-3张生成的可视化图。

其他有用的提示词：

将这份 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）

常见用例

为什么选择HTML演示文稿

• 智能体原生编辑：HTML / CSS 是纯文本，智能体可以直接阅读、编辑和验证。
• 比 Markdown 更高的视觉密度：精确的布局、定位、动画、交互性和封面格式。
• 轻量交付：一个HTML文件即可打开、演示、发送、截图或录制。
• 更好的质量关卡：瑞士风格验证器可以捕捉布局偏移、不安全的图片放置、居中的正文标题和SVG文本陷阱。
• 跨输出统一视觉体系：演示文稿、生成的视觉元素、封面和截图重新设计可以共享相同的样式规则。

平台支持

安装

方式一：一行命令安装（推荐）

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 智能体中，它会处理安装。

方式三：手动命令行

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。

风格 B 瑞士

瑞士主题是一套严格的布局系统，而不仅仅是一个 CSS 皮肤。

• 22种命名布局：正文幻灯片必须使用 S01 到 S22；不得发明新结构
• 4种锚定色：国际克莱因蓝、柠檬黄、柠檬绿、安全橙
• 网格锁定：16列网格，锐利矩形，1像素极细线，无阴影，无渐变，无圆角卡片
• 中文标题缩放：全中文标题应缩小一级，以为内容和图像留出空间
• 图像/文字底部对齐：在左右图文布局中，文本和图像块应对齐于底部，同时避开翻页控件
• 图像插槽：图像必须放置在模板定义的 data-image-slot 区域内，通常以21:9或16:10的比例生成
• 硬性验证：验证器会捕捉居中的正文标题、实验性布局、可见的 SVG 文本以及放置在插槽外的图像

瑞士风格验证：

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/screenshot-framing.md。

封面生成

该技能还可以将文章或演示文稿创意转化为平台封面：

• 微信公众号主封面：21:9，标题优先，带有一个视觉锚点
• 微信分享卡片：1:1，与21:9封面视觉上配对
• 小红书封面/轮播：3:4，大标题，批量中保持一致的字体比例
• 视频缩略图：16:9，标题 + 副标题 + 一个焦点视觉

同样适用此规则：使用少量有力关键词，将标题作为视觉中心，不要在画布上填充正文。

示例提示词

将以下任一提示词复制到你的智能体中，然后附上你的文章、Markdown 文件或图像素材：

根据这篇文章创建一个8张幻灯片的瑞士风格演示文稿，配有3张与模板图像插槽匹配的生成视觉元素。

将这份产品分析文档转变为一个具有强烈叙事节奏的编辑杂志风格演示文稿。

根据这个演示文稿的核心创意，生成两张封面：一张21:9主封面和一张视觉上配对的1:1分享卡片。

将这些产品截图重新设计为统一的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 编辑主题

切换主题只需替换 template.html 中 :root{} 块顶部的6个变量 — 所有其他 CSS 通过 var(--...) 流动。

风格 B 瑞士主题

从 references/themes-swiss.md 中选择。此处同样不允许使用自定义十六进制颜色值。

如果用户要求瑞士风格演示文稿但未指定颜色，默认使用国际克莱因蓝。

核心设计原则

1. 克制优于华丽 — WebGL 背景仅在主视觉页面微露
2. 结构优于装饰 — 信息层级通过字号 + 字体 + 网格留白实现，而非阴影或浮动卡片
3. 图像是头等公民 — 将其与正文内容区域对齐，保持比例稳定，仅从底部裁剪，保留顶部和侧面
4. 生成的可视化元素是素材 — 仅保留核心照片/图标/UI；不要在图像内部渲染幻灯片标题、页脚或角标
5. 节奏存在于主视觉页面 — 主视觉/非主视觉交替出现，防止视觉疲劳
6. 动态效果必须可选 — B 键切换静态模式，让动画永远不成为阅读负担
7. 术语保持一致 — Skills 就是 Skills；不混用翻译
8. 瑞士布局保持锁定 — 风格B应恢复并复用原有的22页布局系统，而非发明无关页面

视觉参考

• Monocle 杂志排版
• 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