L’IA chez Qonto, au-delà de la hype
Chez Qonto, les designers ne se contentent plus de produire des maquettes ; ils codent, livrent et impactent la production grâce à un duo surpuissant : le Design System et l'IA. Loin des idées d'une automatisation totale qui effacerait le rôle du designer, une autre voie, bien plus concrète, se dessine : celle d'un Design System « augmenté ». Dans ce modèle, la technologie ne remplace pas l'humain, mais libère les équipes de production pour les repositionner au cœur de la stratégie et de l'impact technique direct.
C'est ce qu'explore Julien Pelletier lors d'un échange avec Marion Echevard, qui pilote le Design System chez Qonto, avant de prendre aussi en charge la supervision des pratiques d'IA au sein des équipes de design. L’IA n’est pas une menace pour le Design System, elle en est l’utilisateur le plus exigeant.
Elle transforme le Design System en une infrastructure indispensable qui permet aux designers de devenir de véritables « Impact Builders ». Comme le souligne Marion :
On ne veut pas utiliser l'IA pour utiliser l'IA. On veut l'utiliser pour que ça nous fasse gagner du temps.
Le Design System : Le manuel d’instruction de l’IA
L’un des plus grands défis de l’IA générative dans le design est la précision. Si vous demandez à une IA de concevoir un écran sans lui donner de cadre, elle improvisera. Chez Qonto, l'expérience a montré que même avec un Design System mature, l'IA peut rapidement dévier si elle n'est pas guidée par une sémantique stricte. C'est le risque de la "double peine" : si l'IA génère du code qui ne respecte pas les standards, les équipes perdent plus de temps à nettoyer qu'à créer.
La clé réside dans l'alignement parfait entre ce que le designer voit dans Figma et ce que l'IA manipule dans le code.
[Le designer] sait que le nom de son composant dans Figma sera le même que dans le code. Donc ça guide un peu mieux l'IA. [...] Pour être AI compliant en terme de design system, il faut qu'on *tokenise des éléments qu'on n'a pas encore tokenisés par exemple [...] le spacing, les borders radius…
* : Tokeniser, c'est remplacer une valeur de design brute (un code couleur, un pixel) par un nom intelligible et standardisé (ex : spacing-m). Ce langage commun entre Figma et le code permet à l’IA de comprendre et d’appliquer vos règles métier sans erreur.*
La sémantique, remède à l'hallucination
Lors des phases de test, l'équipe a remarqué que l'IA "hallucine" dès qu'elle rencontre un vide sémantique. Sans tokens précis pour les espacements, l'IA peut générer une marge de 80px là où la charte en impose 32px. Ce n'est pas un problème de puissance du modèle, mais un problème d'accès à la règle métier. Pour pallier cela, Qonto utilise sa documentation centralisée sur Notion, exportée en Markdown, pour nourrir des outils comme Cursor et guider l'IA.
Une documentation spécifique au contexte métier
L'intérêt d'un Design System "AI-ready" dépasse la simple esthétique. Il s'agit d'intégrer des connaissances métiers profondes. Comme l'explique Marion :
Ta documentation a tout intérêt à embarquer des éléments super spécifiques à ton produit avec des use cases principaux... Nous, on est dans le domaine bancaire, donc on parle d'IBAN, on parle vraiment de trucs qui sont super spécifiques. Là, ça te permet vraiment d'aller loin.
Du "Vibe Coding" à la mise en prod : Le designer augmenté
Grâce au Design System et à des outils comme l'IDE Cursor, les designers de Qonto franchissent une barrière historique : celle de la production. Le design devient un acte technique concret. Marion observe cette évolution avec enthousiasme :
Maintenant chaque product designer peut être capable de faire une modification en prod. Tu peux vraiment changer tes couleurs, tes composants, corriger des bugs UI...
Bâtir ses propres outils : Le designer devient "Tool Builder"
La véritable démonstration de force réside dans la création d'outils internes "vibe codés" par les designers eux-mêmes. Quelques exemples :
- Motion Design : Un outil interne qui permet d'animer des SVG en utilisant exclusivement les tokens de mouvement de Qonto, incluant des alertes si l'on sort du cadre défini.
- Asset Manager & Typo : Un outil de gestion des ressources utilisé par les PMs , ainsi qu'un système pour tester en live les modifications de typographies et de variables directement sur l'application.
Cette capacité à créer des outils "sur mesure" change la perception du métier : le designer n'attend plus une ressource technique, il construit son propre levier.
Les nouveaux défis : Le "Git workflow" et le mentorship d'IA
L'adoption de ces outils n'est pas sans friction et demande de nouvelles compétences. Le premier frein identifié est la barrière technique du versioning.
La barrière technique
Comprendre Git est devenu le nouveau prérequis indispensable pour construire des produits dont le code est généré par une IA.
Pour moi le vrai enjeu, c’est que le fonctionnement de Git n’est pas toujours évident à appréhender. C’est pourtant la base de la base, mais ce workflow reste un vrai frein à l’adoption.
Ce blocage n'est pas tant lié à la lecture du code — le HTML ou le CSS restant souvent accessibles — qu'à la logique même du versioning et de la collaboration technique. Pour un designer, voir sa *Pull Request afficher 300 lignes de modifications peut être une source d'appréhension légitime.
* Pull Request : demande de validation envoyée à l’équipe technique pour intégrer des modifications au produit final. Elle permet aux collaborateurs de relire, discuter et approuver les changements avant qu'ils ne soient fusionnés avec la version officielle de l'application.*
L’enjeu est alors d'apprendre à préparer des Pull Requests bien "scopées" : au lieu de soumettre des "PR fleuves" décourageantes à la relecture, le designer gagne à segmenter son travail par feature. Cette approche permet aux développeurs de réaliser des reviews plus efficaces et ciblées, garantissant que le code généré s'intègre de manière fluide sans créer une charge de travail supplémentaire pour les équipes techniques.
Savoir prompter, c'est savoir mentorer
Pour Marion, prompter une IA demande les mêmes qualités que le mentorship humain : clarté et précision des objectifs.
L'IA c'est un peu comme un collaborateur. Si tu n’es pas capable de le guider convenablement en lui donnant des pré requis très clairs et tes attentes sur ce que tu veux, à la fin... tu auras un résultat imparfait.
Pour scaler cette approche, Qonto a mis en place des templates de prompts et des agents spécialisés (via des fichiers Markdown) qui intègrent déjà les guidelines techniques et design de l'entreprise.
Conclusion : Devenir "AI-Compliant"
L'avenir du design ne se joue plus seulement sur la capacité à dessiner des écrans, mais sur la capacité à structurer la connaissance. Pour Marion, les entreprises sans Design System solide seront irrémédiablement distancées.
Le design system te permettra de faire fonctionner l'IA. [...] Cette évolution technologique, va aussi creuser les ponts entre les entreprises qui ont mis les moyens sur le design system [...] versus celles qui ont tout juste un début d'UI kit pas du tout aligné avec la tech [et] aucune documentation.
Chez Qonto, le Design System est devenu l'infrastructure indispensable de l'ère technologique actuelle. Maîtriser la sémantique et la structure est désormais la condition sine qua non pour devenir un "Impact Builder".
