aweminds
19 KiB
Guizang PPT Skill · Web 幻灯片 / 图片 / 封面
适用于 Claude Code、Codex 及类似编程 Agent 环境的技能。它可以生成单文件 HTML 横向滑动幻灯片、幻灯片视觉素材和社交封面图片。
它自带两套视觉系统：
- Style A：编辑杂志 × 电子墨水。想象《Monocle》杂志与代码交织的效果。最适合叙事型演讲、观点分享、沙龙和个人风格表达。
- Style B：瑞士国际主义排版风格。网格优先，一个高饱和度锚点色，锐利矩形，发丝线规则，极端的字体对比。最适合事实陈述、产品介绍、分析报告和框架展示。
由 Guizang 在「一人公司：AI 折叠的组织」和「新的工作方式」等线下演讲中提炼而成。这些幻灯片中踩过的每一个坑都记录在
checklist.md中。 赞助商与支持者详情见 SPONSORS.md。
旧主题 · Style A 编辑杂志风格
新主题 · Style B 瑞士国际风格
30 秒快速上手
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
或者将以下内容粘贴给具有 shell 访问权限的 AI agent：
Install guizang-ppt-skill for me. Clone https://github.com/op7418/guizang-ppt-skill into ~/.claude/skills/guizang-ppt-skill, then verify that SKILL.md, assets/, and references/ exist.
如果已安装，运行以下命令更新：
Update guizang-ppt-skill for me. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, then tell me the latest commit.
然后对你的 agent 说：
Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals.
其他有用的提示：
Turn this Markdown file into an editorial magazine-style presentation.
Create a 21:9 social cover from the core idea of this deck.
Redesign this product screenshot as a 16:10 slide visual.
赞助商与支持者
Guizang PPT Skill 由 360 Security Lobster 金牌赞助，并获 真格基金 Token Grant 支持。详情见 SPONSORS.md。
你能得到什么
- 🖋 两套视觉系统：Style A 叙事式编辑杂志风格，Style B 事实型瑞士结构
- 📐 横向滑动导航：← → 方向键 / 滚轮 / 触摸滑动 / 底部圆点 / ESC 返回索引页
- 🧩 Style A 10 种版式：封面、分隔页、大数字、图文、图片网格、流程线、对比页等
- 🧱 Style B 22 种锁定版式：封面、声明页、KPI 塔、循环图、双栏对比、图片主视觉、结尾宣言等
- 🎨 精选主题预设：Style A 5 种电子墨水主题，Style B 4 种瑞士锚点色主题
- 🖼 可选的 Codex 图片生成流程：用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统图、UI 场景，然后以模板安全比例插入
- 📰 社交封面：生成 21:9 微信封面图、1:1 分享卡片、3:4 小红书封面、视频缩略图及相关变体
- 📴 低功耗静态模式：按下
B键将 WebGL / Canvas 动画转为静态视觉 - 📄 单 HTML 文件——无需构建、无需服务器，直接在浏览器中打开
适合 / 不适合
✅ 适合：线下演讲、行业主题演讲、私人沙龙、AI 产品发布、Demo Day、具有强烈个人风格的演示
❌ 不适合：数据密集型表格、培训类幻灯片（信息密度太低）、多用户协同编辑（静态 HTML）
常见用例
| 任务 | 推荐流程 |
|---|---|
| 长文章转演讲幻灯片 | 提取核心论点，构建 6–10 页的节奏 |
| 框架 / 产品分析 | 使用 Style B 瑞士风格，搭配锁定版式和 21:9 主视觉 |
| 个人演讲 / 观点分享 | 使用 Style A 编辑杂志风格，叙事节奏更强 |
| 幻灯片视觉素材 | 在 Codex 中生成照片、信息图、流程图、系统图或 UI 场景 |
| 社交封面 | 基于同一创意生成 21:9 主封面、1:1 分享卡片、3:4 竖版封面和视频缩略图 |
| 截图归一化处理 | 将原始截图重新设计为模板安全比例，再插入幻灯片 |
为什么选择 HTML 幻灯片
- Agent 原生编辑：HTML / CSS 是纯文本，agent 可直接读取、编辑和验证。
- 比 Markdown 更高的视觉密度：精确布局、定位、动效、交互和封面格式。
- 轻量交付：一个 HTML 文件即可打开、演示、发送、截图或录制。
- 更好的质量门禁：瑞士验证器可检测版式漂移、不安全的图片放置、居中的正文标题以及 SVG 文字陷阱。
- 统一视觉系统：幻灯片、生成的视觉素材、封面和截图重设计可共享同一套样式规则。
平台支持
| 平台 | 状态 | 说明 |
|---|---|---|
| Claude Code | 支持 | 原生 Skill 工作流，用于创建和迭代 HTML 幻灯片 |
| Codex | 支持 | 适合幻灯片生成、图片生成和基于浏览器的视觉 QA |
| Cursor / 其他本地 agent | 可用 | 需要文件系统访问和 shell 执行权限 |
| WorkBuddy | 适配中 | 面向市场的版本正在单独准备 |
| 纯聊天机器人 | 不推荐 | 没有文件系统和浏览器预览，完整生成幻灯片很难稳定 |
安装
方式一：一行命令安装（推荐）
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
方式二：粘贴给 AI
请帮我安装
guizang-ppt-skill这个 Claude Code skill。步骤：
- 确保
~/.claude/skills/目录存在（不存在则创建）- 运行
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill- 验证：
ls ~/.claude/skills/guizang-ppt-skill/应显示SKILL.md、assets/、references/- 完成后告诉我。之后说「帮我做一个杂志风格的幻灯片」之类的指令就会触发此 skill。
将以上内容粘贴到 Claude Code / Cursor / 任何具有 shell 访问权限的 AI agent 中，它会自动完成安装。
方式三：手动 CLI
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
如何触发
安装后，Claude Code 会自动检测该 skill。触发短语：
- "Make me a magazine-style deck"
- "Make me a Swiss-style deck"
- "Generate a horizontal swipe deck"
- "Editorial magazine style presentation"
- "Electronic ink slides for my talk"
- "Create a 21:9 WeChat cover from this article"
- "Create a 1:1 share card from this deck"
工作流程
该 skill 是一个结构化工作流；agent 会引导你完成每一步：
- 选择风格——Style A 编辑杂志风格，或 Style B 瑞士国际风格
- 明确意图——7 问清单：风格、受众、时长、素材来源、图片/截图、主题、硬约束
- 复制模板——Style A 使用
assets/template.html；Style B 使用assets/template-swiss.html - 填充内容——制定节奏计划，然后选择并调整匹配的版式骨架
- 可选图片生成——在 Codex 中，询问是否使用 GPT-Image 2.0 / GPT-M 2.0 图片，然后以页面适配比例插入
- 自检——对照
references/checklist.md核对；P0 问题必须全部通过；瑞士风格还必须通过版式验证器 - 预览——在浏览器中打开 HTML
- 迭代——使用内联样式调整字号、高度、间距
完整规范见 SKILL.md。
Style B 瑞士风格
瑞士主题是一套严格的版式系统，而不仅仅是一层 CSS 皮肤。
- 22 种命名版式：正文幻灯片必须使用
S01至S22；不要发明新结构 - 4 种锚点色：国际克莱因蓝、柠檬黄、柠檬绿、安全橙
- 网格锁定：16 列网格、锐利矩形、1px 发丝线、无阴影、无渐变、无圆角卡片
- 中文标题缩放：全中文标题应缩小一级，为内容和图片留出空间
- 图文底部对齐：在左右图文版式中，文字块和图片块应在底部对齐，同时避开分页控件
- 图片插槽：图片必须放置在模板定义的
data-image-slot区域中，通常以 21:9 或 16:10 生成 - 严格验证：验证器会检测居中正文标题、实验性版式、可见 SVG 文字以及放置在插槽外的图片
瑞士风格验证：
node scripts/validate-swiss-deck.mjs path/to/index.html
Codex 图片生成流程
在 Codex 中，首版幻灯片草稿完成后，agent 可以询问用户是否需要生成的视觉素材。确认后，选择图片类型或风格。常见类型包括：
- 纪实照片：类似富士 / 徕卡风格的真实场景，增添人文质感
- 信息图 / 流程图 / 对比图 / 系统图：适用于无法用照片很好解释的概念
- 截图框架 / 截图重设计：先保留原始截图，搭配内置背景素材和 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。
封面生成
该 skill 还可以将文章或幻灯片创意转化为平台封面：
- 微信主封面：21:9，标题优先，配一个视觉锚点
- 微信分享卡片：1:1，与 21:9 封面视觉搭配
- 小红书封面 / 轮播图：3:4，大标题，整组保持统一的字体比例
- 视频缩略图：16:9，标题 + 副标题 + 一个焦点视觉
同样遵循一条原则：使用少数关键词，让标题成为视觉中心，不要用正文填满画布。
示例提示词
将以下任意提示词复制到你的 agent 中，然后附上你的文章、Markdown 文件或图片素材：
Create an 8-slide Swiss-style deck from this article, with 3 generated visuals matched to the template image slots.
Turn this product analysis document into an editorial magazine-style deck with a strong narrative rhythm.
From this deck's core idea, create two covers: a 21:9 main cover and a visually paired 1:1 share card.
Redesign these product screenshots into consistent 16:10 slide visuals. Preserve key UI information; do not add slide titles or footers inside the images.
目录结构
guizang-ppt-skill/
├── SKILL.md ← 主技能文件：工作流、原则、常见错误
├── README.md ← 中文版 README
├── README.en.md ← 本文件
├── assets/
│ ├── template.html ← Style A 编辑杂志模板
│ ├── template-swiss.html ← Style B 瑞士模板
│ └── screenshot-backgrounds/ ← 内置 WebP 截图背景：5 种 style-a / 4 种 style-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 中挑选。不允许自定义十六进制颜色值——保护美学效果比自由选择更重要。
Style A 编辑杂志主题
| 预览 | 主题 | 核心颜色及最佳适用场景 |
|---|---|---|
| 🖋 Ink Classic | #0a0a0b / #f1efea。通用默认，商业发布，不确定时选它。 |
|
| 🌊 Indigo Porcelain | #0a1f3d / #f1f3f5。科技、研究、AI、技术主题演讲。 |
|
| 🌿 Forest Ink | #1a2e1f / #f5f1e8。自然、可持续发展、文化、非虚构。 |
|
| 🍂 Kraft Paper | #2a1e13 / #eedfc7。怀旧、人文、文学、独立杂志。 |
|
| 🌙 Dune | #1f1a14 / #f0e6d2。艺术、设计、创意、时尚、画廊风格幻灯片。 |
切换主题只需替换 template.html 的 :root{} 块顶部的 6 个变量——所有其他 CSS 通过 var(--...) 流动。
Style B 瑞士主题
从 references/themes-swiss.md 中挑选。此处同样不允许自定义十六进制颜色值。
| 预览 | 主题 | 锚点色及最佳适用场景 |
|---|---|---|
| 🔵 International Klein Blue | #002FA7。通用默认，商业发布，AI 产品，框架展示。 |
|
| 🟡 Lemon Yellow | #FFD500。青年、运动、零售、消费品、Y2K 复古。 |
|
| 🟢 Lemon Green | #C5E803。生态、可持续发展、健康、Z 世代品牌。 |
|
| 🟠 Safety Orange | #FF6B35。警报、新闻、工业话题、运动、充满活力的主题。 |
如果用户要求瑞士风格幻灯片但未指定颜色，默认使用 International Klein Blue。
核心设计原则
- 克制胜过炫目——WebGL 背景仅在主视觉页渗透展示
- 结构胜过装饰——信息层级通过字号 + 字体 + 网格留白实现，而非阴影或浮动卡片
- 图片是头等公民——与正文内容区域对齐，保持比例稳定，仅从底部裁剪，保留顶部和两侧
- 生成的视觉素材是素材——只保留核心照片 / 图表 / UI；不要在图片内渲染幻灯片标题、页脚或角标
- 节奏靠主视觉页实现——主视觉 / 非主视觉交替防止视觉疲劳
- 动态效果必须可关闭——
B键切换静态模式，确保动画不会成为阅读负担 - 术语保持一致——Skills 就是 Skills；不混用翻译
- 瑞士版式保持锁定——Style B 应恢复并重用原始的 22 页版式系统，而非发明不相关的页面
视觉参考
- 《Monocle》杂志版式
- YC Garry Tan——"Thin Harness, Fat Skills"
- Massimo Vignelli / Helvetica Forever / 瑞士国际主义排版风格
- Guizang 的线下演讲幻灯片系列
路线图
- 增加更多真实案例和可打开的 HTML 幻灯片演示
- 为更多发布平台扩展封面格式
- 增加更多瑞士版式验证规则
- 改进截图重设计和信息图生成工作流
- 准备面向市场的特定变体，如 WorkBuddy
- 在保持自定义颜色受限的前提下，增加更多精选主题包
常见问题
能导出为 PPTX 吗？ 主要输出格式是 HTML。你可以在浏览器中演示、截图或录制。PPTX 转换可以作为单独的工作流完成，但目前不是核心路径。
为什么不允许自定义颜色？ 该技能的设计目标是稳定的视觉输出。随意使用颜色往往会破坏系统，因此幻灯片必须使用精选预设。
可以添加自己的版式吗？
可以。Style A 版式可在 references/layouts.md 中扩展。Style B 更严格：需要同时更新 template-swiss.html、layouts-swiss.md、swiss-layout-lock.md 和验证器。
必须使用 Codex 生成图片吗？ 不需要。幻灯片在不使用生成图片的情况下也能正常工作。图片流程仅在需要照片、信息图、UI 场景或封面时使用。
如何更新该 skill？
重新运行安装命令，或在本地 skill 目录中运行 git pull。
贡献
Bug、版式问题、新版式需求——欢迎提交 Issue 和 PR。优先级：
- 先在
template.html中添加新 class；不要让layouts.md引用未定义的 class - 修改
template-swiss.html时，同时更新layouts-swiss.md和swiss-layout-lock.md - 添加瑞士规则时，同时更新
scripts/validate-swiss-deck.mjs - 将踩坑记录写入
checklist.md中对应的 P0 / P1 / P2 / P3 等级 - 新增主题颜色请放入
themes.md，并附上推荐使用场景
许可证
AGPL-3.0 © 2026 op7418