UI UX Pro Max mit Claude Code: Installation und Designprüfung

Viele Designer kennen dieses Problem bei KI-Oberflächen: Ein Prompt liefert einen plausiblen Entwurf, danach folgen lange Korrekturen an Farben, Abständen, Zuständen und Designsystem. Ein UI UX Pro Max Skill kann Claude Code hilfreichen Gestaltungskontext geben, bevor die Umsetzung beginnt.

UI UX Pro Max verbindet Agentenanweisungen mit durchsuchbaren Designdaten. Es unterstützt Stilwahl, Typografie, Farben, Komponenten und UX-Prüfung. Du brauchst weiterhin Produktbriefing, Markenvorgaben und eine Prüfung des Ergebnisses. Der Skill liefert Orientierung und garantiert keine fertige Oberfläche.

Dieser Leitfaden behandelt Designabläufe, aktuelle Installationsbefehle, praktische Prompts und die Übergabe für echte Projekte. Dokumentation und Releases wurden am 8. Oktober 2026 geprüft. Die Beispiele sind anpassbare Briefings und keine gemessenen Leistungsverbesserungen.

Was ist der UI UX Pro Max Skill?

UI UX Pro Max ist ein Open-Source-Design-Skill für KI-Coding-Assistenten. Seine Anweisungen führen den Assistenten zur Suche in einer mitgelieferten Design-Wissensbasis und zur Anwendung passender Hinweise. Das ergänzt deine Projektanforderungen um wiederverwendbaren Gestaltungskontext.

Die Profile für Das offizielle Repository dokumentiert Hinweise zu Stilen, Paletten, Typografie, Diagrammen, UX und Frameworks. Das Suchskript benötigt Python 3 und nutzt die Standardbibliothek. Bei einer lokalen Claude-Projektinstallation lautet der dokumentierte Skriptpfad .claude/skills/ui-ux-pro-max/scripts/search.py.

Das ist wichtig für die Fehlersuche. Eine sichtbare Anweisungsdatei belegt nicht die Ausführung des Suchskripts. Verlange Suchanfrage und zurückgegebene Empfehlungen. Ein überzeugender Stilname belegt keine Datenabfrage.

Was der aktuelle Designdatensatz enthält

Das Repository dokumentiert diese Zahlen. Sie beschreiben den Katalog und nicht die Zahl der für jede Aufgabe zu prüfenden Designs.

Die Profile für Release v2.15.0 vom 13. August 2026 war bei der Prüfung die neueste aufgeführte stabile Version. Sie unterscheidet aktive Stile von zusätzlichen Einträgen und erweitert Framework- und Barrierefreiheitshinweise. Ihre 105 Zeilen mit Icon-Hinweisen sind keine 105 eigenständigen Icon-Bibliotheken.

Bei bestehenden Produkten hat das Designsystem Vorrang vor vorgeschlagenen Farben oder Schriften. Nutze den Datensatz zum Schließen von Lücken und Vergleichen von Optionen statt zum Ersetzen vorhandener Teamentscheidungen.

UI-UX-Pro-Max-Abläufe für Designer

Der Name bezeichnet einen Skill mit mehreren Fähigkeiten. Entscheidend ist der Ablauf, den dein Projekt tatsächlich braucht.

1. Wähle die Richtung vor der Seitenerstellung

Beginne bei einem neuen Produkt mit seinen Nutzern und deren Aufgaben. Eine Finanzoberfläche für acht Stunden tägliche Nutzung braucht andere Dichte und Interaktionen als ein öffentliches Portfolio.

Lass zwei Richtungen mit ihren Abwägungen vorschlagen und wähle eine. Eine ganze Seite vor der Entscheidung über Typografie, Dichte und Hierarchie zu generieren, erschwert spätere Änderungen.

Ist dein Briefing unklar, bietet Thrives UX Researcher Designer Skill einen separaten Einstieg zur Prüfung von Nutzeraufgaben und Bedienbarkeit.

2. Ordne Design-Tokens den Komponenten zu

Liefere bei bestehenden Marken Farbrollen, Abstandsmaßstab, Typografie, Rahmen und Radien. Verlange eine Zuordnung von Tokens zu Komponenten: primäre Aktion, zurückhaltender Text und sichtbarer Tastaturfokus.

Das macht Konflikte vor der Umsetzung sichtbar. Eine plausible Karte kann die falsche Hintergrundfarbe nutzen oder neue Abstände erfinden. Thrives UI Design System Skill ergänzt die Prüfung von Oberflächenkonsistenz und Barrierefreiheitsanforderungen.

3. Erstelle eine Komponente mit ihren Zuständen

Eine einzelne Komponente ist leichter zu beurteilen als ein ganzes Dashboard. Beginne mit Projektkarte, Preiskarte oder Suchfeld. Gib echte Inhalte, lange Labels und mögliche Zustände vor.

Prüfe schmale und breite Ansichten vor dem Wiederverwenden auf der gesamten Seite. Ein Layout mit einem kurzen Titel kann bei echten Daten scheitern.

4. Prüfe die vorhandene Oberfläche

Verlange bei vorhandenen Oberflächen zuerst eine Prüfung. Benenne die Hauptaufgabe, teile Screenshots oder Browserzugang und verlange Befunde anhand sichtbaren Verhaltens.

Hilfreiche Befunde benennen Element, Nutzerwirkung und Änderung. „Barrierefreiheit verbessern“ ist zu allgemein. „Das Zusatzmenü hat keinen zugänglichen Namen und lässt sich nicht per Tastatur öffnen“ ist ein konkreter Untersuchungsauftrag.

UI UX Pro Max in Claude Code installieren

Wähle einen Installationsweg. Plugin und lokale Kopie gleichzeitig erschweren das Erkennen aktiver Anweisungen.

Option 1: Claude-Code-Plugin-Marktplatz

Das Projekt dokumentiert diese Befehle für eine interaktive Claude-Code-Sitzung:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Beachte die Installationszusammenfassung. Die aktuelle Claude-Code-Dokumentation zu Plugins erklärt, dass ein Plugin sofort aktiv werden oder /reload-plugins benötigen kann. Ein Neustart ist nicht immer nötig. Prüfe den Installed-Tab in /plugin und den vorgesehenen Geltungsbereich des Plugins.

Option 2: Projektlokale CLI-Installation

Führe dies im Projekt-Hauptverzeichnis aus:

npx ui-ux-pro-max-cli init --ai claude

Für ein global verfügbares CLI-Programm verwendet die offizielle CLI-Dokumentation folgende Befehle:

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

Das Paket heißt ui-ux-pro-max-cli; das installierte Programm heißt uipro. Ältere uipro-cli-Releases sind veraltet. Die CLI unterstützt --global für projektübergreifende Installation und --dry-run zur Vorschau der Installationsschritte. Eine globale Skill-Installation und ein global installiertes npm-Programm sind getrennte Entscheidungen.

Prüfe das Suchskript separat

Führe für den lokalen CLI-Weg Folgendes aus:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS project dashboard" --design-system -p "Thrive"

Wenn dein Python-3-Programm python heißt, verwende diesen Namen. Unter Windows kann py -3 der passende Launcher sein. Der Skriptpfad unterscheidet sich bei globalen und Plugin-Installationen. Nutze den gemeldeten Installationspfad statt pauschal den lokalen.

Lass Claude danach eine kleine Designaufgabe mit dem Skill bearbeiten und die Suchanfrage nennen. Prüfe beides: Das Skript kann Daten abrufen, und der Assistent verwendet die installierten Anweisungen tatsächlich.

Prüfe bei Fehlern Arbeitsverzeichnis, Python, Installationsziel und Skriptpfad. Ein versehentlich verschachtelter Ordner wie ui-ux-pro-max/ui-ux-pro-max/ kann einen sonst korrekten Befehl zur falschen Datei führen.

Prompt-Vorlagen für überprüfbare UI-Arbeit

A prompt such as “build a clean SaaS dashboard” leaves the audience, content, layout, states, and brand rules unspecified. The assistant has to make those decisions. The problem becomes expensive when they conflict with requirements that were never supplied.

Ein hilfreiches Briefing nennt Aufgabe, Repository-Stack, Komponentengrenze, vorhandene Designvorgaben, Zustände und Ergebnisse. Du musst nicht jeden Pixel bestimmen. Gib genug Kontext für begründete Entscheidungen und genug Grenzen für eine prüfbare Änderung.

Weitere erste Briefings bieten Thrives Prompts für Website-Oberflächen.

Beispiel: Projektkarte in React

Diese Vorlage setzt React, TypeScript und Tailwind im Projekt voraus. Ersetze sie durch deinen tatsächlichen Stack.

Use UI UX Pro Max to design a ProjectCard for Thrive's workspace.
First inspect our existing components, tokens, and package versions.
Query the skill for project-management UI guidance and report the query.

Users need to identify project status and open the right project quickly.
Use React, TypeScript, our existing Tailwind setup, and our icon library.
Keep the current brand colors and typeface. Do not add dependencies.

Include title, owner, updated date, status, and an overflow menu.
Cover loading, empty collection, long title, disabled action, and error states.
Use one column on narrow screens and adapt to the existing grid breakpoints.
Provide visible keyboard focus and accessible names for icon-only controls.

Deliver the component, example states, a short design rationale,
and the checks needed to verify behavior in this repository.

Wichtig ist die Abdeckung der Zustände. Ladeskelett, nicht verfügbare Aktion und fehlgeschlagene Anfrage gehören zum Verhalten. Sie müssen im Briefing und Review sichtbar sein, nicht erst nach der Layoutfreigabe.

Beispiel: Preiskarte in Vue

Use UI UX Pro Max to implement PricingCard.vue in our Vue 3 project.
Inspect the current Composition API conventions and design tokens first.
Use the project's existing styling and icon libraries.

Show plan name, price, billing period, features, and a select action.
Support monthly/yearly billing, a highlighted plan, and a current-plan state.
Use supplied prices only; do not invent savings or plan features.
Define props and emit a select event with the plan ID.
Keep the billing control and action usable with the keyboard.
Check narrow screens, long feature text, and unavailable plans.

Return the component, usage example, state coverage, and verification notes.
Explain any design decision that differs from our existing system.

Dies sind Briefing-Vorlagen, keine eingebauten Befehle mit Ergebnisgarantie. Prüfe generierten Code anhand der Repository-Konventionen und unterstützten Framework-Version.

Von Figma-Tokens zur Entwicklerübergabe

Stelle vorhandene Design-Tokens als JSON oder CSS-Variablen in Projektdateien bereit. Verweise Claude darauf und kläre ihre Verbindlichkeit sowie den Umgang mit fehlenden Tokens.

Die Erwähnung von Figma im Prompt belegt keinen importierten Designzugang. Datei-, Material- und Integrationszugriff müssen separat eingerichtet sein. Tokens vermitteln auch nicht sämtliche Layout-, Inhalts- und Interaktionsdetails.

Eine praktische Übergabe enthält vier Materialien:

1. Das Briefing: Nutzeraufgabe, Umfang, Screenshots oder Referenzen und Vorgaben.

2. Die Designentscheidungen: Token-Zuordnung, Layoutregeln und Gründe für Abweichungen.

3. Die Implementierung: Komponentencode und Beispiele wichtiger Zustände.

4. Das Prüfprotokoll: geprüfte Ansichten, bestätigtes Verhalten und offene Probleme.

Eine Preiskarte kann die orange Aktionsfarbe erhalten und trotzdem eine Entscheidung zum aktuellen Tarif benötigen. Dokumentiere, ob die Aktion deaktiviert wird, ihren Text ändert oder Kontoeinstellungen öffnet. Das muss in Komponente und Nutzungsbeispielen sichtbar sein.

Nutze Thrives Design Critique Skill für eine getrennte Prüfung anhand von Zielgruppe, Markenregeln und Ansicht. Für Recherchefragen bietet die Sammlung von UX-Design-Prompts weitere Briefings.

Prüfung vor dem Abschluss der Oberfläche

Nutze Skill-Hinweise als Grundlage der Prüfung. Eine generierte Komponente muss weiterhin mit echten Inhalten, Anwendungszuständen und Nutzern funktionieren.

• Vergleiche die Umsetzung mit vereinbarten Tokens und Referenzlayout.

• Prüfe schmale Ansichten, vergrößerten Text, lange Labels und realistische Datenmengen.

• Navigiere interaktive Elemente per Tastatur und prüfe sichtbaren Fokus.

• Prüfe zugängliche Namen, Feldlabels, Fehler und Ladefeedback.

• Teste nicht verfügbare Aktionen, leere Ergebnisse und fehlgeschlagene Anfragen.

• Prüfe Kontrast und Bewegungsverhalten einschließlich reduzierter Bewegung.

• Führe relevante Repository-Prüfungen aus und notiere ungeprüfte Aspekte.

Nutze den WCAG-2.2-Kurzreferenz beschreibt anwendbare Barrierefreiheitsanforderungen. Automatische Werkzeuge helfen bei der Fehlersuche, ersetzen aber keine direkte Tastatur- und Interaktionsprüfung. Ein erfolgreicher Build belegt weder Barrierefreiheit noch visuelle Übereinstimmung.

Prüfe auf Landingpages auch Überschriftenhierarchie, aussagekräftige Linktexte, lesbare Inhaltsfolge und einen klar erklärten nächsten Schritt. Thrives Prompts für Landingpage-Design helfen beim Definieren dieser Anforderungen vor der Umsetzung.

Downloadquellen, Lizenzen und Updates

Die maßgebliche Download- und Installationsquelle ist das UI-UX-Pro-Max-Projekt auf GitHub. Seine MIT-Lizenz erlaubt Änderungen und Verbreitung unter Einhaltung der Hinweispflichten. Prüfe separate Lizenzen hinzugefügter Materialien, einschließlich Schriften und Icons.

Thrives Agent-Skills-Bibliothek enthält ergänzende Design- und Entwicklungsabläufe. UI Design System, UX Researcher Designer und Design Critique unterstützen Planung und Prüfung deiner Komponenten.

Dokumentiere für gemeinsame Teaminstallationen Weg und Version. Prüfe Updates an einer kleinen repräsentativen Komponente vor dem breiten Einsatz. Halte Markentokens und Projektanforderungen unabhängig vom Skill unter Versionskontrolle.

Häufig gestellte Fragen

Ist UI UX Pro Max ein Skill oder eine Sammlung?

Es ist ein benannter Skill mit durchsuchbaren Ressourcen und mehreren Designabläufen. Stilwahl, Token-Planung, Komponentenentwicklung und UX-Prüfung sind Nutzungsarten. Ergänzende Recherche- oder Kritik-Skills können dasselbe Projekt unterstützen.

Kann ich ein vorhandenes Designsystem verwenden?

Ja. Stelle vorhandene Tokens und Komponentenregeln bereit und erkläre sie für verbindlich. Lass fehlende Regeln oder Konflikte markieren statt Ersatz erfinden. Prüfe die Umsetzung anhand der Vorgaben.

Ersetzt es UI-Design oder Barrierefreiheitsprüfung?

Nein. Der Skill gibt einem Assistenten Designhinweise. Produktentscheidungen, Nutzerrecherche, Verhaltenstests und Barrierefreiheitsprüfung bleiben nötig.

Funktioniert es nur mit Claude Code?

Nein. Die CLI unterstützt andere Assistenten, auch Codex. Dieser Leitfaden nutzt Claude-Code-Befehle. Wähle das dokumentierte Ziel deines Assistenten statt eines Claude-Ordnerpfads für eine andere Installation.

Was sollte ich zuerst ausprobieren?

Wähle eine überarbeitungsbedürftige Komponente. Gib Tokens, echte Inhalte und nötige Zustände vor. Lass den Assistenten den Skill nutzen und Entscheidungen erklären. Prüfe das Ergebnis vor der Ausweitung auf eine ganze Seite.