Mis à jour 15 juillet 2026

L’IA et les systèmes de design : le guide pratique

Les outils d’IA génèrent interfaces, code et images rapidement — mais ils ne tiennent pas un système de design. Chaque réponse est échantillonnée depuis zéro, donc les couleurs, les tailles et les espacements dérivent à moins que l’IA ne lise depuis une source déterministe : des design tokens pour le code, une palette nommée pour les images. Cette séparation — l’IA construit, le système tient — est l’hypothèse de travail derrière chaque guide de ce hub. La version en un seul écran, c’est un système composé unique, exporté sous forme des fichiers que lit un assistant IA.

Les deux flux de travail

L’IA rencontre un système de design à deux endroits, et la discipline est la même dans les deux. Quand une IA construit votre interface — un assistant de code, un outil prompt-vers-app — elle inventera des valeurs plausibles partout où le projet ne les fige pas, donc la solution est un fichier de tokens qu’elle peut référencer à la place : des rôles comme --color-accent plutôt que de nouvelles suppositions de hex. Quand une IA génère vos images, elle ne peut pas lire un fichier de tokens du tout — mais elle répond fortement à une palette écrite sous forme de noms descriptifs associés à des valeurs hex. Dans les deux cas, le système est décidé une fois, de façon déterministe, et l’IA le consomme.

Chaque flux de travail a sa propre paire de guides. Pour le code, Comment donner votre système de design à un outil de code IA est la mise en place pratique, et Les design tokens sont l’interface entre le design et l’IA pose l’argument de fond. Pour les images, Pourquoi les générateurs d’images IA ratent vos couleurs de marque explique honnêtement la limite, et Comment prompter des images IA avec une palette de couleurs complète transforme une palette en langage de prompt qui joue avec le modèle plutôt que contre lui.

Ce que l’IA fait bien — et où les mathématiques prennent le relais

Les guides ici ne sont pas des mises en garde contre l’IA ; ils tracent une frontière de travail. Les modèles sont bons là où l’échantillonnage est bon : direction, variation, échafaudage, nommage. Ils ne sont pas fiables pour ce qui doit être calculé : ratios de contraste face à un plancher, paliers de luminosité perceptuellement réguliers, tailles de texte qui suivent vraiment le ratio, thèmes sombres dérivés plutôt qu’inversés. Traitez le modèle comme un collaborateur rapide sans mémoire pour les valeurs, et les deux moitiés du flux de travail deviennent plus faciles à raisonner.

La frontière se teste au cas par cas plutôt que de s’affirmer : ChatGPT peut-il construire un système de design ? mène l’expérience de bout en bout, Pourquoi l’IA se trompe sur les mathématiques de l’échelle typographique et Générateurs de palettes de couleurs par IA situent le point de passage pour le texte et la couleur respectivement, et Pourquoi les modes sombres de l’IA ont l’air faux montre ce qui arrive quand un modèle invente des valeurs qui auraient dû être dérivées.

Où ce hub rejoint le reste

Les guides IA s’appuient sur le reste de la bibliothèque : les design tokens sont le contrat que lit un assistant de code, les échelles de couleur fournissent les rampes régulières qui manquent aux palettes d’IA, le contraste couvre les planchers qui doivent être calculés, le mode sombre développe en entier l’argument dériver-ne-pas-inventer, et les couleurs de marque et les échelles typographiques définissent les valeurs nommées et les mathématiques d’échelle auxquelles tout ce qui précède fait référence.

Par où commencer

Si le problème sur votre bureau est la dérive — des écrans qui semblent chacun plausibles et ne collent jamais tout à fait — commencez par Pourquoi les interfaces générées par IA s’écartent de la marque : c’est le diagnostic que traite chaque autre guide de ce hub. À partir de là, suivez votre flux de travail — le chemin de l’assistant de code passe par les deux guides de tokens, le chemin des images par la paire de prompting, et les guides qui testent la frontière répondent par des preuves à la question récurrente « le modèle ne pourrait-il pas faire cette partie aussi ? ». La source déterministe dont les deux chemins ont besoin est ce que produit Scale Composer : une seule échelle composée en palette, typographie et grille, exportée sous forme des variables CSS, du thème Tailwind ou du fichier DTCG que les guides vous montrent en train de remettre au modèle.

Guides de ce hub

Donnez un système à votre IA

Le flux de travail se comprime en une seule boucle : composez la palette et l’échelle, puis ouvrez la palette nommée — chaque ton avec un rôle et un hex — et ce vocabulaire est ce que vous collez dans un projet de code sous forme de tokens ou dans un prompt d’image sous forme de langage de couleur. L’IA reste rapide ; les valeurs cessent de bouger.

Questions fréquentes

L'IA peut-elle construire un système de design ?

Elle peut en échafauder un — conventions de nommage, couches de tokens, structure sensée. Ce qu'elle ne peut pas garantir, c'est l'arithmétique : planchers de contraste, paliers de couleur perceptuellement réguliers, valeurs d'échelle qui suivent le ratio. Le flux de travail fiable, c'est l'IA pour la direction, une source déterministe pour les valeurs.

Comment donner mes couleurs de marque à un outil d'IA ?

Pour le code, exportez votre système en design tokens — propriétés personnalisées CSS ou thème Tailwind — placez le fichier dans le projet, et demandez à l'IA de référencer des rôles au lieu d'inventer des valeurs. Pour les images, utilisez votre palette comme vocabulaire de prompt : chaque ton sous forme de nom descriptif associé à son hex.

Pourquoi les interfaces générées par IA semblent-elles incohérentes ?

Chaque réponse est échantillonnée depuis zéro. Sans source verrouillée, chaque couleur et chaque taille est une nouvelle supposition — plausible en soi, différente de la précédente. La dérive est le comportement par défaut, pas un dysfonctionnement, et c'est pourquoi la solution est une source de vérité plutôt qu'un meilleur prompt.

Les générateurs d'images IA comprennent-ils les codes hex ?

De façon peu fiable, pour une seule valeur exacte — aucun générateur n'est un système de gestion des couleurs. Une palette entière écrite sous forme de noms accompagnés du hex est un signal bien plus fort. Les correspondances exactes de couleurs de marque viennent d'images de référence et d'un ajustement a posteriori, pas du texte du prompt seul.

Dans quel format les design tokens doivent-ils être pour les outils d'IA ?

Les assistants de code lisent directement les propriétés personnalisées CSS et les thèmes Tailwind, puisqu'ils apparaissent dans le code que le modèle voit déjà. Le format JSON DTCG est l'échange neutre vis-à-vis des outils : une source qui exporte aussi vers Figma Variables et n'importe quel pipeline de build.

Faut-il laisser l'IA choisir ma palette de couleurs ?

Comme direction, oui — les modèles sont réellement utiles pour l'ambiance et les points de départ. Comme système, non. Le contraste doit être calculé, les paliers doivent être perceptuellement réguliers, et le mode sombre doit être dérivé. Prenez la direction, puis laissez le calcul produire les valeurs.