hackycy/product-ui-system

Conception d'Interface

Construisez des interfaces produit avec le soin d'une équipe de design de premier plan — Linear, Vercel, Stripe, Apple. La différence entre celles-ci et les sorties génériques n'est pas le talent. C'est que chaque décision a été décidée, la hiérarchie est indubitable, et une centaine de petits détails sont corrects en même temps. Ce skill vous montre comment y parvenir.

Périmètre

À utiliser pour : Tableaux de bord, panneaux d'administration, applications SaaS, outils, pages de paramètres, interfaces de données.

Ne convient pas pour : Pages d'atterrissage, sites marketing, campagnes, travaux uniquement liés à la marque. Utilisez un skill de conception marketing/frontend pour cela.

Ce skill est autonome : la direction, la hiérarchie visuelle, l'architecture du système de design, ainsi que l'essentiel du polissage et du mouvement nécessaires pour livrer une UI prête pour la production se trouvent ici.

---

Le Problème

Vous allez générer des sorties génériques. Votre entraînement a vu des milliers de tableaux de bord, et les motifs sont forts. Vous pouvez suivre ce processus entier — explorer le domaine, nommer une signature, exprimer votre intention — et produire quand même un template : des couleurs chaudes sur des structures froides, des polices amicales sur des mises en page génériques.

Cela arrive parce que l'intention vit dans le texte, mais la génération de code s'appuie sur les motifs. L'écart entre les deux est là où les défauts gagnent. Le processus aide, mais il ne garantit pas le soin. Vous devez vous rattraper, et vous devez connaître les gestes concrets que les défauts ne proposent pas.

La barre : Si un autre IA, avec une invite similaire, produisait essentiellement la même sortie, vous avez échoué. Pas différent pour le plaisir d'être différent — différent parce que l'interface a émergé de cet utilisateur, cette tâche, ce monde. Quand vous concevez à partir de défauts, tout se ressemble, parce que les défauts sont partagés.

---

Où se Cachent les Défauts

Les défauts se déguisent en infrastructure — les parties qui semblent devoir simplement fonctionner, sans être conçues.

• La typographie semble être un conteneur. Mais la police n'est pas le support de votre design, elle est votre design. Le poids d'un titre, la personnalité d'une étiquette, la texture d'un paragraphe façonnent la sensation du produit avant même que quiconque lise un mot. Atteindre votre police habituelle signifie que vous ne concevez pas.
• La navigation semble être un échafaudage. Mais la navigation est le produit — où vous êtes, où vous pouvez aller, ce qui compte. Une page flottant dans l'espace est une démo de composant, pas un logiciel.
• Les données semblent être de la présentation. Mais un nombre à l'écran n'est pas du design. Que signifie-t-il pour la personne qui regarde ? Un anneau de progression et une étiquette empilée montrent tous deux « 3 sur 10 » — l'un raconte une histoire, l'autre remplit l'espace.
• Les noms de tokens semblent être des détails d'implémentation. Mais --ink et --parchment évoquent un monde ; --gray-700 et --surface-2 évoquent un template. Quelqu'un qui ne lit que vos tokens devrait deviner de quel produit il s'agit.

Il n'y a pas de décisions structurelles. Tout est design. Dès que vous arrêtez de vous demander « pourquoi ceci ? », les défauts prennent le dessus.

---

Intention d'Abord

Avant de toucher au code, répondez à ces questions. Gardez un brief de travail concis, sauf si la direction nécessite une confirmation de l'utilisateur.

• Qui est cet humain ? Pas « les utilisateurs ». La personne réelle. Où est-elle quand elle ouvre ceci ? Qu'a-t-elle fait 5 minutes avant, que fera-t-elle 5 minutes après ? Un enseignant à 7h avec un café n'est pas un développeur qui débogue à minuit n'est pas un fondateur entre deux réunions d'investisseurs.
• Que doit-il accomplir ? Le verbe. Noter ces soumissions. Trouver le déploiement cassé. Approuver le paiement. La réponse détermine ce qui mène, ce qui suit, ce qui se cache.
• Quelle devrait être la sensation ? En mots qui ont du sens. « Propre et moderne » ne veut rien dire — tous les IA disent ça. Chaud comme un carnet ? Froid comme un terminal ? Dense comme un étage de trading ? Calme comme une application de lecture ? Cela façonne la couleur, la police, l'espacement, la densité — tout.

Si l'invite est trop vague pour identifier l'humain, la tâche et la sensation, posez une question concise. Si le contexte permet une hypothèse responsable, énoncez-la brièvement et continuez.

L'intention doit être systémique. Dire « chaud » puis utiliser des couleurs froides n'est pas tenir sa promesse. Si l'intention est chaude : surfaces, texte, bordures, accents, couleurs sémantiques, police — tout chaud. Si dense : espacement, taille de police, architecture de l'information — tout dense. Vérifiez chaque token par rapport à l'intention déclarée. Pour chaque choix — mise en page, température de couleur, police, échelle d'espacement, hiérarchie — vous devez pouvoir dire pourquoi. « C'est courant » ou « ça marche » signifie que vous avez cédé aux défauts.

---

Exploration du Domaine Produit

C'est là que les défauts sont attrapés — ou pas. Chemin générique : Type de tâche → modèle visuel → thème. Chemin soigné : Type de tâche → domaine produit → signature → structure + expression. La différence est le temps passé dans le monde du produit avant toute réflexion visuelle.

Produisez les quatre points avant de proposer une direction :

• Domaine — concepts, métaphores, vocabulaire du monde de ce produit. Pas des fonctionnalités — le territoire. Minimum 5.
• Monde colorimétrique — quelles couleurs existent naturellement ici ? Pas « chaud » ou « froid » — allez dans le monde réel. Si ce produit était un espace physique, que verriez-vous ? Listez-en 5+.
• Signature — un élément (visuel, structurel ou interactif) qui ne pourrait exister que pour CE produit. Si vous ne pouvez pas en nommer un, continuez d'explorer.
• Défauts — 3 choix évidents pour ce type d'interface, visuels ET structurels. Vous ne pouvez pas éviter les motifs que vous n'avez pas nommés.

Le test : Lisez votre proposition en supprimant le nom du produit. Quelqu'un pourrait-il identifier à quoi cela sert ? Sinon, explorez plus profondément.

---

Rendez-le Quand Vous le Pouvez

Si un outil de rendu visuel inline est disponible dans la session (par exemple un outil show_widget / visualize qui rend du HTML ou SVG en ligne dans la conversation), préférez montrer le design plutôt que le décrire. Une direction enfermée dans du texte est bien moins utile que celle que la personne peut regarder. Ceci est conditionnel : lorsqu'aucun outil de ce type n'est présent (CI, agents sans tête, terminaux basiques), revenez au code, aux tokens et à une proposition écrite. Ne présumez jamais que l'outil existe ; vérifiez, puis utilisez-le.

Rendez à trois moments :

1. Proposer une direction. En parallèle du bloc Suggérer + Demander, rendez un petit spécimen en direct : la palette sous forme d'échantillons réels, l'échelle typographique dans la police réelle, les étapes d'élévation de surface sous forme de cartes empilées, l'élément signature comme un composant réel. La personne doit voir « chaud comme un carnet », pas lire les mots.
2. Concevoir un composant. Rendez le composant réel (ou un avant/après serré, les deux variantes côte à côte) afin que les décisions de finition — espacement, bordures, hiérarchie, états — soient visibles, pas affirmées. Rendez les états réels (défaut, survol, vide, erreur) là où ils comptent.
3. Critiquer ou auditer. Rendez la version actuelle et la version améliorée ensemble pour que l'écart soit montré, pas raconté.

Règles lors du rendu :

• Le widget montre uniquement le visuel. Tout le raisonnement, l'exploration du domaine, la liste des défauts rejetés et la recommandation restent dans votre texte de réponse — ne collez jamais de prose dans le widget.
• Respectez le contrat du système de design de l'outil de rendu (chargez son read_me/guide s'il en a un). Utilisez ses variables de thème pour que le spécimen hérite du mode clair/sombre et s'intègre naturellement dans l'hôte. Ne combattez pas le chrome de l'hôte.
• Le spécimen doit quand même passer les vérifications ci-dessous. Un rendu par défaut reste un défaut — le rendu est comment le soin est vu, pas un substitut pour celui-ci.
• Ceci rend à la conversation, pas au projet. L'implémentation réelle atterrit encore dans la base de code via des modifications normales.

Le but : réduire la boucle entre « voici ma réflexion » et « voici à quoi ça ressemble » en un seul message auquel la personne peut réagir.

---

Hiérarchie Visuelle et Composition

Le plus grand moteur de « ça a l'air conçu » versus « ça a l'air généré ». Les défauts produisent de la platitude — tout la même taille, le même poids et le même espacement, donc rien ne mène et l'œil n'a nulle part où aller. Le soin produit de la hiérarchie — l'œil sait instantanément ce qui compte. Ce sont des gestes concrets, pas des sensations.

Un point focal par vue

Chaque écran a une chose que l'utilisateur est venu faire. Cette chose domine — par la taille, le contraste, la position ou l'espace qui l'entoure. Quand tout se fait concurrence également, rien ne gagne et l'interface ressemble à un parking. Avant de construire, nommez l'élément focal à voix haute. Puis faites-le gagner : plus grand, plus contrasté, ou entouré d'espace blanc. Reléguez tout le reste délibérément.

L'échelle typographique est un rapport, et le poids bat la taille

Ne choisissez pas les tailles au feeling. Choisissez un rapport et graduez-le : ~1.2 (tierce mineure) pour une UI dense/calme, ~1.25 pour la plupart des UI produit, ~1.333 pour expressive. À partir d'un corps de 14–16px, cela produit une échelle visiblement distincte, pas une bouillie de 15/16/17. Une base de 14px à 1.25 : légende 11 · corps 14 · h4 16 · h3 18 · h2 22 · h1 28 · affichage 44+. Arrondissez aux pixels entiers et à votre grille d'espacement.

Le geste Apple/Linear : le poids et la couleur font plus de travail de hiérarchie que la taille. Une seule taille de 14px peut contenir trois niveaux grâce au poids + opacité seuls — valeur : 600 / primaire, étiquette : 500 / secondaire, méta : 400 / atténué — se séparant plus proprement que deux poids normaux à deux points d'écart. Construisez à partir de trois leviers ensemble (taille, poids, couleur/opacité), jamais la taille seule. Si vous plissez les yeux et ne pouvez pas distinguer le titre du corps de l'étiquette, la hiérarchie est trop faible.

Exemple travaillé — une métrique, plate vs décidée. Plate : Revenu / 48 200 $ tous deux 14px gris normal, trois boîtes identiques, pas de point focal. Décidée : REVENU 11px/500/atténué/espacé · 48 200 $ 28px/600/primaire/chiffres tabulaires (le héros) · ↑12% 12px/500/succès. Mêmes données, lisibilité opposée — le chiffre mène par la taille+poids+un accent, l'étiquette est reléguée, les métriques secondaires descendent à un niveau inférieur.

La densité est une décision, exprimée en px

Linear est serré ; Stripe est aéré. Aucun des deux n'est par défaut — les deux sont choisis, et le choix est le même nombre répété partout. Décidez de la densité à l'avance et nommez les valeurs : un panneau d'outils avec un padding de 12–16px semble serré comme un établi ; la même carte à 24px semble être un dépliant. Le même nombre peut être juste dans un contexte et paresseux dans un autre. Choisissez délibérément, puis tenez-le.

Rythme spatial — respirez inégalement

Les grandes interfaces n'espacement pas tout également. Des zones de contrôle denses cèdent la place à un contenu ouvert ; des éléments lourds équilibrent des éléments légers ; l'œil voyage avec intention. Les mises en page monotones — même taille de carte, même écart, même densité partout — sont le bruit de personne ne décidant. Variez le rythme délibérément : regroupez les choses étroitement liées, puis mettez un vrai air entre les groupes.

Les proportions parlent

Une barre latérale de 280px à côté d'un contenu plein écran dit « la navigation sert le contenu ». Une barre latérale de 360px dit « ce sont des pairs ». Le nombre spécifique déclare ce qui compte. Si vous ne pouvez pas articuler ce qu'une proportion dit, elle ne dit rien. Choisissez des largeurs et des rapports qui expriment une relation.

Distribution et retenue (le look « cher »)

• ~60/30/10 : une surface neutre dominante, un ton secondaire, et ~10% d'accent. La couleur est une ressource rare — la majeure partie de l'écran est de la structure.
• Un seul accent, utilisé avec intention, bat cinq couleurs utilisées sans réflexion. Le gris construit la structure ; la couleur communique (statut, action, identité). La couleur non motivée est du bruit.
• Hiérarchie par l'espace et le poids, pas par les lignes. Atteignez l'espace blanc et le changement tonal avant les bordures et les séparateurs. Les interfaces les plus premium sont surtout de la structure invisible.
• Dimensionnement optique pour les grandes polices : resserrez l'espacement des lettres à mesure que la police grossit (titres avec un tracking légèrement négatif) ; augmentez l'interlignage sur le corps pour la lisibilité (~1.5). Une police serrée semble soignée ; un tracking par défaut sur un titre de 32px semble être un document.

---

Fondations du Soin

Calque subtil (l'épine dorsale)

Quelle que soit la direction, cela s'applique à tout. Vous devriez à peine remarquer le système qui fonctionne — quand vous regardez le tableau de bord de Vercel, vous ne pensez pas « belles bordures », vous comprenez juste la structure. Le soin invisible est un soin qui fonctionne.

Élévation de surface. Les surfaces s'empilent : un menu déroulant est au-dessus d'une carte qui est au-dessus de la page. Construisez un système numéroté — base, puis niveaux croissants. Chaque saut n'est que de quelques points de pourcentage de clarté — par exemple, mode sombre base → +7% → +9% → +12% ; mode clair reste clair et ajoute de l'ombre à la place. Vous pouvez à peine voir un pas isolément, mais empilés, la hiérarchie émerge. Des changements murmurés que vous ressentez plutôt que vous ne voyez.

• Barres latérales : même fond que le canevas, pas une couleur différente. Des couleurs différentes fragmentent l'espace en « monde de la barre latérale » et « monde du contenu ». Une bordure subtile suffit.
• Menus déroulants/popovers : un niveau au-dessus de leur surface parente, sinon ils se fondent et le calque est perdu.
• Champs de saisie : légèrement plus foncés que leur environnement, pas plus clairs. Les champs sont en retrait — ils reçoivent du contenu. Un remplissage plus foncé signale « tapez ici » sans bordures lourdes.

Bordures. Devraient disparaître quand vous ne les cherchez pas, mais être trouvables quand vous avez besoin de structure. Des rgba de faible opacité se fondent avec l'arrière-plan et définissent un bord sans attirer l'attention ; les bordures hexadécimales solides semblent dures en comparaison. Le mode sombre se situe autour de rgba(255,255,255,0.06–0.12), le mode clair légèrement plus élevé. Construisez une progression — standard, séparation plus douce, emphase, anneau de focus — et faites correspondre l'intensité à l'importance de la frontière.

Le test du plissement des yeux : plissez les yeux en regardant l'interface. Vous devriez toujours percevoir la hiérarchie — ce qui est au-dessus de quoi, où les sections se divisent — mais rien ne devrait ressortir. Pas de lignes dures, pas de changements discordants. Juste une structure silencieuse. Si vous vous trompez sur ce point, rien d'autre n'a d'importance.

Expression Infinie

Chaque motif a des expressions infinies — deux interfaces ne devraient jamais se ressembler. Un affichage de métrique pourrait être un nombre héros, une statistique en ligne, un sparkline, un jaug, une barre de progression, un delta de comparaison, ou un badge de tendance. Même largeur de barre latérale, même grille de cartes, mêmes boîtes de métriques icône-gauche-nombre-grand-étiquette-petite à chaque fois signale immédiatement une génération IA et est oubliable. Les cartes de Linear ne ressemblent pas à celles de Notion ; les métriques de Vercel ne ressemblent pas à celles de Stripe. Mêmes concepts, expressions infinies. Avant de construire, demandez : quelle est la SEULE chose que les utilisateurs font ici, et quel produit résout un problème similaire brillamment ?

La Couleur Vit Quelque Part

Chaque produit existe dans un...