Aller au contenu principal

La commande /design : des plans de travail avant le code

Intermédiaire

Anthropic a glissé dans Claude Code une commande slash qui saute volontairement l'étape du code. /design publie un canevas de plans de travail d'interface éditables à partir d'un brief en langage clair ; vous en choisissez un, vous l'ajustez, et seulement ensuite Claude le transforme en vrai code. C'est la première fonctionnalité de Claude Code dont le livrable n'est pas du code — la phase de design est l'artefact.

What you'll learn
  • Comprendre ce qu'est un plan de travail et pourquoi il change le flux « le code d'abord »
  • Lancer /design correctement du premier coup (version, plan, forme du prompt)
  • Connaître les trois phases : esquisser → choisir et modifier → implémenter
  • Éviter les trois pièges connus : le coût en tokens, la dérive stylistique par rapport à votre dépôt, et le mur du niveau gratuit
  • Associer /design au style de sortie Concise livré la même semaine

Ce que c'est vraiment​

/design est un skill — pas une simple commande slash. Quand vous l'invoquez, Claude Code passe la main au workflow de plans de travail de Claude Design et affiche un lien vers un canevas publié. Un plan de travail est un écran fonctionnel sur lequel vous pouvez agir : changer la couleur, déplacer un bloc, élargir un espacement. Il est rendu sur le runtime des artefacts, il vit donc dans votre compte Claude, et non sous forme de fichiers dans votre dépôt.

Cette distinction compte. La sortie de /design est une URL, pas un diff. Rien n'atterrit dans git status avant que vous demandiez à Claude d'implémenter.

What you'll learn
  • Disponibilité : Pro, Max, Team, Enterprise. Pas en gratuit. Nécessite Claude Code v2.1.233 ou plus récent. Livré à la fois dans la CLI et dans Claude Code Desktop.
  • Statut : préversion de recherche — attendez-vous à ce que la forme de l'invocation, le format de sortie et le nombre de plans de travail inclus évoluent.

Les trois phases​

Guided walkthrough1 of 3
  1. Lancez /design avec un brief qui dit à quoi sert l'écran. Claude publie plusieurs variantes de plans de travail côte à côte, chacune éditable. Vous obtenez un lien ; ouvrez-le dans un navigateur.

La forme de prompt qui marche​

/design récompense les briefs qui décrivent l'objectif et le public, pas des cibles au pixel. Deux schémas :

/design — brief de fonctionnalité

/design a few options for the sign-in screen. Users are engineers on mobile.
Optimize for one-hand thumb reach; SSO is the primary path, email/password
secondary. Show a state for a locked-out account.

/design — refonte d'une surface existante

/design redesign our composer based on what people actually use it for:
drafting long messages, attaching files, and switching model. The current
version buries the model picker; make it a first-class control.

Deux éléments font discrètement beaucoup de travail dans ces briefs :

  • Nommer l'utilisateur et la contrainte (« engineers on mobile », « one-hand thumb reach ») sort Claude de la mise en page statistiquement moyenne vers laquelle il tend par défaut.
  • Nommer un état d'échec (« locked-out account ») force le plan de travail à couvrir les cas vides, d'erreur et limites, pas seulement le chemin heureux.

Les trois pièges​

1. C'est gourmand en tokens. Plusieurs plans de travail en pleine fidélité par invocation consomment le budget plus vite qu'un tour de conversation normal. Les utilisateurs de la préversion de recherche le rapportent systématiquement. Réservez /design aux vraies décisions, pas aux croquis jetables.

2. Il ne correspond pas à votre base de code. Claude Design génère à partir d'une esthétique générique, pas de vos composants existants. Si vous voulez que le plan de travail ressemble au reste de votre application, préparez un DESIGN.md à la racine du dépôt (polices, échelle d'espacement, tokens de couleur, composants existants) et référencez-le dans le brief — la même astuce qui évite que la phase d'implémentation de /design réinvente vos primitives de boutons.

Référencer DESIGN.md avant /design

Before you draft anything, read DESIGN.md and list the type scale, spacing
scale, and named color tokens you'll use. Then /design a settings screen
that respects those tokens.

3. Le mur du niveau gratuit. /design est réservé aux plans payants (Pro et au-delà). Si votre équipe paie des sièges Claude Code mais qu'un prestataire est en gratuit, /design est tout simplement absent pour lui, sans avertissement.

Associez-le au style de sortie Concise​

Anthropic a livré le style de sortie intégré Concise la même semaine (v2.1.237). Il fait commencer Claude par le résultat et sauter le préambule — un bon duo avec /design, car le tour de passation (« implement option 2 ») n'a pas besoin de narration :

~/.claude/settings.json
{
  "outputStyle": "Concise"
}

Concise conserve tout le détail pour les rapports d'erreur, les avertissements de sécurité et les confirmations d'actions destructrices — vous perdez la narration, pas les garde-fous.

Quand /design gagne face à l'écriture directe du code​

Utilisez /design quandPassez outre quand
La décision visuelle est la partie difficile (nouvelle surface, mise en page incertaine)Vous connaissez déjà la mise en page ; il vous faut juste le code
Vous voulez comparer 3 directions ou plus à faible coût avant de vous engagerVous itérez sur la logique d'un écran existant, pas sur sa forme
La partie prenante a besoin d'un artefact quasi cliquable pour validerL'écran doit correspondre au 1:1 à un design system existant
Les états d'échec/vides/de chargement comptentVous prototypez un outil interne jetable

Mécaniques peu évidentes​

  • L'URL du canevas est partageable. Comme les plans de travail vivent sur les artefacts, le lien fonctionne pour quiconque a accès à la vue de votre compte Claude — vous pouvez l'envoyer à un designer ou à un PM sans rien exporter.
  • L'itération se fait sur deux canaux. Vous pouvez modifier sur le canevas et continuer à prompter dans le fil Claude Code. Les deux alimentent le même contexte.
  • L'implémentation respecte toujours votre dépôt. Dès que vous dites « implement », Claude Code revient à son comportement normal, conscient du dépôt — il utilisera votre configuration Tailwind, vos composants, votre structure de fichiers. Le plan de travail est la cible ; votre base de code est le terrain.
Appuyez sur Entrée ou Espace pour retourner la carte. Utilisez les flèches gauche et droite pour naviguer entre les cartes.Terme affiché.
1 / 7

Vérifiez vos acquis

0/4
  1. Où vivent les plans de travail issus de /design ?
  2. Vous êtes sur Claude Code v2.1.230 avec un compte Claude gratuit. Que se passe-t-il avec /design ?
  3. Quelle forme de brief donne à /design les meilleures chances de produire un plan de travail utile ?
  4. Pourquoi le style de sortie Concise fait-il bon duo avec /design ?

Sources et lectures complémentaires​

Et ensuite​