作者 dominikmartn · dominikmartn/hue
Feed色调品牌（网址、名称或屏幕截图）→获得完整的设计语言：令牌、排版、间距、浅色/深色、英雄食谱、图标套件和生成的设计系统技能。
dominikmartn/hue是一项开源Claude技能，可将任何品牌参考转化为完整的设计系统。将其指向cursor.com或Raycast ，粘贴屏幕截图或命名心情—它分析并输出颜色+排版+间距令牌、小型组件库、浅色/深色变体、英雄食谱和匹配的图标套件。 设计语言包包括YAML模型文件和示例HTML登录页面；它还生成每个品牌的Claude技能，您可以在各个会话中重复使用，以便您的代理自动保持品牌状态。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"hue-brand-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
],
"_inferred": false
}
}
}打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。
{
"mcpServers": {
"hue-brand-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
],
"_inferred": false
}
}
}Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。
{
"mcpServers": {
"hue-brand-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
],
"_inferred": false
}
}
}点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。
{
"mcpServers": {
"hue-brand-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
],
"_inferred": false
}
}
}格式与 Claude Desktop 相同。重启 Windsurf 生效。
{
"mcpServers": [
{
"name": "hue-brand-skill",
"command": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
]
}
]
}Continue 使用服务器对象数组，而非映射。
{
"context_servers": {
"hue-brand-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/dominikmartn/hue",
"~/.claude/skills/hue"
]
}
}
}
}加入 context_servers。Zed 保存后热重载。
claude mcp add hue-brand-skill -- git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。
何时使用： 您喜欢网站的美学，并希望有相同方向的入门系统。
结果： 客服代表将可重复使用的品牌语音应用于后续的每个UI任务。
何时使用： 您有一个您喜欢的Dribbble镜头，并希望在您的应用程序中找到它的外观。
结果： 来自单个参考的干净，可拥有的系统。
何时使用： 您有5个客户，需要5个品牌主题，无需克隆工作。
结果： 您可以通过技能激活来交换白标主题。
将Figma帧转换为代码时使用色调令牌
验证生成的品牌通过对比度+ a11y规则
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| hue:generate (SKILL) | URL | brand name | screenshot + optional notes | 新产品的开始或客户品牌的引导 | 0 |
生成的调色板看起来很泥泞偏向SVG/PNG引用； JPEG失去饱和度。或者提供技能应该尊重的六角锚。
Inspect generated tokens.json for the flagged colors按品牌技能未激活SKILL.md描述必须描述何时触发；确保前置描述包括品牌名称。
head ~/.claude/skills/brand-<name>/SKILL.md深色模式下对比度失效要求色调使用11y-first深色模式再生；覆盖中性色。
Run claude-design-auditor on the dark variants| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| claude-code-design-skills | 您有一个要转换的框架；您已经有一个品牌 | 不产生品牌—消耗一个 |
| magic-ui-mcp | 您想要现成的组件，而不是品牌系统 | 图书馆，而不是语言 |
| claude-design-auditor-skill | 您想评估现有的设计，而不是生产一个 | 评估，不生成 |