La commande /design de Claude Code : esquisser des interfaces avant de les développer.

Les humains planifient, Claude exécute

Anthropic a analysé environ 400 000 sessions de Claude Code menées par près de 235 000 utilisateurs, et la répartition des décisions était déséquilibrée. Les humains prenaient environ 70 % des décisions de planification, c’est-à-dire ce qu’il fallait construire. Claude prenait quant à lui environ 80 % des décisions d’exécution : quel fichier, quelle syntaxe, quel commandement. Au cours des sept mois étudiés, le nombre de sessions consacrées à la réparation de code endommagé est passé de 33 % à 19 %, tandis que l’utilisation des logiciels opérationnels et les analyses ont augmenté.

Cette répartition explique la fonctionnalité que Anthropic a mise en ligne cette semaine. Une fois qu’un agent prend en charge l’exécution, le goulot d’étranglement se déplace vers la partie encore gérée par les humains, et pour tout ce qui nécessite un écran, la planification devient visuelle. Écrire « créer la page des paramètres » ne signifie rien de précis tant que personne n’a encore vu cette page. C’est comme décrire des meubles pour une pièce dans laquelle on n’est jamais entré.

Donc, la plupart d’entre nous créons quelque chose pour le découvrir. Idée, code, rendu, insatisfaction, réécriture. Chaque idée rejetée se paie avec la monnaie la plus coûteuse qui existe.

Qu’est-ce qui a changé

Claude Code et Claude Design pouvaient déjà communiquer entre eux. Vous enregistrez le serveur MCP de conception et vous vous connectez :

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

Lorsque la connexion est établie, un design peut être intégré à votre base de code, votre code peut devenir un prototype fonctionnel, et les modifications peuvent circuler dans les deux sens. Tout cela existait déjà avant cette semaine.

La nouveauté réside dans la commande /design elle-même. Anthropic en a mis une version préliminaire à disposition dans Claude Code le 17 août 2026. Nate Parrott, le concepteur de produit qui a créé Claude Design, en a fait l’annonce, et l’équipe de Claude Code l’a confirmée le même jour. Dans la ligne de commande ou l’application desktop, Claude génère désormais quelques maquettes d’interface modifiables, appelées artboards, affichées sous forme d’Artifact. Vous en sélectionnez une, la modifiez, puis demandez à Claude de la créer. Les abonnements Pro, Max, Team et Enterprise le disposent, et claude update permet de l’obtenir.

« Les deux produits peuvent être synchronisés » contre « les tableaux de conception se trouvent dans votre terminal » ressemble à de la plomberie, mais cela change le coût d’une idée rejetée : quatre cents lignes de JSX auparavant, environ neuf secondes d’examen maintenant. La boucle devient une idée, six possibilités visuelles, cinq rejetées, une codée.

Où se rendait autrefois l’exploration

Auparavant, vous aviez deux options, et aucune n’était bon marché.

La première consistait à décrire l’interface en prose et à espérer de tout cœur. Trois paragraphes sur l’espacement et la hiérarchie des cartes sont entrés, Claude renvoie un composant, localhost s’ouvre, et quelque chose ne va pas d’une manière que la demande n’avait aucune chance de prévoir. Vous finissez alors par modifier du code pour corriger une décision de mise en page qui aurait pu être résolue en trente secondes d’examen.

La deuxième méthode consistait à ouvrir claude.ai/design, à y créer un prototype, puis à aligner le résultat avec vos composants réels dans le dépôt. C’est une bonne approche qui reste souvent la plus adaptée. Le problème réside dans le changement de outils, et c’est justement ce changement qui entrave l’exploration : on choisit une direction et on en ignore six autres, car ouvrir une nouvelle fenêtre équivaut à valider un choix définitif.

L’histoire personnelle de Parrott explique pourquoi. À la fin de 2025, il était le seul concepteur chez Claude Code pour VS Code, aux côtés de deux ingénieurs. Opus 4.5 est sorti ce même mois de novembre, les ingénieurs ont considérablement accéléré leur travail et il a dû suivre leur rythme. Sa première tentative consistait à coller des sorties de terminal et des captures d’écran dans Claude pour demander une conception, mais selon lui cela a mal tourné. La solution a été de fournir à Claude un tableau HTML plutôt qu’une boîte de texte, car l’HTML est un support visuel riche et Claude le gère remarquablement bien. Cela a donné naissance à Claude Design, et /design permet d’appliquer le même flux de travail que celui utilisé dans les outils de conception directement dans le terminal, à côté du code.

Habitudes qui font que ça marche

Parrott a publié ses propres meilleures pratiques en juillet. Elles s’appliquent presque entièrement à l’environnement CLI et sont plus utiles que n’importe quelle liste de fonctionnalités.

Réfléchissez avant de formuler votre demande. Il passe du temps réel à rédiger des instructions avant de commencer à concevoir, parfois en les dictant, parfois en les tapant dans l’application Notes de son téléphone depuis le canapé. Déterminer ce que vous voulez est une activité distincte de la demande elle-même, et une instruction vague entraîne une consommation inutile pour quelque chose que vous finirez par rejeter.

Décrivez l’aspect visuel. Laiscé à lui-même, Claude tend vers quelques esthétiques préférées, que vous reconnaîtrez immédiatement. Donnez-lui des polices et des couleurs, un moodboard, ou demandez-lui de proposer des combinaisons de polices et de couleurs, puis discutez avec lui jusqu’à ce que l’une convienne. C’est déjà cette habitude qui fait en sorte que le résultat ressemble à votre produit et non à l’une de ces pages d’accueil générées par l’IA de ces dix-huit derniers mois.

Commencez par des maquettes simplifiées lorsque la fidélité visuelle peut attendre. Elles permettent d’avancer plus rapidement et aident Claude à se concentrer sur la structure plutôt que sur les détails visuels. Tant que vous hésitez encore entre une barre latérale et une barre en haut pour les filtres, les dégradés ne font qu’ajouter du bruit. Essayez dix idées structurelles avant de peaufiner une seule.

Demandez dix propositions, puis mélangez-les. La plupart ne seront pas bonnes, et c’est normal. Parrott suggère de choisir l’option B ainsi qu’un élément de l’option D, puis de demander cinq variantes combinant ces deux éléments.

Faites les dernières modifications à la main. Les ajustements directs sur la toile, tels que le réarrangement, la suppression, la modification de taille ou le changement de texte et de couleurs, ne coûtent aucun token. Demander d’effectuer ces mêmes modifications via une requête coûte cher, et l’alignement est plus facile à vérifier visuellement qu’à décrire par des mots. Arrêtez d’écrire des phrases sur les espacements.

Esquissez et indiquez. Si vous avez une idée de mise en page sans mots, dessinez-la sur du papier et photographiez-la. Au lieu d’écrire un paragraphe expliquant quel élément vous avez en tête, cliquez dessus et parlez-en.

Anatomie d’une instruction efficace

Ces habitudes se résument à une structure réutilisable composée de cinq cases. Omettez-en une et vous obtiendrez inévitablement un échec prévisible.

Comptez. Déterminez le nombre de directions souhaitées. Donnez un chiffre, sinon vous en obtiendrez un automatiquement. Six convient pour les maquettes, tandis que trois est suffisant pour une haute fidélité.

Fidélité. Maquette ou version affinée. Précisez-le, car le modèle a tendance à privilégier la version affinée, ce qui entraîne une perte de temps et d’efforts.

L’élément. Une surface délimitée et nommée, comme un panneau de préférences de notifications, un état vide lors de la première utilisation ou une vue détaillée d’une facture. « Le tableau de bord » est trop vague.

Contraintes issues de votre code. Quels composants existants doivent être présents. C’est là que l’interface en ligne de commande devient utile, car Claude peut les lire. Donnez-leur un nom malgré tout, car agir vaut mieux que d’espérer.

Direction esthétique, ou décision de report explicite. Indiquez les polices et les couleurs, ou écrivez « uniquement la structure, ignorer le style visuel pour l’instant ». Le silence est le seul choix qui entraîne systématiquement des conséquences négatives, car il vous fait adopter le style par défaut.

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

Comparez cela à ce que les gens tapent généralement en premier, /design an invoice page. La commande est la même, mais le résultat est très différent.

Les conseils d’Anthropic concernant la formulation des prompts pour Claude Design coïncident avec ceux-ci et méritent d’être pris en compte : indiquez l’objectif, la mise en page, le contenu et le public cible. Les cinq éléments mentionnés ci-dessus visent à favoriser la diversité des résultats, tandis que la méthode d’Anthropic convient pour obtenir un seul résultat de qualité ; utilisez-la lorsque vous savez déjà ce que vous souhaitez obtenir.

Un test rapide pour vérifier si le prompt a rempli sa fonction : examinez le résultat obtenu et demandez-vous si les options diffèrent en termes de hiérarchie ou uniquement de couleur. Six propositions basées sur la même architecture informationnelle indiquent qu’un prompt était trop restreint ou demandait une mise en forme prématurée. L’objectif est d’obtenir six réponses véritablement différentes à la question « qu’est-ce qui est priorisé sur cet écran ». Ce pour quoi vous payez, ce sont des décisions différentes, pas des palettes différentes.

Connexion de votre véritable système de conception

/design-sync intègre votre système de conception local dans Claude Design, de sorte que ce qui est généré est composé à partir de vos composants réels et que Claude ne crée pas de classe de bouton à partir de zéro. Il peut lire dans un dépôt GitHub, des fichiers de conception, des téléchargements ou la base de code locale, et vous pouvez nommer le système en même temps : /design-sync Acme DS.

Deux points méritent d’être planifiés. La référence aux commandes d’Anthropic indique qu’une première synchronisation vérifie chaque composant et peut durer plusieurs heures pour un grand dépôt, il est donc conseillé de la lancer avant le déjeuner et non juste avant une démonstration. Le centre d’aide mentionne également que les grandes bases de code peuvent provoquer des retards et recommande de les lier via Claude Code plutôt que par le navigateur. De plus, comme l’implémentation se concentre actuellement sur les projets React, Vue et Svelte, ces derniers dépendent du fait que Claude lise directement les composants au cours de la session.

Un problème d’administration : Claude Design est désactivé par défaut sur les abonnements Enterprise, et un administrateur doit le mettre en activité avant que tout cela ne fonctionne.

Le coût

Claude Design ne dispose plus de quota propre à suivre. L’utilisation est prélevée sur le pool partagé avec Claude Chat, Claude Code et Cowork, et Anthropic précise clairement que les projets complexes, les gros bases de code et de nombreuses itérations consomment davantage. Un quota hebdomadaire distinct existait auparavant, mais il a disparu.

L’interface en ligne de commande le ressent davantage que l’interface web. Lorsque vous demandez plusieurs maquettes complètes, la session contient déjà une base de code indexée ainsi qu’une conversation en cours. Une fois vos limites atteintes, Claude Design devient indisponible jusqu’à ce que celles-ci soient réinitialisées.

La façon d’abaisser les coûts consiste à inverser la liste des bonnes pratiques : privilégier des fonctionnalités limitées plutôt que des flux multi-écrans, travailler avec des maquettes avant d’atteindre une haute fidélité, et effectuer manuellement les modifications sur la toile pour les 10 % restants, qui ne coûtent rien.

Ce que /design ne fait pas

Parrott définit clairement le champ d’application. Claude Code est conçu pour écrire du logiciel en production, tandis que Claude Design couvre le reste, c’est-à-dire l’idéation précoce, la collaboration et l’obtention de l’accord des parties prenantes avant que quiconque ne se lance dans la mise en œuvre. Il a affirmé que, avant l’existence de /design, une toile à l’intérieur du terminal effaçait cette distinction. Ce qui reste valable, c’est une répartition différente : divergence d’un côté, convergence de l’autre, toutes deux au cours d’une seule session.

Ce commandement ne prend pas le contrôle du cycle de construction. Ce qu’il ajoute, c’est une étape de planification visuelle avant celui-ci. Vous explorez différentes options sur la toile, en choisissez une, puis vous revenez à Claude Code classique pour l’implémentation, les tests, le refactoring et tout ce qui fait d’un logiciel un produit réel.

Ce outil n’existe que depuis quelques jours, ce qui se voit déjà : les designs passent à l’étape de construction mais doivent encore être enregistrés manuellement. /design fait défaut dans la référence officielle des commandes de Claude Code, tandis que /design-login et /design-sync y sont listés. Le comportement risque probablement de changer.

Quelle interface utiliser

Utilisez /design dans Claude Code lorsque le résultat doit être intégré prochainement dans un répertoire que vous avez téléchargé. Être proche de votre code, c’est là toute l’idée.

Utilisez claude.ai/design lorsque le public cible est une personne : un diaporama, une page unique, une page d’accueil ou un prototype cliquable pour des tests utilisateurs, en bref tout ce que les parties prenantes peuvent ouvrir dans un navigateur sans terminal. Il exporte en PDF, PPTX, HTML autonome et .zip, et permet d’envoyer le travail vers Canva, Miro, Replit, Vercel ainsi que d’autres outils similaires à Figma.

Il existe deux itinéraires de travail, ce qui permet de transférer le projet d’un outil à l’autre. Un designer sans environnement de développement local devrait considérer l’application web comme son point de départ, avec le transfert en tant que pont entre les outils. Un ingénieur qui travaille avec des dépôts GitHub utilisera /design.

Si Figma est votre source de vérité

Le choix n’est pas obligatoire. Le 17 février 2026, Figma et Anthropic ont lancé Code to Canvas, qui envoie l’interface utilisateur affichée et fonctionnelle depuis Claude Code vers Figma sous forme de frames modifiables, et non de captures d’écran statiques. Installez le plugin :

claude plugin install figma@claude-plugins-official

Ensuite, ouvrez /mcp dans une session, connectez-vous au serveur Figma distant et authentifiez-vous. Si une entrée figma-desktop apparaît, désactivez-la, car il s’agit du serveur local en lecture seule qui entre en conflit avec le serveur distant. Après cela, l’option « envoyer ceci à Figma » appelle la fonction generate_figma_design.

Certaines personnes ont rencontré des problèmes à cet égard. Des sujets sur le forum communautaire de Figma décrivent des captures d’écran bloquées dans une boucle de traitement infinie se terminant par des fichiers vides, bien qu’au moins un développeur ait réussi à le faire fonctionner après avoir simplifié la page. Testez d’abord sur quelque chose qui peut être perdu avant de promettre quoi que ce soit à un designer.

En bref, /design explore les possibilités avant même qu’aucun code n’existe, tandis que Code to Canvas prend un code déjà existant et le place à nouveau sur une toile de travail pour que l’équipe puisse le discuter.

Votre première utilisation

Sélectionnez une fonctionnalité que vous envisagez sans pour autant la développer, et restez dans des limites raisonnables : un panneau, une boîte modale, une page de paramètres. Exécutez claude update, ouvrez une session dans le bon répertoire, et commencez par :

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

Vérifiez les six propositions afin de vous assurer qu’elles diffèrent réellement en termes de hiérarchie. Éliminez quatre d’entre elles. Demandez cinq versions remixées des deux restantes. Choisissez la meilleure, exigez une version haute fidélité avec les polices et couleurs précisément indiquées, et ajustez manuellement l’espacement sur la toile, sans vous fier à des descriptions. N’utilisez l’expression « implémentez ceci » qu’après cela.

Mesurez le temps nécessaire. L’exploration complète ne devrait pas prendre plus de temps qu’une seule itération pour répondre à la question « pouvez-vous déplacer les boutons sur le côté droit ? » en termes de code, et le layout final sera celui que vous aurez choisi consciemment et non par défaut.

C’est là le véritable changement, bien plus modeste et pratique que les discours sur une transformation de l’industrie auxquels ces publications ont habituellement recours. Le codage assisté par IA avait déjà rendu l’implémentation peu coûteuse. Désormais, les mauvaises idées sont également faciles à éliminer. L’agent gère la majeure partie des étapes techniques, et en examinant les options, vous affinez votre compréhension de ce qui doit être fait, tâche qui a toujours été la vôtre.