UI UX Pro Max Skill

Eine KI-Fähigkeit, die Designintelligenz für die Erstellung professioneller UI/UX über mehrere Plattformen und Frameworks hinweg bietet.

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Website: https://uupm.cc

Was ist das?

UI UX Pro Max ist eine KI-Fähigkeit (Context Injection Layer), die in KI-Codeassistenten wie Claude Code, Cursor, Windsurf, GitHub Copilot und über 15 weiteren geladen werden kann. Nach der Installation erweitert sie automatisch die Fähigkeit der KI, professionellen UI/UX-Code in Produktionsqualität zu generieren – ohne dass der Entwickler jedes Mal manuell Designregeln angeben muss.

Im Kern handelt es sich um eine strukturierte Wissensbasis, kombiniert mit einer Python-basierten Reasoning-Engine, die Benutzeranfragen analysiert und ein vollständiges, maßgeschneidertes Designsystem (Stil + Farben + Typografie + Layoutmuster + Anti-Muster) generiert, bevor überhaupt Code geschrieben wird.

Kernfunktionen

1. Intelligenter Designsystem-Generator (v2.0 Flaggschiff)

Die Reasoning-Engine führt eine domänenübergreifende parallele Suche durch über:

161 Produkt-/Kategorien → abgeglichen mit Layoutmustern
67 UI-Stile → bewertet nach BM25-Scoring
161 Farbpaletten → branchenspezifische Auswahl
57 Schriftpaarungen → persönlichkeitsabgestimmte Typografie
24 Landingpage-Muster → konversionsoptimierte Strukturen

Das Ergebnis ist ein vollständig strukturiertes Designsystem, das empfohlene Muster, Stil, Farben, Typografie, Schlüsseleffekte, zu vermeidende Anti-Muster und eine Checkliste vor der Auslieferung enthält.

2. 67 UI-Stile

Deckt das gesamte Spektrum moderner und Nischen-Designästhetiken in drei Kategorien ab:

49 Allgemeine Stile: Glassmorphism, Neumorphism, Brutalism, Claymorphism, Bento Grid, Dark Mode, AI-Native UI, Cyberpunk, Vaporwave, Pixel Art, Spatial UI (VisionOS) und mehr.
8 Landingpage-Stile: Hero-zentriert, Konversionsoptimiert, Feature-reiche Präsentation, Storytelling-basiert, etc.
10 BI/Analytics Dashboard-Stile: Datendicht, Executive, Echtzeit-Überwachung, Finanzen, Sales Intelligence, etc.

3. 161 Branchenspezifische Reasoning-Regeln

Regeln decken Vertikalen ab, darunter:

Tech & SaaS, Fintech, Gesundheitswesen, E-Commerce, Kreativagenturen, Lifestyle-Apps, aufstrebende Technologien (Web3, Spatial Computing, Quantum) und viele mehr.

Jede Regel kodiert: empfohlenes Layoutmuster, Stilpriorität, Farb-Mood, Typografie-Mood, Schlüsselfunktionen/Effekte und explizite Anti-Muster (z. B. "keine KI-lila/pinken Farbverläufe für Banking-Apps").

4. 99 UX-Richtlinien

Best Practices, Barrierefreiheitsstandards (WCAG AA) und Anti-Muster, die Responsivität, Hover-Zustände, Fokusindikatoren, Unterstützung für reduzierte Animationen und Kontrastverhältnisse abdecken.

5. Multi-Stack-Unterstützung (15 Tech-Stacks)

React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel.

6. Designsystem-Persistenz (Master + Overrides-Muster)

Generiert und speichert ein hierarchisches Designsystem in design-system/MASTER.md und seitenindividuelle Override-Dateien unter design-system/pages/. Dies gewährleistet eine konsistente Designsprache über Sitzungen und über Seiten desselben Projekts hinweg.

Funktionsweise

Benutzeranfrage
    │
    ▼
Domänenübergreifende Suche (5 parallele Suchen)
    │
    ▼
Reasoning Engine (BM25-Ranking + JSON-Bedingungsregeln)
    │
    ▼
Vollständige Designsystem-Ausgabe
(Muster + Stil + Farben + Typografie + Effekte + Anti-Muster + Checkliste)
    │
    ▼
KI generiert Code mit vollständigem Designkontext

Installation

Über den Claude Marketplace (Claude Code)

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

Über CLI (Empfohlen – unterstützt alle KI-Assistenten)

npm install -g uipro-cli
cd /pfad/zu/ihrem/projekt
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # Alle unterstützten Assistenten

Unterstützte KI-Assistenten: Claude Code, Cursor, Windsurf, Antigravity, GitHub Copilot, Kiro, Codex CLI, Qoder, Roo Code, Gemini CLI, Trae, OpenCode, Continue, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment.

Voraussetzungen: Python 3.x (erforderlich für das Such-/Reasoning-Skript).

Verwendung

Nach der Installation aktiviert sich die Fähigkeit automatisch, wenn Sie UI/UX-Anfragen stellen:

Erstelle eine Landingpage für mein SaaS-Produkt
Erstelle ein Dashboard für Gesundheitsanalysen
Entwerfe eine Portfolio-Website mit Dark Mode
Erstelle eine mobile App-UI für E-Commerce
Erstelle eine Fintech-Banking-App mit Dark Theme

Für Plattformen, die den Workflow-Modus verwenden (Kiro, Copilot, Roo Code):

/ui-ux-pro-max Erstelle eine Landingpage für mein SaaS-Produkt

Projektstruktur

src/ui-ux-pro-max/
├── data/*.csv          # Wissensbasis (Stile, Farben, Schriftarten, Regeln)
├── scripts/*.py        # Suchmaschine & Designsystem-Reasoning
└── templates/          # Plattformspezifische Konfigurationsvorlagen

cli/                    # CLI-Installer (generiert Dateien aus Vorlagen)
.claude/skills/         # Lokaler Installationspfad für Claude Code
docs/                   # Dokumentation
preview/                # UI-Vorschaumaterialien

Warum es wichtig ist

Den meisten KI-Codeassistenten fehlt persistentes, strukturiertes Designwissen. Ohne eine solche integrierte Fähigkeit greifen sie auf generische, inkonsistente oder "KI-aussehende" UI-Muster zurück. UI UX Pro Max löst dieses Problem, indem es:

Designentscheidungen standardisiert, bevor die Codegenerierung beginnt.
Branchenspezifische Anti-Muster kodiert, um häufige Fehler zu vermeiden.
Über alle wichtigen KI-Codierungsplattformen hinweg über einen einzigen CLI-Installer funktioniert.
Designsysteme über Sitzungen hinweg für mehrseitige Projekte beibehält.

Es fungiert effektiv als Senior UI/UX-Designer, der in Ihren KI-Assistenten integriert ist.