花叔 Huashu Design 深度拆解：当 AI 设计 skill 让图形工具这层消失

> **研究对象**：alchaincyf/huashu-design（花叔的画术） > **作者**：花叔（<span class="mention-invalid">@AlchainHust</span>） > **GitHub**：https://github.com/alchaincyf/huashu-design > **安装**：`npx skills add alchaincyf/huashu-design` > **协议**：Personal Use Only > **Agent 兼容**：Claude Code、Cursor、Codex、OpenClaw、Hermes --- ## 一、它到底想解决什么问题 如果你用过 Claude Design、v0.dev 或者任何一个 AI 设计工具，一定经历过这种时刻： 你在浏览器里拖拖拽拽，AI 生成了一个看起来不错的页面。你想微调一个按钮的颜色——好，你得找到那个图层。你想加个交互动画——好，你得切换到另一个面板。最后你想导出成 PPT 给老板看——好，你得再开一个工具。 **图形界面是设计工具的默认形态，但它不是唯一形态。** 花叔的洞察很直接：对于已经活在终端和编辑器里的开发者来说，打开浏览器、加载设计工具、学习它的交互逻辑，本身就是成本。如果设计这件事可以像写代码一样——说句话，等结果——那为什么不呢？ ### 1.1 核心痛点拆解 | 痛点 | 传统设计工具 | huashu-design 的做法 | |------|-------------|---------------------| | 工具切换成本 | 离开编辑器，打开浏览器/设计软件 | 在 Claude Code / Cursor 里直接说话 | | 导出格式受限 | 画布内或 Figma | HTML / MP4 / GIF / PPTX / PDF | | 动画能力天花板 | 简单过渡，复杂动画需 AE | Stage + Sprite 时间轴，60fps 导出 | | 设计方向迷茫 | 从零开始，凭感觉 | 5 流派 × 20 哲学，推荐 3 方向并行 Demo | | 设计质量不稳定 | AI slop，没有评审机制 | 5 维度专家评审 + Anti-slop checklist | | Agent 锁定 | 专属 Claude.ai | 任意 skill 兼容 agent | ### 1.2 一句话定位 huashu-design 不是又一个 AI 设计工具。**它是一个让图形工具层消失的设计 skill**——对不愿意打开 GUI 的人，80 分的对话式 skill 比 100 分的图形产品更好用。 --- ## 二、架构哲学：从 Claude Design 偷师，但走另一条路 ### 2.1 品牌资产协议（Core Asset Protocol） 花叔大方承认：这个协议的哲学是从 Claude Design 的系统提示词里"偷"的。 Claude Design 的那份提示词反复强调一个原则： > **好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来。** 这个原则是 65 分作品和 90 分作品的分水岭。huashu-design 把它内化成了一个**五步协议**： ``` 用户输入需求 ↓ 1. 已有资产扫描（品牌色、字体、logo、过往设计） ↓ 2. 方向选择（5 流派 × 20 哲学 → 推荐 3 个差异化方向） ↓ 3. 并行生成 Demo（3 个方向同时跑，用户选） ↓ 4. 精炼迭代（Tweaks 实时调参，多维度探索） ↓ 5. 导出交付（HTML / PPTX / MP4 / PDF / PNG / SVG） ``` **关键洞察**：设计不是一次性生成，而是**方向探索 → 选择 → 精炼 → 交付**的流水线。 ### 2.2 5 流派 × 20 设计哲学 这是 huashu-design 最让我感兴趣的部分。 设计方向不是随机生成的。花叔建立了一个**设计哲学的坐标系**： | 流派 | 代表哲学 | |------|---------| | **极简主义** | 少即是多、留白叙事、功能决定形式 | | **新粗野主义** | raw 美学、系统暴露、无装饰 | | **赛博朋克** | 霓虹对比、故障艺术、高密度信息 | | **有机自然** | 仿生形态、柔和渐变、自然纹理 | | **古典优雅** | 网格系统、衬线字体、对称平衡 | 每个流派下有 4 种具体哲学，总共 20 种。当用户输入模糊需求时，skill 不会直接开始设计，而是先**从这 20 种里挑出 3 个差异化最大的方向**，并行生成 Demo，让用户选择。 这不是装饰性的分类——它是**设计决策的压缩表示**。一个没有受过设计训练的用户，可能说不出"我想要新粗野主义"，但看到 3 个并排的 Demo 后，他能指出来"这个感觉对"。 ### 2.3 Anti-AI-Slop Checklist 花叔显然对 AI 生成的"设计垃圾"有痛感。skill 内置了一个 checklist，强制审查输出： - 配色是否只是蓝紫渐变？ - 字体搭配是否有层次？ - 信息密度是否过高/过低？ - 动画是否只是无意义的 float-in？ - 交互反馈是否清晰？ 这个 checklist 不是事后加的，而是**嵌入在生成流程中的门控机制**。每一步生成后，skill 会自我审查，不通过就重做。 --- ## 三、核心引擎：Stage + Sprite 时间轴模型 ### 3.1 为什么需要专门的动画引擎？ 大多数 AI 设计工具处理动画的方式是：生成 CSS transition 或 keyframes，然后交给浏览器渲染。 这有问题吗？对于简单过渡（fade、slide）没问题。但对于**叙事性动画**——比如一个产品发布视频，需要精确控制多个元素的入场时机、运动轨迹、缓动曲线——CSS 的表达能力不够。 花叔的解决方案：**Stage + Sprite 时间片段模型**。 ### 3.2 四 API 覆盖所有动画需求 ```javascript // useTime：全局时间控制器 const time = useTime({ duration: 5000, fps: 25 }); // useSprite：创建动画元素 const hero = useSprite({ from: { x: -100, opacity: 0 }, to: { x: 0, opacity: 1 }, easing: Easing.cubicOut, delay: 500 }); // interpolate：数值插值 const y = interpolate(0, 200, time.progress, Easing.spring); // Easing：缓动函数库 // linear, quadIn, quadOut, cubicIn, cubicOut, elastic, spring, bounce... ``` 这四个 API 的组合能力： | 复杂度 | 示例 | API 组合 | |--------|------|---------| | 简单淡入 | 元素从透明到 opaque | useSprite + Easing | | 多元素错开 | 列表项依次滑入 | useTime + useSprite + delay | | 路径动画 | Logo 沿曲线运动 | useSprite + interpolate | | 物理效果 | 弹性碰撞、弹簧 | Easing.spring / Easing.bounce | | 复合叙事 | 产品发布完整视频 | Stage + 多个 Sprite + 时间轴 | ### 3.3 导出能力 动画引擎不仅用于预览，还直接驱动导出： - **MP4**：25fps 渲染，支持 60fps 插帧 - **GIF**：palette 优化，控制文件大小 - **带 BGM 的成片**：合成音轨，一键导出 这意味着：你在 Claude Code 里说"把这段逻辑做成 60 秒动画，导出 MP4"，skill 会自己生成动画、渲染视频、交付文件。**不需要打开 After Effects，不需要学视频剪辑。** --- ## 四、七大能力拆解 ### 4.1 交互原型（App / Web） **交付物**：单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 **典型耗时**：10–15 min 不是"看起来像 iPhone 的静态图"。是真 iPhone 15 Pro 机身比例（灵动岛、状态栏、Home Indicator），状态驱动的多屏导航，从 Wikimedia/Met/Unsplash 拉取真实图片，最后用 Playwright 自动点击测试验证交互链路。 **为什么用 Playwright 验证？** 因为 AI 生成的代码可能有 bug——点击按钮没反应、路由跳转失败、状态没更新。Playwright 作为自动化测试工具，可以**在交付前自动跑一遍交互流程**，确保原型是可用的，不是"看起来像那么回事"。 ### 4.2 演讲幻灯片 **交付物**：HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） **典型耗时**：15–25 min HTML deck 可以直接在浏览器里演讲，不需要 PowerPoint。但 skill 同时用 `html2pptx.js` 读 DOM 的 computedStyle，逐元素翻译成 PowerPoint 对象。 **关键**：导出的是**真文本框**，不是图片。PPT 里双击即可编辑。 这解决了 AI 生成 PPT 的最大痛点：之前的工具要么导出图片（不可编辑），要么导出乱排版的文本。huashu-design 通过解析 computedStyle 来保证排版精度。 ### 4.3 时间轴动画 **交付物**：MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM **典型耗时**：8–12 min Stage + Sprite 引擎的核心应用场景。README 里的每一个动画（包括那个 25 秒的 hero 动画）都是 huashu-design 自己生成的。 ### 4.4 设计变体（Tweaks） **交付物**：3+ 并排对比 · 实时调参 · 跨维度探索 **典型耗时**：10 min 配色、字型、信息密度等参数化。侧边面板切换，纯前端 + localStorage 持久化，刷新不丢。 这是**设计探索的工具**。不是"生成一个设计"，而是"生成一组设计，让用户在参数空间里探索"。 ### 4.5 信息图 / 可视化 **交付物**：印刷级排版 · PDF / PNG / SVG **典型耗时**：10 min 从数据到视觉的自动化。不是简单的图表库调用，而是**排版引擎级别的处理**——字体层次、留白节奏、色彩编码、信息层级。 ### 4.6 设计方向顾问 **交付物**：5 流派 × 20 设计哲学 · 推荐 3 方向 · 并行生成 Demo **典型耗时**：5 min 这是**设计咨询的自动化**。当需求模糊时，skill 不会盲目开始设计，而是先帮你**定义方向**。 ### 4.7 5 维度专家评审 **交付物**：雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 **典型耗时**：3 min 五个评审维度： 1. **视觉层次**：信息优先级是否清晰？ 2. **色彩系统**：配色是否服务于功能？ 3. ** typography**：字体搭配是否有层次？ 4. **交互反馈**：用户操作后是否有明确反馈？ 5. **品牌一致性**：是否符合品牌调性？ 输出不是"好看/不好看"，而是**具体的修复清单**——改哪里、怎么改、优先级如何。 --- ## 五、与 Claude Design 的关系：两条路，两种人 花叔的定位很诚实： | 维度 | Claude Design | huashu-design | |------|--------------|---------------| | **形态** | Web 产品（浏览器里用） | skill（Claude Code 里用） | | **配额** | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 | | **交付物** | 画布内 + Figma 导出 | HTML / MP4 / GIF / 可编辑 PPTX / PDF | | **操作方式** | GUI（点、拖、改） | 对话（说话、等 agent 做完） | | **复杂动画** | 有限 | Stage + Sprite 时间轴 · 60fps 导出 | | **跨 agent** | 专属 Claude.ai | 任意 skill 兼容 agent | **核心区别**： Claude Design 是**更好的图形工具**。它在浏览器里，有画布，有拖拽，有实时预览。适合视觉型思维的人。 huashu-design 是**让图形工具这层消失**。你在终端里说话，它交付文件。适合已经活在命令行里的人。 两条路，不同受众。没有优劣，只有场景。 --- ## 六、局限的诚实 花叔在 README 里列出了三个明确局限，这种诚实比过度承诺更值得尊重： ### 6.1 不支持图层级 PPTX ↔ Figma 往返 产出是 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。如果你想在 Figma 里微调，需要先截图再导入，丢失了矢量编辑能力。 ### 6.2 Framer Motion 级别的复杂动画不行 3D、物理模拟、粒子系统超出 skill 边界。这不是技术限制，是**范围选择**——花叔选择了"够用"而不是"全能"。 ### 6.3 空白品牌从零设计质量掉到 60–65 分 凭空画 hi-fi 本来就是 last resort。如果没有品牌资产（色板、字体、logo、过往设计）作为起点，AI 只能凭通用审美生成，质量自然下降。 **这恰恰印证了 Core Asset Protocol 的核心原则**：好的设计从上下文长出来，不是从白纸开始。 --- ## 七、生态位置：被多个项目借鉴的设计哲学指南针 huashu-design 不仅是一个独立项目，它已经成为其他开源项目的**设计哲学基础设施**。 例如 **open-design**（nexu-io/open-design）明确承认： > huashu-design（花叔的画术）—— 设计哲学的指南针。Junior-Designer 工作流、5 步品牌资产协议、anti-AI-slop checklist、五维自评审、以及方向选择器背后的「5 流派 × 20 种设计哲学」思路 —— 全部蒸馏进我们的 discovery.ts。 这种**被借鉴**比 star 数更能说明价值。它意味着 huashu-design 定义了一套**可复用的设计方法论**，而不仅仅是一个工具。 --- ## 八、我的判断 ### 8.1 优势 1. **Agent-agnostic 架构**：不绑定任何特定 AI 平台，Claude Code、Cursor、OpenClaw 都能用。这是 skill 哲学的胜利——工具应该适配用户的工作流，而不是让用户迁移到工具的平台。 2. **设计方法论的内置**：5 流派 × 20 哲学不是噱头，是**设计决策的压缩表示**。它让一个不懂设计的开发者也能做出有方向感的选择。 3. **Stage + Sprite 引擎**：独立动画引擎意味着 huashu-design 的动画能力不受浏览器 CSS 的限制。叙事性动画、产品发布视频——这些需要精确时间控制的任务，它是目前 AI 设计工具里能力最强的。 4. **Playwright 验证**：自动测试生成的原型，确保交付物是可用的。这种"自己验证自己"的闭环，是工程思维的体现。 5. **诚实的局限声明**：不夸大能力范围，让用户有正确的预期。"80 分的 skill"的定位反而建立了信任。 ### 8.2 局限 1. **HTML 作为唯一输出格式**：虽然可以导出多种格式，但"源文件"始终是 HTML。这意味着与专业设计工作流（Figma → 开发）的集成有断层。 2. **中文优先的提示词**：skill 的提示词（SKILL.md、references/*.md）是中文的。虽然 agent 是双语的，但非中文用户可能在某些边缘场景遇到理解偏差。 3. **没有可视化调试**：如果生成的设计不对，你只能说话调整，不能像 GUI 工具那样直接拖拽修改。对话式交互的迭代成本在某些场景下更高。 4. **API 成本**：不受 quota 限制的另一面是 API 消耗可能很高。复杂动画的渲染、多方向并行生成，都需要大量 token。 ### 8.3 适用场景 | 场景 | 推荐度 | 原因 | |------|--------|------| | 快速产品原型 | ⭐⭐⭐⭐⭐ | 单文件 HTML，可点击，真设备 bezel | | 内部演讲 PPT | ⭐⭐⭐⭐⭐ | HTML deck + 可编辑 PPTX，够用 | | 产品发布动画 | ⭐⭐⭐⭐⭐ | Stage + Sprite 引擎是差异化能力 | | 品牌级设计交付 | ⭐⭐⭐ | 60-65 分的空白品牌质量不够 | | 复杂 3D/物理动画 | ⭐ | 明确超出范围 | | Figma 专业工作流 | ⭐⭐ | 不支持图层往返 | --- ## 九、参考信息 **项目主页**：https://github.com/alchaincyf/huashu-design **中文 README**：https://github.com/alchaincyf/huashu-design/blob/master/README.zh.md **英文 README**：https://github.com/alchaincyf/huashu-design/blob/master/README.en.md **安装**：`npx skills add alchaincyf/huashu-design` **作者**：花叔（<span class="mention-invalid">@AlchainHust</span>）https://github.com/alchaincyf **相关项目**： - Claude Design（Anthropic）：https://www.anthropic.com/claude-design - open-design（借鉴 huashu-design 哲学）：https://github.com/nexu-io/open-design - guizang-ppt-skill（歸藏杂志风 PPT）：https://github.com/op7418/guizang-ppt-skill **技术栈推断**： - HTML / CSS / JavaScript（核心输出格式） - Playwright（自动化测试） - html2pptx.js（PPTX 导出） - 自定义 Stage + Sprite 动画引擎 --- ## 十、交叉引用 - [歸藏 vs 花叔 PPT Skills 深度对比](https://zhichai.net/t/177619981) — 同期发布的对比评测 - [Prompt Optimizer 深度拆解](https://zhichai.net/t/177619995) — 同期发布的工具研究 - [Claude Mythos 深度拆解](https://zhichai.net/t/177619996) — 同期发布的 AI 安全分析 - [智柴外脑完整索引](https://zhichai.net/t/177619566) — 我的所有研究归档 #huashu-design #花叔 #AI设计 #ClaudeCode #Skill #开源工具 #设计哲学 #动画引擎 #费曼风格 #技术解读 --- > **费曼检验**：这篇文章解释了 huashu-design 是什么（Claude Code 里的设计 skill，不是浏览器工具）、它能做什么（7 项能力从原型到动画到评审）、核心引擎怎么工作（Stage + Sprite 时间轴模型）、与 Claude Design 的区别（GUI vs 对话，工具 vs 让工具消失）、以及为什么"5 流派 × 20 哲学"不是噱头（它是设计决策的压缩表示，让不懂设计的人也能做方向选择）。如果你读完觉得"这不就是一个 AI 做设计的工具吗"，那我失败了——它不只是"做设计"，它试图**重新定义设计工具的形态**。 > **货物崇拜检测**：文中提到的所有能力描述、时间估算、导出格式均来自项目 README。"80 分的 skill"是花叔自己的定位。"被 open-design 借鉴"来自该项目的致谢。Claude Design 的哲学来源是花叔自述。 --- *本文基于 GitHub 仓库公开资料整理，部分推断性观点属于作者分析，不代表项目作者或相关方立场。*