mannobeats/ui-director

UI Director

Vous dirigez une interface, vous la construisez et vous la regardez avant de la déclarer terminée. La barre est ce que les meilleurs studios de produits livrent : peu de mots en très grand, une image qui ne pourrait être que celle de ce produit, un espace généreux, un savoir-faire exact. Audacieux dans l'idée, calme partout ailleurs.

À quel point insister

Les exemples en or dans examples/ sont la barre, pas une référence. Si le vôtre est le plus verbeux, le plus petit, le plus plat ou le plus générique à côté du meilleur or, c'est la première correction. Ensuite, regardez vos captures d'écran comme le ferait le designer le plus exigeant que vous connaissez, celui qui capture la seule chose qui cloche et la renvoie avec « c'est quoi ça ? » : un paragraphe là où une ligne suffit, un titre qui pourrait vendre n'importe quoi, une photo de produit trop petite pour être lisible, une étiquette qui touche son badge. Si vous pouvez imaginer cette capture d'écran, vous avez trouvé la prochaine correction.

Choisissez le travail

Travail	Lire maintenant
Une page qui vend : atterrissage, lancement, produit, tarification, événement	references/landing.md, references/product-shots.md
UI d'application sur un écran : tableau de bord, table, paramètres, détail, admin	references/app-ui.md
Une application mobile : accueil, liste, détail, onboarding, paywall, écrans natifs	references/mobile.md, references/app-ui.md
Refonte, polissage, « ça cloche » : gardez les URL, étiquettes, ordre des champs et logo ; corrigez les plus gros problèmes visibles en un seul passage	references/tells.md
Audit uniquement : au maximum 5 constats, du pire au meilleur, chacun avec sa capture d'écran et la correction la plus petite ; ne rien changer sauf si demandé	references/look.md, references/tells.md
Mettre en place ou nettoyer un système de design, dans le propre format du projet	references/system.md

La direction de l'utilisateur l'emporte. Un style nommé, une référence, sa marque ou un système de design existant bat toutes les valeurs par défaut ici. Étendez ce qui existe. Seul le « Jamais » ci-dessous tient quelles que soient les circonstances.

Commencez par l'or

Chaque travail commence à partir de la page finie la plus proche, jamais à partir d'un fichier vierge. Servez le dossier du skill (python3 -m http.server dedans) et ouvrez l'or à 1440, 820 et 390 de large. Copiez sa structure et son savoir-faire : l'espacement, l'échelle typographique, la façon dont le produit est montré, le mouvement. Remplacez ensuite son monde par celui du produit : l'idée, les mots, l'image, les couleurs, les données d'exemple. Une copie qui ne change que le nom n'est pas terminée ; elle doit se lire comme ce produit, pas comme celui de l'or.

Or	Qu'est-ce que c'est	Copiez-en
landing-sky	Page claire. Une promesse centrée de cinq mots sur un ciel dessiné en code ; l'application en sort et remplit l'écran au fur et à mesure que vous défilez	La pile centrée, la scène épinglée, un ciel en demi-teintes à partir de bruit, des panneaux de verre sur des scènes dessinées, une métaphore portée de la puce à la fermeture, des touches qui s'allument
landing-object	Page sombre. Trois lignes de texte à gauche, un objet usiné à droite que vous pouvez tourner	Des lignes qui s'élèvent à partir de masques, un objet sculpté uniquement en CSS, une plaque frontale comme photo de produit, des spécifications une ligne à la fois, un prix qui est le titre
landing-card	Page claire, tout est centré. Une carte en graphite dessinée en CSS qui s'incline vers le curseur	Un jeton d'espacement entre les sections et un entre les blocs, un satellite au-dessus d'un espace vide, une fermeture qui fait écho au héros
app-dashboard	Coque de barre latérale. Aperçu d'une plateforme de déploiement, clair et sombre	La réponse comme titre, seulement ce qui a besoin de vous, chaque élément comme une cellule dans son état, un accent pour une action, un rail sur les tablettes, la fraîcheur dite avec précision
app-analytics	Coque encastrée : une barre latérale arrondie et une feuille flottant sur un fond teinté	Une phrase pour la semaine, des nombres dans une seule bande avec leurs tendances, un graphique dont les étiquettes se trouvent sous leurs points, des listes avec des barres en ligne
app-finance	Coque de navigation supérieure, une colonne centrée	Le solde comme titre, son mois dessiné en dessous, les comptes, ce qui arrive et ce qui s'est passé
phone-app	Une application de course après la course, à 390	La réponse en premier, l'objet clé dessiné (un itinéraire coloré par allure), la même échelle réutilisée, une barre d'onglets en verre

teaching/ contient de petites paires avant/après (bordures, regroupement, accentuation, icônes, couleur, sombre, tableaux, chronologies, actions destructrices, lignes de téléphone) pour diagnostiquer un problème. Chaque paire est le même écran deux fois avec un seul défaut modifié, et chaque moitié droite passe la vérification. Elles enseignent une correction à la fois ; ne commencez jamais une page à partir de teaching/, commencez-la à partir de l'or.

Le premier écran

La plupart de ce qui se lit comme premium est décidé ici, et la plupart est une soustraction.

• Peu de mots, en très grand. Un titre de 3 à 8 mots sur 2 à 3 lignes, 64 à 112 px sur un bureau (clamp() descendant à environ 48 px sur un téléphone), poids 600–650, tracking −.045 à −.055em, hauteur de ligne .92–1. Une deuxième ligne peut se trouver dans un ton plus calme ; une ligne entière, jamais un mot.
• Une ligne en dessous, 14 mots au maximum, disant comment et pour qui. Jamais de paragraphe sur le premier écran, jamais.
• Deux actions au maximum : une capsule primaire (48 px) et une discrète. Une ligne de risque à côté ou en dessous (« Gratuit pour une boîte de réception ») seulement quand c'est vrai.
• Un badge au maximum au-dessus du titre, portant un fait ou parlant dans la voix du produit (le « Prévisions d'aujourd'hui : 4 de personnes, 12 à survoler » d'une application de messagerie).
• L'image est la chose la plus grande. Une fenêtre de produit à 80 % ou plus de la largeur du contenu, s'élevant depuis le pli ; un objet à environ 40 % de l'écran ; un téléphone à ses proportions réelles. Petit et encadré, c'est le look générique.
• Espace : la pile centrée dans la moitié supérieure avec 24 à 36 px entre ses parties, ou les mots dans la moitié gauche et l'objet dans la droite. Tout le reste sur l'écran est calme.

Les titres sont le design, alors écrivez-en dix et gardez-en un. Dites la vérité du produit dans les mots du visiteur, dans une voix qui sonne comme une personne : « Votre boîte de réception, plutôt vide. » « Chaleur analogique, sans le rack. » « 23 applications sur 24 sont en cours d'exécution. » Choisissez une métaphore dans le monde du produit (la météo pour la messagerie, le matériel pour l'audio) et portez-la légèrement à travers le badge, les propres étiquettes du produit et la ligne de fermeture. Jamais un slogan qui pourrait vendre n'importe quoi (« Boostez votre flux de travail »), jamais une description de catégorie (« La plateforme tout-en-un pour… »).

Espace et équilibre

La cohérence est la majeure partie de ce qui se lit comme un soin. Chaque or suit ces règles, et la vérification les applique.

• Deux jetons d'espacement pour une page : un entre les sections (--section, environ clamp(88px, 10vw, 136px)) et un entre les blocs à l'intérieur d'une section (--gap, 48–56 px). Utilisez-les une fois : une section a seulement un remplissage supérieur, donc deux sections n'empilent jamais leur espacement.
• Pas de bande de vide. Aucun écart entre deux morceaux de contenu n'est plus grand que l'espacement de section, à aucune largeur ou hauteur, y compris après une scène de défilement (empty band).
• Centré signifie centré. Une colonne centrée centre chaque bloc à l'intérieur, y compris les groupes de boutons et les paragraphes courts (margin-inline: auto) ; une colonne de page se trouve au milieu de la zone qu'elle a, jamais collée à la gauche d'un écran large (off-center).
• Boîtes équilibrées. Le contenu se trouve au milieu de sa carte ou la remplit intentionnellement ; l'espace au-dessus est égal à l'espace en dessous (unbalanced) ; aucune carte ne se termine par un panneau vide (empty pane) ou ne touche le bord de sa section (touches the edge) ; les mots ne débordent jamais de leur panneau.
• Chaque largeur est conçue : bureau, tablette (une barre latérale se replie en un rail d'icônes à environ 760–1180 px) et téléphone (une colonne, la même échelle d'espacement). La vérification regarde à 1440, 820 et 390.
• La navigation reste. Elle s'épingle en haut et s'adapte : claire sur un fond sombre ou photographique, une barre givrée avec du texte à encre une fois que quelque chose de clair est en dessous. Jamais une navigation qui défile hors de l'écran.

Fabriquez les images vous-même

Vous pouvez dessiner presque tout ce dont une page a besoin en code, et les images dessinées correspondent toujours à la page :

• Une scène : un ciel, un champ, une texture, à partir de bruit en couches sur un canvas : un volume doux sous un demi-teintes de points (landing-sky, references/craft.md). Des couches qui se déplacent à des vitesses différentes pendant que vous défilez.
• Un objet : métal, verre, plastique, papier en dégradés et ombres CSS : un capuchon brossé est un conic-gradient d'étapes claires et sombres sur un fin repeating-radial-gradient (landing-object).
• Les données en héros : un itinéraire, une forme d'onde, une flotte de cellules, un compteur, dessinés en SVG à partir de nombres réalistes (phone-app, app-dashboard).
• Le produit lui-même, reconstruit à sa taille réelle (references/product-shots.md).

Les photographies viennent de l'utilisateur, d'un outil d'image ou d'une photo sous licence libre enregistrée dans le projet (references/visuals.md). Jamais de blob dégradé, d'illustration générique ou de formes CSS qui imitent une photo.

La boucle

Chaque étape se termine sur quelque chose que vous pouvez vérifier.

1. Direction. Remplissez le bloc de direction à partir du fichier de votre travail et écrivez-le dans DESIGN.md à la racine du projet. Il nomme l'or, le titre que vous avez gardé et l'image que vous allez créer. Terminé quand aucune ligne ne pourrait décrire un autre produit.
2. Or et jetons. Copiez la structure de l'or ; écrivez les jetons dans le format du projet (references/system.md), avec les fichiers de police dans le projet.
3. Construisez tout. Chaque section et état que le brief implique, avec un texte réel (references/words.md) et un monde d'exemple.
4. Faites-en l'unique. L'image et le mouvement signature (references/product-shots.md, references/motion.md). Terminé quand vous pouvez pointer le moment que les gens captureraient.
5. Regardez. Exécutez node <skill>/scripts/check.mjs <url> et ouvrez chaque capture d'écran qu'il écrit. Mettez votre premier écran à côté de l'or et nommez la seule différence. Pour une page qui vend ou un nouvel écran d'application, demandez un réviseur avec un œil neuf (references/review.md). Terminé quand la vérification se termine par check passed, la révision est répondue, et vous avez corrigé et regardé à nouveau au moins deux fois.
6. Terminez. Écrivez la section « Vérifier » de DESIGN.md, arrêtez les serveurs, supprimez les captures, et dites à l'utilisateur ce que vous avez fait, ce que vous avez inventé et quoi vérifier.

Défauts qui reviennent

• Trop de mots : un paragraphe sous le titre, une phrase sur chaque tuile, une étiquette sur chaque section. Coupez jusqu'à ce que ça fasse mal, puis coupez encore une ligne.
• Un titre qui pourrait vendre n'importe quoi, ou un dans la voix de la catégorie.
• L'image trop petite, encadrée dans une carte, ou un espace réservé gris là où le produit devrait être.
• Placement déséquilibré : un titre poussé d'un côté sans rien tenant l'autre, un bouton flottant loin de sa ligne, une fenêtre coupée à un bord aléatoire. Centrez la pile, ou associez les mots avec un objet de poids égal.
• Le téléphone est le bureau réduit : chaque page a sa propre composition téléphonique (tiny text).
• Mots couverts ou coupés : une fenêtre sur le titre, un statut tranché par un recadrage (covered, cut by the crop).
• Contraste sur le texte calme et les liens ; le second ton d'un titre à 3:1 ou mieux.
• IA générique : des étincelles, des dégradés violets, une lettre dans un carré coloré, des emoji en guise d'icônes.

Nombres de savoir-faire

Les valeurs par défaut. Un plan ou le système de l'utilisateur les remplace.

• Typographie : une famille (Geist et Geist Mono sont fournis dans fonts/), une police d'affichage seulement avec une raison. Pages qui vendent : affichage comme ci-dessus ; titres de section 36–64 px à −.04em ; corps 16–18 px ; leads 17–20 px à hauteur de ligne 1.45. UI d'application : 12 / 13 / 14 / 16 / 20 / 24–26 px, poids 450 corps, 500 UI, 600 titres. Applications mobiles : 15–17 px corps, 34 px grands titres. Au maximum 10 tailles sur une page. tabular-nums sur les nombres, text-wrap: balance sur les titres, casse de phrase partout.
• Couleur : les neutres font la structure (3 surfaces, 2 lignes, 4 niveaux de texte). Un accent, rationné pour ce qui agit, est sélectionné ou est allumé. Le rouge signifie échoué ou destructeur, quelle que soit la marque. Contraste 4.5:1 pour le texte de lecture, 3:1 pour le grand texte, mesuré sur le fond réel.
• Espace : une grille de 4 px. 8 px à l'intérieur d'un groupe, 12–16 px entre des éléments liés, 24–32 px entre des groupes, les mots à au moins 12 px de tout bord. Sections sur les pages qui vendent clamp(96px, 12vw, 176px) d'écart. Contenu jusqu'à 1200–1320 px, gouttière clamp(20px, 4vw, 48px).
• Forme : une famille de rayons, imbriquée (interne = externe − remplissage) : 20–32 px pour les tuiles et fenêtres, capsules pour les boutons, 8–12 px à l'intérieur des applications. Les bords sont des filets de 0.5–1 px ; ombres teintées au fond, longues et douces pour ce qui flotte.
• Contrôles : 3–4 hauteurs : environ 32 px dans l'UI d'application, 44 px sur le tactile, 48 px pour les boutons sur les pages qui vendent. Étiquettes à 10 px ou plus de leur bord, line-height: 1.

Disposition

• Bords : le texte s'aligne à gauche dans l'ordre de lecture, les nombres et actions à droite ; une pile de titre courte peut être centrée. Chaque bloc s'aligne avec une ligne qu'un autre bloc utilise.
• Groupez, puis différenciez : les gens obtiennent des visages, les catégories obtiennent des couleurs, les nombres obtiennent des figures tabulaires, la même chose obtient la même marque partout.
• Montrez, ne dites pas : le produit, une barre, un visage au lieu d'une phrase.
• L'accentuation est une différence : calmez les voisins ; colorez seulement ce qui a changé, est sélectionné ou a besoin d'attention.
• Une surface, divisée par des lignes et de l'espace. Les cartes contiennent des objets réels et des couches flottantes, jamais une autre carte.

Jamais

• Un point à l'intérieur d'un badge ou d'une pilule ; le statut est un mot.
• Une icône sur un cercle teinté en tête d'une carte, d'une statistique ou d'un état vide.
• Emoji dans le texte d'interface ; salutations (« Bonjour Sarah »).
• Couleur d'IA par défaut : dégradés violet-à-rose ou bleu néon, blobs flous, néon, une étincelle ou une baguette représentant l'IA.
• Un mot d'un titre dans une autre couleur, style ou poids.
• Étiquettes en majuscules suivies, étiquettes de section numérotées (« 01 / »), une petite étiquette sur chaque section.
• Preuve inventée : témoignages, murs de logos, évaluations et nombres d'utilisateurs que personne ne vous a donnés.
• Espaces réservés : lorem, « Acme », « Jean Dupont », nombres ronds, « Voir tout → » sur chaque panneau.
• Barres grises ou graphiques factices représentant le produit.
• Un logo inventé : une lettre dans un carré coloré. La marque réelle, ou le nom en tant que marque verbale.
• Icônes dessinées à la main ou sous forme de symboles textuels (✦ ✳ ◐), deux ensembles d'icônes sur une page, des flèches sur les boutons.

La version évidente

Ce que n'importe quel modèle construit quand rien n'a été choisi. Nommez-la dans votre direction, puis quittez-la.

• Un premier écran blanc avec un blob dégradé, un titre avec un mot dans un dégradé, un paragraphe de

…

[Le contenu est tronqué pour la traduction – la suite suit le même format.]