Conception d'interface

Construisez des interfaces produit avec la finition d'une équipe de design de premier plan — Linear, Vercel, Stripe, Apple. La différence entre celles-ci et une sortie générique n'est pas le talent. C'est que chaque décision a été prise, la hiérarchie est indubitable, et une centaine de petits détails sont corrects à la fois. Ce skill est la façon d'y parvenir.

Périmètre

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

Pas pour : Pages d'accueil, sites marketing, campagnes, travaux de marque uniquement. Utilisez un skill de design marketing/frontend pour ceux-ci.

Ce skill est autonome : la direction, la hiérarchie visuelle, l'architecture du système de design, ainsi que les éléments essentiels de finition et de mouvement nécessaires pour livrer une UI de qualité production résident ici.

Le problème

Vous allez générer une sortie générique. Votre entraînement a vu des milliers de tableaux de bord, et les schémas sont forts. Vous pouvez suivre tout ce processus — explorer le domaine, nommer une signature, énoncer votre intention — et produire quand même un modèle : 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 la prose, mais la génération de code puise dans des schémas. L'écart entre les deux est l'endroit où les défauts gagnent. Le processus aide, mais il ne garantit pas la finition. Vous devez vous rattraper, et vous devez connaître les gestes concrets que les défauts ne font pas.

Le barème : Si une autre IA, avec une invite similaire, produisait essentiellement la même sortie, vous avez échoué. Pas différent pour le plaisir — 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, car 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, non être conçues.

La typographie semble être un conteneur. Mais la police n'est pas ce qui retient 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. Utiliser 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émonstration de composant, pas un logiciel.
Les données semblent être une 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 --encre et --parchemin évoquent un monde ; --gray-700 et --surface-2 évoquent un modèle. Quelqu'un qui ne lirait que vos tokens devrait deviner de quel produit il s'agit.

Il n'y a pas de décisions structurelles. Tout est design. Le moment où vous arrêtez de vous demander "pourquoi ceci ?" est le moment où les défauts prennent le dessus.

L'intention d'abord

Avant de toucher au code, répondez à ces questions. Gardez cela comme un bref résumé de travail, 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 ? Que faisait-elle il y a 5 minutes, que fera-t-elle 5 minutes après ? Un enseignant à 7h avec un café n'est pas un développeur qui débogue à minuit, ni 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 précède, ce qui suit, ce qui se cache.
Quelle devrait être la sensation ? En mots qui veulent dire quelque chose. "Propre et moderne" ne signifie rien — chaque IA dit cela. Chaud comme un carnet ? Froid comme un terminal ? Dense comme une salle des marchés ? 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 procédez.

L'intention doit être systémique. Dire "chaud" puis utiliser des couleurs froides n'est pas tenir parole. 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 énoncé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 utilisé un défaut.

Exploration du domaine produit

C'est là que les défauts sont rattrapés — ou pas. Chemin générique : Type de tâche → modèle visuel → thème. Chemin artisanal : 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 éléments avant de proposer une direction :

Domaine — concepts, métaphores, vocabulaire du monde de ce produit. Pas des fonctionnalités — le territoire. Minimum 5.
Monde de couleurs — 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 5+.
Signature — un élément (visuel, structurel ou d'interaction) qui ne pourrait exister que pour CE produit. Si vous ne pouvez pas en nommer un, continuez à explorer.
Défauts — 3 choix évidents pour ce type d'interface, visuels ET structurels. Vous ne pouvez pas éviter des schémas 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 en ligne 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 de la prose est une fraction aussi utile que celle que la personne peut regarder. C'est conditionnel : quand aucun outil de ce type n'est présent (CI, agents sans tête, terminaux simples), revenez au code, aux tokens et à une proposition écrite. Ne supposez jamais que l'outil existe ; vérifiez, puis utilisez-le.

Effectuez le rendu à trois moments :

Proposer une direction. En parallèle du bloc Suggestion + Demande, 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.
Concevoir un composant. Rendez le composant réel (ou un avant/après serré, les deux variantes côte à côte) pour 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.
Critiquer ou auditer. Rendez la version actuelle et la version améliorée ensemble pour que l'écart soit montré, pas narré.

Règles lors du rendu :

Le widget montre le visuel uniquement. 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 nativement dans l'hôte. Ne combattez pas l'environnement de l'hôte.
Le spécimen doit quand même passer les vérifications ci-dessous. Un défaut rendu reste un défaut — le rendu est la façon dont la finition est vue, pas un substitut.
Cela rend dans la conversation, pas dans le projet. L'implémentation réelle atterrit toujours 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 facteur unique entre "ça a l'air conçu" et "ça a l'air généré." Les défauts produisent de la platitude — tout de la même taille, poids et espacement, donc rien ne mène et l'œil n'a nulle part où aller. La finition produit de la hiérarchie — l'œil sait instantanément ce qui compte. Ce sont des gestes concrets, pas des impressions.

Un point focal par vue

Chaque écran a une chose pour laquelle l'utilisateur est venu. 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. Rétrogradez tout le reste délibérément.

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

Ne choisissez pas les tailles au feeling. Choisissez un ratio et graduez-le : ~1,2 (tierce mineure) pour une UI dense/calme, ~1,25 pour la plupart des UI produit, ~1,333 pour expressif. À partir d'un corps de 14–16 px, cela donne une échelle visiblement distincte, pas une bouillie de 15/16/17. Une base de 14 px à 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 14 px contient trois niveaux grâce au poids et à l'opacité combinés — valeur : 600 / primaire, étiquette : 500 / secondaire, méta : 400 / atténué — séparant plus proprement que deux poids réguliers à deux points d'écart. Construisez à partir de trois leviers ensemble (taille, poids, couleur/opacité), jamais de la taille seule. Si en plissant les yeux vous ne pouvez pas distinguer le titre du corps et 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 en 14 px régulier gris, trois boîtes identiques, aucun point focal. Décidée : REVENU 11 px/500/atténué/espacé · 48 200 € 28 px/600/primaire/nombres tabulaires (le héros) · ↑12% 12 px/500/succès. Mêmes données, lisibilité opposée — le chiffre mène par la taille+le poids+un accent, l'étiquette est rétrogradée, les métriques secondaires descendent à un niveau inférieur.

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

Linear est serré ; Stripe est aéré. Aucun n'est un défaut — les deux sont choisis, et le choix est le même nombre répété partout. Décidez la densité en amont et nommez les valeurs : un panneau d'outils avec un padding de 12–16 px semble serré comme un établi ; la même carte à 24 px semble comme 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 de manière inégale

Les grandes interfaces n'espaient pas tout également. Les zones de contrôle denses cèdent la place à un contenu ouvert ; les éléments lourds s'équilibrent avec les légers ; l'œil voyage avec un but. Les mises en page monotones — même taille de carte, même espace, même densité partout — sont le son de personne ne décidant. Variez le rythme intentionnellement : regroupez les éléments étroitement liés, puis mettez un vrai espace entre les groupes.

Les proportions parlent

Une barre latérale de 280 px à côté d'un contenu en pleine largeur dit "la navigation sert le contenu." Une barre latérale de 360 px 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 ratios qui énoncent 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 plupart 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. Privilégiez l'espace blanc et le changement tonal avant les bordures et les séparateurs. Les interfaces les plus premium sont surtout une structure invisible.
Dimensionnement optique pour les grandes polices : resserrez l'espacement des lettres à mesure que la police grandit (titres avec un crénage légèrement négatif) ; détendez la hauteur de ligne pour le corps pour la lisibilité (~1,5). Une police serrée semble artisanale ; un crénage par défaut sur un titre de 32 px ressemble à un document.

Fondations artisanales

Superposition subtile (l'épine dorsale)

Quelle que soit la direction, cela s'applique à tout. Vous devriez à peine remarquer que le système fonctionne — quand vous regardez le tableau de bord de Vercel, vous ne pensez pas "jolies bordures", vous comprenez juste la structure. La finition invisible est une finition qui fonctionne.

Élévation de surface. Les surfaces s'empilent : une liste déroulante est au-dessus d'une carte qui est au-dessus de la page. Construisez un système numéroté — base, puis des niveaux croissants. Chaque saut n'est que de quelques points de pourcentage de luminosité — par exemple mode sombre base → +7% → +9% → +12% ; le mode clair reste clair et ajoute une ombre à la place. Vous pouvez à peine voir un pas isolément, mais empilés, la hiérarchie émerge. Des décalages chuchotants que vous ressentez plutôt que vous 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.
Listes déroulantes/popovers : un niveau au-dessus de leur surface parente, ou elles se fondent et la superposition est perdue.
Champs de saisie : légèrement plus foncés que l'environnement, pas plus clairs. Les champs de saisie 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. Un rgba de faible opacité se fond avec le fond et définit un bord sans attirer l'attention ; les bordures hex solides semblent dures en comparaison. Le mode sombre vit autour de rgba(255,255,255,0.06–0.12), le mode clair légèrement plus haut. Construisez une progression — standard, séparation plus douce, accentuation, anneau de focus — et faites correspondre l'intensité à l'importance de la limite.

Le test du plissement des yeux : plissez les yeux devant 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 transitions brutales. Juste une structure silencieuse. Obtenez cela faux et rien d'autre n'a d'importance.

Expression infinie

Chaque schéma a des expressions infinies — aucune interface ne devrait se ressembler. Un affichage métrique pourrait être un nombre héros, une statistique en ligne, une sparkline, une jauge, 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 métriques icône-gauche-nombre-grand-étiquette-petite à chaque fois signale IA générée instantanément 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 espace et un moment. Demandez-vous : si cette interface était une pièce, dans quel bâtiment se trouverait-elle ? Quelles sont les couleurs des murs, du sol, de la lumière ? Une application de tenue de livres pourrait être un bureau clair et ordonné ; un outil de design pourrait être un studio ; un terminal de trading serait sombre et tendu. La palette de l'interface devrait évoquer ce lieu. Listez 3 à 5 mots pour l'environnement, puis traduisez-les en choix de couleurs.

Architecture du système de design (les tokens, pas la théorie)

Vous construisez un système de design. Les tokens ne sont pas des variables — ce sont des décisions. Quand quelqu'un lit vos tokens, il devrait ressentir le produit.

Palette de couleurs

Fond (la toile). Pas blanc. Pas #ffffff. Une surface chaude subtile — #faf9f7 (ivoire), #f4f2ec (parchemin), des neutres chauds pour le mode clair ; #1a1a1a ou #1c1b18 pour le mode sombre. Le fond de la page doit avoir une qualité — chaud, froid, minéral, texturé.
Surfaces. Empilées à partir du fond. Chaque niveau une teinte légèrement plus claire (mode sombre) ou plus foncée (mode clair). Ne changez pas la teinte ; gardez la même température.
Texte. Pas seulement noir/gris. Teintez le texte pour correspondre à la température de l'interface— #2c2a26 (charbon chaud) au lieu de #111, #6b6760 au lieu de #666. Des valeurs de luminosité intentionnelles, pas des gris par défaut.
Accent. Une seule couleur dominante, avec des variantes claires/foncées, et une version subtile pour les arrière-plans. Chaque autre couleur est signal (succès, erreur, avertissement) ou structure.
Signaux sémantiques. Teintez-les aussi — un succès chaud n'est pas du vert brutal. Teintez le vert pour correspondre au monde : #2d6a4f (forêt) au lieu de #16a34a (vert néon générique).

Règle : Chaque couleur dans votre système devrait avoir une température cohérente. Mélanger des neutres chauds avec du bleu froid fonctionne rarement — à moins que votre intention ne soit explicitement contrastée (par exemple un instrument froid sur une surface chaude). Même dans ce cas, faites-le avec intention, pas par défaut.

Hiérarchie typographique

Police. Une police de travail (Inter, SF Pro, Graphik, system-ui) pour les interfaces, ou une police avec personnalité si le produit le demande (Mona Sans, Departure Mono). La police est la première décision — elle fixe la température.
Échelle. Une échelle de 6 à 8 pas, basée sur un ratio fixe, avec des valeurs précises en pixel. Exemple : --fs-caption: 11px, --fs-body: 14px, --fs-h4: 16px, etc.
Poids et rôles. Associez des poids aux rôles : h1 → 700, h2 → 650, h3 → 600, corps → 400, légende → 400 tracké. Les décisions de hiérarchie sont visibles dans les poids seuls.
Étiquettes. Petites, trackées, opacité réduite. Un label 11 px / 500 / 0,6 opacité / 0,05em tracking est un label élégant. Un label 14 px / 400 est juste du texte plus petit.
Hauteur de ligne. --lh-tight: 1.15 pour les titres, --lh-body: 1.5 pour le corps, --lh-loose: 1.7 pour le confort de lecture. Explicitement nommés.

Règle : N'utilisez jamais la taille de police par défaut du navigateur. Chaque taille est une décision.

Espacement et rythme

Grille de base. 4 px, 8 px, ou une échelle harmonique. Pas d'espacement arbitraire.
Échelle. --space-xs: 4px, --space-sm: 8px, --space-md: 16px, --space-lg: 24px, --space-xl: 32px, --space-2xl: 48px, --space-3xl: 64px. Tous les espacements viennent de cette échelle.
Densité. Une variable de densité --density: 1 qui met à l'échelle le padding intérieur, la hauteur des champs, les gaps. Interface serrée = 0.8, spacieuse = 1.2, défaut = 1. Une interface qui en a besoin change une variable.

Règle : Ne décidez jamais un espacement sans la grille. "gap: 22px" est une odeur. "gap: var(--space-lg)" est un système.

Élévation (ombre + superposition)

Couches. Page (0), carte (1), popover (2), modal (3), toast (4). Chaque niveau une ombre plus prononcée (mod clair) ou un fond plus clair (mode sombre).
Ombre. En mode clair : --shadow-sm, --shadow-md, --shadow-lg. En mode sombre : remplacez-les par des fonds de calque (les ombres sur fond sombre sont invisibles).

Règle : Les ombres en mode sombre doivent disparaître. Si vous voyez des ombres en mode sombre, c'est un bug de design.

Bordures

Épaisseur par défaut : 1px. Rarement plus, jamais moins (sauf 0).
Couleur : rgba(..., 0.06-0.15) selon le mode. Pas de bordures hexadécimales solides — le rgba s'adapte à n'importe quel fond.
Cercle de focus : 2px avec l'accent à opacité 0.5.

Règle : Si vous utilisez une bordure solide, c'est par conception, pas parce que vous n'avez pas réfléchi.

Modèles et états

Chaque composant a des états. Chaque état est une décision de design.

Défaut. Le composant au repos. Devrait être clairement lu, pas juste posé là.
Survol. Un changement subtil — légèrement plus clair/foncé, pas de saut. Ne changez pas la taille ou la position.
Actif / pressé. Plus foncé que le survol. Retour visuel instantané.
Vide. Ce qui est montré quand il n'y a pas de données. Pas juste "rien." Une illustration, un message, une action.
Erreur / état d'alerte. Rouge, mais un rouge qui s'intègre au système — pas de rouge vif à moins que le produit ne soit sanglant. Bordure rouge, texte auxiliaire, mais le fond ne devrait pas devenir rouge sauf en cas d'urgence.
Désactivé. Opacité réduite (0,4-0,5), pas de flou, pas de croisillon. Le composant devrait disparaître gracieusement, pas crier.

Règle : Si vous n'avez pas conçu l'état vide, vous n'avez pas conçu le composant.

Signal de mouvement (minimal mais intentionnel)

Un mouvement minimal fait paraître l'interface rapide. Zéro mouvement fait paraître l'interface cassée. Trop de mouvement distrait.

Transitions de survol : 150-200 ms, easing out doux (cubic-bezier(0.4, 0, 0.2, 1)). Chaque élément interactif a une transition.
Entrée de page / composant : 300 ms, léger décalage vers le haut (8-12 px) et fondu. Un seul timing, pas de cascades — juste un fondu propre.
Modals / popovers : 200 ms, échelle depuis 0,95, fenêtre d'arrière-plan fondu en 150 ms.
Feedback de chargement : Squelette ou fondu, pas de spinner sauf si l'utilisateur attend >2s.
Règle : Aucun mouvement ne devrait faire attendre l'utilisateur. Le mouvement est un feedback, pas un spectacle.

Processus de décision

C'est l'ordre. Faites-le dans cet ordre, pas en sautant.

Comprendre la tâche et l'humain. (Intention d'abord)
Explorer le domaine. (Territoire, pas fonctionnalités)
Nommer la signature. (Ce qui rend ce produit unique)
Proposer des directions. (Montrer, pas raconter)
Discuter et affiner. (Avec l'utilisateur)
Construire les tokens de base. (Couleur, type, espacement)
Concevoir une vue clé. (Par exemple le tableau de bord principal)
Auditer les défauts. (Nommez-les, corrigez-les)
Peaufiner les états et le mouvement.
Valider par rapport à l'intention. (Chaque token correspond-il ?)

Directives finales

Ne pas expédier de défauts. Si vous voyez un schéma que vous avez vu 100 fois, refaites-le.
De la finition, pas des fonctionnalités. Une interface avec trois boutons parfaitement espacés et une hiérarchie claire bat une interface avec 20 fonctionnalités et un espacement aléatoire.
Systèmes, pas d'actes uniques. Chaque décision crée un précédent. Assurez-vous que le précédent est bon.
Tests de contraste. Texte sur fond : au moins 4.5:1 pour le texte courant, 3:1 pour les grands textes. Les couleurs d'accent doivent se démarquer des neutres (vérifiez les canaux de couleur, pas seulement la luminosité).
Tests daltoniens. Si le seul moyen de distinguer le succès de l'erreur est la couleur, refaites-le. Ajoutez des icônes, des étiquettes ou des positions.
Mode clair et mode sombre. Concevez les deux. Le mode sombre n'est pas l'inverse du mode clair — c'est un système séparé de valeurs de luminosité, de couleurs et parfois de structure.

Rappel : ce que vous construisez

Vous ne construisez pas une interface. Vous construisez un outil qu'un humain utilisera pour faire quelque chose d'important pour lui. La finition est du respect. Les défauts sont de la paresse. La hiérarchie est de la clarté. Chaque pixel est une décision.

Barème : Si un autre designer ou IA aurait produit le même résultat à partir de la même invite, vous avez échoué. La barre n'est pas "fonctionnel" — c'est "distinct, délibéré, et humain."

Demander à votre IA préférée

Documentation