/ Verzeichnis / Playground / hue
← Alle Server ↗ GitHub
● Community dominikmartn ⚡ Sofort

hue

von dominikmartn · dominikmartn/hue

Geben Sie eine Marke ein (URL, Name oder Screenshot) → erhalten Sie eine vollständige Designsprache: Token, Typografie, Abstände, Hell/Dunkel, Heldenrezepte, Icon-Kit und eine generierte Designsystem-Fähigkeit.

dominikmartn/hue ist eine Open-Source-Fähigkeit von Claude, die jede Markenreferenz in ein vollständiges Designsystem verwandelt. Richten Sie es auf Cursor.com oder Raycast, fügen Sie einen Screenshot ein oder benennen Sie eine Stimmung – es analysiert und gibt Farb-, Typografie- und Abstands-Tokens, eine kleine Komponentenbibliothek, Hell-/Dunkel-Varianten, Heldenrezepte und ein passendes Icon-Kit aus. Das Designsprachenpaket umfasst YAML-Modelldateien und Beispiel-HTML-Landingpages; Es generiert außerdem einen Claude-Skill pro Marke, den Sie sitzungsübergreifend wiederverwenden können, sodass Ihr Agent automatisch bei der Marke bleibt.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

hue-brand-skill.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

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.

Ablauf
  1. 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
  2. Vorschau
    Rendern Sie einen Beispielhelden mit dem neuen System.✓ Kopiert
    → Das HTML-Beispiel zeigt Token im Kontext

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
  1. Füttere das Bild
    Generieren Sie aus diesem Screenshot einen Farbton-Skill.✓ Kopiert
    → Farben bemustert; Typfamilie abgeleitet; Abstandsmaßstab vorgeschlagen
  2. 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
  1. 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

WerkzeugEingabenWann aufrufenKosten
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.

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
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

AlternativeWann stattdessenKompromiss
claude-code-design-skillsSie müssen einen Rahmen konvertieren. Sie haben bereits eine MarkeErzeugt keine Marke – konsumiert eine
magic-ui-mcpSie wollen Komponenten von der Stange, kein MarkensystemBibliothek, nicht Sprache
claude-design-auditor-skillSie möchten ein bestehendes Design bewerten, nicht eines erstellenWertet aus, generiert nicht

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen