style-fits-the-job (Le style doit correspondre à l'usage)

Le style doit correspondre à l'usage

Problème

L'IA a un style esthétique par défaut qu'elle applique à tout, peu importe le contexte :

• Cartes en verre dépoli (backdrop-filter: blur() + blanc semi-transparent)
• Neumorphism (ombres bombées/enfoncées)
• Dégradés violet vers bleu, boutons dégradés, textes dégradés, bordures dégradées
• Taches lumineuses floues sur fond sombre
• box-shadow néon lumineux, avec agrandissement, soulèvement ou rotation au survol
• Chaque bloc est une carte avec coins arrondis de 24px, un emoji devant le titre
• Texte type "✨ Propulsé par l'IA", "🚀 Commencer maintenant"

Résultat : un outil de validation de notes de frais pour la comptabilité, un visualiseur de logs pour l'exploitation, ressemblent à un lanceur de jeu ou à une page de landing crypto. L'utilisateur l'utilise huit heures par jour, c'est chargé, on trouve mal les choses, ça donne une impression de non-professionnalisme et de manque de fiabilité.

Inversement : un petit jeu entre amis, un système de tirage au sort, un journal d'animaux domestiques, transformés en tableau gris avec boutons bleus par défaut, totalement inintéressants.

Le style n'est pas une question de "joli ou pas joli", mais de "approprié ou pas approprié".

Première étape : Regarder ce qui existe déjà dans le projet

Par ordre de priorité :

1. Système de design / bibliothèque de composants / fichier de thème du projet (tailwind.config, theme.ts, variables CSS, lien Figma, charte graphique) : utilisez-les, ne réinventez pas la roue.
2. Pages existantes dans le projet : la nouvelle page doit s'intégrer dans la même famille.
3. Normes de la plateforme : les applications natives Windows suivent Fluent / WinUI, macOS suivent HIG, Android suivent Material. Les matériaux des normes de plateforme (comme Mica / Acrylic de Windows 11) sont légitimes, utilisés aux emplacements prévus (fond de fenêtre, menus déroulants), pas pour ajouter du flou à chaque carte.
4. Si rien de tout cela n'existe, alors seulement vous choisissez en fonction du contexte.

Deuxième étape : Analyser le contexte

Observez ces signaux :

Signal	Plutôt sobre	Plutôt dynamique
Qui l'utilise	Employés, professionnels, clients des clients	Joueurs ordinaires, amis, enfants, fans
Comment l'utilise	Longue utilisation quotidienne, tâche répétitive	Ouverture occasionnelle, pour jouer un moment
Contenu	Tableaux, chiffres, formulaires, logs, code	Images, personnages, histoires, accomplissements, interactions
Coût d'une erreur	Élevé : argent, données, contrats, production	Faible : on recommence
Sentiment souhaité par l'utilisateur	Fiable, efficace, professionnel, discret	Amusant, surprenant, personnalisé, à partager

Troisième étape : Choisir une direction selon le contexte

Professionnel / Productivité / Outils internes / Back-office / Outils développeur

• Couleurs : dominante neutre (blanc, gris clair, gris foncé), une couleur d'accent pour les actions principales et les états critiques ; les couleurs d'état (succès/avertissement/erreur) ont une signification fixe, ne les utilisez pas pour la décoration.
• Police : police système ou une police sans-serif mature ; pour les nombres, utilisez font-variant-numeric: tabular-nums pour que les colonnes soient alignées.
• Densité : densité d'information moyenne à élevée, hauteur de ligne des tableaux compacte, l'espacement sert à grouper, pas à rendre "premium".
• Décoration : quasiment inexistante. Petits coins arrondis (4 à 8 px), bordures fines ou ombres très légères, pas de dégradés, de lueurs, de verre dépoli, de taches lumineuses.
• Animations : uniquement pour le feedback (chargement, déploiement, changement d'état), 150 à 200 ms, pas d'animations d'entrée, d'agrandissement au survol, de parallax.
• Icônes : une bibliothèque d'icônes linéaires cohérente (Lucide, Fluent Icons, Material Symbols), pas d'emojis.
• Texte : direct, spécifique : "Enregistrer", "Exporter CSV", "3 enregistrements en attente de validation".

Divertissement / Jeu / Créatif / Réseaux sociaux / Enfant / Loisir

• Couleurs : vives, audacieuses, colorées, mémorables ; thème, dégradés, fonds illustrés.
• Police : les titres peuvent utiliser des polices d'affichage originales, le corps de texte doit rester lisible.
• Décoration : illustrations, stickers, textures, personnages, éléments dessinés à la main sont permis, mais doivent être en lien avec le thème, pas un simple placage d'effets "cool" génériques. Un jeu pixel art doit être pixel art, un thème de conte de fées doit avoir l'air d'un conte, pas un néon violet uniforme.
• Animations : plus riches : élastiques, particules, animations de célébration, sons, pour récompenser les actions.
• Texte : peut avoir du ton, de la personnalité, de l'humour.

Zone intermédiaire

Outils grand public (todo, calendrier, suivi fitness), portfolios, pages de landing produit : ton sobre, priorité à l'utilisabilité, avec de la personnalité à quelques endroits (état vide, moment de complétion, couleur de marque, illustration).

Dynamique n'est pas égal au style par défaut de l'IA. Le verre dépoli, les dégradés violet-bleu, les taches lumineuses néon, même dans un contexte de divertissement, restent un "style IA générique", pas le style de ce produit. Un bon style dynamique est thématique.

En cas d'incertitude : Demander à l'utilisateur

Quand le contexte n'est pas clair ou que les besoins de l'utilisateur peuvent être interprétés de plusieurs façons, demandez d'abord, écrivez ensuite. La question doit être précise, avec des options directement choisissables, pas "Quel style aimez-vous ?" :

✓ "Pour le style de cet outil, quelle direction préférez-vous ?
   A. Sobre et professionnel : fond clair, couleurs neutres, tableau compact, comme Linear / Notion
   B. Amical et décontracté : arrondi, couleurs douces, quelques illustrations, comme la page de paramètres de Duolingo
   C. Personnalisé : couleurs audacieuses et animations, adapté à la présentation ou au divertissement
   Si vous hésitez, je commence avec l'option A."

Si votre environnement permet de rendre visuellement, vous pouvez aussi faire deux ou trois exemples (même interface avec différentes couleurs et polices) pour que l'utilisateur choisisse.

Ne demandez pas quand ce n'est pas nécessaire : si l'utilisateur a déjà précisé l'usage ("pour la compta de l'entreprise"), que le projet a déjà un style, ou que le besoin est évident ("fais un petit jeu Tetris"), faites directement selon votre jugement et indiquez la direction choisie à la fin, pour que l'utilisateur puisse corriger.

Quatrième étape : Auto-vérification après réalisation

Pour chaque élément décoratif de l'interface, demandez-vous : si je l'enlève, que perd l'utilisateur ? Si la réponse est "rien", et que l'interface est un outil, enlevez-le.

Vérifiez point par point :

• Cherchez dans le code backdrop-filter, linear-gradient, box-shadow avec des couleurs lumineuses, animation, emoji : chacun est-il intentionnel ?
• La couleur d'accent est-elle utilisée uniquement pour les actions principales et les états critiques, ou partout ?
• Faites une capture d'écran (voir background-friendly) : que voit-on en premier, le contenu et l'action principale, ou la décoration ?
• Pensez comme l'utilisateur : en l'utilisant huit heures par jour / dix minutes pour jouer, ce style est-il approprié ?

Limites

• Si l'utilisateur demande explicitement un style ("je veux du cyberpunk", "fais-le flashy"), suivez-le, même pour un outil.
• Si l'utilisateur fournit des références visuelles, un site de référence, une charte graphique, prenez-les comme référence.
• Les pages de démo, marketing, présentation peuvent être plus expressives que les outils quotidiens, mais doivent toujours correspondre à la marque et au public.

Checklist de vérification

• Le projet a-t-il un système de design, un thème, des pages existantes ? Les ai-je utilisés ?
• Quel est le contexte ? Qui l'utilise, combien de temps, quel est le coût d'une erreur ?
• Si le contexte n'est pas clair, ai-je proposé des directions concrètes à l'utilisateur ?
• Interface outil : pas de verre dépoli, dégradé violet-bleu, lueur néon, fonds avec taches lumineuses, icônes emoji, animations inutiles ?
• Interface divertissement : personnalité en lien avec le thème, pas un tableau gris ni un style "cool" IA générique ?
• La couleur d'accent est-elle utilisée uniquement là où il faut ?
• Chaque élément décoratif a-t-il une raison d'être ?