Conception d'interfaces utilisateur génératives : le guide pratique pour 2026

L'écran que vous déployez en 2026 pourrait n'exister que lorsque l'utilisateur le demandera. C'est le pari des interfaces utilisateur génératives, qui redéfinit la conception même.

Ce document est un guide pratique des interfaces utilisateur génératives. Il définit le terme, nomme les quatre architectures actuellement utilisées en production, propose un vocabulaire de modèles, identifie les modes de défaillance et décrit le nouveau rôle des concepteurs souhaitant rester à la pointe. Son positionnement est volontairement tranché.

Le cycle de surmédiatisation a déjà généré une quantité considérable de pages web de fournisseurs. Ce dont les concepteurs ont désormais besoin, ce sont des principes qui résistent à la prochaine mise à jour.

Qu'est-ce qu'une interface utilisateur générative ?

Une interface utilisateur générative est une interface qui s'assemble dynamiquement en fonction de l'intention de l'utilisateur. Le système dispose d'un vocabulaire de primitives, d'un modèle qui sait comment les composer et d'un contrat définissant les compositions autorisées. L'utilisateur saisit du texte, parle ou clique. L'interface se forme.

L'opposé de l'interface utilisateur générative, c'est la conception que nous pratiquons depuis vingt ans, où chaque écran est un élément statique, dessiné à l'avance et déployé selon un flux fixe. L'interface utilisateur générative ne remplace pas les écrans statiques. Elle prend en charge les cas particuliers. La partie centrale, souvent monotone, de la plupart des produits, où les utilisateurs recherchent une réponse précise et une interactivité minimale, devient une surface générée plutôt qu'une route dans le plan du site.

Un test utile : si la même question posée par deux utilisateurs peut raisonnablement justifier deux mises en page différentes, cette surface est candidate à l'interface utilisateur générative. Si la réponse est toujours une liste de commandes triées par date, elle ne l'est pas.

Pourquoi cela se produit-il en 2026 et non en 2022 ?

Trois éléments devaient se concrétiser simultanément. Les modèles devaient être suffisamment performants en matière de sortie structurée pour pouvoir appeler des outils et générer des arborescences de composants valides au lieu de paragraphes. Les frameworks devaient permettre d'intégrer ces arborescences dans une application en cours d'exécution. Les bibliothèques de composants devaient évoluer vers des vocabulaires exploitables par un modèle.

Début 2026, les trois seront opérationnels. La version 0 intègre à votre code des composants compatibles avec shadcn et vos jetons. Le SDK IA Vercel vous permet de diffuser des composants React depuis un serveur, au fur et à mesure de leur génération par le modèle. Claude Artifacts affiche un programme interactif autonome au sein d'une conversation.

ChatGPT Canvas considère le document et son interface comme une seule surface modifiable. Bolt et Same.new permettent de créer des applications exécutables à partir d'une invite. Les outils de Anthropic et le compositeur de Cursor permettent aux agents d'accéder à des systèmes structurés et d'y interagir.

Il ne s'agit pas du même produit. Ils témoignent de l'existence de l'infrastructure sous-jacente et du fait que la réflexion sur la conception peut désormais se concentrer sur la manière de concevoir efficacement des interfaces utilisateur génératives, et non plus sur leur simple fonctionnement.

Les quatre architectures déployées en production

La plupart des interfaces utilisateur génératives en production adoptent l'une de ces quatre architectures. Choisissez judicieusement, car ce choix influence votre système de conception, vos évaluations et votre budget de latence.

1. Composants rendus LLM. Le modèle sélectionne des composants parmi un vocabulaire fixe de votre code et génère un arbre typé. Il s'agit du modèle de kit de développement logiciel (SDK) d'IA Vercel. Prévisible, cohérent avec votre marque, facile à évaluer, sa complexité dépend de la richesse de votre bibliothèque.

2. Appels d'outils structurés. Le modèle appelle un outil qui renvoie des données structurées, lesquelles sont ensuite affichées par une mise en page statique. La plupart des fonctionnalités des applications de messagerie instantanée fonctionnent ainsi, avec une interface fixe et un contenu dynamique. Solution économique, sûre, mais peu flexible.

3. Génération de code à la demande. Le modèle génère le code qui produit l'interface, selon des modèles tels que Claude Artifacts, v0, Bolt, Same.new et ChatGPT Canvas en mode code. Portée maximale, risque maximal, et surtout, la plus difficile à maintenir en accord avec l'image de marque et accessible.

4. Hybrides. La catégorie la plus intéressante, où se retrouvent la plupart des produits complexes. Une structure d'interface utilisateur statique fiable, un vocabulaire de composants rendus LLM pour la partie dynamique, et une solution de génération de code pour les rares cas spécifiques.

Si vous ne savez pas quelle architecture vous utilisez, vous utilisez la mauvaise.

Comment choisir ?

Trois questions déterminent l'architecture.

| Question | Rendu LLM | Appels d'outils | Génération de code | Hybride |

|---|---|---|---|---|

| La cohérence de la marque est-elle primordiale ? | Forte | Très forte | Faible | Forte |

| L'interface a-t-elle besoin de mises en page originales ? | Parfois | Presque jamais | Oui | Oui |

| Pouvez-vous tolérer quelques secondes de latence de génération ? | Non | Non | Souvent oui | Mixte |

| Qu'est-ce qui dysfonctionne en premier en cas de problème ? | Erreurs de composition | Contenu incorrect | Code erroné | Erreurs de limites |

Les composants rendus LLM constituent le comportement par défaut idéal pour la plupart des équipes. La génération de code est pertinente lorsque l'interface est véritablement ponctuelle, comme une analyse personnalisée ou un prototype réalisé rapidement, et que l'utilisateur est conscient de consulter une ébauche. Les appels d'outils gèrent les cas où la mise en page est définie et où seules les données sont dynamiques. Les solutions hybrides sont celles que l'on adopte après douze mois de trafic en production.

Le langage de patrons : ce que les concepteurs conçoivent réellement

L'interface utilisateur générative ne supprime pas le travail de conception. Elle le déplace. Le produit livré est un vocabulaire, et non un écran.

Un vocabulaire fonctionnel comporte cinq couches.

1. Primitives. Les composants atomiques que le modèle est autorisé à utiliser : carte, tableau, graphique, formulaire, liste, image, bulle de texte, bloc de code. Chacun nécessite des propriétés typées que le modèle peut satisfaire.

2. Emplacements d'intention. Zones nommées que le modèle remplit en fonction de l'intention de l'utilisateur. « Résumé », « Preuve », « Action », « Suivi ». Les slots contraignent la composition sans la figer.

3. États de repli. Chaque primitive doit disposer d'un état vide, de chargement, partiel et refusé. Le modèle générera constamment ces quatre états. Concevez-les comme des artefacts de premier ordre.

4. Fonctionnalités de récupération. Modification sur place, régénération, « Afficher une autre version », annulation. Les interfaces génératives sont des conversations, et les conversations ont besoin d'un bouton de retour.

5. Citation et interface utilisateur source. Indiquez la provenance des données, la date et l'heure de leur récupération, ainsi que le niveau de confiance du système. Sans cela, une interface utilisateur générative paraît trompeuse. Avec ces informations, le même résultat paraît honnête.

Si un concepteur ne peut pas expliquer le contenu de chaque couche du vocabulaire dans son produit, c'est que le vocabulaire n'existe pas encore et que le modèle ne fait que des suppositions.

Les emplacements d'intention, en pratique

Les emplacements d'intention sont la partie que la plupart des équipes négligent et regrettent ensuite. Considérez-les comme les nouveaux wireframes.

Un emplacement est une zone nommée et typée, avec des règles définissant son contenu. « Réponse principale » peut accepter une légende, un tableau ou un graphique, mais jamais un formulaire. « Étape suivante suggérée » peut accepter un bouton ou une carte avec un seul appel à l'action, jamais un long paragraphe.

Le modèle est informé des emplacements dans son invite système, de la même manière que vous brieferiez un designer junior. L'interface utilisateur affiche les emplacements dans une grille de mise en page stable, ce qui donne l'impression d'un produit unique, même si son contenu change constamment.

Le résultat est une interface conçue qui varie par hasard, et non un amas généré aléatoirement. C'est là toute la différence.

Les modes de défaillance que vous rencontrerez et comment les éviter

L'interface utilisateur générative présente des défaillances spécifiques et reproductibles. Identifiez-les dès maintenant ou vous les redécouvrirez en production.

• Interface utilisateur hallucinatoire. Le modèle crée un bouton inactif, un onglet vide ou un graphique avec des chiffres inventés. Pour y remédier, imposez des contrats de composants stricts, une validation côté serveur de chaque arbre généré et désactivez les contrôles dont le gestionnaire n'est pas défini.

• Tolérance à la latence. L'utilisateur attend patiemment que le modèle calcule. Diffusez les résultats partiels, réservez l'espace de mise en page avant le contenu et affichez l'intention du modèle (« création d'un tableau comparatif ») avant l'arrivée des données.

• Piège du canevas infini. Les surfaces de génération de code semblent illimitées et finissent par être inutilisables. Limitez le canevas. Montrez à l'utilisateur les types de résultats possibles dès le départ. Une grille d'invites de commande est toujours préférable à une zone de texte vide.

• Dépendance à un modèle unique. Un vocabulaire adapté aux spécificités d'un fournisseur devient inutilisable dès que vous changez de modèle. Rédigez des contrats de composants que tout modèle raisonnable peut satisfaire et effectuez vos évaluations auprès d'au moins deux fournisseurs avant la mise en production.

• Amnésie conversationnelle. L'interface oublie ce qu'elle vient de générer. Conservez les artefacts générés comme des objets de premier ordre que les utilisateurs peuvent nommer, enregistrer, partager et auxquels ils peuvent revenir. ChatGPT Canvas a bien compris cela. La plupart des produits de messagerie instantanée se trompent.

Les équipes qui déploient des interfaces utilisateur génératives durables sont celles qui traitent ces problèmes comme des problèmes d'architecture dès le premier jour, et non comme des bugs à corriger en assurance qualité.

Comment évaluer une interface utilisateur générative

Vous ne pouvez pas évaluer une fonctionnalité d'interface utilisateur générative comme vous évaluez une page statique. Le résultat n'est pas un artefact unique, mais une distribution.

Une évaluation fonctionnelle comporte trois niveaux. La première étape consiste en une grille d'évaluation déterministe exécutée sous forme de code sur chaque arbre généré : le modèle utilise-t-il uniquement les composants autorisés ? Respecte-t-il les exigences des emplacements d'intention ? Inclut-il une citation lorsque le schéma l'exige ? Un contrôle est-il arrivé sans gestionnaire associé ?

Ces vérifications sont binaires (réussite/échec). Elles sont effectuées à chaque modification de l'invite, des composants ou du modèle. En cas d'échec, l'interface refuse de s'afficher et revient à un état stable. Traitez-les comme une équipe backend traite les tests d'intégration, avec le même pouvoir de blocage lors du déploiement.

La deuxième étape est une évaluation humaine par échantillonnage. Un petit panel, comprenant idéalement un designer de marque et un expert du domaine, évalue dix à vingt résultats générés par semaine selon une grille d'évaluation à cinq points portant sur le ton, la cohérence avec la marque et l'utilité.

Suivez l'évolution du score. Une baisse indique une régression. Une hausse signifie qu'une modification a porté ses fruits et qu'il est important d'en identifier la cause.

La troisième étape est le retour d'information intégré au produit. Chaque interface générée est accompagnée d'un système de vote positif, négatif et d'un commentaire libre. Il est essentiel de transmettre ces informations à l'équipe responsable du vocabulaire, et non de les envoyer dans une boîte de réception générique où elles risquent de se perdre. Les interfaces utilisateur génératives qui s'améliorent sont celles dont les responsables lisent tous les commentaires pendant les trois premiers mois.

Comment définir le périmètre d'un projet d'interface utilisateur générative

La plupart des projets d'interface utilisateur générative échouent lors de la définition du périmètre, et non lors de l'exécution. Les équipes choisissent une interface trop importante, trop réglementée ou trop complexe, et six semaines plus tard, le retour en arrière est justifié par le manque de maturité de l'IA.

Une interface idéale présente trois caractéristiques : l'utilisateur bénéficie clairement d'une réponse personnalisée, la solution de repli statique est acceptable en cas d'échec de la génération, et une réponse erronée est récupérable plutôt que catastrophique.

Les tableaux de bord internes, les réponses des centres d'aide et les synthèses analytiques personnalisées remplissent ces trois conditions. La création de compte, l'autorisation de paiement et les conseils médicaux n'en remplissent aucune.

Envisagez ce travail comme une mise à jour du vocabulaire, et non comme une nouvelle fonctionnalité. Le livrable n'est pas « le tableau de bord généré sera livré au troisième trimestre », mais plutôt « le vocabulaire v1, la suite d'évaluation v1 et l'interface générée v1 seront livrés ensemble au troisième trimestre, et toute interface générée v2, quel que soit le produit utilisé ultérieurement, utilisera le même vocabulaire ». Considérez le vocabulaire comme un investissement pour la plateforme. C'est le seul cadre qui justifie l'effort de conception que ce travail requiert réellement.

Le nouveau rôle du designer : vocabulaires, évaluations et intentions

L'interface utilisateur générative redéfinit le rôle du designer plus que tout autre changement depuis le responsive design.

L'unité de travail passe des écrans aux systèmes. Les designers cessent de dessiner chaque état et commencent à organiser les primitives, les emplacements et les solutions de repli qui composent le modèle. Le fichier Figma devient une référence pour le vocabulaire, et non la destination du travail.

Les spécifications deviennent des évaluations. Une surface générative ne peut être validée par rapport à une seule maquette, car une même requête produit de nombreux résultats valides.

Les concepteurs utilisent donc des grilles d'évaluation : « Le résultat doit inclure une citation, utiliser la palette de la charte graphique, suggérer une action de suivi et ne jamais recommander le produit d'un concurrent. » Ces grilles sont exécutées comme des évaluations automatisées à chaque nouvelle version du modèle. La qualité du design devient mesurable.

La documentation se transforme en guide d'utilisation. La requête système décrivant comment le modèle doit composer votre vocabulaire est désormais un élément de conception à part entière. Elle est versionnée, révisée et, dans de nombreux produits, constitue le document de conception le plus important rédigé par l'équipe.

À quoi ressemble un bon design dans les produits commercialisés

Quelques exemples pour illustrer les principes, et non pour les recommander.

L'interface utilisateur générative primitive du SDK IA Vercel traite les composants comme un vocabulaire typé que le modèle transmet à une route rendue côté serveur. L'avantage ? La cohérence et la prévisibilité de la marque. Le coût est limité par la bibliothèque que vous avez développée.

Claude Artifacts illustre la génération de code à la demande au sein d'une conversation, avec persistance et édition directe. L'application excelle en matière de récupération et s'appuie sur le modèle « artefact-objet ». Elle assume pleinement son rôle de surface de travail, et non de produit final.

ChatGPT Canvas est une application hybride. La conversation définit l'intention, le canevas fournit un artefact stable et modifiable, et le modèle peut y générer du texte ou du code. L'enseignement principal est que l'ancrage du contenu généré à un canevas persistant réduit considérablement la charge cognitive liée à l'utilisation d'un modèle.

v0 et Bolt sont des applications de génération de code optimisées pour la mise en production. Elles démontrent que les modes de défaillance sont gérables lorsque le résultat est remis à un développeur pour relecture, mais irréalisables lorsqu'il est présenté directement à l'utilisateur final.

Same.new illustre les conséquences d'une utilisation de l'application entière comme artefact généré. Utile pour le prototypage, mais risqué pour toute application supportant une charge importante. Les outils de Anthropic et le compositeur de Cursor laissent entrevoir la prochaine étape : l’intégration d’interfaces utilisateur générées dans des systèmes backend structurés.

Le principe reste le même : plus l’interface principale est générative, plus les fonctionnalités environnantes sont complexes et plus le système de conception autour du modèle porte le poids de la marque, de l’accessibilité et de la confiance. Une interface utilisateur générative n’est jamais uniquement le modèle ; c’est le modèle auquel s’ajoute l’infrastructure développée par l’équipe.

Comment démarrer ce trimestre

Actions concrètes, dans l’ordre, que toute équipe produit peut mettre en œuvre immédiatement.

1. Choisissez une interface. Une fonctionnalité unique où les utilisateurs accèdent actuellement à une page statique qui gagnerait probablement à être dynamique. Les rapports, les tableaux de bord, les recommandations et les résumés sont de bons exemples. Ignorez le processus de paiement, l’authentification et tout élément réglementé.

2. Inventoriez le vocabulaire. Listez tous les composants primitifs de votre système de conception possédant des propriétés typées et un état testé (vide, chargement, erreur). Si la liste contient moins de dix éléments, corrigez-la avant toute génération.

3. Définissez trois emplacements d'intention. La structure la plus simple est « réponse, preuve, étape suivante ». Utilisez-la jusqu'à nouvel ordre.

4. Rédigez une invite système qui nomme le vocabulaire. Pas de descriptions. Noms des composants, types de propriétés, règles des emplacements et contraintes explicites sur ce que le modèle ne peut pas produire.

5. Créez des évaluations avant de développer la fonctionnalité. Cinq à dix invites de test, chacune accompagnée d'une grille d'évaluation. Exécutez-les à chaque modification de l'invite, des composants ou du modèle.

6. Déployez la fonctionnalité progressivement, auprès de 10 % du trafic, avec un système de retour d'information sur chaque interface générée. Consultez les retours chaque matin pendant le premier mois.

7. Choisissez votre deuxième modèle. Sélectionnez un fournisseur de secours et effectuez les mêmes évaluations avant de vous fier au modèle principal. Le jour où une nouvelle version d'un modèle perturbe votre vocabulaire, vous voudrez un simple changement de configuration, pas une refonte complète.

Ceci n'est pas théorique. Une équipe de trois personnes peut réaliser ce processus en six semaines et en apprendre davantage sur l'interface utilisateur générative qu'en une année de lecture.

Ce que cela signifie pour les trois prochaines années

Les concepteurs qui considèrent cela comme un simple cycle d'outils se trompent. Ceux qui le perçoivent comme un changement de catégorie sont en avance sur leur temps.

L'écran statique n'est pas voué à disparaître. Le formulaire de connexion de l'application web, la page des paramètres, le processus de paiement, tout cela reste visible pour la même raison que les autoroutes restent goudronnées. Ce qui change, c'est la partie centrale de chaque produit, les interfaces où l'utilisateur souhaite une réponse précise et bien présentée. Cette partie centrale est générée, et elle représente la majeure partie de l'interface.

Les systèmes de conception qui survivront seront ceux conçus pour deux types de lecteurs : les humains et les modèles. Des jetons aux noms explicites, des composants avec des propriétés typées, une documentation servant également d'invites, des évaluations testant la composition comme les tests unitaires vérifient la logique : les équipes qui travaillent déjà ainsi prennent de l'avance chaque trimestre. Celles qui continuent de fournir des fichiers Figma impeccables pour les surfaces qu'un modèle peut composer sont sur le point de découvrir ce que signifie l'obsolescence.

L'enjeu est plus simple : les interfaces ne sont plus la finalité de la conception, mais son résultat. Le travail du concepteur évolue vers les systèmes, les référentiels et les vocabulaires qui produisent les interfaces. La tâche se complexifie, l'impact s'accroît, et les concepteurs qui l'apprennent aujourd'hui domineront le secteur d'ici 2029.

Voici le défi : choisissez une surface cette semaine, fournissez un vocabulaire, écrivez les évaluations et lancez-vous.

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900