/ Verzeichnis / Playground / UI/UX Pro Max Skill
← Alle Server ↗ GitHub
● Community nextlevelbuilder ⚡ Sofort

UI/UX Pro Max Skill

von nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

Hör auf, Claude hässliche UIs generieren zu lassen. Dieser Skill lehrt es echtes Design — Typografie-Skalen, Spacing-Rhythmus, Farbsysteme, Barrierefreiheit — über Web, Mobile und Desktop.

UI/UX Pro Max ist ein umfassender Design-Wissens-Skill, der jedem Agent, der ihn lädt, Design-Intelligenz einhaucht. Deckt Typografie, Farbtheorie, Abstände/Grid, Motion, Barrierefreiheit (WCAG 2.2) und plattformspezifische Muster ab (Apple HIG, Material 3, Fluent). Funktioniert am besten mit shadcn/Tailwind-Ökosystemen, ist aber nicht daran gebunden.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: UI/UX Pro Max Skill

Den 'KI-generierten UI'-Look in einer bestehenden App korrigieren

👤 Devs, deren Claude-gebautetes UI generisch aussieht ⏱ ~60 min intermediate

Wann einsetzen: Deine shadcn-Ausgabe funktioniert, sieht aber von der Stange aus.

Ablauf
  1. Diagnostizieren
    Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ Kopiert
    → Per-Achse-Scorecard mit konkreten Problemen
  2. tokens setzen
    Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ Kopiert
    → Token-Tabelle
  3. Anwenden
    Update tokens.css and rerun. Diff what changed in the rendered look.✓ Kopiert
    → Engere Typografie, konsistenter Rhythmus

Ergebnis: UI, das nicht schreit 'ich wurde in 5 Minuten gemacht'.

Fallstricke
  • Über-Tokenisierung — jeder Wert wird eine Variable — Variablen für wiederholte tokens; Literale sind für Einmalanwendungen in Ordnung

Einen mobilen Screen entwerfen, der iOS HIG befolgt

👤 Devs, die plattformübergreifende Apps bauen ⏱ ~45 min intermediate

Wann einsetzen: Du hast eine iOS-Oberfläche und willst, dass sie nativ wirkt, nicht wie plattformübergreifende Suppe.

Ablauf
  1. Spezifizieren
    Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ Kopiert
    → Spec mit HIG-Referenzen
  2. Implementieren
    Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ Kopiert
    → SwiftUI-Code, der system-nativ aussieht

Ergebnis: Screen besteht den 'sieht nativ aus'-Augenschein-Test.

Fallstricke
  • Fest kodierte Farben brechen Dark Mode — System-Semantikfarben verwenden; der Skill erzwingt das

Ein Barrierefreiheits-Audit für eine Komponente durchführen

👤 Devs, die sich auf a11y-Compliance vorbereiten ⏱ ~30 min intermediate

Wann einsetzen: WCAG 2.2 AA für einen kritischen Flow nötig.

Ablauf
  1. Auditieren
    Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ Kopiert
    → Problemliste mit Schweregrad
  2. Korrigieren
    Apply fixes. Verify with screen-reader semantic outline.✓ Kopiert
    → Problemliste schrumpft; semantische Gliederung liest sauber

Ergebnis: Komponente, die Auditor + echten Benutzertest besteht.

Fallstricke
  • Auto-Fixes brechen das visuelle Layout — Nach jedem Fix neu rendern; visuellen Regressionscheck durchführen
Kombinieren mit: filesystem

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

ui-ux-pro-max-skill + open-design-skill

Design-System + markenstarke Referenzsysteme

Use UI/UX Pro Max for fundamentals + open-design for brand styles.✓ Kopiert
ui-ux-pro-max-skill + filesystem

token-Änderungen über die Codebasis anwenden

Update tokens.css and propagate; run audit.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
design_audit scope: directory or component Erste Bewertung tokens
tokens_recommend constraints (brand, platform) Design-System aufsetzen tokens
a11y_check component path Compliance-Durchlauf tokens

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
N/A
Tokens pro Aufruf
Beim ersten Audit schwer; bei Follow-ups leichter
Kosten in €
Kostenlos
Tipp
Pro-Komponente auditieren, nicht die gesamte App auf einmal

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: Read project files
Credential-Speicherung: Keine
Datenabfluss: Keine

Fehlerbehebung

Häufige Fehler und Lösungen

Recommendations clash with brand guidelines

Marken-Constraints vorab angeben; der Skill respektiert sie

Skill triggers too aggressively

Nach Verzeichnis eingrenzen oder explizit aufrufen

Alternativen

UI/UX Pro Max Skill vs. andere

AlternativeWann stattdessenKompromiss
open-design-skillMarkenstarke Design-System-Templates gewünschtWeniger Grundlagen, mehr vorgefertigte Skins
Hand-kuratierte Design-tokensDesigner ist bereits im LoopMehr Aufwand

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen