ui-design

Déclencheurs

• conception d'interface utilisateur
• système de design
• bibliothèque de composants
• design tokens
• conception visuelle
• conception d'interface
• composants d'interface utilisateur
• conception de boutons
• conception de formulaires
• conception de cartes
• système de couleurs
• système de typographie
• système d'espacement
• mode sombre
• thématisation
• pixel perfect
• conception réactive
• transmission de conception
• conception accessible

Instructions

Fondation du système de design

Lors de la création de conceptions d'interface utilisateur, établissez d'abord la fondation :

1. Design Tokens : Définissez les propriétés CSS personnalisées pour les couleurs, la typographie, l'espacement, les ombres, les transitions
2. Système de couleurs : Palettes primaire, secondaire, sémantique (succès/avertissement/erreur/info) et neutre avec conformité WCAG AA
3. Échelle typographique : Tailles de police cohérentes de xs (12px) à 4xl (36px) avec hauteurs de ligne appropriées
4. Système d'espacement : Échelle d'unité de base 4px (4, 8, 12, 16, 24, 32, 48, 64px)
5. Ombre et élévation : Tokens d'ombre petite, moyenne, grande pour la perception de la profondeur
6. Tokens de transition : Courbes rapides (150ms), normales (300ms), lentes (500ms)

Architecture de composants

Concevez des composants de base avec tous les états :

• Boutons : Variantes primaire, secondaire, tertiaire avec tailles et états (par défaut, survol, actif, focus, désactivé)
• Éléments de formulaire : Entrées, sélecteurs, cases à cocher, boutons radio avec états de validation
• Navigation : Systèmes de menu, fil d'Ariane, pagination
• Retour d'information : Alertes, toasts, modales, infobulle
• Affichage de données : Cartes, tableaux, listes, badges
• États de chargement : Écrans skeleton, spinners, barres de progression
• États vides : Messages sans données et conseils
• États d'erreur : Retour de validation et messages d'erreur

Mode sombre et thématisation

• Concevez des tokens de thème sombre qui s'inversent correctement (pas seulement des valeurs échangées)
• Utilisez le motif de sélecteur CSS [data-theme="dark"]
• Assurez-vous que les rapports de contraste répondent à WCAG AA dans les deux thèmes
• Respectez la préférence système prefers-color-scheme

Conception réactive

• Approche mobile-first à partir de 320px
• Points de rupture : sm (640px), md (768px), lg (1024px), xl (1280px)
• Largeurs maximales de conteneur et remplissage par point de rupture
• Modèles de grille avec nombre de colonnes réactif

Accessibilité (WCAG AA minimum)

• Contraste des couleurs : 4,5:1 pour le texte normal, 3:1 pour le texte volumineux
• Navigation au clavier : fonctionnalité complète sans souris
• Indicateurs de focus : contour 2px clair avec décalage
• Cibles tactiles : 44px minimum pour les éléments interactifs
• Sensibilité au mouvement : respectez prefers-reduced-motion
• Mise à l'échelle du texte : conception fonctionne jusqu'à 200% du zoom du navigateur

Conception consciente des performances

• Optimisez les images, icônes et actifs pour les performances web
• Concevez en tenant compte de l'efficacité CSS
• Tenez compte des états de chargement et de l'amélioration progressive
• Équilibrez la richesse visuelle avec les contraintes techniques

Intégration de l'outil EloPhanto

• Utilisez browser_navigate pour examiner les implémentations en direct et auditer la conformité de la conception
• Utilisez knowledge_write pour persister la documentation du système de design
• Utilisez web_search pour rechercher des motifs de conception et des normes d'accessibilité

Livrables

CSS de bibliothèque de composants

:root {
  /* Color Tokens */
  --color-primary-100: #f0f9ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Typography Tokens */
  --font-family-primary: 'Inter', system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing Tokens */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shadow Tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Transition Tokens */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

[data-theme="dark"] {
  --color-primary-100: #1e3a8a;
  --color-primary-500: #60a5fa;
  --color-primary-900: #dbeafe;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-primary);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);

  &:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
}

Modèle de livrable du système de design

# Système de design d'interface utilisateur [Nom du projet]

## Fondations de design
- **Système de couleurs** : Palettes primaire, secondaire, sémantique, neutre avec accessibilité
- **Système typographique** : Familles de polices, échelle, poids, hauteurs de ligne
- **Système d'espacement** : Échelle d'unité de base 4px
- **Système d'ombres** : Niveaux d'élévation pour la profondeur

## Bibliothèque de composants
- **Composants de base** : Boutons, entrées, cartes, navigation
- **États de composants** : Par défaut, survol, actif, focus, désactivé, chargement, erreur, vide
- **Comportement réactif** : Comment les composants s'adaptent aux points de rupture

## Conception réactive
- **Points de rupture** : 320px (mobile), 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
- **Système de grille** : Grille flexible à 12 colonnes
- **Largeurs de conteneur** : Centré avec max-widths par point de rupture

## Normes d'accessibilité
- **Contraste des couleurs** : 4,5:1 texte normal, 3:1 texte volumineux
- **Navigation au clavier** : Fonctionnalité complète, ordre de tabulation logique
- **Gestion du focus** : Indicateurs clairs
- **Cibles tactiles** : 44px minimum

Métriques de réussite

• Le système de design atteint 95 %+ de cohérence dans tous les éléments d'interface
• Les scores d'accessibilité répondent ou dépassent les normes WCAG AA (contraste 4,5:1)
• La transmission de conception nécessite des demandes de révision de conception minimales (90 %+ de précision)
• Les composants d'interface utilisateur sont réutilisés efficacement, réduisant la dette de conception
• Les conceptions réactives fonctionnent sans faille sur tous les points de rupture d'appareil cibles

Vérifier

• La modification a été rendue dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement examiné par code
• La mise en page a été vérifiée aux points de rupture que le guide de conception d'interface utilisateur stipule (mobile + desktop minimum) ; la preuve de chacun est jointe
• Les valeurs de couleur, typographie et espacement utilisées proviennent des design tokens / thème du projet, pas de valeurs codées en dur ad-hoc
• La navigation au clavier et l'ordre de tabulation ont été exercés sur chaque élément interactif introduit
• Les variantes reduced-motion / dark-mode (si supportées) ont été vérifiées, pas supposées hériter
• Aucune erreur de console ou avertissement d'hydratation n'a été émis lors du rendu de vérification