Structure
Quels composants existent, avec quelles variantes et quels états.
02 — Projet phare
L'IA peut générer une interface en quelques secondes. Mais peut-elle respecter votre design system ?
J'ai transformé notre design system en un langage exploitable par l'IA : générer des maquettes plus vite, sans perdre les règles ni la cohérence du produit.
- 01Design SystemFigma
- 02DocumentationMarkdown
- 03Contexte IAClaude + MCP
- 04GénérationLovable
- 05Sortie designFigma
- > 90 %
- Conformité au design system
- ≈ 200k MAD
- OpEx estimé économisé par cycle
- Jours → heures
- Itération d'un écran
Contexte
Le contexte
Lors de la transformation de Société Générale Maroc en Saham Bank, nous devions faire évoluer l'application tout en intégrant rapidement de nouveaux modules.
En parallèle, je commençais à expérimenter le vibe coding pour accélérer la conception.
- 01
- Nouvelle identité de marque
- 02
- Plusieurs modules produit
- 03
- Conception assistée par l'IA
Le problème
Générer ne suffisait pas
Le problème n'était pas de générer. Le problème était de générer correctement.
Avant
PromptLovableInterface
- Espacements hors échelle
- Mauvais composants
- Incohérences visuelles
- Retouches dans Figma
- Gain de temps perdu
Un design system est compréhensible par un designer. Pas nécessairement par une IA.
Notre design system contenait les composants et les règles visuelles nécessaires à la conception. Mais ces informations n'étaient pas structurées assez explicitement pour être correctement interprétées par un modèle.
Ce qui manquait
Une couche de traduction.
- 01Design System
- 02Markdown structuré
- 03Contexte IA
- 04Interface générée
/design-system ├── foundations.md ├── components.md ├── patterns.md ├── layout.md ├── typography.md └── governance.md
Le système
J'ai transformé notre design system en instructions exécutables par l'IA
Sens
Dans quel contexte chaque composant doit être employé, et pourquoi.
Règles
Quelles contraintes l'IA doit respecter, et ce qu'elle doit refuser de faire.
Les règles écrites noir sur blanc
- Ne pas créer de nouveau composant quand un composant existant résout le problème.
- Utiliser les tokens d'espacement existants.
- Respecter la hiérarchie typographique définie.
- N'introduire aucune couleur hors de la palette approuvée.
Ce n'est pas du prompt engineering : c'est une couche de gouvernance.
Les quatre artefacts du système
Quatre fichiers, une langue commune
Je n'ai pas ajouté d'outil : j'ai écrit noir sur blanc ce que l'équipe savait par cœur, dans un format que l'agent relit avant chaque écran.
Les noms
Au lieu de « vert 600 », on dit « couleur de l'action principale ». Le nom dit à quoi la valeur sert.
<file name="DESIGN.md" lines={10} />
DESIGN.md
# DESIGN.md — rôles de tokens
surface.primary.solid: #014E48
usage: action principale
interdit: fond de page, texte
text.on.primary: #FFFFFF
usage: texte posé sur surface.primary.solid
space.4: 16px # échelle 4 / 8 / 12 / 16 uniquementRien de magique : du texte, relu et versionné avec le code. C'est ce qui permet à l'IA de générer dans nos clous plutôt qu'à côté.
Le workflow
Du design system jusqu'à Figma
- 01Design SystemFigma
Les variables du système, telles qu'elles vivent dans le fichier. - 02DocumentationMarkdown
Le fichier lu page par page, puis réécrit en règles explicites. - 03Contexte IAClaude + MCP
Ce que l'agent reçoit : les fichiers de contexte, pas le fichier brut. - 04GénérationLovableCapture à venir
Capture de la session de génération — à intégrer. - 05Sortie designFigma
L'écran obtenu, relu contre le système avant d'entrer dans Figma.
Le résultat
Ce que le workflow a changé
Le workflow nous a fait passer de prototypes générés par l'IA, qui exigeaient une correction manuelle importante, à des interfaces produites à l'intérieur des contraintes de notre design system.
Exploration plus rapide
Générer et itérer sur des concepts en une fraction du temps précédent.
Cohérence du design
L'IA travaille à l'intérieur de règles de design définies à l'avance.
Moins de reprise manuelle
Moins de temps passé à corriger les interfaces générées dans Figma.
Résultats
Impact & résultats
≈ 400 h évitées
Gain financier évalué
Heures d'itération, de recette design et d'ingénierie économisées par cycle de livraison, en éliminant les boucles de retouche UI et les reprises de code hors design system.
−80 %
Temps d'alignement dev-design
Conformité visuelle et technique garantie dès le premier passage d'exécution LLM : la recette ne sert plus à rattraper l'écran.
−60 %
Charge mentale équipe
Élimination du travail répétitif d'ajustement de pixels. Un contrat unique de vérité apporte de la sérénité lors des mises en production.
L'avenir des design systems n'est pas seulement d'aider les designers à concevoir plus vite. C'est de rendre le design exécutable par l'IA.
Cette expérience a changé ma façon de penser les design systems. Ils ne sont plus seulement une source de vérité pour des équipes humaines : ils peuvent devenir une couche d'exécution pour des agents.
Ma conclusion
Ce que j'en retire
L'IA ne supprime pas le besoin de design system. Elle le rend plus important.
Mieux le système est structuré, documenté et gouverné, plus l'IA l'exécute de manière fiable.
Projet suivant03 / Voyage en Banque
Rendre la réservation de vol compréhensible au sein d'un produit financier réglementé.
Ouvert aux postes senior product / UX-UI designer en télétravail
← Tous les travauxBadr Benali — Product design