🎨 **UI Design Phase** (auto-triggered)

Déclenché car :
- [Raison 1 : composants UI identifiés]
- [Raison 2 : besoin de cohérence visuelle]

**Contexte :**
- Design system existant : [Oui/Non]
- UX Design : [Lien si existe]
- Framework UI prévu : [si détecté dans archi]

Je commence la définition du design system ?

🎨 **Source Figma détectée**

**Figma disponible :**
- Code Connect : [Configuré/Non configuré]
- URL fournie : [URL ou Non]

**Options d'import :**
- [F] **Importer depuis Figma** - Récupérer les tokens (couleurs, typo, spacing) depuis les variables Figma
- [M] **Création manuelle** - Définir les tokens from scratch (processus classique)
- [H] **Hybride** - Importer puis ajuster manuellement

Je recommande **[F/M/H]** basé sur le contexte.

📥 **Tokens importés depuis Figma**

**Fichier source** : [Figma File Name]

### Couleurs extraites
| Token Figma | CSS Variable | Valeur |
|-------------|--------------|--------|
| Primary/500 | --color-primary-500 | #3b82f6 |
| Primary/600 | --color-primary-600 | #2563eb |
| Neutral/Background | --color-background | #ffffff |
| ... | ... | ... |

### Typographie extraite
| Token Figma | CSS Variable | Valeur |
|-------------|--------------|--------|
| Heading/H1 | --font-heading-1 | 700 32px/1.2 Inter |
| Body/Regular | --font-body | 400 16px/1.5 Inter |
| ... | ... | ... |

### Spacing extrait
| Token Figma | CSS Variable | Valeur |
|-------------|--------------|--------|
| Spacing/md | --space-md | 16px |
| Spacing/lg | --space-lg | 24px |
| ... | ... | ... |

**Total** : [X] couleurs, [Y] typos, [Z] spacings

Ces tokens te conviennent ? Tu peux les ajuster avant de continuer.

🎨 **UI Design**

**Contexte détecté :**
- Source : [UX Design / PRD / Direct]
- Documents liés : [paths]
- Framework frontend : [React/Vue/etc. si détecté]
- Design system existant : [Oui/Non - path si oui]

**Scope UI estimé :**
- [ ] Light (5-10 composants) → Design tokens + composants de base
- [ ] Standard (10-20 composants) → Design system complet
- [ ] Full (20+ composants) → Design system + documentation Storybook

Je recommande le **Mode [X]**. On continue ?

🎨 **Source des Design Tokens**

| Option | Description |
|--------|-------------|
| [F] Figma | Importer depuis les variables Figma (si configuré) |
| [M] Manuel | Créer les tokens from scratch |

Choix : [F/M]

## 🎨 Design Tokens

### Couleurs

#### Palette principale
| Token | Valeur | Usage |
|-------|--------|-------|
| `--color-primary` | #[hex] | Actions principales, liens |
| `--color-primary-hover` | #[hex] | Hover sur primary |
| `--color-secondary` | #[hex] | Actions secondaires |
| `--color-accent` | #[hex] | Mise en avant |

#### Sémantique
| Token | Valeur | Usage |
|-------|--------|-------|
| `--color-success` | #[hex] | Validations, succès |
| `--color-warning` | #[hex] | Alertes, attention |
| `--color-error` | #[hex] | Erreurs, danger |
| `--color-info` | #[hex] | Informations |

#### Neutres
| Token | Valeur | Usage |
|-------|--------|-------|
| `--color-background` | #[hex] | Fond principal |
| `--color-surface` | #[hex] | Cards, modales |
| `--color-text-primary` | #[hex] | Texte principal |
| `--color-text-secondary` | #[hex] | Texte secondaire |
| `--color-border` | #[hex] | Bordures |

#### Contraste validé ✅
| Combinaison | Ratio | WCAG |
|-------------|-------|------|
| text-primary / background | [X]:1 | AA ✅ |
| primary / background | [X]:1 | AA ✅ |

---

### Typographie

| Token | Font | Size | Weight | Line-height | Usage |
|-------|------|------|--------|-------------|-------|
| `--font-heading-1` | [Font] | 32px | 700 | 1.2 | H1 |
| `--font-heading-2` | [Font] | 24px | 600 | 1.3 | H2 |
| `--font-heading-3` | [Font] | 20px | 600 | 1.3 | H3 |
| `--font-body` | [Font] | 16px | 400 | 1.5 | Texte courant |
| `--font-body-small` | [Font] | 14px | 400 | 1.4 | Texte secondaire |
| `--font-caption` | [Font] | 12px | 400 | 1.4 | Labels, hints |

**Font stack :**
```css
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

**⏸️ STOP** - Validation tokens

---

### 3. Composants UI

```markdown
## 🧩 Composants UI

### Composant : Button

**Variants :**
| Variant | Usage | Exemple visuel |
|---------|-------|----------------|
| `primary` | Action principale | `[████████]` |
| `secondary` | Action secondaire | `[────────]` |
| `ghost` | Action tertiaire | ` ──────── ` |
| `danger` | Action destructive | `[████████]` (rouge) |

**Tailles :**
| Size | Padding | Font | Min-width |
|------|---------|------|-----------|
| `sm` | 8px 16px | 14px | 80px |
| `md` | 12px 24px | 16px | 100px |
| `lg` | 16px 32px | 18px | 120px |

**États :**
| État | Visuel |
|------|--------|
| Default | [Couleur normale] |
| Hover | [Couleur + 10% luminosité] |
| Active | [Couleur - 10% luminosité] |
| Focus | [Outline 2px primary] |
| Disabled | [Opacité 50%, cursor not-allowed] |
| Loading | [Spinner remplace texte] |

**Props :**
```typescript
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost' | 'danger';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  fullWidth?: boolean;
}

┌─────────────────────────────────────┐
│ Label *                             │  ← Label (optionnel, * si required)
├─────────────────────────────────────┤
│ [🔍] Placeholder text         [👁️] │  ← Input avec icônes optionnelles
├─────────────────────────────────────┤
│ Helper text ou message d'erreur     │  ← Helper (optionnel)
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ [Image / Media]           (opt.)    │
├─────────────────────────────────────┤
│ Header                    (opt.)    │
│ ─────────────────────────────────── │
│ Body content                        │
│                                     │
│ ─────────────────────────────────── │
│ Footer / Actions          (opt.)    │
└─────────────────────────────────────┘

**⏸️ STOP** - Validation composants

---

### 4. Patterns & Guidelines

```markdown
## 📚 Patterns UI

### Layout
- **Container max-width** : 1200px (centré)
- **Grid** : 12 colonnes, gutter 24px
- **Content width** : max 65ch pour la lecture

### Iconographie
- **Style** : [Outlined / Filled / Duo-tone]
- **Taille standard** : 24px
- **Librairie** : [Lucide / Heroicons / Phosphor]
- **Usage** : Toujours avec label accessible

### Feedback utilisateur
| Type | Durée | Position |
|------|-------|----------|
| Toast success | 3s auto-dismiss | Top-right |
| Toast error | Manual dismiss | Top-right |
| Loading | Jusqu'à completion | Inline ou overlay |

### Animations
| Type | Durée | Easing |
|------|-------|--------|
| Micro-interaction | 150ms | ease-out |
| Transition page | 300ms | ease-in-out |
| Modal open | 200ms | ease-out |

---
title: UI Design System - [Nom]
date: YYYY-MM-DD
status: draft | validated
trigger: auto | manual
source: ux-design | prd | direct
---

# UI Design System: [Nom]

## 1. Design Tokens
[Export complet des tokens]

## 2. Composants
[Liste et specs de chaque composant]

## 3. Patterns
[Guidelines d'usage]

## 4. Accessibilité
[Checklist couleurs, contrastes, tailles]

## 5. Implementation Notes
- Framework cible : [X]
- CSS approach : [CSS Modules / Tailwind / Styled-components]
- Suggestion : [Recommandations pour le dev]

/* docs/planning/ui/tokens.css */
:root {
  /* Colors */
  --color-primary: #[hex];
  --color-secondary: #[hex];
  /* ... */

  /* Typography */
  --font-family-sans: 'Inter', sans-serif;
  /* ... */

  /* Spacing */
  --space-xs: 4px;
  /* ... */
}

## 🎨 UI Design Terminé

Documents créés :
- `docs/planning/ui/UI-{slug}.md`
- `docs/planning/ui/tokens.css` (optionnel)

### Résumé
- **Tokens définis** : [nombre par catégorie]
- **Composants spécifiés** : [nombre]
- **Contraste WCAG** : [AA/AAA]

### Points clés
- [Choix design important 1]
- [Choix design important 2]

---

**Prochaine étape ?**
- [A] Passer à l'Architecture (intégrer les specs UI)
- [S] Passer aux Stories (avec specs UI)
- [R] Réviser l'UI
- [X] Exporter les tokens en CSS

### ✅ Checklist Output UI Design

| Critère | Status |
|---------|--------|
| Fichier créé dans `docs/planning/ui/` | ✅/❌ |
| Tokens couleurs définis | ✅/❌ |
| Tokens typographie définis | ✅/❌ |
| Tokens spacing définis | ✅/❌ |
| Composants principaux spécifiés | ✅/❌ |
| États des composants documentés | ✅/❌ |
| Contraste WCAG AA validé | ✅/❌ |
| tokens.css exporté (optionnel) | ✅/❌/- |

**Score : X/7** → Si < 5, compléter avant transition

## 🔗 Prochaine étape

✅ UI Design terminé et sauvegardé.

**Flux recommandé :**

[Si Architecture pas encore faite]
→ 🏗️ **Lancer `/architect` ?** (intégrer les specs UI dans l'archi)

[Si Architecture existe]
→ 📝 **Lancer `/pm-stories` ?** (créer les stories avec specs UI)

---

**[Y] Oui, continuer** | **[N] Non, je choisis** | **[P] Pause**