ai for designersMay 1, 20269 min read

Les surfaces de prompt : la nouvelle primitive UX

Le champ de prompt est le nouveau bouton. Un playbook concret pour concevoir les surfaces de prompt comme une primitive UX de premier plan : anatomie, patterns, modes d'échec et audit avant mise en production.

By Boone
XLinkedIn
prompt surfaces

La surface de prompt est le nouveau bouton. Un designer qui la traite comme une barre de recherche livre un produit de 2018 en 2026. Le champ de texte a avalé le formulaire, l'assistant pas-à-pas et la plupart du panneau de réglages, et les produits qui gagnent sont ceux qui traitent le champ comme une primitive UX de premier plan, pas comme un textarea avec une icône de avion en papier.

La plupart des équipes livrent encore le textarea. Un rectangle nu, un placeholder qui dit « Demandez ce que vous voulez », un bouton d'envoi, et rien d'autre. C'est une barre de recherche qui se prend pour autre chose. Une vraie surface de prompt est un composant avec une anatomie, des affordances, un état et un chemin de récupération.

Cet article est la version opérationnelle. Ce qu'est vraiment une surface de prompt, les huit parties que livre toute bonne surface, six modes d'échec qui les tuent, six patterns nommés que les meilleurs produits utilisent en ce moment, et un audit en sept questions qui vous dit en trois minutes si votre surface est une primitive ou un bouche-trou.

Une surface de prompt n'est pas un textarea

Une surface de prompt est toute la zone dans laquelle l'utilisateur tape, configure et relit. Le champ de saisie en est la partie visible. Le composant, c'est tout ce qui est boulonné autour.

Le champ lui-même n'est qu'un élément. L'état vide avec ses suggestions, les emplacements de pièces jointes, le sélecteur de modèle, les bascules d'outils, l'affordance d'envoi, la zone de sortie en streaming, les contrôles de régénération, d'édition et de branche, et la surface d'historique forment le reste. Une équipe qui ne conçoit que la boîte a livré la partie émergée de l'iceberg.

Cursor, Claude, Linear AI, v0, Lovable, Notion AI, Raycast AI, Vercel AI Playground. Aucun ne traite le champ comme un textarea. Chacun livre une surface structurée où la saisie est la porte d'entrée vers une interaction configurable, observable et réversible. C'est ça, la barre à franchir.

Rendu voxel d'une unique surface de prompt surdimensionnée traitée comme de l'architecture, avec des chips flottantes pour les mentions, les pièces jointes, les outils, le modèle, et un cube d'envoi trapu
Rendu voxel d'une unique surface de prompt surdimensionnée traitée comme de l'architecture, avec des chips flottantes pour les mentions, les pièces jointes, les outils, le modèle, et un cube d'envoi trapu

L'anatomie d'une surface de prompt qui fonctionne

Huit parties. État vide, suggestions, emplacements de pièces jointes, sélecteur de modèle, bascules d'outils, affordance d'envoi, zone de sortie en streaming, contrôles de révision. Une surface de prompt qui en livre moins de six est incomplète.

L'état vide doit enseigner le produit sans déverser un mur de texte. La barre de commandes de Cursor affiche les fichiers récents et les prompts récents. Le menu slash de Notion AI est l'état vide, ramifié par intention. v0 livre une galerie de prompts de départ qui font aussi office de preuve. « Demandez ce que vous voulez » est l'ennemi. Il exige que l'utilisateur invente le cas d'usage.

Les suggestions font la moitié du chemin vers l'utilisateur. Suggestions en chips en ligne, historique des prompts récents, complétions sensibles au contexte. Le sélecteur @-mention de Cursor est l'exemple de manuel : il cadre le prompt sur un fichier, une fonction ou un doc en une seule frappe.

Les emplacements de pièces jointes rendent la saisie multimodale. v0 permet de coller une capture d'écran et de prompter dessus. Claude accepte les PDF, les images et les fichiers de code. Lovable accepte un frame Figma comme contexte. L'emplacement est le contrat.

Le sélecteur de modèle, les bascules d'outils et l'affordance d'envoi forment la couche de configuration. Ils disent à l'utilisateur ce qui va se passer avant que ça se passe. Vercel AI Playground expose le sélecteur de modèle comme le contrôle le plus visible. Cursor bascule entre mode agent et édition en ligne avant l'envoi. Cachez la configuration et l'utilisateur devine.

La zone de sortie en streaming et les contrôles de révision bouclent la boucle. Le panneau d'artefacts de Claude est l'un des exemples les plus propres jamais livrés. La sortie a sa propre zone, la surface de prompt reste active, et l'utilisateur peut modifier le prompt ou régénérer l'artefact sans perdre ni l'un ni l'autre.

Schéma voxel en vue éclatée d'une surface de prompt décomposée en huit blocs de composants étiquetés flottant dans les airs, avec de fins connecteurs corail montrant qu'ils appartiennent à un seul composant
Schéma voxel en vue éclatée d'une surface de prompt décomposée en huit blocs de composants étiquetés flottant dans les airs, avec de fins connecteurs corail montrant qu'ils appartiennent à un seul composant

Les signaux de confiance sont le détail porteur

La surface de prompt est l'endroit où l'utilisateur décide s'il fait confiance au modèle. Chaque signal visible gagne de la confiance ou la brûle.

La confiance naît de la clarté. L'identité du modèle est visible. Les appels d'outils sont listés avant leur exécution, ou diffusés pendant. Le retour de streaming est honnête, pas un faux spinner qui fait semblant de travailler. L'annulation est accessible en moins d'une seconde. Le chemin d'erreur dit ce qui a échoué et pourquoi. C'est le même savoir-faire qu'exige une bonne UI d'agent, appliqué à la saisie.

Le signal de confiance le moins cher, c'est le bouton stop. Une réponse en streaming sans stop visible est une surface hostile. L'utilisateur regarde le modèle écrire quelque chose dont il sait déjà que c'est faux, et la seule issue est de fermer l'onglet. Claude, Cursor et v0 livrent tous un stop visible. La plupart des UI de chat maison l'oublient.

Six modes d'échec qui tuent les surfaces de prompt

La plupart des surfaces de prompt en production aujourd'hui livrent au moins l'un d'entre eux. Les correctifs n'ont rien de subtil.

Le rectangle vide. Un textarea, un placeholder qui dit « Comment puis-je aider », et rien d'autre. L'utilisateur invente le cas d'usage de zéro. Correctif : un état vide structuré avec trois à cinq points de départ concrets liés aux vraies capacités du produit.

Le champ sans suggestions. La surface accepte un prompt mais n'en propose jamais. Les utilisateurs avancés apprennent les patterns. Les nouveaux partent. Correctif : prompts récents, suggestions cadrées (l'@-mention de Cursor, le sélecteur de sélection de v0) et complétions en ligne calibrées sur le contexte courant.

Le spinner de streaming mort. Un spinner tourne pendant que le modèle enchaîne dix appels d'outils en silence en arrière-plan, et l'utilisateur n'a aucune idée de ce que ça signifie. Correctif : diffuser le vrai travail. Appels d'outils visibles, modifications de fichiers visibles, sortie intermédiaire visible.

Le modèle non commutable. Le produit choisit un modèle et cache le choix. Les utilisateurs avancés ne peuvent pas router les tâches lourdes vers un modèle plus fort, et ceux qui surveillent leur budget ne peuvent pas router les légères vers un modèle moins cher. Correctif : exposer le sélecteur, le régler par défaut avec bon sens, mémoriser le choix par tâche.

La surface amnésique. Chaque nouveau prompt réinitialise le contexte. L'utilisateur recolle le fichier, l'URL, le brief à chaque tour. Correctif : une chip de mémoire, un emplacement de contexte épinglé, ou une portée de session que l'utilisateur peut voir et modifier.

La régénération destructrice. Le bouton de régénération écrase la sortie précédente sans historique de versions. L'utilisateur a perdu sa meilleure réponse et ne peut pas la récupérer. Correctif : régénérer comme une branche, pas comme un écrasement, comme le font déjà l'historique de Claude et la pile de versions de v0.

Une bibliothèque de patterns pour les surfaces de prompt

Six patterns nommés séparent les surfaces de prompt qui ressemblent à des primitives de celles qui ressemblent à des bouche-trous. Piochez dans cette liste avant de redesigner quoi que ce soit.

Prompt cadré. Le champ accepte un token de portée qui limite ce que le modèle a le droit de toucher. Le sélecteur @-mention de Cursor en est l'exemple canonique. L'utilisateur tape @layout.tsx et le prompt est cadré sur ce fichier. v0 a une portée similaire pilotée par la sélection : l'utilisateur clique sur une zone du canvas et le prompt agit sur cette zone. Le cadrage transforme un prompt vague en prompt précis sans obliger l'utilisateur à écrire plus.

Prompt piloté par la sélection. L'utilisateur sélectionne quelque chose dans le produit et la surface de prompt apparaît avec la sélection déjà liée comme contexte. v0 le fait sur les sélections du canvas. Notion AI sur le texte surligné. L'IA de Linear récupère automatiquement la portée du ticket. Ne faites pas décrire à l'utilisateur ce qu'il a déjà désigné du doigt.

Bascules d'outils en ligne. La surface expose les appels d'outils sous forme de bascules ou de chips sur le cadre de saisie. Cursor bascule entre mode agent, mode édition et jeux d'outils. Raycast AI expose des commandes. Vercel AI Playground expose des bascules de function calling. L'utilisateur sait quels outils sont armés avant l'envoi.

Chip de mémoire. Une affordance persistante qui montre ce que le modèle sait déjà de la session en cours. ChatGPT et Claude en livrent chacun une variante. La chip est modifiable, supprimable et visible, et c'est là toute l'astuce. Une mémoire cachée est un risque d'exfiltration déguisé en fonctionnalité.

Grille voxel de deux par trois de six petites tuiles de surface, étiquetées PROMPT CADRÉ, PILOTÉ PAR LA SÉLECTION, OUTILS EN LIGNE, CHIP DE MÉMOIRE, BRANCHEMENT, PORTE D'APPROBATION
Grille voxel de deux par trois de six petites tuiles de surface, étiquetées PROMPT CADRÉ, PILOTÉ PAR LA SÉLECTION, OUTILS EN LIGNE, CHIP DE MÉMOIRE, BRANCHEMENT, PORTE D'APPROBATION

Prompt à branches. La régénération bifurque la conversation au lieu de l'écraser. Chaque branche est un état sauvegardé auquel l'utilisateur peut revenir. L'historique de conversation de Claude le fait apparaître, v0 garde une pile de versions des UI générées, les fils de chat de Cursor sont ramifiables. L'expérimentation devient un arbre, pas un tour de machine à sous.

Appel d'outil soumis à approbation. La surface fait une pause avant un appel d'outil destructeur et demande à l'utilisateur d'approuver, de modifier ou d'annuler. Le composer de Cursor verrouille les commandes shell risquées. Claude Code verrouille les opérations destructrices derrière un système de permissions. ChatGPT Operator verrouille les actions de paiement dans le navigateur. Ralentissez le moment qui ne peut pas être annulé, et rendez l'action visible en clair avant qu'elle s'exécute.

Ces patterns se composent. Une excellente surface de prompt livre généralement cadrage, pilotage par la sélection, outils en ligne et portes d'approbation comme un seul composant cohérent. Les patterns ne sont pas en tension, ils jouent en concert.

L'audit de surface de prompt en sept questions

Passez-le sur n'importe quel champ IA avant sa sortie. S'il échoue à trois questions ou plus, la surface n'est pas prête.

  1. État vide. La surface apprend-elle à l'utilisateur quoi taper, ou lui jette-t-elle un champ vide au visage ?
  2. Suggestions. La surface propose-t-elle le prompt suivant à partir du contexte, de l'historique récent ou de la sélection ?
  3. Portée. L'utilisateur peut-il restreindre le prompt à un fichier, une sélection, un bloc ou une session sans écrire plus ?
  4. Visibilité de la configuration. Le modèle, les outils et le niveau d'autonomie sont-ils visibles avant l'envoi, pas enterrés dans un tiroir de réglages ?
  5. Honnêteté du streaming. La sortie en streaming montre-t-elle le vrai travail, ou est-ce un spinner qui ne veut rien dire ?
  6. Stopper et réviser. Y a-t-il un bouton stop visible pendant le streaming, et une régénération non destructrice ensuite ?
  7. Transparence de la mémoire. L'utilisateur peut-il voir et modifier ce dont le modèle se souvient au fil de la session ?

Une surface qui passe les sept donne l'impression d'une primitive. Une surface qui échoue à trois ou plus donne l'impression d'une barre de recherche. L'écart entre ces deux résultats, c'est ce qui sépare le design de produit AI-native de l'IA plaquée après coup.

Les équipes qui construisent la surface de prompt comme un vrai composant sont aussi celles qui traitent leurs prompts comme des composants côté ingénierie. La discipline rapporte de la même façon.

FAQ

Qu'est-ce qu'une surface de prompt ?

Une surface de prompt est toute la zone d'UI dans laquelle l'utilisateur prompte, configure et relit. Elle comprend le champ de saisie, l'état vide, les suggestions, les emplacements de pièces jointes, le sélecteur de modèle, les bascules d'outils, l'affordance d'envoi, la zone de sortie en streaming et les contrôles de révision. La traiter comme un textarea est l'erreur. La traiter comme un composant est la barre à franchir.

En quoi une surface de prompt diffère-t-elle d'un champ de chat ?

Un champ de chat est une boîte de message tour par tour. Une surface de prompt est un composant d'interaction configurable, observable et réversible. L'UI de chat optimise pour la conversation. Une surface de prompt optimise pour la clarté de l'objectif, la confiance dans le modèle et le débit des tâches. Le champ de chat est une expression possible d'une surface de prompt, pas un synonyme.

Quelles sont les erreurs de design d'UI de prompt les plus courantes ?

Les rectangles vides sans suggestions, les spinners de streaming morts, les modèles non commutables, les surfaces amnésiques qui oublient le contexte à chaque prompt, les boutons de régénération destructeurs qui écrasent une bonne sortie, et l'absence de bouton stop pendant le streaming. Chacune se corrige par un petit changement de surface. Aucune ne se corrige avec du copywriting.

Quels produits ont les meilleures surfaces de prompt en 2026 ?

Cursor pour les prompts cadrés, Claude pour l'historique ramifiable et le panneau d'artefacts, v0 pour les prompts pilotés par la sélection, Linear AI pour les prompts embarqués, Notion AI pour l'état vide en menu slash, Raycast AI pour la discipline du sélecteur, et Vercel AI Playground pour la visibilité de la configuration. Aucun ne livre tous les patterns à pleine puissance, et c'est pourquoi la catégorie reste grande ouverte.

Construisez le champ comme s'il était le produit

La surface de prompt est le composant le plus important de tout produit AI-native, et la plupart des équipes la conçoivent encore comme une réflexion après coup. Un textarea, un bouton d'envoi, un placeholder, on livre. Cette recette a pourri le jour où Cursor et Claude ont relevé la barre.

Traitez le champ comme une primitive. Livrez les huit parties. Évitez les six modes d'échec. Composez les six patterns. Passez l'audit en sept questions. Le produit qui en sort a l'air de 2026, pas d'une barre latérale de chat de 2022 avec un nouveau logo.

Si vous voulez une équipe qui livre des surfaces de prompt comme de vrais composants et pas comme des textareas, engagez Brainy. Nous concevons l'UI de produits AI-native de bout en bout, de l'état vide au panneau de sortie en streaming, avec les signaux de confiance intégrés avant que le premier utilisateur ne tape un seul mot.

Want a prompt surface that earns the click instead of explaining itself? Brainy ships AI-native product UI end to end, from the empty state to the streaming output panel.

Get Started

More from Brainy Papers

Keep reading