花叔的 huashu-design：17000 Star 的 Claude Code 设计 Skill，打字就能出交付级设计

先收藏，回头一定用得上。

独立开发者花叔（花生）今年 4 月开源了一个 Claude Code 设计 skill——huashu-design，不到两个月 GitHub 星标冲到 17000+，fork 数 2100+。这不是一个新框架，不是一个新的设计工具，它是一份装进 Claude Code 的结构化设计知识。

一句话概括它做的事：在你的终端里打一句话，拿回一份能交付的设计。

本文提纲

1. 一句话能出什么
2. 核心机制：不是魔法，是结构
3. 40 种风格库 + 三套顾问逻辑
4. 从 HTML 到 PPTX/MP4/GIF 的完整导出链
5. 和 Claude Design 的定位差异
6. 两分钟装上

一句话能出什么

你在 Claude Code 里说：

「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」
「帮我对这个设计做一个 5 维度评审」

3 到 30 分钟后，你拿到的是：

能力	交付物	典型耗时
交互原型（App / Web）	单文件 HTML · 真 iPhone 机身 · 可点击 · Playwright 验证	10–15 min
演讲幻灯片	HTML deck + 可编辑 PPTX（真文本框，PPT 里双击可改）	15–25 min
时间轴动画	MP4（25fps/60fps 插帧）+ GIF + BGM	8–12 min
设计变体	3+ 并排对比 · 实时调参	10 min
信息图	印刷级排版 · 可导 PDF/PNG/SVG	10 min
5 维度专家评审	雷达图 + Keep/Fix/Quick Wins 清单	3 min

注意那个「可编辑 PPTX」——html2pptx.js 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象，导出的是真文本框，不是截图贴进去的。

核心机制：不是魔法，是结构

huashu-design 的质量不是靠模型自己「发挥」，而是靠硬约束流程保证的。

品牌资产协议（5 步硬流程）

涉及具体品牌时，skill 强制执行：

graph LR
    A[Ask user for
brand guidelines] --> B[Search official
brand page]
    B --> C[Download assets
SVG > HTML > Screenshot]
    C --> D[Grep color values
frequency sort, filter]
    D --> E[Write brand-spec.md
+ CSS variables]
    style A fill:#FF6B6B,color:#000000
    style B fill:#4ECDC4,color:#000000
    style C fill:#45B7D1,color:#000000
    style D fill:#96CEB4,color:#000000
    style E fill:#FFEAA7,color:#000000

关键原则：绝不从模型记忆里猜品牌色。必须从实际资产文件里 grep 出来。然后写 brand-spec.md + CSS 变量，所有 HTML 引用 var(--brand-*)。

花叔做了 A/B 测试：v2（有品牌协议）的稳定性方差比 v1 低 5 倍。

Junior Designer 工作流

skill 默认采用「初级设计师」模式——不是闷头做大招，而是：

1. 开工前列 assumptions + placeholders + reasoning comments
2. 尽早 show 灰色方块给你看
3. 填充内容 → variations → Tweaks 三步分别确认
4. 交付前 Playwright 自动过一遍浏览器

理解错了早改比晚改便宜 100 倍。

反 AI slop 规则

明确的「不要」清单：紫渐变、emoji 图标、圆角+左边框强调、SVG 画人脸、Inter 当 display font。替代方案是 text-wrap: pretty + CSS Grid + 精心选择的 serif display font + oklch 色彩空间。

40 种风格库 + 三套顾问逻辑

当用户的需求模糊到无法直接动手时，skill 触发设计方向顾问（Fallback）。

这不是让你在文字列表里盲选。三套互补逻辑并行运行，各出一版真实视觉：

1. 秒数轮盘：date +%S 取秒数，20 选 1——打破模型总偷选极简风格的惯性
2. 现实参照：世界级获奖网站/PPT/iOS 原型，把真实设计迁移过来
3. 最佳设计师：预算无上限时，最适合这个任务的工作室哲学

三版摆出来，你看着选。选定后进入 Junior Designer 主干流程。

底层弹药是 40 种 HTML 原生风格库（网页 20 + PPT 20），按大胆/中性/安静分级。纯 CSS，不需要生图。

从 HTML 到 PPTX/MP4/GIF 的完整导出链

huashu-design 不只是「画出来」，还有完整的导出工具链：

scripts/
├── render-video.js       # HTML → MP4（Playwright 逐帧录制）
├── convert-formats.sh    # MP4 → 60fps 插帧 + GIF（palette 优化）
├── add-music.sh          # MP4 + BGM 合成
├── export_deck_pdf.mjs   # HTML deck → PDF
├── export_deck_pptx.mjs  # HTML deck → PPTX
├── html2pptx.js          # DOM computedStyle → PowerPoint 对象
└── verify.py             # Playwright 自动验证

Motion Design 引擎用的是 Stage + Sprite 时间片段模型，四条 API 覆盖所有动画需求：useTime、useSprite、interpolate、Easing。一条命令就能导出带背景音乐的 25fps/60fps MP4。

和 Claude Design 的定位差异

花叔在 README 里写得很坦诚——品牌资产协议的哲学是从 Claude Design 流传出来的提示词里「偷师」的。但两者的定位完全不同：

	Claude Design	huashu-design
形态	网页产品（浏览器里用）	skill（终端里用）
配额	订阅 quota	API 消耗，并行跑 agent 不受限
交付物	画布内 + 可导 Figma	HTML / MP4 / GIF / 可编辑 PPTX / PDF
操作方式	GUI（点、拖、改）	对话（说话，等 agent 做完）
复杂动画	有限	Stage + Sprite 时间轴，60fps 导出
跨 agent	专属 Claude.ai	任意 skill 兼容 agent

花叔的原话：「Claude Design 是更好的图形工具，huashu-design 是让图形工具这层消失。两条路，不同受众。」

两分钟装上

npx skills add alchaincyf/huashu-design

跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。装完直接在终端里说需求就行。

MIT 协议（2026-05-14 起改），个人和商用都免费，无需授权。

局限性

花叔自己列了三条：

• 不支持图层级可编辑的 PPTX 到 Figma——产出 HTML，能截图、录屏、导图，不能拖进 Keynote 改文字位置
• Framer Motion 级别的复杂动画不行——3D、物理模拟、粒子系统超出边界
• 完全空白的品牌从零设计质量会掉到 60–65 分

「这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。」

花叔是独立开发者，代表作包括小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star），自媒体全平台 30 万+ 粉丝。这个项目的起源也挺有意思——Anthropic 发布 Claude Design 那天他玩到凌晨四点，几天后发现自己再也没点开过它。不是它不好，是「我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面」。于是让 agent 拆解 Claude Design 的系统提示词，蒸馏成结构化 spec，写成了这个 skill。

试过了？评论区说说你的体验。还没试？收藏起来周末折腾。

---

作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。

本文首发于 AI人工智能时代，转载请注明出处。