ux-architecture

Déclencheurs

• architecture UX
• architecture CSS
• design system CSS
• framework de mise en page
• framework responsive
• variables CSS
• design tokens CSS
• basculement de thème
• basculement du mode sombre
• architecture de l'information
• transfert aux développeurs
• fondation CSS
• grid layout
• flexbox layout
• stratégie de breakpoint
• mobile first
• architecture de composants
• fondation technique

Instructions

Fondation CSS Design System

Créez des fondations CSS prêtes pour les développeurs avec :

1. CSS Custom Properties : tokens de couleur light/dark, échelle typographique, système d'espacement, largeurs de conteneur
2. Système de thème : valeurs par défaut light, surcharges [data-theme="dark"], secours prefers-color-scheme media query
3. Échelle typographique : classes sémantiques (.text-heading-1 à .text-heading-6) avec font-size, font-weight, line-height, margin
4. Système d'espacement : échelle basée sur 4px (space-1 à space-16) pour un rythme vertical cohérent
5. Système de conteneur : mobile full-width avec max-widths responsifs (640px, 768px, 1024px, 1280px)

Framework de mise en page

Concevez des motifs de mise en page avec du CSS moderne :

• Motifs Grid : 2-colonnes, 3-colonnes, 4-colonnes avec secours single-column responsive
• Utilitaires Flexbox : helpers d'alignement, distribution, wrapping
• Hero Section : hauteur viewport complète, motif de contenu centré
• Sidebar Layout : main 2fr + sidebar 1fr avec gap
• Card Layout : CSS Grid auto-fit avec largeurs de carte minimales

Système de basculement de thème

Incluez toujours un basculement de thème light/dark/system :

• Composant HTML avec role="radiogroup" et aria-label
• Classe ThemeManager JavaScript gérant la persistance localStorage et la détection des préférences système
• CSS pour l'apparence du basculement avec indication d'état actif

Architecture de l'information

• Hiérarchie des pages : 5-7 sections de navigation principales maximum
• Système de poids visuel : H1 > H2 > H3 > Body > CTAs avec prominence visuelle décroissante
• Flux du contenu : progression logique à travers les sections
• Placement des CTA : above fold, fins de sections, footer

Motifs d'interaction

• Scroll fluide vers les sections avec indicateurs d'état actif
• Basculement de thème avec retour visuel instantané
• Formulaires avec labels clairs, retours de validation, indicateurs de progression
• Boutons avec états hover, focus et loading
• Cartes avec effets hover subtils et zones cliquables claires

Transfert aux développeurs

• Générez des fichiers de fondation CSS avec motifs documentés
• Spécifiez les exigences et dépendances des composants
• Incluez les spécifications de comportement responsive
• Établissez l'ordre de priorité d'implémentation :
  1. Variables du design system
  2. Structure de mise en page
  3. Base des composants
  4. Intégration du contenu
  5. Polish interactif

Intégration EloPhanto Tool

• Utilisez browser_navigate pour examiner les implémentations de sites existants
• Utilisez knowledge_write pour persister les décisions architecturales et systèmes CSS
• Utilisez web_search pour rechercher des motifs CSS et la compatibilité navigateur

Livrables

CSS Design System

:root {
  --bg-primary: [spec-light-bg];
  --bg-secondary: [spec-light-secondary];
  --text-primary: [spec-light-text];
  --text-secondary: [spec-light-text-muted];
  --border-color: [spec-light-border];
  --primary-color: [spec-primary];
  --secondary-color: [spec-secondary];
  --accent-color: [spec-accent];

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

[data-theme="dark"] {
  --bg-primary: [spec-dark-bg];
  --text-primary: [spec-dark-text];
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: [spec-dark-bg];
    --text-primary: [spec-dark-text];
  }
}

HTML du basculement de thème

<div class="theme-toggle" role="radiogroup" aria-label="Theme selection">
  <button class="theme-toggle-option" data-theme="light" role="radio" aria-checked="false">Light</button>
  <button class="theme-toggle-option" data-theme="dark" role="radio" aria-checked="false">Dark</button>
  <button class="theme-toggle-option" data-theme="system" role="radio" aria-checked="true">System</button>
</div>

JavaScript ThemeManager

class ThemeManager {
  constructor() {
    this.currentTheme = this.getStoredTheme() || this.getSystemTheme();
    this.applyTheme(this.currentTheme);
    this.initializeToggle();
  }

  getSystemTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  getStoredTheme() { return localStorage.getItem('theme'); }

  applyTheme(theme) {
    if (theme === 'system') {
      document.documentElement.removeAttribute('data-theme');
      localStorage.removeItem('theme');
    } else {
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('theme', theme);
    }
    this.currentTheme = theme;
    this.updateToggleUI();
  }

  initializeToggle() {
    const toggle = document.querySelector('.theme-toggle');
    if (toggle) {
      toggle.addEventListener('click', (e) => {
        if (e.target.matches('.theme-toggle-option')) {
          this.applyTheme(e.target.dataset.theme);
        }
      });
    }
  }

  updateToggleUI() {
    document.querySelectorAll('.theme-toggle-option').forEach(option => {
      option.classList.toggle('active', option.dataset.theme === this.currentTheme);
    });
  }
}

document.addEventListener('DOMContentLoaded', () => new ThemeManager());

Modèle de livrable architectural

# [Nom du projet] Architecture technique et fondation UX

## Architecture CSS
- **Variables du design system** : tokens de couleur, typographie, espacement
- **Framework de mise en page** : motifs de conteneur, grid, flexbox
- **Système de thème** : light/dark/system avec composant de basculement

## Structure UX
- **Architecture de l'information** : hiérarchie des pages, navigation, flux du contenu
- **Stratégie responsive** : mobile-first avec breakpoints à 640/768/1024/1280px
- **Fondation accessibilité** : nav clavier, lecteurs d'écran, contraste WCAG AA

## Guide d'implémentation pour développeurs
1. Configuration fondation : variables du design system
2. Structure de mise en page : conteneurs et grids responsifs
3. Base des composants : modèles de composants réutilisables
4. Intégration du contenu : hiérarchie appropriée
5. Polish interactif : états hover et animations

## Structure des fichiers
css/design-system.css, css/layout.css, css/components.css, css/utilities.css
js/theme-manager.js, js/main.js

Métriques de succès

• Les développeurs peuvent implémenter les designs sans décisions architecturales
• Le CSS reste maintenable et sans conflits tout au long du développement
• Les motifs UX guident les utilisateurs naturellement à travers le contenu et les conversions
• Les projets ont une baseline d'apparence cohérente et professionnelle
• La fondation technique supporte les besoins actuels et la croissance future

Vérifier

• Le changement a été rendu dans un navigateur/simulateur et une capture d'écran ou snapshot DOM a été capturé, pas juste revu au code
• La mise en page a été vérifiée aux breakpoints que le guide ux-architecture spécifie (mobile + desktop minimum) ; des preuves de chacun sont jointes
• Les valeurs de couleur, typographie et espacement utilisées proviennent des design tokens/thème du projet, pas de valeurs ad-hoc en dur
• La navigation au clavier et l'ordre de focus 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 d'hériter
• Aucune erreur console ou avertissement hydration n'a été émis lors du rendu de vérification