/ ディレクトリ / プレイグラウンド / hue
● コミュニティ dominikmartn ⚡ 即起動

hue

作者 dominikmartn · dominikmartn/hue

色相にブランド (URL、名前、またはスクリーンショット) をフィード → 完全なデザイン言語を取得します: トークン、タイポグラフィー、間隔、明暗、ヒーローのレシピ、アイコン キット、生成されたデザイン システム スキル。

dominikmartn/hue は、あらゆるブランド参照を完全なデザイン システムに変えるオープンソースの Claude スキルです。 Cursor.com または Raycast にポイントし、スクリーンショットを貼り付けるか、ムードに名前を付けると、色 + タイポグラフィ + スペース トークン、小さなコンポーネント ライブラリ、明るい/暗いバリアント、ヒーローのレシピ、および一致するアイコン キットが分析されて出力されます。 デザイン言語パッケージには、YAML モデル ファイルとサンプル HTML ランディング ページが含まれています。 また、セッション間で再利用できるブランドごとのクロード スキルも生成されるため、エージェントは自動的にブランドを維持できます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

hue-brand-skill.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %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 を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "hue-brand-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "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 で削除。

ユースケース

実用的な使い方: hue

競合他社のサイトからデザイン システムを派生する

👤 創設者とデザイナーが製品のプロトタイピングを迅速に作成する ⏱ ~20 min beginner

使うタイミング: あなたはサイトの美しさを気に入っており、同じ方向性のスターター システムを望んでいます。

前提条件
  • スキルがインストールされています — git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
フロー
  1. URL をポイントする
    Cursor.com からデザイン スキルを作成します。✓ コピーしました
    → 出力には、カラー パレット、タイポグラフィ ペア、間隔スケール、コンポーネント、生成された SKILL.md が含まれます。
  2. プレビュー
    新しいシステムを使用してサンプル ヒーローをレンダリングします。✓ コピーしました
    → コンテキスト内のトークンを示す HTML サンプル
  3. スキルとしてインストールする
    生成されたブランド スキルを ~/.claude/skills/brand-<name>/ に保存します。✓ コピーしました
    → SKILL.md が登録されました。 今後のプロンプトではブランドが選択されます

結果: エージェントが後続のすべての UI タスクに適用する再利用可能なブランド ボイス。

注意点
  • 他人のブランドをそのまま使用する — これを出発点として扱い、出荷前にトークンを調整します
組み合わせ: claude-code-design-skills

スクリーンショットをリバースエンジニアリングしてデザインシステムに取り込む

👤 デザイナーは参照画像を持っていますが、システムはまだありません ⏱ ~15 min beginner

使うタイミング: お気に入りの Dribbble ショットがあり、その外観をアプリに反映させたいと考えています。

フロー
  1. 画像をフィードする
    このスクリーンショットから色相スキルを生成します。✓ コピーしました
    → 色をサンプリングしました。 推論されたタイプファミリー。 提案された間隔スケール
  2. 反復する
    アクセントを 15% 暗くし、間隔を 4/8/12/16 に狭めます。✓ コピーしました
    → 再生成されたトークン

結果: 単一のリファレンスから作成されたクリーンで所有可能なシステム。

注意点
  • 積極的な圧縮を使用して JPEG からパレットを抽出する — パレット抽出には PNG または SVG ソースを優先します

マルチテナント製品のブランドごとのスキルを生成する

👤 ホワイトラベル UI を出荷するチーム ⏱ ~60 min intermediate

使うタイミング: 顧客が 5 人いて、複製作業を行わずに 5 つのブランド内テーマが必要であるとします。

フロー
  1. バッチ生成
    顧客のブランド URL ごとに、~/.claude/skills/brand-<slug>/ の下に色相スキルを生成します。✓ コピーしました
    → 一貫した構造で生み出されるNスキル
  2. テナントごとに申し込む
    テナント X の UI を構築する場合は、コードを記述する前にブランド X をアクティブ化します。✓ コピーしました
    → エージェントは正しいトークンを自動的に適用します

結果: ホワイトラベルのテーマは、スキルのアクティベーションによって交換できます。

組み合わせ: claude-code-design-skills

組み合わせ

他のMCPと組み合わせて10倍の力を

hue-brand-skill + claude-code-design-skills

Figma フレームをコードに変換するときに色相のトークンを使用する

この Figma フレームを Next.js に変換するときに、brand-acme トークンを適用します。✓ コピーしました
hue-brand-skill + magic-ui-mcp

Magic UI コンポーネントを選択し、色相トークンを介して調整します

Magic UI ブラーフェードをインストールし、ブランドアクメのアクセントで色付けします。✓ コピーしました
hue-brand-skill + claude-design-auditor-skill

生成されたブランドがコントラスト + a11y ルールに合格することを確認する

WCAG AA の brand-acme の明るいパレットと暗いパレットを監査します。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
hue:generate (SKILL) URL | brand name | screenshot + optional notes 新製品の開始時または顧客のブランドの導入時 0

コストと制限

運用コスト

APIクォータ
なし
呼び出しあたりのトークン
適度; 生成されたアーティファクトが合計される
金額
無料
ヒント
一度生成します。 結果として得られるブランドごとのスキルをセッション全体で再利用します。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: 資格情報がありません
データ送信先: URL 入力が使用される場合、スキルは URL を取得します。 スクリーンショットはローカルに残ります。

トラブルシューティング

よくあるエラーと対処法

生成されたパレットが濁って見える

SVG/PNG 参照への偏見。 JPEG は彩度を失います。 または、スキルが尊重する六角アンカーを提供します。

確認: Inspect generated tokens.json for the flagged colors
ブランドごとのスキルが発動しない

SKILL.md の記述には、いつトリガーするかを記述する必要があります。 前付の説明にブランド名が含まれていることを確認してください。

確認: head ~/.claude/skills/brand-<name>/SKILL.md
ダークモードではコントラストが効かない

a11y-first ダークモードで色相を再生成するように依頼します。 ニュートラルをオーバーライドします。

確認: Run claude-design-auditor on the dark variants

代替案

hue 他との比較

代替案代わりに使う場面トレードオフ
claude-code-design-skills変換するフレームがあります。 あなたはすでにブランドを持っていますブランドを生成しない - ブランドを消費する
magic-ui-mcpブランド システムではなく、既製のコンポーネントが必要です言語ではなく図書館
claude-design-auditor-skillデザインを作成するのではなく、既存のデザインを評価したい評価はするが生成はしない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る