Étape 2 · Décrire

`/pulse:ui`

Définir et soigner l'interface : identité visuelle (docs/design.md), maquettes d'écrans à comparer pour la spec d'une US, audit et finitions d'une interface existante.

Description

Cette commande vous aide à voir l'apparence de votre outil, à la choisir, puis à la soigner. Sa devise : « On choisit une apparence en la regardant, plutôt qu'en lisant des codes couleur. » Vous décrivez avec vos mots ; Pulse traduit en couleurs et en polices.

Elle a quatre actions. identite vous montre 2 ou 3 apparences possibles, dans votre navigateur, et vous choisissez. maquettes dessine plusieurs versions des écrans d'une user story, à comparer côte à côte. audit relève ce qui cloche dans une interface déjà construite, sans rien modifier. polish applique ensuite les corrections que vous choisissez.

Chaque proposition est préparée par un assistant spécialisé, en parallèle des autres. Une page de comparaison les réunit, et vous pouvez même demander un mélange de deux propositions.

Trois apparences à comparer (ouvertes dans votre navigateur) :
d1 · Chaleureuse et claire    fond crème, accent corail, formes arrondies
d2 · Moderne et nette         blanc dominant, un seul accent, grille stricte
d3 · Élégante et sombre       fond sombre, accent doré, titres à empattements

Laquelle gardez-vous ? Vous pouvez aussi mélanger : « d1 avec les titres de d3 ».

Un exemple de choix d'identité visuelle, chaque direction résumée par sa thèse.

Pourquoi l'utiliser

Vous choisissez en regardant. De vraies pages à comparer, avec des contenus tirés de votre projet.
Une apparence cohérente partout. docs/design.md guide ensuite les user stories, les specs, les plans et le code.
Corriger une maquette coûte moins que corriger le code. Vous ajustez vos écrans avant de les construire.
Une interface lisible par tous. Les contrastes sont mesurés, et un texte trop pâle est corrigé.

Quand l'utiliser

1 Démarrer
2 Décrire
3 Préparer
4 Construire
5 Mettre en ligne
6 Être trouvé
7 À tout moment

identite, juste après /pulse:tech et avant /pulse:us : les specs et les plans s'y conformeront. C'est facultatif.
maquettes, après /pulse:spec, quand la spec décrit des écrans et que vous voulez les voir avant /pulse:plan.
audit puis polish, à tout moment, dès qu'une interface existe.
Sans rien, si vous hésitez : Pulse regarde votre projet et vous recommande une action.

Comment la lancer

/pulse:ui [identite | maquettes <US-XXX> | audit [cible] | polish [cible]]

Entre crochets [ ] : facultatif. Entre chevrons < > : à remplacer par votre valeur. La barre | sépare les choix possibles.

identite : créer l'identité visuelle, ou la revoir. Demande docs/prd.md.
maquettes US-XXX : 3 versions des écrans de cette user story (de 2 à 4 sur demande), 3 écrans au plus par passage, en format ordinateur et téléphone. Demande la spec de l'US.
audit [cible] : un écran, un fichier, un dossier, ou toute l'interface si vous ne précisez rien. Lecture seule.
polish [cible] : appliquer les corrections visuelles et de texte du dernier audit.
Sans rien : Pulse recommande l'action qui convient à votre projet.

/pulse:ui identite

/pulse:ui maquettes US-001

/pulse:ui audit

Ce qu'elle produit

Fichier ou dossier	À quoi il sert
`docs/design.md`	Votre identité visuelle : couleurs par rôle, polices, formes, et la façon de l'appliquer au code.
`docs/design/identite/`	Les planches comparées (`d1-…`, `d2-…`) : la planche choisie dans `retenue/`, les autres dans `alternatives/`.
`docs/design/maquettes/US-XXX-<nom>/`	Les versions d'écrans (`desktop.html`, `mobile.html`, `note.md`), la version choisie dans `retenue/` avec sa `critique.md`, les autres dans `alternatives/`.
`docs/design/audits/ui-AAAA-MM-JJ.md`	Le rapport d'audit : une note sur 50, les constats classés par gravité, ce qui va bien et 3 corrections rapides.

Une fois l'identité appliquée au code, identite peut vous proposer un contrôle : refuser, à chaque enregistrement, une couleur écrite en dur dans un style, pour que les couleurs restent dans un seul fichier. Il n'est posé qu'avec votre accord, et un « Non » n'est pas reproposé.

Seule l'action polish modifie le code de votre interface. L'action identite peut aussi appliquer votre apparence au code, si le code de départ est en place et que vous l'acceptez.

Risques et précautions

Vous choisissez dans la conversation. Une direction, une version, un mélange, ou « aucune » avec une nouvelle consigne : rien n'est retenu sans votre choix.
audit ne touche à rien. Il lit votre interface et écrit seulement son rapport.
polish modifie votre code, par petits lots, puis lance les contrôles automatiques et vous demande de vérifier dans votre navigateur.
Pour ouvrir la page de comparaison, Pulse lance votre navigateur sur un fichier de votre projet.

Problèmes et solutions

La page de comparaison ne s'ouvre pas

Pulse affiche le chemin complet du fichier. Double-cliquez dessus : il s'ouvre dans votre navigateur.

Aucune apparence ne me plaît

Répondez « aucune », suivi de ce qui vous manque (« plus chaleureux », « moins chargé »). Pulse prépare de nouvelles propositions avec cette consigne ; les anciennes sont rangées dans alternatives/.

Deux maquettes se ressemblent trop

Pulse le repère lui-même et propose de régénérer l'une d'elles avec une autre idée directrice. Acceptez : chaque version doit changer l'organisation de l'écran, pas seulement les couleurs.

Pulse me demande de définir l'identité avant les maquettes

Sans docs/design.md, les maquettes n'ont pas de base commune. Choisissez « Définir l'identité d'abord », ou continuez avec une direction provisoire, signalée dans chaque maquette.

Pulse me dit qu'il manque le PRD

L'identité visuelle s'appuie sur votre projet. Lancez /pulse:prd, puis relancez /pulse:ui identite.

Exemples

/pulse:ui identite

Votre outil sert à utiliser, pas à convaincre : je pars sur le registre outil, d'accord ? Votre outil en 3 mots ? → Chaleureux, simple, soigné (Recommandé) / Moderne, net, rapide / Élégant, calme, haut de gamme Un site dont vous aimez l'allure ?

Chaleureux, simple, soigné. J'aime l'allure de mon fleuriste en ligne.

pulse-aidd comparer docs/design/identite

La page de comparaison est ouverte dans votre navigateur. Laquelle gardez-vous ?

La première, avec les titres de la troisième.

Je prépare la planche mélangée. Un texte gris était trop pâle sur le fond crème : je l'ai foncé pour qu'il reste lisible. → Valider / Modifier quelque chose

/pulse:ui maquettes US-001

Quels écrans maquetter ? → Choisir un créneau (Recommandé) · Confirmer le rendez-vous

Les deux.

3 versions : v1 calendrier de la semaine · v2 liste des prochains créneaux libres · v3 étapes une par une. Page de comparaison ouverte. Laquelle gardez-vous ?

v2 sur ordinateur, v3 sur téléphone.

C'est noté dans retenue/. → Critiquer la maquette retenue (Recommandé) / Passer au plan

Commandes liées

/pulse:tech : choisir les outils, juste avant l'identité visuelle.
/pulse:us : écrire les user stories, une fois l'apparence choisie.
/pulse:spec : décrire les écrans, avant de les maquetter.
/pulse:plan : il cite la maquette retenue dans sa conception.
/pulse:refine : traiter un constat qui change le parcours.
/pulse:commit : enregistrer la version après polish.