一句话 → 交互原型 / PPT / MP4 动画 / 信息图 / 设计评审，HTML 原生的 AI 设计工作流。
写在前面
AI 设计工具以前只会放烟花——你给它一句话，它砰的一声炸出一张图，看着震撼，然后没了。那张图你不能点、不能改、不能导出 PPT、不能拿去给老板汇报。
花叔设计（huashu-design）解决的问题很朴素：AI 设计真正缺的不是想象力，是 交付能力。它把设计目标从 ” 做图 ” 换成了 ” 交活 ”。三到三十分钟后，你拿到的是一个能点、能改、能导出、能直接开会的真东西。
上线不到两个月，GitHub 星标冲到 17000+，fork 2100+。它的源头是花叔逆向拆解了 Anthropic 的 Claude Design，用四天时间把云工具蒸馏成了终端 Skill。
一、它解决什么问题
| 维度 | 信息 |
|---|---|
| 项目 | huashu-design（花叔设计） |
| 作者 | 花叔（@Alchaincyf / alchaincyf） |
| 协议 | MIT（2026-05-14 从 Personal Use License 改为 MIT，个人商用均免费） |
| 兼容 Agent | Claude Code / Cursor / Codex / OpenClaw / Hermes |
| 安装 | npx skills add alchaincyf/huashu-design |
| 首版 | 2026-04-21（距 Claude Design 发布仅 4 天） |
| Stars / Forks | 17000+ / 2100+ |
核心问题：传统 AI 设计产出是一张 PNG——你说间距不对，它说那我再画一张。来回折腾八百遍，最后那个图还是不能用，因为导出格式不对。huashu-design 的交付物是 HTML——你说间距不对，它直接在代码里改，三秒钟搞定。
二、五步走 + 九种交付物
品牌资产协议
AI 设计的经典翻车：你说 ” 帮我做个苹果风格的页面 ”，AI 出来一个字体像小米、颜色像淘宝、阴影像 QQ 空间的东西。
品牌资产协议是这个问题的硬核解法，五步强制执行：
- 问用户有没有品牌规范
- 去官网扒品牌页面
- 下载所有素材（SVG 不行就截图，截图不行就取色）
- 从素材里挖具体色值，按出现频率排序
- 生成
brand-spec.md，后面所有设计都照着来
实测效果 ：用了这套协议的版本比没用的稳定性高了 五倍。
9 种交付物
| 交付物 | 类型 | 典型耗时 |
|---|---|---|
| 交互原型 | HTML 单文件（真 iPhone 机身 + 可点击 + Playwright 验证） | 10–15 min |
| 演讲幻灯片 | HTML deck + 可编辑 PPTX（真文本框，PPT 里双击可改） | 15–25 min |
| 发布动画 | MP4（25fps/60fps 插帧）+ GIF + 6 首场景化 BGM | 8–12 min |
| 设计变体 | 3+ 并排对比，实时调参 | 10 min |
| 信息图 | 印刷级排版，可导 PDF/PNG/SVG | 10 min |
| App / Web 原型 | HTML 高保真 | 10–15 min |
| 设计评审 | 5 维度雷达图 + Keep/Fix/Quick Wins 清单 | 3 min |
| 配色提取 | Brand palette 自动生成 | 即时 |
| 风格推荐 | 5 流派 × 20 设计哲学 → 3 个风格方向并行小样 | 即时 |
最值得关注的是那个 可编辑 PPTX——html2pptx.js 读 DOM 的 computedStyle，逐元素翻译成 PowerPoint 对象，导出的是真文本框，不是截图贴进去的。
设计方向顾问：从画图匠到创意助理
当需求模糊时，它会先给出 3 个差异化风格方向，每个配代表作、关键词、气质描述，并行生成视觉小样让你选。选完一个它才往下做。
把 AI 从 ” 你说啥我做啥的画图匠 ” 升级成了 ” 帮你把模糊需求理清楚再开工的创意助理 ”。
五维专家评审
五个维度自评打分：哲学一致性 / 视觉层级 / 细节执行 / 功能性 / 创新性。每个维度 0–10 分，最后输出雷达图 + Keep/Fix/Quick Wins 清单。
这反映了 AI 行业的一个大趋势：从生成时代进入评估时代。未来真正厉害的 AI 不是最能画的，而是最能判断什么是好东西的。
三、工程工具链
| 能力 | 实现方式 |
|---|---|
| HTML → MP4 / GIF | Stage/Sprite 动画引擎 + 25fps/60fps 插帧 |
| HTML → PPTX | html2pptx.js（DOM → computedStyle → PowerPoint 对象） |
| HTML → PDF | 直接渲染导出 |
| 截图验证 | Playwright + 控制台错误检查 |
| 设备边框 | iOS / Android / macOS / Browser 4 套 |
| 并行 Agent | 4 个风格方向可同时启动 |
| 品牌 VI | 纯黑 + 赤陶橙 (#D97757) + 米色面板 |
四、vs Claude Design：同源分流
| 维度 | Claude Design（Anthropic） | huashu-design（花叔） |
|---|---|---|
| 形态 | 浏览器图形界面 | 终端 Skill（无 GUI） |
| 用户群 | 设计师（Figma 用户） | 独立开发者 / 内容创作者 |
| 输出 | 可导 Figma / Canva | HTML / PPTX / MP4 / GIF |
| 视频动画 | ❌ 不支持 | ✅ MP4 + BGM |
| 并行多风格 | ❌ 单次一个 | ✅ 4 路并行 |
| 订阅成本 | Claude Pro/Max/Team 需付费 | MIT 完全免费（个人商用均免费） |
| 设计评审 | 无 | ✅ 五维自评雷达图 |
| 安装复杂度 | 浏览器访问 | npx skills add 一行 |
| Figma 互通 | ✅ 直接导出 | ❌ 需截图 / 录屏 |
| 3D / 物理模拟 | 有限 | ❌ 超出能力边界 |
一句话说清楚：Claude Design 是给 Figma 这代工具续命，huashu-design 是想让那代工具自然消亡。
五、快速开始
# 一键安装
npx skills add alchaincyf/huashu-design
# 在 Claude Code / Cursor / Codex / OpenClaw 里说：# " 做一份 AI 心理学的演讲 PPT"
# " 做一个 AI 番茄钟 iOS 原型，4 个核心屏幕 "
# " 把这段逻辑做成 60 秒动画，导出 MP4 和 GIF"六、风险与坑
- V2.0 发布后品牌资产协议脚本逻辑尚未经过大规模实测：五倍稳定性提升来自官方博客描述，具体测试场景和样本量未公开
- PPTX 导出依赖 DOM computedStyle：复杂 CSS（Grid 嵌套 / 滤镜 / 自定义字体）存在信息损耗风险，建议导出后人工核查
- MIT 协议但 Enterprise License 存在：2026-05-14 前是 ” 企业商用需授权 ”，企业团队需确认当前合同状态
- 视频能力较新：Stage/Sprite 动画引擎仍属实验性质，复杂物理模拟和粒子系统超出范围
- 设计空白从零约 60 分：官方自认 ” 完全空白的品牌从零设计质量会掉到六十分出头 ”，带 brand-spec.md 输入质量明显更高
- Hero 动画靠 GIF 展示：demos/ 里 18 个 GIF 总质量可观，但交互性不如浏览器直跑
七、总结
huashu-design 最值得装的三个理由：
- 交付物思维：HTML 当设计载体，直接导出 PPTX/MP4/PDF，不是一张 PNG 就完事
- 品牌资产协议：五步强制执行，品牌一致性比不用提升 5 倍
- MIT 完全免费：个人商用均免费，成本为零
如果你每天早上打开终端、不想打开 Figma、但时不时需要一个原型或 PPT 或发布动画——这就是为你准备的。