花叔开源 huashu-design：说句话，Agent 就能出设计稿
你可能听过花叔。就是那个做了小猫补光灯（App Store 付费榜第一）、写了女娲 .skill（21k Stars）、出了《一本书玩转 DeepSeek》的全栈狠人。
花叔最近又开源了一个新项目：huashu-design。上线 1 个多月，GitHub 已经 15,800+ Stars。
这是个什么东西呢？一句话说：给 AI Agent 装上设计师大脑。
你坐在终端前面，说一句「帮我把这个 App 主页重新设计一下」，然后等几分钟，一份可以直接交付的 HTML 原型就躺在那了。
打字。回车。一份能交付的设计。
不是传统设计工具
huashu-design 和 UI 组件库、Figma 插件都不一样。它是一个 Skill 技能包，装到 Claude Code、Cursor、Codex、Hermes 这些 AI 编程工具里，让它们获得专业的设计能力。
花叔是怎么做的？
他逆向拆解了 Anthropic 官方的 Claude Design 系统提示词，把 3 万字的提示词蒸馏成结构化规范，再改写成跨 Agent 通用的 skill 文件。简单说，他把 Claude Design 的能力开源了，还能在更多 Agent 上用。
能交付什么？
huashu-design 的能力清单还挺全面的：
- 交互原型 — 单文件 HTML，带真 iPhone 边框，可点击交互，Playwright 验证通过
- 幻灯片 — HTML deck + 可编辑的 PPTX（文本框保留，不是图片）
- 动画/动效 — MP4 视频 60fps + GIF + 背景音乐一条龙
- 设计变体 — 3 个版本并排对比，Tweaks 调参面板实时调
- 信息图/数据可视化 — 印刷级排版，导出 PDF/PNG/SVG
- 设计评审 — 5 维度专家评审 + 雷达图 + Keep/Fix/Quick Wins 修复清单
大部分任务 10-15 分钟就能搞定。
花叔的讲究
这个项目能 15k Stars 不是没理由的——细节做得确实到位。
品牌资产协议： 5 步硬流程。问清楚品牌是什么 → 搜官方信息 → 下载 logo → 提取颜色字体 → 固化到设计里。不凭记忆猜品牌色。
反 AI Slop： 内置规则避免 AI 设计师的通病：紫色渐变、emoji 图标、圆角+左边框卡片、CSS 剪影人像。这些都是 AI 做了但设计师一看就摇头的东西。
Junior Designer 工作流： 先快速搭架子，用占位符填充，标注为什么这么做，尽早给用户看。不闷头做到完才发现方向错了。
怎么用？
装起来很简单：
npx skills add alchaincyf/huashu-design
然后在 Claude Code 或 Codex 里加载 skill 文件就行。花叔还写了中英双语 README，中文社区教程在知乎、掘金、优设网都有很多。
目前是 MIT 协议免费商用——2026 年 5 月刚从 Personal Use 改的，花叔对社区诚意很足。
和 Claude Design 比
| 对比 |
Claude Design |
huashu-design |
| 形态 |
网页产品 |
Skill 技能包 |
| 交互方式 |
GUI 点拖改 |
对话式 |
| Agent 兼容 |
仅 Claude |
任意 skill 兼容 Agent |
| 价格 |
订阅 quota |
免费开源 MIT |
| 交付物 |
Canvas + Figma |
HTML/MP4/GIF/PPTX/PDF |
简单说，Claude Design 是产品，huashu-design 是能力。一个需要你去它的网页上用，另一个是直接装到你的 Agent 里，在终端对话就能出活。
我的看法
花叔这个项目让我觉得最有意思的不是技术，而是他对「AI 时代的设计交付」这个问题的理解——不是做个更好的 Figma，而是让设计工具这层完全消失。你不需要打开任何设计软件，跟 Agent 说句话，等几分钟，东西就做好了。
对于不熟悉设计工具的开发者来说，这可能是最实用的设计解决方案。15k Stars 已经说明市场认可了。
如果你是 Claude Code 或 Codex 用户，装一下试试不亏。就一行命令的事。
GitHub: github.com/alchaincyf/huashu-design
作者: 花叔 (alchaincyf)
安装: npx skills add alchaincyf/huashu-design