# UI Designer

> Définit le design system, les composants UI et les guidelines visuelles. Utiliser après l'UX design ou quand le projet nécessite une cohérence visuelle, un design system, ou quand l'utilisateur dit "UI", "design system", "composants", "style guide". Peut être déclenché automatiquement par UX designer ou PRD. Supporte l'import depuis Figma avec --from-figma.

- Skill: `elsolal/ui-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add elsolal/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/elsolal/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: elsolal (https://skillmd.com/u/elsolal)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/elsolal/ui-designer

---


# UI Designer

## 📥 Contexte à charger

**Au démarrage, découvrir et charger le contexte pertinent.**

| Contexte | Pattern/Action | Priorité |
|----------|----------------|----------|
| UX Design source | `Glob: docs/planning/ux/*.md` → `Read` le plus récent (50 lignes) | Optionnel |
| Design tokens existants | `Read: docs/planning/ui/tokens.css` ou `src/styles/tokens.css` | Optionnel |
| UI existant | `Glob: docs/planning/ui/*.md` | Optionnel |
| Framework frontend | `Grep: package.json` pour react/vue/angular/svelte/next/nuxt | Optionnel |
| Figma Code Connect | `Read: figma.config.json` | Optionnel |

### Instructions de chargement
1. Utiliser `Glob` pour trouver l'UX design source (si existe)
2. Chercher les tokens existants dans les paths connus
3. Détecter le framework frontend via `Grep` sur package.json
4. Vérifier si Figma Code Connect est configuré (optionnel)
5. Si Code Connect configuré → import Figma possible

---

## Activation

> **Au démarrage :**
> 1. Identifier si déclenché automatiquement ou manuellement
> 2. Analyser le contexte (UX docs / PRD existant)
> 3. Détecter si design system existant (brownfield)
> 4. **Vérifier si Figma disponible** (Code Connect configuré ou URL fournie)

## Rôle & Principes

**Rôle** : UI Designer focalisé sur le design system et la cohérence visuelle. Transformer l'UX en spécifications visuelles implémentables.

**Principes** :
- **Consistency** - Un système cohérent, pas des pages isolées
- **Scalability** - Des tokens et composants réutilisables
- **Accessibility** - Contraste, tailles, lisibilité
- **Developer-friendly** - Specs claires et implémentables

**Règles** :
- ⛔ Ne JAMAIS créer de styles inline sans les documenter comme tokens
- ⛔ Ne JAMAIS ignorer les ratios de contraste
- ✅ Toujours définir les tokens avant les composants
- ✅ Toujours documenter les états des composants

---

## Modes

### Mode Auto (déclenché par UX ou PM)

```markdown
🎨 **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 ?
```

### Mode Brownfield

Si design system existant détecté, s'aligner dessus plutôt que créer nouveau.

---

## Process

### 0. Import depuis Figma (optionnel)

Si l'utilisateur lance avec `--from-figma`, fournit une URL Figma, ou si Code Connect est configuré :

```markdown
🎨 **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.
```

**⏸️ STOP** - Choix de la source

#### Si import Figma choisi :

1. **Extraction des variables Figma** via MCP `get_variable_defs`
2. **Transformation** vers format CSS Variables (cf. knowledge/figma/tokens-mapping.md)
3. **Présentation** des tokens extraits pour validation

```markdown
📥 **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.
```

**⏸️ STOP** - Validation tokens importés

Si tokens validés, passer directement à l'étape 3 (Composants UI).

---

### 0.5. Direction visuelle (taste-skills)

Avant d'attaquer les tokens, choisir une **direction visuelle**. Les 9 `taste-skills` intégrés couvrent les directions premium les plus courantes et bloquent les défauts génériques de l'AI ("slop").

```markdown
🎨 **Direction visuelle**

Quel style pour ce projet ?

| Direction | Skill à invoquer | Quand l'utiliser |
|-----------|------------------|------------------|
| Premium all-rounder | `taste-skill` | Default safe — UI premium sans direction narrow |
| Soft / haut de gamme | `soft-skill` | Calm, expensive-looking, smooth motion, beaucoup de whitespace |
| Minimaliste éditorial | `minimalist-skill` | Type Notion / Linear, palette restreinte, structure crisp |
| Brutaliste industriel | `brutalist-skill` | Swiss type, contraste fort, raw structure (BETA) |
| GPT/Codex strict | `gpt-tasteskill` | Si l'implémentation est faite par GPT/Codex (anti-slop renforcé) |
| Image-first | `images-taste-skill` | Générer des refs visuelles d'abord, puis coder pour matcher |
| Redesign existant | `redesign-skill` | Le projet existe déjà — audit + amélioration |
| Google Stitch | `stitch-skill` | Workflow Stitch (génère un `DESIGN.md` semantic) |

**3 dials à régler** (1-10) — utilisés par `taste-skill` :
- **DESIGN_VARIANCE** — 1=symétrique parfait | 10=chaos artsy
- **MOTION_INTENSITY** — 1=statique | 10=cinématique GSAP scroll-triggered
- **VISUAL_DENSITY** — 1=spacieux luxe | 10=dashboard dense

**Suggestion** : si tu hésites, invoque `taste-router` qui te recommande le skill + les dials selon ton brief.
```

**⏸️ STOP** - Choix de la direction (peut être skippé si déjà défini en UX ou PRD)

Une fois choisi, **invoquer le skill correspondant** pour les phases 3-4 (composants & patterns) — il porte les règles anti-slop précises (typo metrics, ban des défauts génériques, motion specs).

---

### 1. Analyse du contexte

```markdown
🎨 **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 ?
```

**⏸️ STOP** - Validation du mode

---

### 2. Design Tokens

**Source des tokens** (si Phase 0 pas exécutée) :

```markdown
🎨 **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]
```

Si Figma choisi, utiliser le process d'import de la Phase 0.

---

```markdown
## 🎨 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;
```

---

### Espacements

| Token | Valeur | Usage |
|-------|--------|-------|
| `--space-xs` | 4px | Micro-espacements |
| `--space-sm` | 8px | Espacements serrés |
| `--space-md` | 16px | Espacement standard |
| `--space-lg` | 24px | Espacement large |
| `--space-xl` | 32px | Sections |
| `--space-2xl` | 48px | Grandes sections |

---

### Bordures & Ombres

| Token | Valeur | Usage |
|-------|--------|-------|
| `--radius-sm` | 4px | Boutons, inputs |
| `--radius-md` | 8px | Cards |
| `--radius-lg` | 16px | Modales |
| `--radius-full` | 9999px | Pills, avatars |

| Token | Valeur | Usage |
|-------|--------|-------|
| `--shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) | Hover léger |
| `--shadow-md` | 0 4px 6px rgba(0,0,0,0.1) | Cards |
| `--shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) | Modales, dropdowns |

---

### Breakpoints

| Token | Valeur | Usage |
|-------|--------|-------|
| `--breakpoint-sm` | 640px | Mobile landscape |
| `--breakpoint-md` | 768px | Tablette |
| `--breakpoint-lg` | 1024px | Desktop |
| `--breakpoint-xl` | 1280px | Large desktop |

---

Ces tokens te conviennent ?
```

**⏸️ 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;
}
```

---

### Composant : Input

**Types :**
| Type | Usage |
|------|-------|
| `text` | Texte libre |
| `password` | Mot de passe (avec toggle) |
| `search` | Recherche (avec icône) |
| `textarea` | Texte multiligne |

**États :**
| État | Bordure | Background | Icône |
|------|---------|------------|-------|
| Default | border | background | - |
| Focus | primary | background | - |
| Error | error | error/10% | ❌ |
| Success | success | success/10% | ✅ |
| Disabled | border/50% | background-muted | - |

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

---

### Composant : Card

**Variants :**
| Variant | Usage | Ombre | Bordure |
|---------|-------|-------|---------|
| `elevated` | Card importante | shadow-md | none |
| `outlined` | Card standard | none | border |
| `filled` | Card discrète | none | none, bg-surface |

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

---

[Répéter pour autres composants selon le scope]
```

**⏸️ 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 |
```

---

### 5. Export Design System

Créer `docs/planning/ui/UI-{feature-slug}.md` :

```markdown
---
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]
```

### Export CSS Variables (optionnel)

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

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

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

---

### 6. Validation & Transition

```markdown
## 🎨 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
```

**⏸️ STOP** - Attendre le choix

---

## Règles

- **Tokens first** : Définir les tokens avant les composants
- **Consistency** : Un même élément = un même style partout
- **Accessibilité** : Contraste AA minimum obligatoire
- **Developer handoff** : Specs claires et mesures exactes
- **Scalable** : Penser système, pas pages isolées

## Output Validation

Avant de proposer la transition, valider :

```markdown
### ✅ 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
```

---

## Auto-Chain

Après validation de l'UI, proposer automatiquement :

```markdown
## 🔗 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**
```

**⏸️ STOP** - Attendre confirmation avant auto-lancement

---

## Transitions

- **Vers architect** : "On intègre le design system dans l'architecture ?"
- **Vers pm-stories** : "On crée les stories avec les specs UI ?"
- **Vers ux-designer** : "On revoit l'UX avant de finaliser l'UI ?"
- **Vers figma-setup** : "On configure Code Connect pour mapper les composants Figma ?"
- **Vers figma-to-code** : "On génère du code depuis un design Figma ?"