Bewährte Skills für Designer:innen
Brand Guidelines, Theme Factory, Canvas Design und UX Research: vier Skills die Design-Arbeit mit Claude Code auf ein neues Level heben.
Warum Skills für Designer:innen?
KI-Agenten wie Claude Code können viel, aber ohne spezialisierte Skills fehlt ihnen Design-Wissen. Das Ergebnis: generische Interfaces, beliebige Farbwahl, inkonsistente Typografie. Mit den richtigen Skills wird Claude zum Design-Partner der dein Branding kennt, Themes generiert, visuelle Assets erstellt und UX-Research unterstützt.
Hier sind vier Skills die deine Design-Arbeit mit Claude Code transformieren.
1. Brand Guidelines (Anthropic)
Der brand-guidelines Skill sorgt dafür, dass Claude deine Markenidentität in jeder Ausgabe einhält. Du definierst dein Branding einmal (Farben, Fonts, Abstände, Logo-Regeln) und Claude wendet es automatisch an, egal ob bei Dokumenten, Präsentationen, HTML-Seiten oder Reports.
Installation:
npx skills add https://github.com/anthropics/skills --skill brand-guidelines
Nach der Installation legst du deine Markenrichtlinien in der Skill-Konfiguration ab. Danach wendet Claude sie automatisch an:
Erstelle ein HTML-Dokument für unsere Quartalspräsentation. Nutze unser Corporate Design: Primärfarbe #0050B8, Sekundärfarbe #00BCEC, Schrift IBM Plex Sans, Logo-Abstand mindestens 24px.
Ich nutze den Brand Guidelines Skill und erstelle die Präsentation mit deinen Markenfarben. Die primäre Farbe #0050B8 kommt für Headlines und CTAs zum Einsatz, #00BCEC für Akzente. IBM Plex Sans in den Gewichtungen 400 und 600. Das Logo bekommt einen Schutzraum von 32px, also mehr als die Mindestanforderung.
Praxis-Tipp: Definiere auch Negativ-Regeln. Zum Beispiel "Niemals Logo auf farbigem Hintergrund unter 40% Kontrast" oder "Keine Schriftgröße unter 14px für Fließtext". Je präziser deine Regeln, desto konsistenter das Ergebnis.
2. Theme Factory (Anthropic)
Theme Factory generiert komplette Design-Themes mit Farbpaletten, Typografie-Paarungen und Spacing-Systemen. Der Skill bringt 10 vorgefertigte Themes mit (Arctic Frost, Golden Hour, Midnight Galaxy, Forest Canopy und mehr) und kann auch komplett neue Themes erstellen.
Installation:
npx skills add https://github.com/anthropics/skills --skill theme-factory
Das Beste: Du bekommst in Sekunden mehrere Varianten zum Vergleich.
Generiere 3 Theme-Varianten für eine Health-Tech App: eine professionell-klinische, eine warm-zugängliche und eine modern-minimalistische. Jeweils mit Farbpalette, Font-Pairing und Spacing-Skala.
Hier sind die drei Varianten:
Variante 1 "Clinical Blue": Primär #1B4D89, Akzent #4ECDC4. Font-Pairing: Inter für Body, Outfit für Headlines. 4px Basis-Spacing. Kühl, vertrauenswürdig, medizinisch.
Variante 2 "Warm Care": Primär #6B4C9A, Akzent #F7B267. Font-Pairing: Source Sans Pro für Body, DM Serif Display für Headlines. 8px Basis-Spacing. Einladend, menschlich, beruhigend.
Variante 3 "Minimal Health": Primär #1A1A2E, Akzent #E94560. Font-Pairing: Geist für Body und Headlines, unterschieden durch Gewicht. 6px Basis-Spacing. Reduziert, technisch, klar.
Soll ich eine Variante als CSS-Custom-Properties exportieren?
Praxis-Tipp: Nutze Theme Factory zusammen mit dem Brand Guidelines Skill. Generiere mit Theme Factory dein initiales Theme, verfeinere es manuell und hinterlege das Ergebnis als Brand Guideline. Danach bleibt alles konsistent.
3. Canvas Design (Anthropic)
Canvas Design ist der kreativste Skill: Claude erstellt damit programmatisch hochwertige visuelle Designs als PNG oder PDF. Poster, Diagramme, Infografiken, visuelle Manifeste. Der Skill arbeitet mit einem zweistufigen Prozess: Zuerst entwickelt er eine visuelle Philosophie, dann setzt er sie um.
Installation:
npx skills add https://github.com/anthropics/skills --skill canvas-design
Erstelle ein Event-Poster für unseren "AI Design Sprint" am 15. April. Format A3, Stil: geometrisch-modern mit unserer Primärfarbe #0050B8. Soll professionell aber energetisch wirken.
Ich entwickle zuerst die visuelle Philosophie "Geometric Energy": Dynamische Winkelformen die Bewegung und Fortschritt ausdrücken, mit #0050B8 als dominante Fläche und weißen geometrischen Akzenten. Dann setze ich das Poster um. Die Information lebt im Design selbst, nicht in Textblöcken. Ich lade passende Fonts aus dem canvas-fonts Verzeichnis und exportiere als A3-PDF und PNG.
Praxis-Tipp: Canvas Design eignet sich besonders für Social-Media-Grafiken, Konferenz-Poster und visuelle Zusammenfassungen. Für UI-Mockups oder Wireframes greifst du besser zum UX Researcher Skill.
4. UX Researcher + UI Design System (alirezarezvani)
Die zwei Skills UX Researcher Designer und UI Design System aus alirezarezvani's Sammlung decken den gesamten UX-Prozess ab: von der Nutzerforschung bis zum fertigen Design-System.
Der UX Researcher erstellt Interview-Leitfäden, generiert datenbasierte Personas, baut Journey Maps und Empathy Maps. Der UI Design System Skill kümmert sich um Design Tokens, Komponenten-Dokumentation, Responsive-Berechnungen und Developer-Handoff.
Installation:
npx agent-skills-cli add alirezarezvani/claude-skills/product-team/ux-researcher-designer npx agent-skills-cli add alirezarezvani/claude-skills/product-team/ui-design-system
Wir planen eine neue Onboarding-Strecke für unsere SaaS-App. Erstelle einen Interview-Leitfaden für 5 Nutzerinterviews und eine vorläufige Persona basierend auf unseren bisherigen Support-Tickets.
Hier ist der Interview-Leitfaden mit 12 Fragen in 4 Blöcken: Kontext (aktuelle Workflows), Pain Points (wo stockt der Einstieg), Erwartungen (was würde helfen) und Validierung (Reaktion auf unsere Ideen). Dazu die vorläufige Persona "Sarah, 34, Product Managerin" basierend auf den häufigsten Support-Ticket-Muster. Nach den Interviews verfeinern wir die Persona mit echten Daten.
Praxis-Tipp: Starte immer mit dem UX Researcher für die Problemanalyse. Erst wenn du weißt was die Nutzer brauchen, wechselst du zum UI Design System für die visuelle Umsetzung. So vermeidest du die Falle, Lösungen für Probleme zu gestalten die niemand hat.
Ergänzende Skills
Zwei weitere Skills die Designer:innen kennen sollten:
- web-design-guidelines (Vercel): Über 100 Regeln zu Accessibility, Performance und UX-Best-Practices. Prüft deinen Code gegen etablierte Web-Design-Standards, mit über 188.000 wöchentlichen Installationen einer der beliebtesten Skills überhaupt.
- UI/UX Pro Max: Eine Datenbank mit 50+ UI-Styles, 161 Farbpaletten und 57 Font-Pairings. Funktioniert mit 10 Tech-Stacks von React bis Flutter. Mehr dazu in unserem Einführungsartikel zu Skills.
Fazit: Die ideale Skill-Kombination
Für Designer:innen empfehlen wir dieses Setup:
- Brand Guidelines als Basis, damit Claude dein Corporate Design kennt
- Theme Factory für schnelle Exploration und Varianten-Vergleiche
- Canvas Design für visuelle Assets wie Poster und Grafiken
- UX Researcher für die Nutzerforschung vor dem Design
Alle vier lassen sich in wenigen Minuten installieren. Die meisten sind kostenlos und Open Source. Fang mit Brand Guidelines an, denn konsistentes Branding ist die Grundlage für alles andere.