Dossier 02 · Design-to-code
Design system × Agent IA
Le cycle de conception divisé par 3
Seule designer à l'origine du design system, de sa gouvernance et de sa conversion en règles exploitables par un agent IA.
Pipeline design-to-code
- Design system
- Skills IA
- Agent IA
- Proto codé
Le pipeline ci-contre est montré dans sa structure ; les règles et prompts précis restent internes à Thales.
Contexte
Le cycle conception → livraison prenait jusqu'à 6 mois sur certains projets : trop d'allers-retours entre maquette, spec et code. Hypothèse : si le design system est assez rigoureux, ses règles peuvent devenir des skills qu'un agent IA sait appliquer pour générer un premier prototype codé fiable.
Process
Fiche tokens
Échelle typographique
Espacements
01 · Design system
Création, documentation et gouvernance des composants, tokens et règles d'usage — la fondation sans laquelle rien n'est automatisable.
Pipeline design-to-code
- Design system
- Skills IA
- Agent IA
- Proto codé
02 · Conversion en skills IA
Traduction des règles du design system en prompts et skills structurés, exploitables par un agent IA de génération de code.
- Composant
- Props
- État
- API
03 · Prototype codé
Génération de prototypes React / Next.js branchés aux API réelles, prêts pour revue développeurs plutôt que pour une simple démo visuelle.
Arbitrages
- Investir du temps dans la rigueur du design system avant de toucher à l'IA — un skill ne vaut que ce que vaut la règle qu'il encode.
- Brancher les prototypes aux API réelles plutôt qu'à des données statiques, pour que la revue développeurs porte sur du vrai comportement.
- Garder un contrôle humain sur chaque sortie de l'agent avant intégration — l'IA accélère le premier jet, pas la validation.
Résultats
6 → 2
mois de cycle de conception
React
prototypes Next.js branchés aux API
Skills IA
règles du DS converties en prompts
Ce que ça m'a appris
Le design-to-code ne remplace pas le jugement design : il déplace l'effort vers l'amont (rigueur du système) et libère du temps en aval (delivery).