ppt-agent-skill
🎨 World-class AI presentation generator · 26 styles · 18 charts · benchmarked against Linear/Anthropic/Stripe/Apple/NYT — a Claude Code Skill that turns one sentence into design-agency-quality decks (HTML + editable PPTX)
Install / Use
npx skills add Akxan/ppt-agent-skillInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
Project & Program ManagementSupported Platforms
Skill content
View source on GitHub<div align="center"> <img src="assets/hero-all.png" alt="26 风格预览" width="100%" /> <p><sub>26 个世界级风格 · 5 板块覆盖所有商业场景 · 真实 1280×720 标杆 mock</sub></p> </div>
💡 这是什么？
一个 Claude Code Skill，模拟万元/页 PPT 设计公司的完整工作流，把一句话变成专业级演示文稿（HTML + 可编辑矢量 PPTX）。
不是"给个大纲套模板"，而是先调研后生成 / 内容驱动版式 / 全局风格一致 / 真实数据填充的完整管线。
每个风格的视觉水准对标实际世界级品牌的官网/产品页排版做法（不是参考截图，是参考实际 CSS 实现）：字距铁律 / tabular-nums / OpenType 特性 / serif italic 混排 / 字体栈三层降级。
🎨 核心特性
| 特性 | 说明 |
|------|------|
| 6 步 Pipeline | 需求调研 → 资料搜集 → 大纲策划 → 策划稿 → HTML 设计稿 → 后处理（SVG + PPTX）|
| 26 种世界级风格 | 5 板块覆盖：暗色专业 7 / 浅色高级 8 / 活力鲜明 4 / 东方文化 3 / 自然复古 4 |
| 18 种数据可视化 | 基础 8 + 进阶 6（雷达/时间线/漏斗/仪表盘）+ ECharts 级 4（世界地图/关系网络/桑基/热力日历）|
| Bento Grid 布局 | 7 种卡片式灵活布局，内容驱动版式 |
| 世界级排版 | 7 级字号阶梯 · 字距铁律 · tabular-nums · OpenType 特性 · serif italic 混排 · 字体栈三层降级 |
| 智能配图 | AI 生成配图 + 5 种视觉融入技法（渐隐融合/色调蒙版/氛围底图等）|
| 失败模式目录 | 8 种 failure modes（underfill / decorative_substitution 等）+ 修复顺序铁律 |
| 跨页叙事 | 密度交替节奏 / 章节色彩递进 / 封面-结尾呼应 / 渐进揭示 |
| 风格预览画廊 | gallery.py 一键生成 26 风格卡片墙索引页 |
| Smoke 测试 | smoke_test.py 校验风格 JSON / pipeline 兼容 / 排版铁律 / 端到端管线 |
| PPTX 兼容 | HTML → SVG → PPTX 管线，PPT 365 中右键"转换为形状"全部可编辑 |
🚀 快速开始
作为 Claude Code Skill 调用（推荐）：
你：帮我做一个关于 X 的 PPT
↓
Agent 提问调研需求（等你回复 7 题）
↓
自动搜索资料 → 生成大纲 → 策划稿 → 逐页设计 HTML
↓
自动后处理：HTML → SVG → PPTX
↓
全部产物保存到 ppt-output/
触发示例：
| 场景 | 说法 |
|------|------|
| 纯主题 | 做一个关于 X 的 PPT / 做一个 Y 的演示 |
| 带素材 | 把这篇文档做成 PPT / 用这份报告做 slides |
| 带要求 | 做 15 页暗黑科技风的 AI 安全汇报材料 |
| 隐式触发 | 我要给老板汇报 Y / 做个培训课件 / 做路演 deck |
环境依赖：
# Python 依赖
pip install python-pptx lxml Pillow
# Node.js >= 18，puppeteer 在首次 html2svg.py 运行时自动安装
🎨 26 风格预览画廊
5 个板块，覆盖所有典型商业场景。每个 mock 都是真实 1280×720 设计稿：
暗色专业（7 风格 · references/styles/dark.md）
<div align="center">
<img src="assets/hero-dark-professional.png" alt="暗色专业 7 风格" width="100%" />
</div>
Linear / Apple Hardware / Tom Ford / Cyberpunk 2077 / Y2K / Magnum 等品牌的实际排版做法
| ID | 灵感 | 适用场景 |
|----|------|---------|
| dark_tech | Linear.app | AI / SaaS / 开发者工具 |
| xiaomi_orange | Apple Keynote 硬件版 | 硬件 / IoT / 汽车发布 |
| luxury_purple | Tom Ford | 奢侈品 / 高端品牌 |
| nocturne_violet | Linear 紫光版 | 设计师 SaaS / 创业产品 |
| cyberpunk_neon | Cyberpunk 2077 | 电竞 / 游戏 / Web3 |
| chrome_y2k | Y2K / Vaporwave | Web3 / 千禧年复古 |
| noir_film | Magnum / 黑白纪录片 | 纪录片 / 影像艺术 / 摄影 |
浅色高级（8 风格 · references/styles/light.md）
<div align="center">
<img src="assets/hero-light-premium.png" alt="浅色高级 8 风格" width="100%" />
</div>
Apple / Anthropic / NYT Magazine / iOS 26 / Mayo Clinic / Suisse Int'l / 婚礼请柬
| ID | 灵感 | 适用场景 |
|----|------|---------|
| blue_white | Apple 企业页面 | 企业 SaaS / 培训 / 金融医疗 |
| fresh_green | Aesop | 护肤 / 养生 / 食品 / 美妆 |
| minimal_gray | NYT Magazine | 学术 / 法务 / 咨询 / 白皮书 |
| mocha_editorial | Anthropic / Pantone 2025 | AI 安全研究 / 出版 |
| medical_pulse | Mayo Clinic | 医疗 / 医药 / 健康保险 |
| earth_concrete | Suisse Int'l | 建筑 / 工业 / 咖啡品牌 |
| champagne_gold | 婚礼请柬 | 婚庆 / 宴会 / 颁奖典礼 |
| liquid_glass | iOS 26 / visionOS | XR / AR / 苹果生态发布 |
活力鲜明（4 风格 · references/styles/vibrant.md）
<div align="center">
<img src="assets/hero-vibrant.png" alt="活力鲜明 4 风格" width="100%" />
</div>
| ID | 灵感 | 适用场景 |
|----|------|---------|
| vibrant_rainbow | Stripe Sessions | 营销 / 创作者 / 大会 |
| kindergarten_pop | 高质量儿童绘本 | 儿童教育 / 启蒙 / 亲子 |
| bauhaus_block | Bauhaus / Swiss Design | 教育 / 创意品牌 / 独立设计 |
| candy_pastel | Ladurée 糖果店 | 甜品 / 烘焙 / 零食 |
东方文化（3 风格 · references/styles/cultural.md）
<div align="center">
<img src="assets/hero-cultural-oriental.png" alt="东方文化 3 风格" width="80%" />
</div>
| ID | 灵感 | 适用场景 |
|----|------|---------|
| royal_red | 北京冬奥开幕式 | 中国风 / 政务 / 文化 |
| sakura_wabi | 日本侘寂 | 日系 / 茶道 / 民宿 |
| ink_jade | 新中式国潮 | 茶饮 / 古风文创 / 独立书店 |
自然/复古（4 风格 · references/styles/natural.md）
<div align="center">
<img src="assets/hero-natural-retro.png" alt="自然/复古 4 风格" width="100%" />
</div>
| ID | 灵感 | 适用场景 |
|----|------|---------|
| botanic_forest | Patagonia / Nat Geo | 户外 / 可持续 / 林产 |
| safari_savanna | National Geographic | 旅行 / 探险 / 纪录片 |
| retro_70s | Wes Anderson / 70s 海报 | 独立咖啡 / 唱片 / 复古 |
| gov_authority | 人民日报 / 国宴 | 党政 / 重大会议 / 严肃汇报 |
📈 18 种数据可视化
| 层级 | 数量 | 图表 | 文件 |
|------|------|------|------|
| 基础 | 8 | 进度条 · 对比柱 · 环形图 · 迷你折线 · 点阵图 · KPI 卡 · 指标行 · 评分 | charts/basic.md |
| 进阶 | 6 | 雷达图 · 时间线 · 漏斗图 · 仪表盘 · 多组对比柱 · 简单地理 | charts/advanced.md |
| ECharts 级 | 4 | 世界地图 choropleth · 关系网络 · 桑基图 · 热力日历 | charts/complex.md |
全部纯 HTML/CSS/SVG 实现，无 JS 运行时（保证 svg2pptx 管线兼容）。所有图表自动适配 26 风格的 CSS 变量。
🔧 工作流
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Step 1 │ │ Step 2 │ │ Step 3 │ │ Step 4 │ │ Step 5 │ │ Step 6 │
│ 需求调研 │→ │ 资料搜集 │→ │ 大纲策划 │→ │ 策划稿 │→ │ 风格+设计稿 │→ │ 后处理 │
│ │ │ │ │ │ │ │ │ │ │ │
│ 7 题三层 │ │ 3-15 查询 │ │ 金字塔原理 │ │ Bento Grid │ │ 26 风格选 1 │ │ HTML→SVG │
│ 递进访谈 │ │ 自适应 │ │ + 自检 │ │ 策划卡 │ │ + 智能配图 │ │ →PPTX │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
STOP 等回复 建议等确认 按 Part 分批 自动执行
详细流程见 SKILL.md。
🏗 系统架构
<div align="center"> <img src="assets/architecture.png" alt="系统架构图" width="100%" /> <p><sub>3 层架构：用户入口 / 6 步 Pipeline / 输出产物 · 5 大 Reference Library 注入到各步</sub></p> </div>3 层架构：
- TIER 1 · 入口 — 用户一句话 prompt 触发 SKILL.md（Agent 入口主流程指令）；引用
references/下的所有规则文件 - TIER 2 · 6 步 Pipeline — 每步独立 STEP，前后用 JSON 合同传递；每步可见使用的 reference 文件
- TIER 3 · 输出 — 4 种最终产物：翻页 HTML / 矢量 SVG / 可编辑 PPTX / 风格预览画廊
Reference Library（注入到各步）：
| 模块 | 数量 | 位置 |
|------|------|------|
| 📐 Style Library | 26 风格 | references/styles/ (5 板块) |
| 📊 Chart Library | 18 图表 | references/charts/ (3 层级) |
| 🔤 Typography | 14 铁律 | references/typography.md |
| ⚠ Failure Modes | 8 模式 | references/principles/failure-modes.md |
| 🎨 Bento Grid | 7 布局 | references/bento-grid.md |
📂 文件树
ppt-agent-skill/
├── SKILL.md # 主工作流指令（Agent 入口）
├── README.md / README_EN.md # 本文件 / English
├── assets/ # 视觉资产
│ ├── logo.svg # Logo
│ ├── banner.svg # README 横幅
│ ├── hero-all.png # 26 风格全景拼图
│ └── hero-<category>.png # 5 板块单独拼图
├── references/ # Skill 引用文档
│ ├── prompts.md # 5 套 Prompt 模板（调研/大纲/策划/设计/备注）
│ ├── typography.md # 世界级排版铁律 14 条
│ ├── bento-grid.md # 7 种布局规格 + 卡片类型
│ ├── pipeline-compat.md # HTML→SVG→PPTX 管线兼容规则
│ ├── method.md # 核心方法论
│ ├── style-system.md # 引导文件（兼容旧引用）
│ ├── styles/ # 26 风格按 5 板块分目录
│ │ ├── index.md # 索引 + 决策矩阵 + JSON Schema
│ │ ├── dark.md # 7 暗色专业
│ │ ├── light.md # 8 浅色高级
│ │ ├── vibrant.md # 4 活力鲜明
│ │ ├── cultural.md # 3 东方文化
│ │ └── natural.md # 4 自然/复古
│ ├── charts/ # 18 种图表
│ │ ├── index.md # 决策矩阵
│ │ ├── basic.md # 8 种基础
│ │ ├── advanced.md # 6 种进阶
│ │ └── complex.md # 4 种 ECharts 级
│ └── principles/
│ └── failure-modes.md # 8 种 failure modes + 修复顺序
├── scripts/ # 后处理 + 工具
│ ├── html_packager.py # 多页 HTML → 翻页预览
│ ├── html2svg.py # HTML → SVG（dom-to-svg, 文字可编辑）
│ ├── svg2pptx.py # SVG → PPTX（OOXML 原生）
│ ├── gallery.py # 生成 26 风格预览画廊 + 截图
│ ├── build_hero.py # 生成 README hero 拼图
│ └── smoke_test.py # 端到端测试 + pipeline-compat 扫描
├── ppt-output/
│ └── style-gallery/ # 26 个 1280×720 mock + 26 PNG + index.html
├── docs/superpowers/specs/ # 设计文档归档
└── tests/smoke-results/ # 测试报告归档
🧪 质量保证
# 风格 JSON 校验 + pipeline-compat 扫描 + 排版自检（26 风格）
python3 scripts/smoke_test.py --phase 1
# → 52 pass / 0 fail / 0 warn
# 端到端管线（HTML→SVG→PPTX，3 风格代表性测试）
python3 scripts/smoke_test.py --phase 5
# → 6 pass / 0 fail（preview.html + svg/*.svg + presentation.pptx 三种产物全部生成）
🌟 世界级标杆参照系
排版做法参考的实际品牌（不是看截图模仿，是阅读其官网 CSS）：
| 类别 | 品牌 | 学到了什么 | |------|------|-----------| | 暗色 SaaS | Linear | Inter Tight 紧凑字距 + 紫色辉光 + serif italic 关键词混排 | | AI 编辑器 | [Anthro
Truncated for display — read the full file on GitHub.
Related Skills
guizang-ppt-skill
26.7kAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.
ui-ux-pro-max-skill
129.5kAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
taste-skill
89.0kTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
diagram-design
41.8kEditorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
