Voici la traduction en français du contenu Markdown fourni :
La spécification du système de design de Vercel est vraiment un exemple de manuel de ce que j'ai vu.
Aujourd'hui, j'ai sérieusement étudié leur DESIGN.md. Avec les thèmes clair et sombre, il décrit complètement les couleurs, les polices, l'espacement, les composants, le mouvement et les règles de rédaction dans une méthodologie de design exécutable.
J'ai l'impression de pouvoir suivre cette voie pour le design.md de tous mes futurs produits.
Les détails sont ici :
Certains amis ne savent peut-être pas ce qu'est DESIGN.md. En termes simples, c'est une spécification de design destinée à être lue par l'IA. Quand l'IA nous aide à écrire du code, elle a besoin de savoir quelles couleurs utiliser, quelles tailles de police appliquer et l'espacement entre les éléments.
Sans ce fichier, les interfaces produites par l'IA ont un aspect différent à chaque fois, avec un style incohérent.
Après avoir lu le DESIGN.md de Vercel, j'ai réalisé qu'un bon DESIGN.md est bien plus que le simple fait de dire à l'IA quels codes hexadécimaux ou quelles tailles de police utiliser. Il représente tout un ensemble de réflexion sur le design. Cela a pas mal bouleversé ma perception.
Aujourd'hui, je vais décomposer pourquoi ce fichier est si bon.
1
Parlons d'abord de la couleur.
Quand j'ai commencé à écrire DESIGN.md, la section des couleurs était en fait très simple. Je listais quelques valeurs de couleur, je disais à l'IA quelle était la couleur primaire, secondaire et d'accent, et c'était à peu près tout.
Mais en écrivant de cette façon, l'IA ne sait toujours pas comment ces couleurs correspondent aux différents états d'interaction.
Par exemple, pour un bouton, quelle doit être la couleur de l'état par défaut ? De combien doit-il s'assombrir au survol ? Quelle couleur doit-il avoir au moment du clic ? Si ces détails ne sont pas explicitement définis, les résultats générés par l'IA peuvent différer à chaque fois.
L'approche de Vercel résout complètement ce problème.
Dans leur système de design, chaque série de couleurs est décomposée en 10 dégradés de 100 à 1000, et chaque nombre correspond à un état d'interface fixe.
100 est l'arrière-plan par défaut des éléments, 200 est l'arrière-plan au survol, et 300 est l'arrière-plan au clic. En montant, 400 est la bordure par défaut, 500 est la bordure au survol, et 600 est la bordure au clic.
700 est utilisé pour les blocs de couleur unie, comme les balises ou le bouton lui-même ; 800 est l'état de survol de ces blocs. 900 est utilisé pour le texte secondaire et les icônes, et 1000 est utilisé pour le texte principal et les icônes.
Cela ressemble à une simple numérotation, mais derrière se cache une logique d'interaction complète.
100 à 300 gèrent les états d'arrière-plan. 400 à 600 gèrent les états de bordure. 700 et 800 gèrent les états des blocs de couleur unie. 900 et 1000 gèrent la hiérarchie de l'information.
En d'autres termes, Vercel dit en fait à l'IA qu'il y a plusieurs états ici. La couleur n'est que la manifestation de ces états.
Les avantages de cela sont très directs.
Quand l'IA écrit du code, elle n'a pas besoin de deviner de combien un bouton doit s'assombrir au survol, ni de deviner comment la bordure doit changer. L'état par défaut correspond à 100, le survol à 200, et le clic à 300 ; les règles sont prédéfinies.
De plus, sur cette base, Vercel fournit des thèmes clair et sombre mais utilise exactement les mêmes noms de Token.
Par exemple, gray-1000. Dans le thème clair, c'est #171717, proche du noir pur. Dans le thème sombre, cela devient #ededed, proche du blanc pur.
Pour un système de design, ces deux couleurs sont en fait la même chose.
Elles représentent toutes deux l'information la plus importante sur la page. Les développeurs et l'IA, lors de la génération d'interfaces, se concentrent sur la signification sémantique de gray-1000 plutôt que sur la valeur hexadécimale spécifique qui se cache derrière. Lorsque le thème change, le système mappe automatiquement cette signification sémantique à la couleur correspondante.
2
Après avoir résolu le problème des couleurs, une autre contrainte plus importante est le rythme de la page.
Le système d'espacement de Vercel est basé sur des multiples de 4px, fournissant seulement 9 valeurs au total : 4, 8, 12, 16, 24, 32, 40, 64, 96. Tout l'espacement dans l'ensemble du produit est choisi parmi ces nombres.
Ma première réaction a été que cela semblait un peu limité. Et si j'avais besoin de 20px ? Et si j'avais besoin de 28px ?
J'ai demandé à un ami designer, et il a dit que pour la grande majorité des produits, 9 styles d'espacement sont généralement suffisants.
S'il y a trop de choix d'espacement, le rythme de la page est perdu. De nombreux sites web terribles ont des conceptions d'espacement très aléatoires. C'est en fait un tabou majeur dans la conception de produits.
Les excellents systèmes de design n'offrent pas des choix infinis ; ils limitent activement les choix.
Vercel fournit directement un ensemble clair de suggestions de rythme : garder 8px entre les éléments d'un groupe, 16px entre les groupes, et 32 à 40px entre les sections. Cela définit en effet le rythme respiratoire de la page.
Les utilisateurs ne remarquent peut-être pas ces écarts, mais ils ressentiront naturellement quelles parties appartiennent au même ensemble et où commence une nouvelle zone de contenu.
Souvent, une page a l'air confortable non pas parce que le designer a utilisé une technique avancée, mais parce que ce rythme est maintenu de manière cohérente partout.
La typographie suit la même logique.
Le système de polices de Vercel est identique à la logique de la couleur et de l'espacement.
Tout le texte est catégorisé en plusieurs rôles fixes : titre, étiquette, corps de texte et bouton.
Sous chaque rôle, des Tokens de différentes tailles sont fournis, et chaque Token a une police, une taille, un poids, une hauteur de ligne et un espacement des lettres prédéfinis.
Auparavant, face à un morceau de texte, un designer pouvait réfléchir à l'opportunité d'utiliser 14px ou 15px et à la hauteur de ligne appropriée.
Avec un système de design, la façon de penser change. L'IA détermine d'abord le rôle de ce texte. Est-ce un titre, un corps de texte ou une information secondaire ? Une fois le rôle déterminé, le style correspondant est également déterminé.
Passer d'un état d'esprit basé sur la taille de police à un état d'esprit basé sur le rôle. Passer de la prise de décision visuelle à la prise de décision sémantique. C'est là que réside la véritable valeur d'un système de design. Brillant.
En voyant cela, vous réalisez que, que ce soit pour l'espacement ou les polices, Vercel fait la même chose : réduire autant que possible le jeu libre pendant la phase d'exécution, avec des règles déterminées à l'avance, de sorte que l'exécution ne nécessite que le choix d'un rôle.
C'est vrai pour les designers, pour les développeurs et pour l'IA.
3
De plus, la rédaction est également traitée comme une partie importante de la spécification de design de Vercel. C'est la partie qui manque le plus facilement dans la plupart des fichiers DESIGN.md.
Vercel définit ces détails de manière très spécifique.
Par exemple, le texte d'un bouton doit être une action plus un objet. Comme "Déployer le projet" ou "Supprimer le membre". Vous ne pouvez pas simplement écrire des mots vagues comme "Déployer", "OK" ou "Supprimer".
La raison est simple. En voyant "Supprimer", l'utilisateur doit encore réfléchir à ce qui est exactement supprimé. Avec une action et un objet, l'utilisateur peut immédiatement former une compréhension complète.
Les messages d'erreur sont similaires. Les règles de Vercel sont claires. D'abord, dites à l'utilisateur ce qui s'est passé. Ensuite, dites à l'utilisateur quoi faire ensuite.
Par exemple, si une construction échoue parce que le fichier du package dépasse la limite de taille, la solution est de réduire la taille ou d'ajuster la limite. Après avoir lu trois phrases, l'utilisateur sait immédiatement où se trouve le problème et quoi faire ensuite.
Les invites d'erreur dans de nombreux produits sont "L'opération a échoué, veuillez réessayer plus tard." Le contenu informatif d'une telle invite est presque nul. La seule information que l'utilisateur obtient après l'avoir lue est que cela a échoué. Quant à savoir pourquoi cela a échoué et quoi faire ensuite, ils doivent encore deviner.
Les spécifications de rédaction dans un système de design visent essentiellement à réduire ces conjectures.
Vercel a également standardisé les messages de notification après la fin d'une opération, qui doivent seulement indiquer quel changement s'est produit. Par exemple, "Projet supprimé", pas "Projet supprimé avec succès".
Parce que le fait que la boîte de dialogue puisse apparaître indique déjà que l'opération est terminée. Le mot "avec succès" est une information redondante.
Vient ensuite le mouvement.
Cette partie est particulièrement intéressante car elle est exactement à l'opposé de mon intuition. Je penserais que plus il y a d'animation, plus le produit est raffiné.
Donc, ajouter un peu d'animation à un survol de bouton ou à une fenêtre contextuelle semble le rendre haut de gamme. De nombreux produits Vibe Coding semblent maintenant aller dans cette direction.
Mais l'attitude de Vercel est complètement différente. Ils ont même explicitement écrit que dans de nombreux scénarios d'interaction, 0 milliseconde est souvent le meilleur choix. En d'autres termes, pas d'animation, terminé instantanément.
Si un bouton passe d'un état par défaut à un état de survol, ce changement est déjà assez clair. La meilleure rétroaction est qu'il se produise immédiatement ; ajouter une couche d'animation supplémentaire rendra plutôt l'interface lente.
Bien sûr, certains scénarios nécessitent du mouvement.
Par exemple, une fenêtre contextuelle qui apparaît soudainement. S'il n'y a pas de transition du tout, les gens ne sauront pas d'où elle vient. C'est là que l'animation a de la valeur.
Vercel spécifie même la durée pour différents scénarios. Les changements d'état normaux sont d'environ 150 millisecondes, les popovers d'environ 200 millisecondes et les modaux d'environ 300 millisecondes.
Plus le changement est important, plus le temps de réaction est donné. Plus le changement est petit, plus la rétroaction est directe.
La logique derrière est toujours la même : ne bougez pas si ce n'est pas nécessaire, et quand vous devez bouger, restez rapide, léger et retenu.
La dernière partie qui m'a laissé une profonde impression est l'accessibilité.
Pour être honnête, je prêtais rarement une attention particulière à cette partie auparavant. Parce que la plupart du temps, tant que l'interface d'un produit est belle et que les fonctions fonctionnent, cela semble suffire. Mais Vercel a écrit cette partie très sérieusement.
Ils exigent un contraste suffisant entre le texte et l'arrière-plan. Les changements d'état ne peuvent pas reposer uniquement sur la couleur ; ils doivent être associés à des icônes ou des descriptions textuelles.
Tous les éléments interactifs doivent avoir un état de focus clair et ne peuvent pas être supprimés pour des raisons de propreté visuelle.
Ces règles signifient que le système de design sert tout le monde, y compris les personnes ayant une faible sensibilité aux couleurs, celles qui naviguent avec un clavier et celles qui regardent leur téléphone en pleine lumière.
Ce DESIGN.md est trop professionnel. Je pense que lorsque tout le monde créera de nouveaux produits à l'avenir, ils pourront écrire leur propre DESIGN.md en se basant sur les idées de ces deux fichiers MD.
