8900 Star 的 PPT Skill：一个设计师用 AI Agent 把整个设计公司折叠进了一个 Skill

如果你做 PPT 的方式还是打开 PowerPoint 或者 Keynote，选模板、调字号、对齐、换颜色、再对齐——那你可能需要看看一个叫歸藏的设计师做了什么。

他写了一个 AI Agent Skill，叫 guizang-ppt-skill，三个月不到拿了 8900+ Star，真格基金投了钱。核心思路很直接：不给自由，只给约束，让 AI 在锁死的设计规则里生成演示文稿，输出是一个浏览器能直接打开的 HTML 文件。

没有任何服务端，没有任何构建工具，没有 Figma，没有 PowerPoint。

它到底是什么

guizang-ppt-skill 是一个 Claude Code / Codex / Cursor 的 Skill 文件。安装之后，你告诉 AI "帮我做一份关于 XXX 的 20 页演示文稿"，AI 就会按照 Skill 里写死的设计规则，生成一个 单文件 HTML——横向翻页、键盘/滚轮/触摸均可操作，自带动画，自带低功耗模式（按 B 键关掉 WebGL 节省电量）。

截至目前（2026 年 5 月），项目提供两套完全独立的设计系统：

Style A：编辑杂志风 × 电子墨水感

• • 灵感来源是《Monocle》杂志
• • 衬线标题（Noto Serif SC + Playfair Display）
• • 封面页带 WebGL 流体/等高线动态背景
• • 暖色调纸张质感，5 套配色方案
• • 10 种布局

Style B：瑞士国际主义排版风格

• • 灵感来源是 Massimo Vignelli 和 Josef Müller-Brockmann
• • 严格的 22 种锁定布局（S01-S22），不能自创
• • 16 列网格系统
• • 单一锚点色，极致字号对比（200 字重 vs 700 字重）
• • 没有阴影、没有渐变、没有圆角
• • 自带 Node.js 验证脚本，检查布局是否符合规则

两套系统的共同特征：输出的 HTML 文件可以直接在浏览器里打开演示，也可以发给别人，不需要任何环境。

解决了什么问题

传统 AI 生成 PPT 的痛点其实很明确：

1. 1. AI 生出来的 PPT 好用但丑 —— Gamma、Beautiful.ai 这些工具能快速生成内容，但设计质量一言难尽
2. 2. 设计师做的 PPT 好看但慢 —— 一份像样的演示文稿，设计师可能需要一天甚至更久
3. 3. 两者之间有巨大的鸿沟 —— 你很难告诉 AI "我要的是 Monocle 杂志那种感觉，不是科技蓝渐变"

歸藏的方案是：绕过 PPT 格式，直接用 HTML + CSS 生成演示文稿。这样设计自由度远超 PowerPoint 的限制，同时通过 Skill 里的详细规则约束 AI 的输出，确保设计质量。

本质上，他把"一个资深设计师的专业判断"编码成了一个 32KB 的 SKILL.md 文件。

怎么运行的

整个流程只有六步，全部由 AI Agent 执行：

关键点在于 Step 4 的"主题节奏规划"。Skill 要求 AI 在动笔之前先规划整份演示文稿的节奏——哪些页面用满图布局、哪些用文字主导、哪些用数据可视化。这避免了 AI 常见的"每页都差不多"的问题。

还有 Step 6 的双重审查：先让 AI 从视觉角度检查一遍（字体、间距、配色、图片比例），再从代码角度检查一遍（CSS class 名是否正确、Canvas 堆叠是否会导致性能问题）。Skill 里甚至有一个 P0/P1/P2/P3 四级检查清单，把所有踩过的坑都固化成了规则。

和同类方案的本质区别

目前市面上的 AI 演示文稿工具，大致分三类：

guizang-ppt-skill 的独特之处在于：它不给用户自由，因为自由是设计质量的最大敌人。

瑞士风格甚至有 22 种"锁定布局"，只能从中选择，不能自己发明新布局。颜色也不能自定义，只有 4 套预设——因为作者认为"保护美学比给自由更重要"。

这个理念看起来反直觉，但实际上很有道理。AI 目前最大的问题不是能力不够，而是 给出的自由越多，输出质量越不可控。锁死规则反而能保证底线。

那些细节：一个 Skill 里到底写了什么

项目的 SKILL.md 有 32KB，这几乎是整份文档的核心。里面定义了：

• • CSS class 命名规范：.slide-hero, .slide-stat, .slide-quote 等，AI 生成的 HTML 必须严格使用这些 class
• • 字号梯度规则：标题、副标题、正文、脚注各用多大字号，不能随意改
• • 图片比例要求：封面图必须 16:9，数据页配图建议 3:4，社交媒体封面有专门的比例规则
• • 动画配方：5 种 Motion One 动画配方（cascade, hero, quote, directional, pipeline），每种对应特定的页面类型
• • WebGL 背景规则：封面页的流体效果有特定的 Canvas 层叠顺序，违反会导致闪烁
• • 低功耗模式：按 B 键禁用所有 WebGL/Canvas 动画，保留纯 CSS 过渡

瑞士风格还有一个专门的验证脚本 validate-swiss-deck.mjs，用 Node.js 跑一遍就能检查输出是否符合规则——布局是否在注册列表中、图片槽位是否被正确填充、有没有违规的居中标题。

这个验证脚本本质上就是一个 自动化 QA，让 AI 的输出可以被机器检查，而不只是靠人眼看。

适用场景

适合用它的：

• • 产品发布演示——需要高设计质感，但不想花一天做 PPT
• • 创业融资 Deck——编辑杂志风非常适合讲品牌故事
• • 技术分享——瑞士风格的代码/数据展示很清晰
• • 个人作品集——输出是 HTML，可以直接放到个人网站上
• • 社交媒体物料——Skill 自带微信公众号 21:9、小红书 3:4 等比例适配

不太适合的：

• • 需要大量复杂动画和转场效果的演示——这是静态 HTML 的硬限制
• • 需要多人实时协作编辑的场景——这是单文件方案的天然短板
• • 高度定制化的企业模板需求——设计规则被锁死了，改不动
• • 需要 .pptx 格式交付——输出是 HTML，不是 PowerPoint

使用方式

安装非常简单，三步：

# 1. 克隆仓库
git clone https://github.com/op7418/guizang-ppt-skill.git

# 2. 把 SKILL.md 放到你的 Agent 目录
# Claude Code:
cp SKILL.md ~/.claude/commands/
# Cursor:
# 在项目根目录创建 .cursor/rules/ 目录，把 SKILL.md 放进去

# 3. 在对话中告诉 Agent 你的需求
# "帮我做一份 20 页的融资 Deck，主题是 AI 设计工具"

然后就是自然语言对话。Agent 会自己完成内容规划、设计系统选择、配色方案、逐页生成和审查。

输出是一个 .html 文件，浏览器打开就是完整的演示文稿。

一点个人看法

这个项目最让我有触动的不是技术实现——HTML + CSS 做演示文稿并不新鲜，Marp 和 Slidev 早就这么干了。

真正有意思的是它的 设计哲学：用限制换质量。

大多数 AI 工具的思路是给用户更多选择——选模板、选配色、选布局。歸藏反其道行之，直接把设计规则锁死，只留内容层面的自由度。这个思路其实暗合了专业设计师的工作方式：好的设计从来不是"想怎么来就怎么来"，而是在严格的约束里做出最优解。

8900 Star 说明市场认可了这个方向。但项目的局限也很明显——它本质上是一个人的审美判断的编码，如果你不认同歸藏的设计偏好（杂志风和瑞士风），那这套 Skill 对你价值不大。

不过作为一个开源项目，它至少证明了一件事：AI Agent 的 Skill 不只是"怎么用工具"的操作手册，它可以是一种设计语言的完整编码。 这可能是 AI 设计工具最有想象力的方向。

项目地址：https://github.com/op7418/guizang-ppt-skill
协议：MIT
作者：歸藏 / op7418