Hello，我是Niko。16年程序员老兵，专注分享 AI编程实战经验、宝藏工具资源、前沿技术动态。不玩套路，多讲干货。
今天推荐一个 Claude Code Skill：huashu-design。GitHub 上 3.2k star，能让你在终端里直接出设计稿。
我是在 X 上看到作者花叔的推文，他写了一篇长文讲自己为什么做这个项目。看完之后我觉得这个思路挺有意思，值得聊聊。
花叔是谁，他为什么做这个
花叔（X: @AlchainHust，GitHub: alchaincyf）是一个挺活跃的 AI 工具创作者，在 GitHub 上有一整套 huashu-skills 系列，涵盖内容创作、数据分析、校对等十几个 Skill。
huashu-design 的起因跟 Claude Design 有关。Anthropic 发布 Claude Design 那天，花叔说他玩到凌晨四点，让 AI 直接在对话里生成完整网页、可点的 iOS 原型，很兴奋。但几天后他发现自己再也没打开过 Claude Design。
不是产品不好，是使用方式不对。用他的原话说："我是一个宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面的人。"
于是他做了两件事：先让 agent 拆解了 Claude Design 的核心逻辑（包括社区流传的系统提示词、组件机制、品牌资产处理协议），蒸馏成一份结构化 spec；然后把这份 spec 结合自己之前的设计探索，写成了一个 Skill，装进 Claude Code 里。
这就是 huashu-design 的来历。Claude Design 的设计理念，Claude Code 的使用方式，捏到一起。
Agent-first 和 GUI-first 的区别
花叔在推文里提了一个我觉得挺准确的判断：
Claude Design 的本质是把设计师塞进了 Claude 里。你像跟 Figma 对话一样，告诉它你想要什么，它生成出来，你在画布上微调。这是一个更好的图形工具。
huashu-design 不一样。它不想做图形工具，它想让图形工具这一层消失。你告诉 agent 你要什么，agent 自己去读品牌资产、自己建 design spec、自己生成 HTML、自己跑 Playwright 验证交付物没坏。整个过程你不打开任何界面。
两条路的差别不是"哪个功能更强"，而是谁来操作工具。
这个判断跟我之前写的 Claude Design 那篇文章的感受一致。对于习惯在终端里工作的开发者来说，一个 Skill 确实比一个 Web 产品更顺手。
它能做什么
花叔给 huashu-design 定了七种能力：
| 能力 | 产出物 | 耗时 |
|---|---|---|
| 交互原型 | 单文件 HTML，iPhone 15 Pro 真实外框，可点击 | 10-15 分钟 |
| 演讲幻灯片 | HTML deck + 可编辑 PPTX | 15-25 分钟 |
| 时间轴动画 | MP4/GIF，支持 60fps 插帧和背景音乐 | 8-12 分钟 |
| 设计变体 | 多版本并排对比，支持实时调参 | 10 分钟 |
| 信息图 | 印刷级排版，PDF/PNG/SVG 导出 | 10 分钟 |
| 设计方向建议 | 从 20 种设计哲学推荐 3 个方向 | 5 分钟 |
| 5 维专家评审 | 雷达图分析 + 修复建议 | 3 分钟 |
他在推文里举了两个案例，我觉得比功能列表更说明问题。
案例一：一次生成 4 套 PPT。 他要准备一场关于 AI 心理学的演讲，在终端里说了一句"不知道用什么风格，你推荐 4 个差异化方向给我选"。Skill 从 20 种预置设计哲学里挑了 4 个方向，并行启动 4 个 agent，各做一套 17 页的完整 PPT。40 分钟后摆在面前的是：北大学术版、博尔赫斯文学版、投行严肃版、禅意极简版。他只需要做一件事：选哪一套。
案例二：可点击的 iOS 原型。 在终端里说"做一个 AI 番茄钟 iOS App 的原型，4 个核心屏幕，要能点击切换"。十几分钟后出来一个带真 iPhone 外框的原型，SF Symbols 图标、SF Pro 字体、iOS 18 标准圆角、底部 Home Indicator 都有。交付前 Skill 还自己跑了一遍 Playwright 点击测试，确保每个按钮都不会白屏。
品牌资产协议：从 Claude Design 偷来的精髓
花叔自己大方承认，huashu-design 最核心的理念是从 Claude Design 的提示词里偷师的。那份提示词反复强调一件事：好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来。
他在这个基础上落成了一套 5 步硬流程，处理"用户提了品牌名但没给资料"的场景：
- 问用户有没有 brand guidelines，没有就去搜
- 搜官方品牌页（brand.com/brand 或 brand.com/press）
- 下载资产，三条兜底路径（独立 SVG → 官网 HTML 内联 SVG → 产品截图取色）
- grep 提取真实色值，按频率排序，过滤黑白灰
- 固化为 brand-spec.md，让所有 CSS 变量引用这份文件
他说做过 A/B 测试，走完这套协议的 v2 版本比不走的 v1，质量方差低了 5 倍。"不是均值变高了很多，是更加稳定。"
这个思路我觉得对做 Skill 的人也有参考价值。产出的稳定性比偶尔的惊艳更重要。
装上就能用
一行命令：
npx skills add alchaincyf/huashu-design
装完直接用自然语言说你想要什么：
- "做一份 PPT，内容大纲在这个文件里"
- "做个 iOS App 的交互原型"
- "生成一个 60 秒的产品介绍动画"
除了 Claude Code，Cursor、Codex、OpenClaw、Hermes 也能用。
不足和提醒
花叔自己在推文里列了做不到的事，我觉得这份坦诚加分不少：
- 没法导出图层级可编辑的 PPTX。产物是 HTML，可以截图、录屏、导出图片，但没法拖进 Keynote 改一个文字位置
- 复杂动画做不了。时间轴驱动的叙事动画没问题，3D、物理模拟、粒子系统超出边界
- 品牌资产完全空白时，凭空画高保真质量会掉到 60-65 分
- 许可证是个人使用免费，公司商业项目需要联系作者授权
他自己的总结我觉得很实在："我做的是一个 80 分的 skill，不是一个 100 分的产品。但对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。"
总结
huashu-design 不是要替代 Figma 或 Claude Design，它解决的是一个具体场景：你在终端里干活，突然需要出个设计稿，不想切换到图形界面。
对独立开发者、内容创作者、在终端里做产品的人来说，值得装上试试。
参考资料：
