Passer d’une maquette générée par l’IA à du code conforme au design system

Ce qui a été fait

Dans un article publié le 15 septembre 2026 sur le blog technique de Doctolib, l’auteur raconte un essai mené avec un designer : à partir d’un simple prompt, Claude Design a proposé trois maquettes pour une fonctionnalité qui n’existait pas encore (un carnet de bord pour infirmiers) ; une compétence maison a lu le prototype, les commentaires et la conversation, puis généré du code React à partir des composants du design system, en trente minutes. Restait à savoir si le résultat respectait vraiment ces composants : un modèle invente volontiers une variable CSS ou réécrit un composant existant. La démarche retenue tient en trois mots : contexte (le design system décrit sous forme de données structurées et interrogeables), harnais (des règles imposées par des hooks, du lint, le typage et le build plutôt que par le prompt) et évaluation. Un agent de revue découpé en sous-agents spécialisés a fait passer la conformité de 65 % à 87 % ; un ingénieur du design system, intégré à une équipe produit, a atteint 97 % sur un composant, une mesure unique selon l’article. Une seconde entrée part de Figma.

Avant de commencer

Outil cité par la source : Claude Code ; autres outils cités : Claude Design et Figma. Éléments entre crochets à remplir : [nom, props, exemples], [couleurs, espacements, typographies], [description ou capture]. Retirez les données confidentielles qui ne sont pas utiles et vérifiez les conditions d’accès de votre outil. Les fonctionnalités et abonnements disponibles peuvent évoluer.

La méthode, en trois étapes.

1. 01

   Rassembler le contexte

   Repérez les éléments entre crochets du prompt ([nom, props, exemples], [couleurs, espacements, typographies], [description ou capture]) et préparez ce qu’ils demandent.

2. 02

   Adapter le prompt

   Copiez le prompt ci-dessous, remplacez les éléments entre crochets, puis collez-le dans Claude Code ou Claude Design.

3. 03

   Relire avant d’utiliser

   Relisez le résultat, corrigez-le si besoin et gardez la décision finale. Les points de vigilance sont détaillés plus bas.

Votre point de départ.

Remplacez les éléments entre crochets, puis adaptez la proposition à votre situation. Ce prompt est rédigé par la rédaction d’iadujour, ce n’est pas une citation de la source.

Voici la liste des composants de notre design system avec leurs propriétés autorisées : [nom, props, exemples] et nos jetons de design : [couleurs, espacements, typographies].
Voici la maquette à coder : [description ou capture].

1. Associe chaque élément de la maquette à un composant existant ; signale ceux qui n’ont pas d’équivalent.
2. Génère le code en n’utilisant que ces composants et jetons, sans valeur CSS inventée.
3. Termine par une auto-vérification point par point de cette règle.

Ce qui mérite votre attention

Skills utiles

Des skills officielles qui portent sur la même tâche, rapprochées par la rédaction : elles ne font pas partie du cas décrit.

• Mettre en place un design system ExpoExpo · La skill aide à construire et à maintenir un design system dans une app Expo : jetons (couleur, espacement, typographie, rayons, ombres, mouvement), structure de composants réutilisables (variante, taille, état), et règles pour extraire une vue répétée.
• Créer ou mettre à jour des écrans Figma depuis le codeOpenAI · S’utilise avec figma-use lorsque la tâche consiste à traduire une page, une vue ou une mise en page multi-sections d’une application vers Figma (écrire dans Figma, pousser une page, aligner un écran sur le code, convertir une modale).
• Implémenter une maquette Figma en codeOpenAI · Prérequis obligatoire, d’après le SKILL.md, avant d’appeler l’outil MCP Figma get_design_context.