UI 设计去 AI 味（De-AI UI）

Que fait UI 设计去 AI 味（De-AI UI） ?

L'interface sortie d'un « vibe coding » a souvent l'air bon marché, et les défauts sont dans les détails. — @bruc3van

Ce Skill compile les règles partagées publiquement par 8 designers chinois sur X sur le thème « ce qui trahit une interface IA et comment le dire à l'IA », en les organisant en règles exécutables et vérifiables. Chaque règle est suivie de [Auteur] indiquant sa source ; le résumé détaillé et le lien se trouvent dans references/sources.md. Les mentions [Pratique générale] désignent des bonnes pratiques ajoutées pour relier les règles et ne représentent pas l'opinion d'une source particulière.

Quand utiliser / When to use

• Créer ou modifier une interface avec une IA : pages d'atterrissage, back-office, tableaux de bord, pages de paramètres, bibliothèques de composants, tokens de design.
• L'utilisateur dit que l'UI « ressemble à de l'IA / est cheap / manque de raffinement / a un air IA / slop » ou demande « plus raffiné, plus premium ».
• Auto‑vérification avant livraison (revue).

Principes fondamentaux / Core principles

1. Privilégier la soustraction à l'ajout. L'échec le plus fréquent de l'IA n'est pas « ce qui manque », mais « ce qui est en trop » : textes explicatifs superflus, séparateurs, icônes, étiquettes, ombres, couleurs, animations. Demandez‑vous pour chaque élément : « Est‑il vraiment nécessaire ? » [ZaynHao] [dingyi] [yanliudreamer]
2. L'interface s'efface, le contenu brille. L'interface elle‑même utilise uniquement du noir, blanc et gris ; réservez la couleur aux photos et au contenu. [ianneo_ai]
3. La cohérence vient du système, pas du coup de main. Utilisez des tokens de couleurs en kit (Radix Colors), espaçez sur une grille 4px, limitez les tailles de police à quelques niveaux, réutilisez les bibliothèques de composants et systèmes de design existants. [ZaynHao] [Kubai087] [yanliudreamer]
4. Les détails doivent être « géométriquement corrects ». Coins arrondis imbriqués concentriques, alignement optique, épaisseur de bordure uniforme. [Kubai087] [ZaynHao] [dingyi]
5. D'abord définir, ensuite coder ; d'abord la vue d'ensemble, puis modifier bloc par bloc. Écrivez d'abord à qui cela s'adresse, quel problème cela résout, quelle sensation cela doit donner ; produisez une version complète, listez les problèmes, priorisez, et ne modifiez qu'une seule chose à la fois. [Xian0063]
6. Les différents modes doivent être conçus séparément, pas convertis automatiquement. Apple ajoute un calque séparé pour le mode Clear des icônes Preview, car une conversion directe du mode par défaut « rendrait l'image sale ». Idem pour les modes sombre/nuit/transparent. [remixdesigner] [ianneo_ai]

Règles concrètes vérifiables / Checkable rules

Coins arrondis et bordures (voir references/radius-and-borders.md)

• Coins imbriqués : coin intérieur = coin extérieur − espacement (r = R − p) ; partagent le même centre ; calcul de l'extérieur vers l'intérieur : dialog/card → panel, input, button → chip, tag. Ex : dialog 32, padding 16 → intérieur 16 ; panel 16 avec padding 8 pour chip → 8. [Kubai087]
• Les boîtes d'un même niveau utilisent le même rayon de coin ; minimum 4px ; pill et cercle restent entièrement arrondis. [Kubai087]
• padding, gap, radius sont tous sur une grille de 4px ; s'il existe un token de rayon, modifiez le token, pas de valeurs en dur. [Kubai087]
• Coins continus (super‑ellipse) comme amélioration progressive : conservez border-radius, puis ajoutez corner-shape avec @supports (corner-shape: superellipse(1.25)) ; pour pill/cercle, définissez corner-shape: round. Chrome/Edge 139+ l'applique, Safari/Firefox utilisent le rayon normal en repli. [Kubai087]
• Les lignes et bordures utilisent 0.5px, avec une épaisseur uniforme dans tout le site (« utiliser 1px là où 0.5px est approprié » est un signe de slop). [ZaynHao] [dingyi] — Attention : ZaynHao précise que c'est un conseil basé sur son expérience, sans considération particulière pour les écrans basse résolution/anciens appareils ; prévoyez un repli si nécessaire (voir fichier de référence).
• N'ajoutez pas de coins arrondis ou d'ombres inutiles ; interdiction des lignes colorées verticales sur le bord gauche des cartes. Si des coins/ombres sont vraiment nécessaires, les valeurs doivent correspondre au contexte fonctionnel. [ZaynHao] [dingyi]
• N'empilez pas trop de détails : séparateurs, ombres multiples, superpositions semi‑transparentes, conteneurs avec bordure, cartes dans des cartes. [dingyi] [Xian0063]

Couleurs (voir references/color.md)

• Le chrome de l'interface (boutons, cartes, champs de saisie) utilise uniquement du noir, blanc et gris par défaut, réservez la couleur aux photos, illustrations, données, etc. [ianneo_ai]
• Remplacez toutes les couleurs par Radix UI Colors, et utilisez‑les en respectant leur graduation 12 niveaux selon l'usage défini. [ZaynHao] (chaque niveau correspond à fond / composant / bordure / couleur pleine / texte, voir la doc officielle Radix [Pratique générale])
• Choisissez 3 à 5 couleurs distinctives pour le produit (vous pouvez les extraire de sites/applications que vous aimez, comme #f6f4f0 pour son fond). [ZaynHao]
• À éviter : dégradé violet/violet‑bleu, boutons dégradés, icônes colorées, une couleur par carte, un seul mot coloré. [dingyi] [Xian0063] [ianneo_ai]

Typographie et mise en page (voir references/typography-cjk.md)

• Pas plus de 4 tailles de police, idéalement 3 ; minimum 12px. Si le niveau hiérarchique est insuffisant, utilisez le poids, la couleur et l'espacement pour différencier, pas une taille supplémentaire. [ZaynHao] [dingyi]
• Le titre hero ne doit pas être exagérément grand ; évitez les sous‑titres tout en majuscules, les petites étiquettes au‑dessus des titres (eyebrow), les numéros de section, le fil d'Ariane de type code. [dingyi] [Xian0063]
• Évitez trois polices trop utilisées : Instrument Serif, Space Grotesk, Bricolage Grotesque ; n'abusez pas des polices à chasse fixe ni de l'italique. [dingyi]
• font‑family chinois : d'abord les polices occidentales, puis chinoises, en tenant compte des principaux systèmes, et enfin sans-serif en repli ; écrivez les noms des polices chinoises en anglais ; mettez les noms avec espaces entre guillemets. Voir le fichier de référence pour une syntaxe prête à l'emploi. [ricouii]
• Ne centrez pas tout par défaut. [Xian0063]

Texte et contenu (voir references/copy-and-content.md)

• Ne pas utiliser le point médian « · » comme séparateur ; supprimez‑le s'il est présent. [ZaynHao] [dingyi]
• N'ajoutez pas de descriptions redondantes ; n'insérez pas d'Emoji dans le corps du texte, et pas d'icône Emoji au‑dessus des titres. [ZaynHao] [dingyi] [Xian0063]
• Le texte doit correspondre au public cible : compréhensible sans être trop familier, longueur adaptée au contexte fonctionnel, ne pas inventer de mots. [ZaynHao] [dingyi]
• N'inventez pas de données et de preuves sociales (ex : « 10 000+ clients satisfaits »), n'insérez pas de force un champ d'abonnement à la fin. [Xian0063 reprenant la checklist de Hallmark]
• Ne rendez pas les graphiques « trop détaillés » ; des étiquettes (tag/badge) partout sont aussi un signe de slop. [dingyi]

Animations et interactions (voir references/motion-and-interaction.md)

• Réduisez au maximum les animations de transition ; si nécessaire, paramétrage de base : ease‑out, environ 250ms. Pas trop d'animations au défilement, transitions sobres. [ZaynHao] [dingyi]
• Entrée en ease‑out plutôt qu'ease‑in ; le menu déroulant apparaît depuis la position du bouton déclencheur, avec une échelle commençant à 0.96 au lieu de 0 ; le bouton enfoncé se réduit à 0.97 ; les toasts s'empilent sans gêner le contenu ; les noms longs sont tronqués, les grands nombres abrégés. [Xian0063 reprenant les Skills d'Emil Kowalski]
• Réduisez les interactions qui obligent l'utilisateur à s'arrêter pour juger ; si nécessaire, placez‑les là où l'utilisateur prévoit déjà de faire un choix, et réorganisez la priorité des informations. [ZaynHao]
• La petite flèche du bouton de menu déroulant doit être corrigée spécifiquement — dingyi considère que c'est le détail « le plus grave » de la liste, que presque personne ne corrige. [dingyi]

Composants, ressources et icônes (voir references/libraries-and-skills.md, references/icons-and-detail.md)

• Réutilisez d'abord les bibliothèques de composants / systèmes de design et tokens existants du projet, ne réinventez pas la roue ; inspirez‑vous des modèles UX éprouvés de produits matures. [yanliudreamer] [Kubai087]
• Les icônes d'une même interface proviennent d'un même système stylistique, avec une épaisseur de trait, un rayon de coin, des proportions et un poids visuel cohérents (ex : Remix Icon). [yanliudreamer] [Kubai087]
• Les ressources pour les modes sombre / nuit / Clear sont traitées séparément, pas par conversion par filtre. [remixdesigner] [ianneo_ai]

Workflow / Workflow

1. Avant de coder (Before coding)

• Écrivez clairement : à qui cela s'adresse, quel problème cela résout, quelle sensation cela doit donner. Si ce n'est pas clair, posez d'abord des questions à l'utilisateur ; cette étape ne produit pas de design. [Xian0063]
• Lisez les bibliothèques de composants et tokens de design existants du projet (couleurs / coins / espacements / tailles de police) ; s'ils existent, basez‑vous dessus, sinon créez un jeu de tokens minimal (voir examples/tokens.css).
• Définissez les règles visuelles : 3 à 5 couleurs de marque + gris Radix, ≤4 tailles de police, grille 4px, hiérarchie des coins, bordures 0.5px, pile de polices chinoises. [ZaynHao] [Kubai087] [ricouii]

2. Pendant le codage (While coding)

• Avant d'ajouter un élément, demandez‑vous « peut‑on s'en passer ? » : texte explicatif, séparateur, icône, badge, ombre, couleur. [yanliudreamer] [ZaynHao]
• Produisez d'abord une vue d'ensemble complète de la page, plutôt que des corrections locales. [Xian0063] [yanliudreamer]
• Pour les directions visuelles complexes, vous pouvez produire 3 à 4 propositions à comparer, pour éviter le « biais du prototype » (une fois investi dans le code, on ne fait qu'optimiser la solution actuelle). [yanliudreamer]

3. Auto‑vérification (Review pass)

• Passez en revue chaque point de references/slop-checklist.md et notez les éléments touchés.
• Classez par ordre d'importance, ne modifiez qu'une seule chose à la fois, confirmez avant de passer à la suivante. [Xian0063]
• Pour les modifications de coins, produisez une liste de changements element: old -> new comme demandé par Kubai087.
• Prenez des captures d'écran dans au moins 3 largeurs (méthode de vérification de Taste Skill, [Xian0063] reprenant), et vérifiez le mode sombre.
• Quand vous donnez un retour, parlez en termes d'« objectif » plutôt que de « pixels » : marquez les problèmes sur la capture, dites l'effet souhaité, laissez l'IA calculer les valeurs numériques. [Xian0063]

Prompts prêts à copier‑coller / Copy-paste prompts

La version complète (incluant le prompt original anglais de Kubai087, les 10 prompts de ZaynHao) se trouve dans references/prompts.md. La version combinée la plus courante :

Veuillez refaire cette interface selon les règles « Dé‑IA », en ne modifiant que la page/le composant que j'aurai spécifié ; si le projet a déjà des tokens ou une bibliothèque de composants, modifiez les tokens, réutilisez les composants, pas de valeurs en dur :
1. Le chrome de l'interface utilise uniquement du noir, blanc et gris ; réservez la couleur aux photos et au contenu ; remplacez toutes les couleurs par Radix UI Colors en respectant leur graduation 12 niveaux. Pas de dégradé violet, de boutons dégradés, d'icônes colorées, de ligne colorée verticale à gauche des cartes.
2. Pas plus de 4 tailles de police (idéalement 3), minimum 12px ; si le niveau hiérarchique est insuffisant, utilisez le poids, la couleur et l'espacement. Pas de sous‑titres tout en majuscules, pas d'étiquette au‑dessus du titre, pas de titre hero surdimensionné.
3. Coins imbriqués : coin intérieur = coin extérieur − espacement, même rayon pour le même niveau, minimum 4px, pill/cercle entièrement arrondis ; padding/gap/radius sur une grille 4px. Utilisez `@supports` pour ajouter `corner-shape: superellipse(1.25)` en amélioration progressive.
4. Lignes et bordures uniformes en 0.5px ; supprimez les séparateurs inutiles, ombres multiples, superpositions semi‑transparentes, conteneurs avec bordure et cartes dans des cartes.
5. Supprimez les points médians « · » comme séparateurs, les textes explicatifs redondants, les Emoji dans le corps ; le texte doit correspondre au public cible, pas trop familier, pas de mots inventés.
6. Animations minimales ; si nécessaire, ease‑out d'environ 250ms.
7. Pile de polices chinoises : d'abord occidentales, puis chinoises, et enfin `sans-serif` en repli.
Après avoir terminé, listez ce que vous avez modifié (element: old -> new) et quels signes de slop ont été éliminés.

Version en une phrase (de [ianneo_ai]) : L'interface utilise uniquement noir, blanc et gris ; réservez la couleur aux photos et au contenu.

Fichiers de référence / References

Fichier	Contenu
references/sources.md	Liens et résumés des posts originaux des 8 designers + @bruc3van
references/slop-checklist.md	Checklist d'audit du « slop IA » (à cocher point par point)
references/radius-and-borders.md	Formule des coins, super‑ellipse, bordure 0.5px et repli
references/color.md	Utilisation noir/blanc/gris + Radix Colors
references/typography-cjk.md	Hiérarchie des tailles, polices slop, font‑family chinois
references/copy-and-content.md	Règles de texte et contenu
references/motion-and-interaction.md	Paramètres d'animations et détails d'interaction (menus en cascade, glisser‑déposer, boutons skeuomorphes)
references/icons-and-detail.md	Cohérence des icônes, ressources multi‑modes
references/libraries-and-skills.md	Bibliothèques recommandées et 5 Skills de design IA
references/prompts.md	Tous les prompts prêts à copier
examples/	CSS avant/après et tokens minimaux