Voyage Digital
    Tools· Design & Kreativ

    ux-designer-skill

    Externes Skill-Repository, das Claude Code kuratiertes UX/UI-Designwissen mitgibt: Layout, Typografie, Farbe, WCAG-2.2-AA-Konformität sowie UX-Review-Kriterien für bestehende Oberflächen.

    gestaltendprüfendausführbarOpen Source
    Quellcode
    Repository klonen und Skill nach ~/.claude/skills/ kopieren, z. B. git clone https://github.com/szilu/ux-designer-skill.git ~/.claude/skills/ux-designer
    Zum Anbieter
    UX

    Beschreibung

    Der Skill lädt Claude Code mit Arbeitswissen zu modernem Interface-Design: Layout-Systeme, Typografie-Skalen, Farbtheorie, responsive Muster und Interaktionsdesign. Die Dokumentation deckt unter anderem WCAG-2.2-AA-Konformität, Typografie, Farbe, Abstände, Hierarchie, Navigation, Formulare und Eingaben, Mobile UX, UX-Copy, Nutzerforschung, Design-Systeme sowie KI-typische UX-Muster ab.

    Praktisch wirkt der Skill in zwei Richtungen. Beim Entwerfen neuer Komponenten hilft er bei Entscheidungen wie Modal versus Inline-Erweiterung oder wann progressive Offenlegung sinnvoll ist statt kritische Informationen zu verstecken. Beim Review bestehender Oberflächen prüft er aus UX-Sicht, etwa zu kleine Touch-Ziele, fehlende Fokus-Zustände, zu geringen Textkontrast oder Interaktionsmuster, die Nutzererwartungen brechen.

    Für Voyage Digital ist der Skill eine Ergänzung zu den bestehenden Frontend- und Design-Skills, wenn zusätzliches kuratiertes UX-Referenzwissen in einer Claude-Code-Session gebraucht wird, ohne dass er das interne Design-System ersetzt.

    Stärken

    Breite Referenzbasis
    Synthetisiert Leitlinien aus 19 anerkannten Quellen, darunter Nielsen Norman Group, WCAG 2.2, Material Design, Apple HIG und das Baymard Institute.
    Kontexteffizient aufgebaut
    Die schlanke SKILL.md mit 297 Zeilen bleibt im Kontext, die 24 Referenzdateien mit rund 10.700 Zeilen werden nur bei Bedarf nachgeladen.
    Zwei Einsatzrichtungen
    Unterstützt sowohl den Entwurf neuer Komponenten als auch das Review bestehender Oberflächen.
    Eingebaute Anti-Pattern-Liste
    23 dokumentierte Anti-Patterns verweisen jeweils direkt auf die Referenzdatei mit der passenden Lösung.
    Deckt Spezialfälle ab
    Referenzen reichen über Standardthemen hinaus bis zu Multiplayer- und Canvas-Interfaces sowie KI-typischen UX-Mustern wie Chat und Copiloten.

    Einschätzung

    KI-Funktionen

    • Interface-Entwurf Unterstützt beim Design neuer Interfaces und Komponenten nach etablierten Mustern.
    • UX-Review Prüft bestehende UI/UX und Frontend-Code auf Probleme.
    • Barrierefreiheit Wendet WCAG-2.2-AA-Standards an.
    • Interaktions- und Formulardesign Begleitet Interaktionsdesign, Formulargestaltung und Navigation.
    • Mobile und Responsive Berät zu Mobile-First- und responsiven Ansätzen.
    • UX-Copy Formuliert UI-Texte und Microcopy.
    • Collaborative- und Canvas-Apps Unterstützt beim Design von Multiplayer- und Canvas-basierten Anwendungen.
    • KI-Interfaces Hilft beim Bau von KI-gestützten Oberflächen wie Chat, Copiloten und Agenten.
    • Ethik-Check Bewertet Designs auf Dark Patterns und ethische Konformität.

    Wofür geeignet

    • Teams, die Claude Code beim Entwurf neuer UI-Komponenten mit fundiertem Best-Practice-Wissen statt Bauchgefühl ausstatten wollen
    • Code-Reviews aus UX-Perspektive, etwa Touch-Ziele, Fokus-Zustände und Kontrast
    • Projekte, die WCAG-2.2-AA-Konformität von Beginn an mitdenken müssen
    • Ergänzung zu bestehenden Frontend-Skills, wenn zusätzliches kuratiertes UX-Wissen als Kontext gebraucht wird

    Einschränkungen und Hinweise

    • Community-Projekt Kein offizielles Anthropic-Werkzeug, sondern ein von einem Drittanbieter gepflegtes GitHub-Repository ohne dokumentierten Update-Mechanismus.
    • Manuelle Installation Kein Marketplace-Eintrag, der Skill wird per Kopieren oder Symlink in das lokale Skills-Verzeichnis eingebunden.
    • Kein Ersatz für ein Design-System Liefert kuratiertes Referenzwissen, ersetzt aber kein produktspezifisches Design-System oder bestehende Token-Bibliotheken.

    Quick Start

    1. Repository klonen, zum Beispiel mit git clone https://github.com/szilu/ux-designer-skill.git.
    2. Das Verzeichnis ux-designer-skill/ nach ~/.claude/skills/ux-designer/ kopieren oder symlinken.
    3. In einer Claude-Code-Session den Skill mit /ux-designer aufrufen oder bei UX-Themen automatisch triggern lassen.
    4. Bei Bedarf gezielt eine der 24 Referenzdateien ansprechen, etwa zu Formularen, Barrierefreiheit oder KI-Interfaces.

    Tipps

    • Da die Referenzdateien nur bei Bedarf geladen werden, in Prompts das konkrete Thema nennen, etwa Formulare, Canvas oder Barrierefreiheit, damit die passende Datei nachgezogen wird.
    • Der Skill eignet sich auch für Reviews: bestehende Oberflächen lassen sich gegen die 23 dokumentierten Anti-Patterns prüfen.
    • Als Ergänzung zu bestehenden Frontend- und Design-Skills einsetzen, nicht als Ersatz für ein internes Design-System.

    Zugang

    Das Repository liegt öffentlich unter https://github.com/szilu/ux-designer-skill. Installation laut Repo: Repository klonen und den Skill nach ~/.claude/skills/ kopieren, zum Beispiel mit git clone https://github.com/szilu/ux-designer-skill.git ~/.claude/skills/ux-designer. Das Repository steht unter MIT-Lizenz (LICENSE-Datei im Repo-Root).

    Stand: · Angaben zu Preisen, Tarifen und Funktionen sind eine Momentaufnahme. Vor einer Entscheidung lohnt der Blick auf die Anbieterseite.

    Im Workshop wird daraus Ihre Methode.

    Wer diesen Prozess einmal laufen sieht, will als Nächstes den Agenten dahinter. Das bauen wir im Workshop Vom Prozess zum Agenten.

    Workshops ansehen

    Passend dazu

    Alle Ressourcen ansehen
    Skills

    Das E-Mail-Muster

    Erstellt responsive MJML-4.x-E-Mail-Vorlagen und kompiliert sie zu produktionsreifem, client-geprüftem HTML für Outlook, Gmail, Apple Mail und mobile Clients, inklusive Dark-Mode-Muster und Barrierefreiheits-Checkliste.

    Mehr erfahren
    HyperUI
    Tools

    HyperUI

    Framework-neutrale Sammlung aus 523 kopierfertigen Tailwind-CSS-Snippets für Anwendungs-, Marketing- und Neobrutalismus-Oberflächen, quelloffen unter MIT-Lizenz.

    Mehr erfahren
    Krea
    Tools

    Krea

    Web-Plattform und API, die mehr als 40 KI-Bild- und Videomodelle verschiedener Anbieter, darunter Flux, Veo 3 und Kling, in einer gemeinsamen Oberfläche für Generierung, Editing, Upscaling und LoRA-Training bündelt.

    Mehr erfahren
    Launch UI
    Tools

    Launch UI

    Komponenten-Bibliothek für Landingpages und Marketing-Sections auf React-, Next.js- und Tailwind-Basis, direkt kompatibel mit shadcn/ui und Radix, mit vollständigem Code im eigenen Projekt statt Page-Builder-Abo.

    Mehr erfahren
    LI
    Tools

    liquid-glass-js

    Quelloffene Vanilla-JavaScript-Bibliothek für WebGL-basierte Glaseffekte im Stil von Apples Liquid Glass, mit echter Multi-Layer-Lichtbrechung statt CSS-Unschärfe für Buttons und Container.

    Mehr erfahren
    Liquid Logo
    Tools

    Liquid Logo

    Kostenloses Open-Source-Browser-Tool, das aus einem hochgeladenen Logo per WebGL-Shader eine fließende Liquid-Metal-Animation erzeugt und wahlweise als PNG oder MP4 exportiert.

    Mehr erfahren
    MagicUI
    Tools

    MagicUI

    Bibliothek quelloffener, animierter React- und Tailwind-Komponenten als Ergänzung zu shadcn/ui, mit einmaligem Pro-Paket statt Abonnement für die volle Sammlung inklusive Vorlagen.

    Mehr erfahren
    Magnific
    Tools

    Magnific

    Node-basierte Kreativplattform mit rund 30 KI-Werkzeugen für Bild, Video, Audio und 3D, einer angebundenen Lizenz-Bibliothek von über 250 Millionen Assets und MCP-Zugriff für KI-Assistenten.

    Mehr erfahren
    Meraki UI
    Tools

    Meraki UI

    Kostenlose, quelloffene Sammlung von 228 Tailwind-CSS-HTML-Komponenten mit Dark-Mode und RTL-Unterstützung von Haus aus, interaktive Bausteine kommen mit fertig verdrahtetem Alpine.js-State.

    Mehr erfahren
    Midjourney
    Tools

    Midjourney

    KI-Plattform für Bild und Video-Generierung mit hoher ästhetischer Qualität, inklusive Moodboards und Personalization für konsistente Markenwelten.

    Mehr erfahren
    Napkin AI
    Tools

    Napkin AI

    Text-zu-Diagramm-Tool, das aus Stichpunkten oder Fließtext automatisch Infografiken, Mindmaps und Flowcharts erzeugt.

    Mehr erfahren
    Pinterest
    Tools

    Pinterest

    Visuelle Entdeckungsplattform zum Sammeln und Durchsuchen von Bildern, nützlich für Bildrecherche, Trendbeobachtung und Moodboards, mit optionalem Ads-Manager für Kampagnen.

    Mehr erfahren
    Playground AI
    Tools

    Playground AI

    KI Bildgenerierungs- und Bearbeitungsplattform mit Canvas Editor, mehreren Modellen und Style Training für konsistente Marken Visuals.

    Mehr erfahren
    React Bits
    Tools

    React Bits

    Quelloffene Bibliothek mit über 140 animierten React-Komponenten für Text-Effekte, Hintergründe und interaktive UI-Bausteine, wahlweise als JavaScript oder TypeScript mit CSS oder Tailwind, per Copy-Paste oder CLI ins Projekt übernommen.

    Mehr erfahren
    React Three Fiber
    Tools

    React Three Fiber

    React-Renderer für Three.js, mit dem sich 3D-Szenen, Shader-Effekte und WebGL-Content als deklarative React-Komponenten aufbauen lassen, bei vollem, verlustfreiem Zugriff auf die komplette Three.js-API.

    Mehr erfahren
    shadcn/ui
    Tools

    shadcn/ui

    Quelloffenes Komponentensystem für React, dessen Kommandozeile echten, editierbaren Quellcode statt eines npm-Pakets ins eigene Projekt kopiert, mit wachsendem Angebot an Helfer-Paketen für KI-gestützte Oberflächen.

    Mehr erfahren
    ShaderGradient
    Tools

    ShaderGradient

    React-Bibliothek für animierte 3D-Gradient-Hintergründe auf WebGL-Basis, konfigurierbar über typisierte Props oder eine kopierbare Web-URL, mit Figma-Plugin und Framer-Komponente für den Einsatz außerhalb von React.

    Mehr erfahren
    Skiper UI
    Tools

    Skiper UI

    Nummerierte React-Komponentenbibliothek mit aufwendigen Framer-Motion- und GSAP-Animationen für Hero-Sektionen und Marketing-Flächen, kostenlos nutzbar mit Attribution oder als Einmalkauf ohne Namensnennung.

    Mehr erfahren
    Starwind UI
    Tools

    Starwind UI

    Quelloffene Astro-Komponentenbibliothek, die rund 40 Gruppen mit etwa 193 einzelnen .astro-Dateien als eigenen, frei anpassbaren Quellcode per CLI ins Projekt kopiert, ohne React-Laufzeit vorauszusetzen, ergänzt um Skills und einen MCP-Server für KI-gestützte Workflows.

    Mehr erfahren
    Stitch
    Tools

    Stitch

    KI-Design-Tool von Google Labs, das aus Textbeschreibungen, Skizzen oder Bildern UI-Wireframes und mehrstufige Screen-Flows erzeugt, mit Export nach Figma oder als Frontend-Code.

    Mehr erfahren

    Gespräch statt Pitch

    Erst verstehen, dann entscheiden. Wir nehmen uns Zeit für ein erstes Gespräch, ohne Verkaufsdruck, ohne Verpflichtung.

    Gespräch vereinbaren