Explorer
KNOW-PAT-190

UI UX Pro Max — Guide d'utilisation et design system generation

Domaine
web-uiux
Type
pattern
Priorité
P1

Parent : [[INDEX-WEB-UIUX]]

UI UX Pro Max — Guide d'utilisation

Règle d'or : Quand l'utilisateur demande de l'aide UI/UX, un design system, une landing page ou une refonte visuelle, l'IA doit considérer ce guide et le catalogue associé (KNOW-PAT-192) avant de générer du code.

Qu'est-ce que UI UX Pro Max ?

UI UX Pro Max est un skill IA open-source (MIT) qui fournit une design intelligence structurée :

  • 67+ styles UI (49 généraux + 8 landing + 10 dashboard)
  • 161 palettes couleurs alignées 1:1 avec 161 types de produits
  • 73+ pairings typographiques avec imports Google Fonts
  • 25 types de graphiques pour dashboards
  • 99 UX guidelines (best practices, anti-patterns, accessibilité)
  • 161 règles de raisonnement sectorielles (v2.0)
  • 22+ tech stacks couverts (React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, JavaFX, etc.)

Sources officielles :

Installation rapide

Via CLI (recommandé)

npm install -g ui-ux-pro-max-cli
cd /path/to/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai all         # Tous les assistants

Global (tous les projets)

uipro init --ai claude --global   # ~/.claude/skills/
uipro init --ai cursor --global   # ~/.cursor/skills/

Prérequis

  • Python 3.x pour le moteur de recherche BM25
  • Node/npm pour le CLI

Mode d'usage

Skill Mode (auto-activation)

Le skill s'active automatiquement sur les requêtes UI/UX. Exemples de prompts natifs :

Build a landing page for my SaaS product
Design a portfolio website with dark mode
Create a dashboard for healthcare analytics
Make a mobile app UI for e-commerce

Workflow Mode (slash command)

Pour Kiro, Copilot, Roo Code, KiloCode :

/ui-ux-pro-max Build a landing page for my SaaS product

Commande design system avancée

# Génération ASCII
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Génération Markdown
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# Persistance Master + Overrides
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

Workflow de génération interne (v2.0)

1. Requête utilisateur
        ↓
2. Recherche multi-domaines (5 parallèles)
   - Product type matching (161 catégories)
   - Style recommendations (84 styles)
   - Color palette selection (161 palettes)
   - Landing page patterns (24+ patterns)
   - Typography pairing (73 combinaisons)
        ↓
3. Moteur de raisonnement
   - Match produit → règles UI catégorie
   - Priorités de style (ranking BM25)
   - Filtrage anti-patterns par industrie
   - Règles de décision JSON
        ↓
4. Design system complet
   Pattern + Style + Couleurs + Typographie + Effets
   + Anti-patterns à éviter + Checklist pré-livraison

Structure du design system généré

Un design system type contient :

Section Contenu
Pattern Structure de page (Hero, Features, Testimonials, CTA, Footer)
Conversion Stratégie de conversion (émotion, trust, demo)
Style Style UI principal + mots-clés + best for + performance + accessibilité
Colors Primary, Secondary, CTA, Background, Text + notes
Typography Pairing de fonts + mood + Google Fonts URL
Key Effects Ombres, transitions, hover states
Anti-patterns Ce qu'il ne faut PAS faire
Pre-delivery checklist Checklist qualité avant ship

Checklist pré-livraison intégrée (à appliquer systématiquement)

  • Pas d'emoji comme icônes (utiliser SVG : Heroicons / Lucide)
  • cursor-pointer sur tous les éléments cliquables
  • Hover states avec transitions fluides (150-300ms)
  • Contraste 4.5:1 minimum en light mode
  • Focus states visibles pour navigation clavier
  • prefers-reduced-motion respecté
  • Responsive : 375px, 768px, 1024px, 1440px

Cette checklist complète KNOW-PAT-143 (quality gate) et KNOW-PAT-155 (gate excellence).

Persist Master + Overrides pattern

design-system/
├── MASTER.md              # Source de vérité globale
└── pages/
    └── dashboard.md       # Overrides spécifiques à la page

Règle de récupération : pour une page donnée, lire d'abord pages/[page].md ; s'il existe, ses règles priment sur MASTER.md. Sinon, utiliser MASTER.md exclusivement.

Anti-patterns détectés par le skill

  • Bright neon colors + harsh animations
  • Dark mode forcé quand inapproprié
  • AI purple/pink gradients génériques
  • Emojis utilisés comme icônes
  • Absence de hover/focus states
  • Couleurs hardcodées sans tokens

Références