Comment Cursor et l'IA m'ont fait sauver des semaines d'audit de notre design system

L'IA fait désormais partie de la boîte à outils de chaque designer, mais je crois que sa plus grande valeur ne réside pas dans la génération d'interfaces. Elle sert surtout à régler des problèmes complexes et répétitifs plus rapidement, pour qu'on puisse se concentrer sur ce qui demande vraiment un esprit critique.

J'ai récemment mis ça en pratique en m'attaquant à un enjeu de design system qui aurait pris des semaines, voire des mois, à auditer manuellement.

Le défi

Nos design tokens dans Figma n'étaient plus synchronisés avec ceux dans Storybook. Certaines valeurs HEX ne correspondaient pas, des tokens sémantiques pointaient vers différentes couleurs primitives, et quelques tokens sémantiques n'étaient même pas reliés à la bonne primitive. Faire l'audit de chaque token à la main n'était tout simplement pas réaliste, alors j'ai cherché une meilleure solution.

Ce que j'ai fait avec l'IA

En utilisant Cursor, j'ai développé un outil d'audit propulsé par l'IA qui comparait nos tokens Figma avec ceux de Storybook et signalait automatiquement les incohérences. J'ai commencé par afficher visuellement les couleurs primitives de Figma dans une interface générée par l'IA pour pouvoir balayer la palette rapidement et repérer les problèmes d'un coup d'œil. J'ai ensuite fait la même chose avec les primitives de Storybook, mais en ajoutant des indicateurs pour montrer exactement quelles valeurs HEX ne correspondaient pas à ce qui était défini dans Figma. Ça a rendu le repérage des écarts entre les deux sources pas mal plus simple, sans devoir tout comparer à la main.

Une fois les valeurs HEX des primitives nettoyées, je suis passé à la comparaison sémantique entre Figma et Storybook. Cette étape-là a été plus coriace parce que la sémantique ne concordait pas du tout. Malgré tout, j'ai réussi à faire ressortir chaque token sémantique qui n'était pas lié à une primitive ou qui utilisait une valeur HEX inventée de toutes pièces. Dans ces cas-là, l'outil suggérait la couleur primitive la plus proche qu'il jugeait appropriée. J'ai validé manuellement chaque proposition pour m'assurer que ça restait fidèle à la marque et aligné avec le design system.

Au lieu de passer mon temps à chasser les anomalies, j'ai pu me concentrer sur la validation des résultats et sur des décisions de design éclairées.

Résultat

L'outil a transformé ce qui aurait été un audit manuel interminable en un flux de travail rapide et fiable. Ça m'a sauvé des semaines de travail, renforcé la confiance envers notre design system et mis en lumière des problèmes qu'on aurait facilement pu manquer.

Ce projet a confirmé ce que j'apprécie le plus de l'IA. Sa plus grande force n'est pas de remplacer les designers. C'est d'éliminer les tâches redondantes pour qu'on puisse consacrer notre temps à régler de vrais problèmes. Parfois, la meilleure solution de design n'est pas un énième composant Figma : c'est de bâtir le bon outil pour la tâche.