让 AI 画出「你家的味道」—— hue 品牌设计系统生成 Skill

你有没有这种感觉：让 AI 生成一张图，颜色字体都对，但就是「没那味儿」？

问题不在 AI 不够强——在于它根本不知道你的品牌长什么样。

今天挖到一个让我眼前一亮的开源 Skill：hue。

一句话说清它：给 AI 一个网址 / 品牌名 / 截图，它能把这个品牌的整个设计语言学出来，变成一套完整的设计系统。

具体能提取什么？
– 色彩 token：主色、辅色、亮暗模式全覆盖
– 字体体系：标题 / 正文字体家族
– 间距 & 布局规范
– 组件风格：按钮、表单、卡片都带设计原则
– Icon Kit 推荐
– Hero 区域布局配方

更牛的是——它还会输出一个 design-model.yaml 文件，之后你的 AI 在任何 session 里生成的 UI，都会遵循这套语言。两次生成的页面，视觉上天然一致。

团队里有 5 个设计师在用同一套 hue 规则？理论上 AI 产出的页面风格就是统一的——这在以前要靠严格的设计规范文档，现在 AI 直接学会了。

怎么用？

安装只需要一条 git clone：

git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

然后跟 Claude Code / Codex 随便聊：
– “根据 cursor.com 生成一套设计 Skill”
– “给我做一个类似 Raycast 的品牌设计语言”
– “分析这张截图，生成 hue skill”

它会自动触发分析流程，输出完整设计系统文件。

官方给了一个很戳人的 example：用 hue 分析了 Vercel、Linear、Raycast 这些产品网站，生成的设计系统直接可用。GitHub 上还有 17 个品牌案例可以参考（16 个虚构 + 1 个真实案例）。

适合谁用？
– 独立开发者 / indie hacker，不想自己从头搭设计系统
– 产品经理，想快速验证某个产品风格
– AIGC 创作者，想让 AI 生成的图片 / UI 保持风格一致

GitHub：https://github.com/dominikmartn/hue
⭐ 780 Stars，还在快速增长

GitHub: https://github.com/dominikmartn/hue