作者 dominikmartn · dominikmartn/hue
為品牌提供色調（URL、名稱或螢幕截圖）→ 獲得完整的設計語言：標記、排版、間距、明/暗、英雄配方、圖標套件和生成的設計系統技能。
dominikmartn/hue 是 Claude 的開源技能，可將任何品牌參考轉化為完整的設計系統。 將其指向cursor.com或Raycast，貼上螢幕截圖，或命名一種心情——它會分析並輸出顏色+排版+間距標記、一個小型組件庫、明暗變體、英雄配方和匹配的圖標套件。 設計語言套件包括 YAML 模型檔案和範例 HTML 登陸頁面；它還會產生每個品牌的克勞德技能，您可以在會話中重複使用，以便您的代理商自動保持品牌不變。
%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 框架轉換為程式碼時使用hue 的標記
驗證產生的品牌是否通過對比 + a11y 規則
| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| hue:generate (SKILL) | URL | brand name | screenshot + optional notes | 新產品啟動或加入客戶品牌時 | 0 |
生成的調色板看起來很混亂偏向 SVG/PNG 參考； JPEG 失去飽和度。 或提供技能應該尊重的六角錨。
Inspect generated tokens.json for the flagged colors每個品牌的技能未激活SKILL.md描述必須描述何時觸發；確保 frontmatter 描述包含品牌名稱。
head ~/.claude/skills/brand-<name>/SKILL.md深色模式下對比失敗要求色調以第一暗模式重新生成；超越中性。
Run claude-design-auditor on the dark variants| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| claude-code-design-skills | 您有一個要轉換的框架；你已經有一個品牌了 | 不產生品牌－消耗品牌 |
| magic-ui-mcp | 您需要現成的組件，而不是品牌系統 | 圖書館，而不是語言 |
| claude-design-auditor-skill | 您想要評估現有設計，而不是生產設計 | 評估，不生成 |