Jeder UI-Build sieht gleich aus. Claude Code schreibt funktionierenden Code, aber ohne Brand-Kontext greift die KI auf generische Defaults zurück. Buttons sind standard-blau, die Typografie ist neutral, und deine Brand ist nirgends erkennbar. Du korrigierst manuell, prompt für prompt. Das kostet Zeit, die du nicht hast.
hue löst genau dieses Problem. Du installierst den Skill einmalig, übergibst deine Brand-Parameter, und ab dann baut Claude Code automatisch im richtigen Stil.
Was ist der hue-Skill?
hue ist ein Open-Source-Skill für Claude Code und Codex. Der Skill lernt deine Brand: Farben, Typografie, Logo-Konventionen, Abstände. Danach generiert jede neue UI direkt in deinem Design-Stil, ohne weitere Anweisung.
Das Besondere an hue: Du beschreibst deine Design-Entscheidungen nicht jedes Mal neu. Du definierst sie einmalig in einer Konfigurationsdatei. hue liest diese Datei automatisch und bringt den Kontext in jede Claude-Session.
Der Skill richtet sich an Founder, Indie-Devs und Designer, die eine feste Brand haben. Wenn du ein SaaS baust, ein Dashboard entwickelst oder eine App mit konsistentem Look brauchst, ist hue ein sinnvolles Werkzeug.
Wichtig: hue ist kein visueller Editor. Es ist ein kontextueller Skill. Die Stärke liegt nicht im Generieren von Designs, sondern im Einhalten deiner bereits getroffenen Entscheidungen.
Installation und Setup in der Praxis
Der Installationsprozess folgt dem Standard für Claude-Code-Skills:
# Skill aus dem Repository installieren
claude skills add dominikmartn/hue
# Brand-Konfiguration initialisieren
claude hue init
Nach hue init führt der Skill dich durch einen kurzen Setup-Dialog. Du gibst deine Primär- und Akzentfarben an, wählst Schriftfamilien aus und legst Abstands-Tokens fest. Das Ergebnis ist eine hue.config.json in deinem Projektordner.
Ab diesem Punkt gilt: Sagst du Claude Code "Erstelle eine Login-Seite", liest die KI automatisch deine Konfiguration. Farben, Fonts und Abstände stimmen ohne manuelle Korrektur.
Jedes Projekt bekommt seine eigene hue.config.json. Das ist bewusst so gestaltet. Wer mehrere Produkte mit unterschiedlichen Brands betreibt, hält die Konfigurationen sauber getrennt.
Praxis-Beispiel: Komponenten konsistent bauen
Stell dir vor, du entwickelst ein SaaS-Dashboard. Deine Brand-Farben sind tiefes Marineblau und warmes Beige. Ohne hue musst du bei jeder neuen Komponente den Kontext liefern: "Nutze #1C2B5E als Primärfarbe, Manrope Bold für Headlines, 8px-Raster..."
Mit hue reicht ein einfacher Prompt:
"Erstelle eine Pricing-Card-Komponente für das Pro-Paket."
Die KI zieht die Brand-Daten aus der Konfigurationsdatei und generiert eine Komponente, die direkt zu deiner Brand passt. Keine Copy-Paste-Fehler, keine Farbabweichungen.
Besonders spürbar wird der Vorteil bei wiederkehrenden Aufgaben. Du baust zehn neue Screens in einer Woche. Ohne hue wären das zehn manuelle Kontextkorrekturen. Mit hue sind es null.
Der Skill ist außerdem teamtauglich. Wenn mehrere Personen oder verschiedene KI-Sessions an derselben Codebasis arbeiten, sorgt die geteilte Konfigurationsdatei für Konsistenz. Alle bauen nach denselben Regeln.
Wann lohnt sich hue für dich?
hue ist nicht für jedes Projekt sinnvoll. Hier sind die Situationen, in denen der Skill echten Mehrwert liefert.
Du hast eine definierte Brand. Wenn deine Farben, Schriften und Abstände festgelegt sind, lohnt sich der Setup. Bei Projekten ohne klare Brand-Vorgaben bringt hue wenig, weil die Konfiguration leer oder willkürlich bleibt.
Du baust regelmäßig neue UI-Komponenten. Wer täglich neue Screens oder Komponenten entwickelt, amortisiert den einmaligen Setup-Aufwand schnell. Einmal konfigurieren, dauerhaft profitieren.
Du arbeitest mit mehreren Entwicklern oder Agenten. Wenn verschiedene Sessions an einer Codebasis arbeiten, sorgt hue für Konsistenz. Alle nutzen dieselbe Konfiguration und dieselben Design-Tokens.
Du willst Design-Overhead reduzieren. hue ersetzt keinen Designer. Aber es reduziert die Zeit, die du mit manuellen Style-Korrekturen verbringst. Das ist besonders für kleine Teams oder Solopreneure relevant.
Wenn du am Anfang stehst und deine Brand noch in Bewegung ist, warte mit dem Setup. hue macht am meisten Sinn, wenn dein Design-System stabil ist. Sonst aktualisierst du die Konfiguration zu oft.
Für einen anderen Ansatz bei design-intensiven Projekten lohnt sich auch ein Blick auf den ui-ux-pro-max-skill: Professionelles UI-Design mit Claude Code. Beide Skills verfolgen unterschiedliche Strategien und können sich ergänzen.
FAQ
Muss ich coden können, um hue einzurichten? Nein. Die Konfiguration ist JSON-basiert und gut dokumentiert. Du befüllst Farbcodes, Font-Namen und Abstands-Werte. Das schafft jeder, der schon mal eine CSS-Variable gesetzt hat. Tiefes Coding-Wissen ist nicht nötig.
Funktioniert hue auch mit anderen KI-Tools? Laut Dokumentation unterstützt hue neben Claude Code auch Codex. Der primäre Anwendungsfall ist aber Claude Code, dort ist die Integration am weitesten entwickelt.
Was passiert, wenn sich meine Brand ändert?
Du aktualisierst einfach die hue.config.json. Ab dem nächsten Prompt nutzt Claude Code die neuen Werte. Bestehende Komponenten migriert hue nicht automatisch. Das bleibt manuelle Arbeit oder ein separater Refactoring-Prompt.
hue adressiert ein echtes Problem im KI-gestützten UI-Workflow: fehlende Brand-Konsistenz zwischen Sessions. Der Ansatz, Design-Kontext einmal zu definieren und danach automatisch zu nutzen, ist pragmatisch. Für Solopreneure und kleine Teams mit stabiler Brand ist der Skill einen Test wert.
Marcel Porcher, newways.ai
Komm in die kostenlose Claude Business Community: Dort lernst du Claude, Automatisierung, Co-Work, Claude Code, App-Building und Agent-Coding. Zeit sparen, Kosten senken, Business skalieren: Jetzt kostenlos beitreten