83.3K+Download
Zur Nutzungsanleitung springen
ui-ux-pro-maxvon nextlevelbuilder

UI UX Pro Max Skill.

Ein Claude Code- und Codex-Skill für UI-Design: UI/UX-Design-Intelligenz für Web, Mobile und Desktop: Layout, Farbe, Typografie und UX-Regeln.

  • Web & UI
  • UI-Code
OpenDesign herunterladenAnleitung ansehen
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 15.922 Zeichen insgesamt

01 Was es tut

Was der ui-ux-pro-max Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

UI/UX Pro Max ist ein durchsuchbares Design-Intelligence-Skill für Web-, Mobile- und Desktop-Oberflächen. Er durchsucht 79 Stile (50 aktiv), 192 Produktpaletten mit Reasoning-Profilen, 74 Schriftpaarungen, 119 UX-Richtlinien, 105 Icons, 17 GSAP-Presets, 25 Diagrammtypen und 22 Technologie-Stacks. Nutzen Sie ihn, um Seiten zu gestalten, Farbe und Typografie auszuwählen, UI auf Barrierefreiheit und Konsistenz zu prüfen, Navigation und Animation umzusetzen oder die Nutzbarkeit zu verbessern.

Er erkennt den Stack automatisch aus package.json, pubspec.yaml oder xcodeproj und generiert ein Design-System mit optionaler Persistenz für sitzungsübergreifenden Abruf. Drei Design-Regler (Variance, Motion, Density) steuern die Ausgabe. Der Skill bietet domänenspezifische Suchen für UX, Farbe, Typografie, Icons, GSAP und stack-spezifische Umsetzungshinweise.

Was er erzeugt

  • Design-System mit Muster, Stil, Farben, Typografie, Effekten und Anti-Patterns im ASCII-, Markdown- oder JSON-Format
  • design-system/project-slug/pages/page-name.md für seitenspezifische Overrides, wenn --page übergeben wird
  • Domänenspezifische Ergebnisse (UX-Richtlinien, Farbpaletten, Schriftpaarungen, Icons, GSAP-Presets, Diagrammempfehlungen, stack-spezifische Umsetzungshinweise)
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Anforderungen Analysieren

    Produkttyp (SaaS, E-Commerce, Dashboard), Zielgruppe und Stil-Schlüsselwörter (spielerisch, minimal, Dark Mode) extrahieren und den Stack aus package.json, pubspec.yaml, xcodeproj oder app.json erkennen.

  2. 02
    Design-System Generieren

    search.py mit --design-system für neue Seiten oder Projekte ausführen.

  3. 03
    Als Master Mit Overrides Speichern

    --persist und --output-dir hinzufügen, verweisend auf den Projektstamm, um design-system/project-slug/MASTER.md zu schreiben. Seitenspezifische Overrides kommen in pages/page-name.md.

  4. 04
    Mit Domänensuchen Ergänzen

    Eine einzelne Domäne (ux, color, typography, icons, gsap, chart, landing, google-fonts) mit 2-5 aussagekräftigen Begriffen und einer Einschränkung abfragen.

  5. 05
    Stack-Richtlinien abfragen

    Verwenden Sie --stack mit dem erkannten Stack (react, nextjs, vue, swiftui, flutter usw.) für implementierungsspezifische Hinweise.

  6. 06
    Regeln vor der Auslieferung prüfen

    Lesen Sie vor der Auslieferung der App-UI references/pro-rules.md und arbeiten Sie die dort enthaltene kanonische Pre-Delivery Checklist durch, die Icon-Disziplin, Interaktions-Feedback, Kontrast im Light-/Dark-Modus, Safe-Area-Layout und Barrierefreiheit für native/mobile App-UI abdeckt.

02 Finden Sie Ihren Favoriten

Wann der ui-ux-pro-max Skill zu verwenden ist

Verwenden Sie den ui-ux-pro-max Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Entwerfen neuer Seiten oder Erstellen und Refactoring von UI-Komponenten
  • Auswahl von Farbe, Typografie, Abständen oder Layout-Systemen
  • Überprüfung der UI auf UX, Barrierefreiheit oder Konsistenz
  • Implementierung von Navigation, Animation oder responsivem Verhalten
  • Verbesserung der gefühlten Qualität und Nutzbarkeit einer Oberfläche

Grenzen kennen

  • Reine Backend-Logik, API- oder Datenbankdesign
  • Nicht-visuelle Performance-Arbeit, Infrastruktur oder DevOps
  • Nicht-visuelle Skripte, außer wenn die Aufgabe verändert, wie etwas aussieht, sich anfühlt, sich bewegt oder bedient wird

Was Sie bereitstellen sollten

  • Produkttyp und ZielgruppeSaaS, E-Commerce, Portfolio, Dashboard, Entertainment, Tool oder Produktivität, plus Altersgruppe und Nutzungskontext (Pendeln, Freizeit, Arbeit)
  • Stil-SchlüsselwörterVerspielt, lebendig, minimalistisch, Dark Mode, content-first, immersiv oder andere Adjektive, die die gewünschte visuelle Richtung beschreiben
  • Projektname für die PersistenzÜbergeben Sie -p "Project Name" an --design-system, um das design-system-Unterverzeichnis und die MASTER.md-Datei zu benennen
  • Design-Regler (optional)Drei Skalen von 1 bis 10: --variance (zentriert bis kühn/asymmetrisch), --motion (subtil bis komplexe Choreografie), --density (großzügig bis dicht/Dashboard-Abstandsskala)

03 Innerhalb des Skills

Regeln, die die ui-ux-pro-max-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Barrierefreiheit an erster Stelle

    Priorität 1 (KRITISCH). Stellen Sie einen Kontrast von 4,5:1, Alt-Texte, Tastaturnavigation und Aria-Labels sicher. Entfernen Sie niemals Fokusringe und verwenden Sie keine reinen Icon-Buttons ohne Beschriftung.

  2. Touch-Ziele mindestens 44×44px

    Priorität 2 (KRITISCH). Touch- und Interaktionsflächen müssen eine Mindestgröße von 44×44px, mindestens 8px Abstand und ein Lade-Feedback aufweisen. Verzichten Sie auf reine Hover-Abhängigkeit und sofortige Zustandswechsel (0ms).

  3. Bei leeren Ergebnissen einmal erneut versuchen

    Wenn die Suche 0 Ergebnisse liefert, versuchen Sie es einmal erneut mit einer engeren Abfrage oder einer expliziten Domain/Stack-Angabe.

  4. Kleinsten Suchmodus verwenden

    Wählen Sie --design-system für ein neues Projekt oder eine neue Seite, ein explizites --domain für ein gezieltes Anliegen oder einen Komponentenfehler, --stack für einen bekannten Implementierungs-Stack.

  5. Gehen Sie nie von einem Stack aus

    Erkennen Sie den Stack anhand von package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json oder app.json. Wenn nichts erkennbar ist und Stack-Hinweise wichtig sind, fragen Sie den Nutzer.

  6. Rufen Sie die Suche über den vollständigen Pfad auf

    Führen Sie python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" immer mit vollständigem Pfad aus, nicht relativ.

  7. Überschreiben Sie Master nicht ohne Autorisierung

    Wenn design-system/project-slug/MASTER.md existiert, überspringt --persist das Schreiben und lässt die Datei unverändert, sofern nicht --force übergeben wird.

  8. Fragen Sie das semantische Ergebnis vor dem Stack ab

    Bei Textlayout- und Kompaktkomponenten-Fehlern suchen Sie zuerst das semantische UX-Ergebnis (verwaiste Überschriftenzeile, Zeilenausgleich, Badge-Chip-Label-Umbrüche), dann den erkannten Stack für die Implementierung.

04 In Betrieb nehmen

ui-ux-pro-max in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

ui-ux-pro-max zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Allgemeine skills-CLI-Form für .claude/skills/ui-ux-pro-max/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Überprüfen Sie die zurückgegebene Domain, die Identität des Top-Ergebnisses und die Passung zu Produkt und Plattform des Nutzers, bevor Sie Suchergebnisse anwenden
  • Wiederholen Sie einmal mit einer engeren Umformulierung oder expliziter Domain/Stack, wenn die Ausgabe leer oder themenfremd ist.
  • Lesen Sie eine vorhandene MASTER.md, bevor Sie entscheiden, ob --force zur Neuerzeugung gerechtfertigt ist
  • Fragen Sie bei Accessibility-Arbeiten jeweils ein beobachtbares Ergebnis mit expliziten Accessibility-Ergebnisbegriffen ab und prüfen Sie, ob das Resultat der konkreten Interaktion oder dem WCAG-Kriterium entspricht

In OpenDesign ist ui-ux-pro-max mitgeliefert: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill-Datei
.claude/skills/ui-ux-pro-max/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 7f69fed
License
MIT Aus LICENSE.
Repository-Sterne
127.450 GitHub-Snapshot vom 14.09.2026 für das gesamte nextlevelbuilder/ui-ux-pro-max-skill Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für ui-ux-pro-max.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Wann anwendenVerwenden Sie es für UI-Struktur, visuelles Design, Interaktion und UX-Qualität. Überspringen Sie es für Backend, API, Infrastruktur.
  2. Regelkategorien nach Priorität10 Kategorien von Accessibility (KRITISCH) bis Charts (NIEDRIG) mit zentralen Prüfpunkten und Anti-Patterns
  3. Ausführen des SuchtoolsRufen Sie search.py über den vollständigen Pfad aus dem Skill-Verzeichnis auf. Erfordert Python 3.x, keine externen Abhängigkeiten.
  4. Query-VertragWählen Sie den kleinsten Suchmodus. Eine dominante Absicht, 2-5 Begriffe, Domain/Passung prüfen, bei leerem Ergebnis einmal wiederholen.
  5. Schritt 1: Nutzeranforderungen analysierenExtrahieren Sie Produkttyp, Zielgruppe, Stil-Schlagwörter und erkennen Sie den Stack aus package.json oder Äquivalent.
  6. Schritt 2: Design System generierenVerwenden Sie --design-system für neue Seiten/Projekte. Aggregiert Treffer zu Produkt, Stil, Farbe, Landing und Typografie.
  7. Schritt 2b: Design System persistierenFügen Sie --persist und --output-dir hinzu, um MASTER.md zu schreiben. Vorhandener Master wird übersprungen, sofern nicht --force autorisiert.
  8. Schritt 2c: Design-ReglerOptionale Schieberegler von 1-10 für Varianz, Bewegung, Dichte, um die --design-system-Ausgabe zu justieren.
  9. Schritt 3: Mit detaillierten Suchen ergänzenFragen Sie Produkt-, Stil-, Farb-, Typografie-, google-fonts-, Chart-, UX-, Landing-, Icons-, gsap-, React- und Web-Domains ab.
  10. Schritt 4: Stack-RichtlinienVerwenden Sie --stack mit dem erkannten Stack für implementierungsspezifische Hinweise. 22 Stacks verfügbar.
  11. Wenn eine Suche 0 Ergebnisse liefertVersuchen Sie es einmal mit einer engeren Suchanfrage erneut. Bleibt sie leer, greifen Sie auf die Prioritätstabelle zurück und informieren Sie den Nutzer.
  12. Tipps für bessere ErgebnisseEine Absicht, 2–5 Begriffe pro Suchanfrage. Einmal erneut versuchen. Verwenden Sie --design-system für Neues, --domain für Fokussiertes.
Die eigene Beschreibung des Skills
„UI/UX-Design-Intelligenz für Web, Mobil und Desktop. Dieser Skill sollte verwendet werden beim Entwerfen, Erstellen, Überprüfen oder Korrigieren von Oberflächen, einschließlich Seiten, Komponenten, Design-Systemen, Barrierefreiheit, Interaktion, responsivem Layout, Typografie, Farbe, Diagrammen und stack-spezifischer UI-Implementierung. Durchsuchbare lokale Daten: 79 durchsuchbare Stile (50 aktiv), 192 Produktpaletten und Reasoning-Profile, 74 Schrift-Kombinationen, 119 UX-Richtlinien, 105 Icons, 17 GSAP-Presets, 25 Diagrammtypen und 22 Stacks."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 15.922 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum ui-ux-pro-max Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was benötigt der Skill, um zu laufen?

Das Suchskript erfordert Python 3.x ohne externe Abhängigkeiten. Es muss über seinen vollständigen Pfad aus dem Skill-Verzeichnis mit python, python3 oder py -3 aufgerufen werden. Die README enthält Installationshinweise, falls Python fehlt.

Wie überschreibe ich das Designsystem für eine bestimmte Seite?

Übergeben Sie --page "page-name", um beim Persistieren design-system/project-slug/pages/page-name.md zu erstellen. Beim Erstellen dieser Seite liest der Agent zuerst MASTER.md und prüft dann, ob pages/page-name.md existiert. Falls ja, überschreiben deren Regeln die von Master. Andernfalls werden ausschließlich die Master-Regeln verwendet.

UI UX Pro Max

ui-ux-pro-max bei einer echten UI-Design-Aufgabe ausführen.

Das ui-ux-pro-max Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max