背景：设计这件事，程序员的永恒噩梦
你是否也曾有过这样的经历：
产品需要一个 App 原型，你打开 Figma，调整了半小时字体，结果发现还停留在空白画布上。设计师的截稿日期就在下周，你急得像热锅上的蚂蚁，最后只能靠 PowerPoint 拉个方块交差，被设计师瞥了一眼说「嗯，有内味了」（她的语气让你怀疑自己是不是被当成了幼儿园小朋友在安慰）。
更糟糕的处境是：你本人就是那个「全栈」——产品、设计、开发全包揽，一个人扛着三顶帽子在原地打转。Figma 的钢笔曲线工具让你头皮发麻，Canva 的模板让你感到尴尬，最终做出来的东西只能被形容为「AI Slop 的工业残骸」——紫色渐变、emoji 图标加上左侧 accent 边框，一眼就能识别出是 AI 生成的，仿佛在你脸上贴了个「外行」的标签。
而 huashu-design 这个开源 skill 正是直击这个痛点而来的。
它是什么？
GitHub 地址：github.com/alchaincyf/…
一句话说清楚：这是一个装载在 Claude Code 中的设计能力包，让你通过说话的方式直接生成高保真的设计交付物。
安装只需一行命令：
npx skills add alchaincyf/huashu-design
然后在 Claude Code 里与它对话：
「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」「帮我对这个设计做一个 5 维度评审」没有图形界面，没有拖拽操作，没有让你调节贝塞尔曲线的复杂工具——一切仅仅靠说话完成。
作者花生（花叔）在 README 中写了一句我特别认可的话：「对不愿意打开任何图形界面的人来说，80 分的 skill 比 100 分的产品更实用。」
诚实到了令人感动的地步。
能做什么？我帮你翻译一下
| 你想要的 | huashu-design 交付的 | 大概需要多久 |
|---|---|---|
| App 长什么样？ | 带真 iPhone 15 Pro 机身边框的可点击 HTML 原型 | 10–15 分钟 |
| 下周要做的 PPT | 浏览器里可演示的 HTML deck，同时导出文本框可编辑的 PPTX | 15–25 分钟 |
| 需要一段宣传动画 | 带背景音乐、60fps 插帧的 MP4，以及优化过的 GIF | 8–12 分钟 |
| 不知道设计风格怎么选 | 从 5 流派 × 20 种设计哲学中推荐 3 个差异化方案，并行生成 Demo 让你挑选 | 5 分钟 |
| 想知道这个设计的缺陷在哪 | 5 维度雷达图 + Keep/Fix/Quick Wins 可执行清单 | 3 分钟 |
特别值得单独提及的是那个 PPTX 导出功能：它不是简单的截图贴图，而是利用 html2pptx.js 读取 DOM 的 computedStyle，逐元素转译成 PowerPoint 对象——也就是说，导出后你在 PowerPoint 中仍然可以调整文字位置。这种「不偷懒」的做法令人肃然起敬。
核心机制：它为什么不会做出那种「一眼 AI」的东西？
这里有几个设计决策非常值得关注。
1. 反 AI Slop 规则
README 中明确列出了需要避免的视觉「大公约数」：
- ❌ 紫色渐变
- ❌ emoji 作为图标
- ❌ 圆角 + 左侧 accent 的信息卡片
- ❌ AI 用 SVG 画人脸（你懂那种诡异感）
- ❌ 永远只用 Inter 字体
转而使用 text-wrap: pretty、CSS Grid、精心挑选的衬线显示字体以及 oklch 色彩空间。这些细节的积累，正是「设计感」与「AI 味」的分水岭。
2. 品牌资产协议（最严格的规则）
当涉及到具体品牌（比如 Stripe、Linear，或者你自家的公司）时，它不会「凭记忆猜测颜色」，而是强制走一个五步流程：询问 → 搜索官方品牌页面 → 下载资源 → 用 grep 提取色值 → 固化为 CSS 变量。
作者做了 A/B 测试（v1 vs v2，各跑 6 个 agent），v2 的稳定性方差比 v1 降低了 5 倍。这意味着加入这个协议后，输出结果的一致性大幅提升。
3. Junior Designer 工作流
它不会埋头做完再展示给你，而是：
- 先发问题清单，等你一次性批量回答
- 先写 assumptions + placeholders，尽早让你看到（哪怕只是灰色方块）
- 填充内容 → 变体 → Tweaks 参数调整，分三次给你看
- 交付前用 Playwright 自动在浏览器中验证一遍
理解错了早改比晚改便宜 100 倍——这句话每个做过大型需求的人都深有体会。
仓库结构：藏着不少宝贝
huashu-design/
├── SKILL.md # 供 agent 读取的主文档
├── assets/ # 预制组件
│ ├── animations.jsx # Stage + Sprite + Easing 动画引擎
│ ├── ios_frame.jsx # iPhone 15 Pro 精确机身
│ ├── showcases/ # 24 个预制样例（8 场景 × 3 风格）
│ └── bgm-*.mp3 # 6 首场景化背景音乐（！）
├── references/ # 子文档：20 种设计哲学详细库等
└── scripts/ # 导出工具链：HTML → MP4 → 60fps → GIF → MP4+BGM6 首场景化背景音乐这个细节……值得多看几遍。在生成动画的同时配上 BGM，这个工具的「交付」定义比想象中要完整得多。
和 Claude Design 的关系：开源文化的新姿势
花叔在 README 中坦诚承认：品牌资产协议的哲学是从 Claude Design 社区流传的系统提示词中「偷师」来的，然后蒸馏成结构化 spec，写成 skill 集成进了 Claude Code。
他把这件事称为「基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态」。
这个说法十分精准。Skill 工程师就是新时代的「蒸馏者」——把别人产品中最有价值的认知提炼出来，变成可复用、可分发的能力包。这件事本身比写代码更需要品位。
两个产品的定位差异也非常清晰：
| Claude Design | huashu-design | |
|---|---|---|
| 形态 | 网页产品 | Claude Code Skill |
| 操作方式 | GUI（点击、拖拽、修改） | 对话（说话，等待 agent 执行） |
| 交付物 | 画布 + 可导出 Figma | HTML / MP4 / GIF / 可编辑 PPTX |
| 跨 agent | 专属 Claude.ai | 任意兼容 skill 的 agent |
Claude Design 是「更好的图形工具」，huashu-design 是「让图形工具这个层级消失」。两种路径，不同受众，并非竞争，而是互补。
局限性（作者自己说的）
- 不支持图层级可编辑的 PPTX 到 Figma 导入
- 不支持 Framer Motion 级别的 3D / 粒子动画
- 从零设计完全空白的品牌，质量可能只有 60–65 分
这是一个 80 分的 skill，不是 100 分的产品。
反而因为这段话更让人信任了——能把自己的产品边界说清楚的人，通常对核心能力也会做得靠谱。
怎么安装
前置条件：需要拥有 Claude Code 环境。
# 一行安装
npx skills add alchaincyf/huashu-design
# 然后在 Claude Code 里直接说话
# 例如：「做一个 AI 写作工具的 iOS App 原型，风格简洁，4 个核心屏幕」跨 agent 通用，Claude Code、Cursor、Codex 均可安装。
最后说一句
这个 skill 让人想起一句话：最好的工具，是让你忘记工具存在的那一种。
Figma 很强大，但每次打开都先在工具栏里迷失五分钟。huashu-design 的目标是把设计这件事退到背景——你只需要想清楚「我要什么」，剩下的交给 agent。
当然，它无法替代专业设计师。但对于「需要设计，但没有设计师」的独立开发者、全栈工程师、产品经理来说，这大概是目前最接近「用说话做设计」的开源方案之一。
你的 Figma 也许不会彻底吃灰，但至少多了一个值得尝试的新选项。
