Que fait Direction du design ?
Un design est distinctif quand une personne qui connaît le domaine l'attribuerait à ce seul produit. L'utilisabilité vient d'une structure familière ; la distinctivité vient de ce que seul ce produit possède : sa marque, son univers, ses dispositifs graphiques et un geste signature. Ceux-ci viennent de la personne, donc ce skill demande avant de dessiner.
Un générateur laissé seul converge vers les mêmes quelques apparences (defaults.md). Chaque décision ci-dessous provient soit de l'interview, soit est vérifiée par rapport à cette liste ; rien n'est choisi parce que c'est la première chose qui vient à l'esprit.
Terminé quand une direction est écrite, choisie par la personne, et que chaque build ultérieur la lit.
1. Collecter ce qui existe
Demander, et lire, tout ce qui définit déjà la marque : fichiers logo, couleurs, polices, directives
de marque, photographies, illustrations, decks ou pages antérieurs, un fichier de système de design dans le dépôt,
et le fichier de projet du skill product-ui (.claude/product-ui.md) s'il existe. Un
système existant est le point de départ ; la direction l'étend et ne le contredit jamais. Enregistrer
quels assets existent et lesquels manquent.
2. Interview
Exécuter interview.md : quelques questions par round, chaque round s'appuyant sur les réponses précédentes. Demander, écouter, suivre la réponse surprenante un niveau plus profond. Le round est terminé quand vous pouvez énoncer l'univers, la personnalité et les anti-références du produit en un paragraphe et que la personne est d'accord.
3. Mode
Décider le mode à partir de l'interview :
- Opérer (une application dans laquelle les gens travaillent) : la structure, la navigation et les contrôles restent ceux familiers de la catégorie. La direction contribue par la typographie, la palette, la densité, les dispositifs graphiques dans les zones calmes (en-têtes, états vides, onboarding, chargement) et un geste signature.
- Persuader (une landing page, une campagne, un deck) : la direction peut façonner toute la page — composition, imagerie, mouvement, mise en page.
Un produit qui a les deux reçoit une direction et l'applique par mode.
4. Proposer des directions
Écrire deux ou trois directions qui diffèrent au premier coup d'œil, chacune issue du matériau de l'interview. Chacune nomme :
- tokens : palette (4 à 6 couleurs nommées avec rôles), association et échelle typographique, rayon, bordures, élévation, densité. Les construire avec tokens.md à partir des assets de marque de l'étape 1 — un produit de référence prête ses qualités (vitesse, densité), jamais ses couleurs ou sa typographie ;
- dispositifs graphiques : un langage de formes et une géométrie tirés de l'univers du produit, et une recette pour les arrière-plans générés, les motifs et les images de remplissage construits à partir de ces formes ;
- imagerie : ce que montrent la photographie ou les illustrations, et comment elles sont recadrées et traitées ;
- structure : grille, rythme, comment un écran ou une page est composé ;
- voix : trois mots pour décrire comment l'interface parle, et une phrase d'exemple pour chacun d'un bouton, d'un état vide et d'une erreur ;
- geste signature : une idée concrète et nommable qu'un spectateur retient (« statut dessiné comme … ») ;
- un échantillon : un écran ou une section réel rendu dans cette direction, avec du contenu réel.
Montrer les échantillons côte à côte, à la même taille, avec le même contenu. La personne en choisit un, ou combine des parties, et explique pourquoi.
Chaque nombre et étiquette sur un échantillon a besoin d'une définition que la personne approuve (« utilisateurs actifs » : connectés ? dans une session aujourd'hui ?). Collecter ceux qu'elle remet en question comme définitions ouvertes ; ce sont des questions produit, et elles vont dans le compte-rendu de l'étape 6.
Quand la personne dit que ça reste générique mais ne peut pas nommer pourquoi, diviser la surface en toggles indépendants — police de caractères, palette, forme (rayon, bordures, chips), densité, style d'icône — sur le même écran, et laisser passer de l'un à l'autre jusqu'à ce que le sentiment disparaisse. Le toggle qui le supprime nomme la cause.
5. Vérifier la distinctivité
Confrontater l'échantillon choisi à defaults.md et aux anti-références de la personne. Pour chaque correspondance, modifier la décision qui l'a produite, ou enregistrer pourquoi ce produit la conserve. Puis le test d'attribution, pondéré par le niveau de distinctivité de la surface issu de l'interview : avec le logo couvert, une personne qui connaît le domaine nommerait-elle ce produit ? À un niveau élevé, « ça pourrait être de n'importe qui » renvoie à l'étape 4 avec l'élément le plus faible. À un niveau bas, un résultat propre et familier passe, et le compte-rendu le mentionne.
La distinctivité ne nuit jamais à l'utilisabilité : un geste signature qui cache un contrôle, réduit le contraste ou brise un modèle familier de la catégorie est déplacé vers une zone calme ou abandonné.
6. Enregistrer
Écrire la direction dans la section « Direction » du fichier de projet (.claude/product-ui.md,
ou là où CLAUDE.md indique que le projet conserve ses décisions de design ; le créer à partir du
modèle product-ui s'il manque) : la date, le mode, les tokens, les dispositifs, la recette d'imagerie, la structure,
la voix, le geste signature, les anti-références, les définitions ouvertes, et les réponses de l'interview qui les
justifient. Mettre les tokens eux-mêmes dans le fichier de tokens du code. Les builds et revues ultérieurs lisent
le fichier de projet d'abord.