Pourquoi les interfaces générées par IA dérivent hors marque

Le lundi, vous demandez un tableau de bord à un outil de codage IA, et les boutons principaux reviennent en #2563eb. Le mercredi, vous demandez une page de paramètres — même projet, mêmes instructions — et les boutons arrivent en #3b82f6. Le vendredi, une fenêtre modale d’inscription apparaît en #1d4ed8. Trois vues, trois bleus. Chaque écran paraît raisonnable pris isolément ; rien n’a planté, rien n’a échoué. Mettez-les côte à côte et le projet défend trois opinions légèrement différentes sur sa propre couleur de marque.

Les interfaces générées par IA dérivent hors marque parce qu’un modèle de langage échantillonne chaque réponse à neuf : à moins qu’une valeur exacte ne soit présente dans son contexte, chaque décision de couleur, de taille et d’espacement est une nouvelle supposition — plausible, proche de la précédente, sans lui être identique. La dérive n’est pas un dysfonctionnement à corriger ; c’est le comportement par défaut d’un système génératif qui travaille sans source verrouillée. La solution consiste à donner au modèle une source déterministe de valeurs — des design tokens — qu’il référence au lieu d’inventer.

Voilà la version courte. Le reste de cet article — qui fait partie de notre guide de l’IA et des design systems — explique pourquoi la dérive se produit, pourquoi elle survit à la relecture, et ce qu’une source verrouillée change réellement.

Pourquoi le même prompt produit-il des valeurs différentes ?

Un modèle de langage ne récupère votre bleu de marque nulle part, car à moins que la valeur ne se trouve dans son contexte, il n’existe aucun endroit d’où la récupérer. Il génère sa sortie par échantillonnage : à chaque étape, il choisit parmi les continuations statistiquement plausibles compte tenu de tout ce qu’il a lu. Le modèle a vu un très grand nombre d’interfaces, si bien que son idée d’« un bon bleu pour un bouton principal » n’est pas une valeur unique — c’est une distribution de valeurs, où #2563eb, #3b82f6 et #1d4ed8 se situent tous confortablement. Demandez trois fois et vous obtenez trois tirages.

Il s’agit d’un schéma de comportement de la technologie, non d’un défaut d’un outil particulier, et baisser le hasard ne l’élimine pas : le contexte diffère d’une session à l’autre — la conversation jusqu’ici, les fichiers affichés, l’ordre des requêtes — et le tirage suit le contexte.

Pourquoi « plausible » n’est-il pas synonyme de « cohérent » ?

Parce que la plausibilité se juge une réponse à la fois, tandis que la cohérence est une propriété de l’ensemble. Chacun des trois bleus se défend isolément : un relecteur qui regarde la modale du vendredi voit un écran cohérent doté d’une couleur principale crédible, et l’approuve. La dérive est invisible dans n’importe quelle vue isolée et n’apparaît qu’à travers les vues — ce qui veut dire qu’elle échappe au processus de relecture que la plupart des équipes appliquent réellement, le contrôle écran par écran « est-ce que ça a l’air correct ? ».

La couleur est simplement l’endroit le plus facile où la repérer. Le même schéma produit un corps de texte de 15px sur un écran et de 16px sur le suivant, une graisse de police de 500 à côté d’une 600, un écart de 12px là où son voisin en a reçu 14px. Chaque choix est correct ; l’ensemble est du bruit.

Pourquoi les utilisateurs remarquent-ils une dérive qu’ils ne savent pas nommer ?

Les interfaces se lisent en partie par reconnaissance. Une fois qu’un utilisateur a rencontré le bouton principal quelques fois, il cesse de le lire — sa couleur, sa graisse et sa forme sont traitées comme un signal connu, à un coût cognitif quasi nul. La cohérence est ce qui rend ce raccourci possible. Quand les valeurs vacillent, le raccourci se dégrade en silence : l’utilisateur n’enregistre pas consciemment que le bleu du mercredi diffère de celui du lundi, mais l’interface paraît légèrement moins soignée, déréglée d’une manière difficile à formuler. La reconnaissance de marque fonctionne de la même façon à plus grande échelle : elle se construit à partir de signaux identiques répétés, et des signaux presque identiques la diluent au lieu de la renforcer.

Qu’est-ce qu’une source verrouillée change ?

Elle retire les décisions au niveau des valeurs de la boucle d’échantillonnage. Un fichier de design tokens stocke chaque décision sous forme de donnée nommée — accent contient une couleur exacte, space-4 un écart exact ; notre article sur ce que sont les design tokens en couvre la mécanique. Une fois ce fichier présent dans le projet, la tâche du modèle change de nature — les tokens deviennent l’interface entre le design et l’IA : non plus « produire un bleu plausible » mais « référencer le nom accent ». Produire un nom correct à partir d’une courte liste qu’il peut voir est une tâche qu’un modèle de langage gère de façon fiable ; conserver une valeur hex identique sur vingt sessions n’est pas ce pour quoi il est conçu.

Les valeurs elles-mêmes proviennent d’un calcul plutôt que d’un échantillonnage. Ouvrez une rampe de couleur verrouillée dans Scale Composer — une couleur de départ, dix étapes placées sur une courbe de luminosité en OKLCH, chacune portant un nom et une valeur exacte. Elle ressort de la même façon à chaque fois, parce qu’elle est calculée, non devinée.

Où l’IA gagne-t-elle encore sa place ?

L’enjeu est une division du travail, non un verdict. Les outils génératifs sont forts en structure et en variation : échafauder une vue, câbler des composants, mettre en page un formulaire, proposer trois alternatives avant midi. Ce qu’ils ne font pas bien, c’est maintenir de nombreuses valeurs exactes stables dans le temps — ou les parties d’un design system qui relèvent du calcul plutôt que du choix. Les exigences de contraste comme les minimums de la WCAG sont de l’arithmétique sur la luminosité ; des étapes de couleur perceptuellement régulières relèvent d’un placement sur une courbe. Celles-ci ont de bonnes réponses, et les bonnes réponses doivent être vérifiées, non échantillonnées. Scale Composer les calcule : les rôles sémantiques — arrière-plan, texte, accent — sont dérivés de la rampe avec un plancher de contraste et notés avec APCA, de sorte que les associations tiennent avant que quoi que ce soit n’atteigne un prompt.

L’arrangement de travail est donc le suivant : le système déterministe détient les valeurs, et l’IA construit avec elles.

De la rampe aux rôles

Une rampe est une matière brute ; ce qu’une IA finit par référencer, ce sont des noms de rôles. Ouvrez les rôles sémantiques dérivés de cette même rampe verrouillée — arrière-plan, texte et accent attribués à partir des étapes de la rampe, chaque association vérifiée par rapport au plancher de contraste. Cette courte liste de noms est ce qui remplace la distribution dans laquelle le modèle échantillonnerait autrement : donnez-lui la liste, demandez-lui de référencer les noms, et le problème des trois bleus n’a plus rien pour dériver.