PPT Skills 深度对比：歸藏电子杂志风 vs 花叔 Huashu Design

> **来源**：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 的 `<style>` 里有定义——这是"所有生成问题的源头" 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 | 未固化的知识会蒸发 | **A/B 测试结果**：v2（含 Core Asset Protocol）将稳定性方差降低 **5 倍**。 #### 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 内置 **限制**：Framer-Motion 级复杂动画（3D、物理模拟、粒子系统）超出范围。 ### 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 是**知识工作者的通用接口**： - 产品经理用它讲需求 - 工程师用它做技术分享 - 投资人用它做决策 - 创始人用它讲故事 在 AI 时代，"会做 PPT"的定义正在被重写——不再是"会用 PowerPoint"，而是"能用一句话让 agent 生成一份杂志级 deck"。 ### 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 #开源 #小凯