> 来源:GitHub 官方仓库 (op7418/guizang-ppt-skill, alchaincyf/huashu-design) > 作者:小凯 > 日期:2026-05-14
---
一句话总结
歸藏的 guizang-ppt-skill 是专精于演讲 PPT 的垂直工具——用两套严格锁定的视觉系统(电子杂志风 + 瑞士国际主义)产出单文件 HTML 横向翻页 deck;花叔的 huashu-design 是全能型设计 agent——覆盖 PPT、App 原型、动画视频、信息图四大品类,内置 20 种设计哲学和 5 维评审体系。一个做深,一个做广;一个像杂志编辑,一个像设计工作室。
---
一、歸藏:电子杂志 × 瑞士国际主义
1.1 项目定位
歸藏的 skill 从"一人公司"线下分享中沉淀而来,核心假设是:演讲 PPT 不是信息容器,是情绪载体。 它拒绝"商务 PPT"的默认审美,追求 *Monocle* 杂志贴上代码后的样子。
关键数据:
- GitHub Stars:8.3k
- 协议:MIT
- 输出:单文件 HTML(横向翻页)
- 触发关键词:"杂志风 PPT"、"horizontal swipe deck"、"electronic ink"
1.2 双视觉系统
| 维度 | Style A:电子杂志 × 电子墨水 | Style B:瑞士国际主义 |
|---|---|---|
| 美学来源 | *Monocle* 杂志、电子墨水屏 | Massimo Vignelli、Helvetica Forever |
| 布局数量 | 10 种(封面、幕封、数据大字报、图文等) | 22 种锁定版式(S01-S22) |
| 主题色 | 5 套预设(墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘) | 4 套锚点色(克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙) |
| 自定义 | ❌ 不允许自定义 hex | ❌ 不允许自定义 hex |
| 网格 | 相对自由 | 16 列 grid、1px 发丝线、无阴影/渐变/圆角 |
| 字号 | 中文大标题 ≤5 字 + nowrap | 全中文大标题需降一档 |
| 动效 | WebGL 流体/等高线/色散背景 + Motion One 翻页 | 静态为主,严格版式 |
| 校验 | checklist.md 人工自检 | validate-swiss-deck.mjs 脚本自动拦截 |
两套系统都拒绝用户自定义颜色——因为"颜色搭配错了画面瞬间变丑"。这是典型的专家系统思路:设计者(歸藏)把审美判断固化成不可变规则,Agent 和用户只能在高约束内操作。
1.3 技术实现
单文件 HTML 架构:
- CSS、WebGL shader、翻页 JS、字体/图标 CDN 全内置
- 断网时
motion.min.js本地兜底(约 64KB) - 按
B键切换低性能静态模式(WebGL 退场)
- 键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 / ESC 索引
- Motion One 驱动 5 种入场动效 recipe,自动匹配布局
- 主题色平滑插值(翻到 hero 页时 shader 柔顺过渡)
- 衬线标题:Noto Serif SC + Playfair Display
- 非衬线正文:Noto Sans SC + Inter
- 等宽元数据:IBM Plex Mono
- 图标:Lucide(不用 emoji)
1.4 工作流
6 步结构化流程:
1. 需求澄清:6 问清单(受众、时长、素材、图片、主题色、硬约束)
2. 拷贝模板:template.html 或 template-swiss.html
3. 预检类名:必须在 template.html 的 里有定义——这是"所有生成问题的源头"
4. 填充内容:从 layouts.md 挑骨架,粘、改文案
5. 配图(Codex 可选):GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图
6. 自检:checklist.md P0 级问题必须全过;瑞士风运行版式校验器
叙事弧模板:
钩子(Hook) → 1 页 : 抛反差/问题/硬数据
定调(Context) → 1-2 页 : 背景/你是谁/为什么讲这个
主体(Core) → 3-5 页 : 核心内容,Layout 穿插
转折(Shift) → 1 页 : 打破预期/提出新观点
收束(Takeaway) → 1-2 页 : 金句/悬念问题/行动建议
1.5 封面生成能力
基于同一套视觉规则生成多平台封面:
- 公众号头图:21:9
- 公众号分享卡:1:1
- 小红书封面/轮播:3:4
- 视频号横版:16:9
二、花叔:Huashu Design
2.1 项目定位
花叔的 skill 起源于一个观察:Claude Design 很好,但用户不想打开任何图形 UI。 他把 Anthropic 的 Claude Design 系统 prompt 解构后,蒸馏成可在 Claude Code / Cursor / Codex / OpenClaw 等 agent 环境中运行的 skill。
关键数据:
- GitHub Stars:13.5K
- Forks:1.9K
- 协议:个人免费,企业需授权(USD 1,800/年 或 USD 3,500 一次性)
- 输出:HTML / MP4 / GIF / 可编辑 PPTX / PDF / PNG / SVG
2.2 五大交付品类
| 品类 | 交付物 | 典型时间 | 技术亮点 |
|---|---|---|---|
| 交互原型 | 单文件 HTML · 真机边框 · 可点击 · Playwright 验证 | 10-15 min | iPhone 15 Pro 像素级边框(Dynamic Island / Home Indicator) |
| 幻灯片 | HTML deck + 可编辑 PPTX(文本框保留) | 15-25 min | html2pptx.js 读取 DOM computed styles 转真实 PowerPoint 对象 |
| 动效设计 | MP4 (25fps/60fps) + GIF + BGM | 8-12 min | Stage + Sprite 时间切片模型 |
| 设计变体 | 3+ 并列方案 · 实时参数切换 | 10 min | 颜色/排版/信息密度参数化 |
| 信息图 | 印刷级排版 · PDF/PNG/SVG 导出 | 10 min | CSS Grid + text-wrap: pretty |
2.3 20 种设计哲学
花叔内置了 5 大学派 × 20 种设计哲学,作为"vague brief"时的 fallback:
5 大学派: 1. 瑞士国际主义(Swiss International Style) 2. 包豪斯功能主义(Bauhaus Functionalism) 3. 日本极简主义(Japanese Minimalism) 4. 粗野主义(Brutalism) 5. 新丑风(New Ugly / Anti-Design)
当用户需求模糊时,skill 会从这 20 个哲学中推荐 3 个差异化方向,并行生成 demo,让用户选择后再进入主流程。
2.4 核心机制
#### 2.4.1 Core Asset Protocol(品牌资产协议)
这是 skill 中最难的规则,直接继承自 Claude Design 的系统 prompt:
| 步骤 | 动作 | 目的 |
|---|---|---|
| 1 · Ask | 检查 6 类资产:logo / 产品图 / UI 截图 / 色板 / 字体 / 品牌指南 | 尊重现有资源 |
| 2 · Search | 搜索官方渠道:brand.com/brand / press / product pages | 找权威资产 |
| 3 · Download | Logo (SVG→inline) · 产品图 (press kit→视频帧→AI生成) · UI (App Store 截图→官方视频帧) | 每条资产 3 条 fallback 路径 |
| 4 · Verify | 检查 logo 保真度 · 分辨率 · UI 新鲜度 · grep 真实色值 | 绝不从记忆猜 |
| 5 · Freeze | 写入 brand-spec.md | 未固化的知识会蒸发 |
#### 2.4.2 Junior Designer Workflow
拒绝"英雄式的一稿过": 1. 先写 assumptions + placeholders + reasoning 注释进 HTML 2. 尽早展示给用户(即使是灰色方块) 3. 填充真实内容 → 变体 → Tweaks,每步都展示 4. 交付前用 Playwright 人工检查浏览器
原则 #0:Fact Verification First 提到具体产品/技术/事件时,第一步必须是 WebSearch 确认存在性、发布状态、当前版本、规格。搜索成本 ~10 秒;错误假设的返工成本 1-2 小时。
#### 2.4.3 5-Dimension Expert Critique
自动评审维度: 1. Philosophical coherence(哲学一致性) 2. Visual hierarchy(视觉层级) 3. Execution craft(执行工艺) 4. Functionality(功能性) 5. Innovation(创新性)
每维 0-10 分,雷达图可视化,输出 Keep / Fix / Quick Wins 清单。
2.5 动画引擎
Stage + Sprite 时间切片模型:
useTime/useSprite/interpolate/Easing—— 四个 API 覆盖所有动画需求- 一命令导出 MP4 / GIF / 60fps 插帧 / BGM 配乐版
- 6 首场景专属 BGM 内置
2.6 Anti AI-Slop 规则
明确禁止 AI 输出的视觉"公约数":
- ❌ 蓝紫渐变
- ❌ emoji 图标
- ❌ 圆角 + 左边框强调线
- ❌ SVG 人类剪影
- ❌ Inter 作为 display 字体
- ❌ CSS 剪影替代真实产品图
- ✅
text-wrap: pretty - ✅ CSS Grid
- ✅ 精心选择的 serif display faces
- ✅ oklch 颜色
三、深度对比
3.1 定位差异
| 维度 | 歸藏 guizang-ppt-skill | 花叔 huashu-design |
|---|---|---|
| 核心目标 | 演讲 PPT(情绪载体) | 全品类设计交付 |
| 深度 vs 广度 | 极深(只做 PPT,做透) | 极广(PPT + 原型 + 动画 + 信息图) |
| 美学哲学 | 两套锁定系统(杂志/瑞士) | 20 种开放哲学,按需选择 |
| 约束强度 | 极强(不允许自定义 hex、必须选 S01-S22) | 中等(有原则,但留空间) |
| 输出格式 | 单文件 HTML | HTML / MP4 / GIF / PPTX / PDF / PNG / SVG |
| 交互性 | 横向翻页(键盘/滚轮/触屏) | 原型可点击、动画可播放 |
| 品牌资产 | 无特定协议 | Core Asset Protocol(5 步硬流程) |
3.2 技术架构对比
| 维度 | 歸藏 | 花叔 |
|---|---|---|
| 前端技术 | 原生 HTML + CSS + WebGL shader + Motion One | HTML + CSS + Stage/Sprite 动画模型 |
| 离线能力 | ✅ motion.min.js 本地兜底 | ❌ 依赖外部服务(视频导出等) |
| PPTX 导出 | ❌ 不支持 | ✅ html2pptx.js(保留文本框) |
| MP4 导出 | ❌ 不支持 | ✅ render-video.js |
| 校验工具 | ✅ Swiss 版式校验器 | ❌ 无自动校验 |
| 多平台封面 | ✅ 公众号/小红书/视频号 | ❌ 未提及 |
| 配图生成 | ✅ GPT-Image 2.0 / GPT-M 2.0 | ❌ 未提及(聚焦设计本身) |
3.3 用户体验对比
歸藏的优势场景:
- 需要"一次做完,不用翻页工具"的网页版 slides
- 线下分享 / demo day / 私享会(需要情绪张力)
- 强个人风格表达(杂志风叙事)
- 需要瑞士国际主义的严肃产品发布
- 需要可点击原型的产品演示
- 需要动画视频的产品发布
- 需要印刷级信息图的数据报告
- 需要多方案对比的设计探索
- 有品牌资产需要严格遵循的企业场景
3.4 设计哲学冲突
歸藏:约束即自由
> "颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。"
歸藏的设计哲学是专家系统——把审美判断固化成不可变规则。用户和 Agent 的选择空间被压缩到最小(5 套主题、22 种版式),但产出质量的下限被锁得很高。
花叔:上下文即设计
> "Great hi-fi design doesn't start from a blank page, it grows from existing design context."
花叔的设计哲学是上下文工程——通过 Core Asset Protocol 获取真实品牌上下文,在此基础上生长设计。约束存在(Anti AI-Slop 规则),但空间更大(20 种哲学可选)。
冲突点:
- 歸藏拒绝自定义 → 适合"没有品牌包袱的个人表达"
- 花叔强制品牌资产 → 适合"有品牌规范的企业场景"
四、反炒作审计
4.1 歸藏的局限
1. 静态 HTML 的协作困境:不支持多人协作编辑,"需要改一个字"就得重新生成整个文件 2. 信息密度天花板:明确承认"不适合大段表格数据、培训课件"——这是杂志风的基因缺陷,不是 bug 3. 瑞士风的机械化风险:22 种锁定版式在长期使用中可能产生"模板疲劳",所有瑞士风 deck 看起来都像同一套系统 4. 配图依赖外部服务:Codex 配图流程依赖 GPT-Image 2.0 / GPT-M 2.0,成本不可控
4.2 花叔的局限
1. 80 分 skill,不是 100 分产品:花叔自己承认"For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product"——这是定位声明,也是质量上限 2. PPTX 不可反向编辑:HTML → PPTX 是单向转换,不能拖回 Keynote 做文本位置微调 3. 复杂动画超出范围:3D、物理模拟、粒子系统不支持 4. 品牌从零设计质量骤降:"Brand-from-zero design quality drops to 60-65 points"——没有品牌资产时,产出会跌出"可用"区间 5. 商业授权门槛:企业使用需 USD 1,800/年,对初创团队不友好
4.3 共同问题
1. Agent 依赖:两者都假设用户有 Claude Code / Cursor / Codex 环境。没有 agent 上下文,skill 无法运行 2. 学习曲线:歸藏的"类名预检"和花叔的"Core Asset Protocol"都增加了认知负担——对"只想快速出图"的用户来说是过度设计 3. 中文排版特殊性:两者都处理了中文字号收敛、衬线字体选择等问题,但"中文大标题 ≤5 字"这种约束在英文场景完全不适用——skill 的跨语言迁移成本被低估
---
五、适用场景判断
5.1 选歸藏,当...
- 你需要演讲 PPT,不是产品原型或信息图
- 受众是行业内部 / 私享会 / demo day,不是客户提案
- 你追求强烈的个人风格(杂志叙事或瑞士极简)
- 你没有品牌资产需要遵循,或品牌本身就是"个人 IP"
- 你需要网页版 slides(横向翻页,不需要 PPTX)
- 你需要多平台封面(公众号 / 小红书 / 视频号)
5.2 选花叔,当...
- 你需要不止 PPT——还要原型、动画、信息图
- 你有品牌资产需要严格遵循(logo、色板、字体)
- 你需要可点击原型做产品演示
- 你需要动画视频(MP4 + BGM)做产品发布
- 你需要可编辑 PPTX(保留文本框,给客户二次修改)
- 你需要设计变体对比(3+ 方向并行探索)
- 你有企业预算支付商业授权
5.3 都不选,当...
- 你需要多人协作编辑(两人实时改同一页)→ 用 Google Slides / Figma
- 你需要复杂数据图表(Tableau 级交互)→ 用 Observable / Flourish
- 你需要正式商务模板(投资人要求的"标准格式")→ 用 Slidebean / Pitch
- 你需要零学习成本"打字就出图" → 用 Gamma / Tome
六、关键洞察
6.1 Skill 的本质是什么?
这两个项目揭示了一个趋势:AI 时代的"设计工具"正在从 GUI 向 Conversation 迁移。
- 歸藏和花叔都不需要打开 Figma / Keynote / After Effects
- 用户"说一句话",agent 在 3-30 分钟内交付成品
- Skill 是结构化 prompt + 资产模板 + 质量校验的封装体
6.2 为什么 PPT Skill 如此重要?
因为 PPT 是知识工作者的通用接口:
- 产品经理用它讲需求
- 工程师用它做技术分享
- 投资人用它做决策
- 创始人用它讲故事
6.3 未来的 Skill 会往哪走?
从这两个项目可以推断:
1. 更深的专业化:歸藏的"瑞士风锁定版式"预示未来会有更多"垂直风格 skill"(法律 deck、医学 deck、教育 deck) 2. 更广的跨媒介:花叔的"HTML-native"思路预示 skill 会覆盖更多输出格式(3D、AR、语音) 3. 更严的质量控制:歸藏的版式校验器和花叔的 5 维评审预示"AI 产出不是终点,自动评审才是闭环" 4. 更重的资产协议:花叔的 Core Asset Protocol 预示品牌一致性将成为 skill 的标配,不是可选功能
---
七、参考来源
1. 歸藏 PPT Skill GitHub 仓库:https://github.com/op7418/guizang-ppt-skill 2. 花叔 Huashu Design GitHub 仓库:https://github.com/alchaincyf/huashu-design 3. Claude Design 官方文档(花叔 skill 的灵感来源) 4. 歸藏线下分享 "一人公司:被 AI 折叠的组织"(2026-04-22) 5. YC Garry Tan "Thin Harness, Fat Skills" 博客
#PPT #AI设计 #ClaudeCode #Skills #开源 #小凯