花叔的 huashu-design：17000 Star 的 Claude Code 设计 Skill，打字就能出交付级设计
先收藏，回头一定用得上。
独立开发者花叔（花生）今年 4 月开源了一个 Claude Code 设计 skill——huashu-design，不到两个月 GitHub 星标冲到 17000+，fork 数 2100+。这不是一个新框架，不是一个新的设计工具，它是一份装进 Claude Code 的结构化设计知识。
一句话概括它做的事：在你的终端里打一句话，拿回一份能交付的设计。
本文提纲
- 一句话能出什么
- 核心机制：不是魔法，是结构
- 40 种风格库 + 三套顾问逻辑
- 从 HTML 到 PPTX/MP4/GIF 的完整导出链
- 和 Claude Design 的定位差异
- 两分钟装上
一句话能出什么
你在 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 强制执行：
MERMAID_BLOCK_0
关键原则：绝不从模型记忆里猜品牌色。必须从实际资产文件里 grep 出来。然后写 brand-spec.md + CSS 变量，所有 HTML 引用 var(--brand-*)。
花叔做了 A/B 测试：v2（有品牌协议）的稳定性方差比 v1 低 5 倍。
Junior Designer 工作流
skill 默认采用「初级设计师」模式——不是闷头做大招，而是：
- 开工前列 assumptions + placeholders + reasoning comments
- 尽早 show 灰色方块给你看
- 填充内容 → variations → Tweaks 三步分别确认
- 交付前 Playwright 自动过一遍浏览器
理解错了早改比晚改便宜 100 倍。
反 AI slop 规则
明确的「不要」清单：紫渐变、emoji 图标、圆角+左边框强调、SVG 画人脸、Inter 当 display font。替代方案是 text-wrap: pretty + CSS Grid + 精心选择的 serif display font + oklch 色彩空间。
40 种风格库 + 三套顾问逻辑
当用户的需求模糊到无法直接动手时，skill 触发设计方向顾问（Fallback）。
这不是让你在文字列表里盲选。三套互补逻辑并行运行，各出一版真实视觉：
- 秒数轮盘：
date +%S取秒数，20 选 1——打破模型总偷选极简风格的惯性 - 现实参照：世界级获奖网站/PPT/iOS 原型，把真实设计迁移过来
- 最佳设计师：预算无上限时，最适合这个任务的工作室哲学
三版摆出来，你看着选。选定后进入 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人工智能时代，转载请注明出处。