hue MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Eingaben: Marken-URL, Name oder Screenshot
Ausgaben: Token (Farbe, Typ, Abstand), Komponentenbibliothek, Hell/Dunkel, Heldenrezepte, Icon-Kit
Erzeugt einen wiederverwendbaren Claude-Skill pro Marke
17 Beispielmarken im Repo (Atlas, Velvet, …) als Referenz
Einfaches SKILL.md-Format; Funktioniert mit Claude Code und Codex

Live-Demo

In der Praxis

hue-brand-skill.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "hue-brand-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/hue",
          "~/.claude/skills/hue"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add hue-brand-skill -- git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: hue

Leiten Sie ein Designsystem von der Website eines Mitbewerbers ab

👤 Gründer und Designer entwickeln schnell Prototypen für ein Produkt ⏱ ~20 min beginner

Wann einsetzen: Sie lieben die Ästhetik einer Website und möchten ein Einstiegssystem in die gleiche Richtung.

Voraussetzungen

Fertigkeit installiert — Git-Klon https://github.com/dominikmartn/hue ~/.claude/skills/hue

Ablauf

Zeigen Sie auf eine URL

Erstellen Sie einen Design-Skill voncursor.com.✓ Kopiert

→ Die Ausgabe umfasst Farbpalette, Typografiepaar, Abstandsskala, Komponenten und eine generierte SKILL.md
Vorschau

Rendern Sie einen Beispielhelden mit dem neuen System.✓ Kopiert

→ Das HTML-Beispiel zeigt Token im Kontext
Als Fertigkeit installieren

Speichern Sie den generierten Marken-Skill unter ~/.claude/skills/brand-<name>/.✓ Kopiert

→ SKILL.md registriert; Zukünftige Aufforderungen greifen die Marke auf

Ergebnis: Eine wiederverwendbare Markenstimme, die Ihr Agent auf jede nachfolgende UI-Aufgabe anwendet.

Fallstricke

Die Marke einer anderen Person wörtlich verwenden — Behandeln Sie es als Ausgangspunkt und optimieren Sie die Token vor dem Versand

Kombinieren mit: claude-code-design-skills

Reverse Engineering eines Screenshots in ein Designsystem

👤 Designer mit Referenzbildern, aber noch keinem System ⏱ ~15 min beginner

Wann einsetzen: Sie haben einen Dribbble-Schuss, den Sie lieben, und möchten, dass er in Ihrer App aussieht.

Ablauf

Füttere das Bild

Generieren Sie aus diesem Screenshot einen Farbton-Skill.✓ Kopiert

→ Farben bemustert; Typfamilie abgeleitet; Abstandsmaßstab vorgeschlagen
Iterieren

Den Akzent um 15 % abdunkeln und die Abstände auf 4/8/12/16 verkleinern.✓ Kopiert

→ Token regeneriert

Ergebnis: Ein sauberes, benutzerfreundliches System aus einer einzigen Referenz.

Fallstricke

Extrahieren einer Palette aus einem JPEG mit aggressiver Komprimierung — Bevorzugen Sie PNG- oder SVG-Quellen für die Palettenextraktion

Generieren Sie markenspezifische Fähigkeiten für ein mandantenfähiges Produkt

👤 Teams versenden White-Label-Benutzeroberflächen ⏱ ~60 min intermediate

Wann einsetzen: Sie haben 5 Kunden und benötigen 5 markengerechte Themes ohne Klonarbeiten.

Ablauf

Batch-Generierung

Generieren Sie für jede Kundenmarken-URL einen Farbton-Skill unter ~/.claude/skills/brand-<slug>/.✓ Kopiert

→ N-Fähigkeiten mit konsistenter Struktur erstellt
Bewerben Sie sich pro Mieter

Wenn Sie eine Benutzeroberfläche für Mandant X erstellen, aktivieren Sie brand-X, bevor Sie Code schreiben.✓ Kopiert

→ Der Agent wendet automatisch die richtigen Token an

Ergebnis: White-Label-Themen, die Sie über die Aktivierung von Fertigkeiten austauschen können.

Kombinieren mit: claude-code-design-skills

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

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

Verwenden Sie Hue-Token, wenn Sie Figma-Frames in Code konvertieren

Wenden Sie Brand-Acme-Tokens an, wenn Sie diesen Figma-Frame in Next.js konvertieren.✓ Kopiert

hue-brand-skill + magic-ui-mcp

Wählen Sie Magic-UI-Komponenten aus und optimieren Sie sie über Farbton-Tokens

Installieren Sie Magic UI Blur-Fade und färben Sie es mit Brand-Acme-Akzent.✓ Kopiert

hue-brand-skill + claude-design-auditor-skill

Überprüfen Sie, ob die generierte Marke den Kontrast und alle Regeln erfüllt

Prüfen Sie die hellen und dunklen Paletten von brand-acme für WCAG AA.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
hue:generate (SKILL)	URL \| brand name \| screenshot + optional notes	Einführung eines neuen Produkts oder beim Onboarding der Marke eines Kunden	0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Keiner
Tokens pro Aufruf: Mäßig; generierte Artefakte summieren sich
Kosten in €: Frei
Tipp: Einmal generieren; Verwenden Sie die daraus resultierenden Fertigkeiten pro Marke sitzungsübergreifend wieder.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keine Anmeldeinformationen

Datenabfluss: Wenn eine URL-Eingabe verwendet wird, ruft der Skill die URL ab. Screenshots bleiben lokal.

Durch die Markenextraktion aus einer URL wird keine Lizenz für das geistige Eigentum von irgendjemandem vergeben – Nutzung als Inspiration, nicht direkte Reproduktion.
Screenshots anderer Produkte unterliegen ihrem Urheberrecht. Generieren Sie Ihre eigene Marke, klonen Sie nicht ihre.

Fehlerbehebung

Häufige Fehler und Lösungen

Die generierte Palette sieht matschig aus

Tendenz zur SVG/PNG-Referenz; JPEGs verlieren an Sättigung. Oder stellen Sie Sechskantanker bereit, die die Fertigkeit berücksichtigen soll.

Prüfen: Inspect generated tokens.json for the flagged colors

Die Fertigkeit pro Marke wird nicht aktiviert

Die Beschreibung von SKILL.md muss beschreiben, wann ausgelöst werden soll. Stellen Sie sicher, dass die Beschreibung der Titelseite den Markennamen enthält.

Prüfen: head ~/.claude/skills/brand-<name>/SKILL.md

Im Dunkelmodus versagt der Kontrast

Bitten Sie den Farbton, sich mit einem 11y-First-Dark-Modus zu regenerieren. Neutrale außer Kraft setzen.

Prüfen: Run claude-design-auditor on the dark variants

Alternativen

hue vs. andere

Alternative	Wann stattdessen	Kompromiss
claude-code-design-skills	Sie müssen einen Rahmen konvertieren. Sie haben bereits eine Marke	Erzeugt keine Marke – konsumiert eine
magic-ui-mcp	Sie wollen Komponenten von der Stange, kein Markensystem	Bibliothek, nicht Sprache
claude-design-auditor-skill	Sie möchten ein bestehendes Design bewerten, nicht eines erstellen	Wertet aus, generiert nicht

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen