Frontend Design — Interfaces distinctives

Ce skill guide la création d'interfaces frontend distinctives et production-grade qui évitent l'esthétique générique "AI slop". Implémenter du code fonctionnel avec une attention particulière aux choix esthétiques et créatifs.

Pré-requis

• Consulter DESIGN_SYSTEM.md s'il existe — les choix du projet (couleurs, typo, spacing, composants) priment sur les recommandations de ce skill
• La skill accessibility couvre WCAG, ARIA, clavier, contrastes et touch targets — ce skill ne duplique pas ces aspects

Direction artistique

Choisir une direction esthétique affirmée :

• Objectif : Quel problème résout cette interface ? Pour qui ?
• Ton : Choisir un extrême — minimal brut, maximaliste, rétro-futuriste, organique, luxe, joueur, éditorial, brutaliste, art déco, pastel, industriel, etc.
• Contraintes : Framework, performance, accessibilité
• Différenciation : Qu'est-ce qui rend cette interface mémorable ?

Le minimalisme raffiné et le maximalisme assumé fonctionnent tous les deux — la clé est l'intentionnalité, pas l'intensité.

Le code produit doit être :

• Fonctionnel et production-grade
• Visuellement marquant et mémorable
• Cohérent avec un point de vue esthétique clair
• Soigné dans chaque détail

Directives esthétiques

Typographie

Consulter reference/typography.md pour les échelles, appariements et chargement.

Choisir des polices belles, uniques et intéressantes. Associer une police display distinctive avec une police corps raffinée.

FAIRE : Utiliser une échelle modulaire avec du sizing fluid (clamp)
FAIRE : Varier graisses et tailles pour créer une hiérarchie visuelle claire
NE PAS : Utiliser les polices surexploitées — Inter, Roboto, Arial, Open Sans, polices système par défaut
NE PAS : Utiliser du monospace comme raccourci paresseux pour un look "tech/dev"
NE PAS : Mettre de grandes icônes arrondies au-dessus de chaque titre — elles ajoutent rarement de la valeur et donnent un look template

Couleur et thème

Consulter reference/color-and-contrast.md pour OKLCH, palettes et dark mode.

S'engager sur une palette cohérente. Des couleurs dominantes avec des accents nets surpassent les palettes timides et réparties uniformément.

FAIRE : Utiliser les fonctions CSS modernes (oklch, color-mix, light-dark) pour des palettes uniformes et maintenables
FAIRE : Teinter les neutres vers la teinte de marque — même un soupçon crée une cohésion subconsciente
NE PAS : Utiliser du texte gris sur fond coloré — ça fait délavé ; utiliser une nuance du fond à la place
NE PAS : Utiliser du noir pur (#000) ou du blanc pur (#fff) — toujours teinter
NE PAS : Utiliser la palette IA : cyan sur fond sombre, dégradés violet-bleu, accents néon sur fond noir
NE PAS : Utiliser du texte en dégradé pour "l'impact" — surtout sur les métriques ou titres
NE PAS : Partir sur du dark mode avec accents lumineux par défaut — ça "fait cool" sans vraie réflexion design

Layout et espace

Consulter reference/spatial-design.md pour les grilles, le rythme et les container queries.

Créer un rythme visuel par des espacements variés. Utiliser l'asymétrie et les compositions inattendues. Casser la grille intentionnellement pour l'emphase.

FAIRE : Créer un rythme visuel — groupements serrés, séparations généreuses
FAIRE : Utiliser du spacing fluid avec clamp() qui respire sur les grands écrans
FAIRE : Utiliser l'asymétrie et casser la grille intentionnellement
NE PAS : Tout mettre dans des cartes — pas tout ne nécessite un conteneur
NE PAS : Imbriquer des cartes dans des cartes — bruit visuel, aplatir la hiérarchie
NE PAS : Utiliser des grilles de cartes identiques — même taille, icône + titre + texte, en boucle
NE PAS : Utiliser le template "hero métrique" — gros chiffre, petit label, stats support, accent dégradé
NE PAS : Tout centrer — du texte aligné à gauche avec des layouts asymétriques fait plus conçu
NE PAS : Mettre le même espacement partout — sans rythme, les layouts sont monotones

Détails visuels

FAIRE : Utiliser des éléments décoratifs intentionnels et utiles qui renforcent la marque
NE PAS : Utiliser du glassmorphisme partout — blur, cartes en verre, bordures lumineuses sans but
NE PAS : Utiliser des éléments arrondis avec une bordure épaisse colorée sur un côté — un accent paresseux
NE PAS : Utiliser des sparklines décoratives — petits graphiques qui ont l'air sophistiqués mais ne disent rien
NE PAS : Utiliser des rectangles arrondis avec des ombres génériques — sûr, oubliable, output IA classique
NE PAS : Utiliser des modals sauf s'il n'y a vraiment pas de meilleure alternative

Animation

Consulter reference/motion-design.md pour le timing, l'easing et le reduced motion.

Se concentrer sur les moments à fort impact : un chargement de page bien orchestré avec des révélations décalées crée plus de plaisir que des micro-interactions éparpillées.

FAIRE : Utiliser le mouvement pour les changements d'état — entrées, sorties, feedback
FAIRE : Utiliser l'easing exponentiel (ease-out-quart/quint/expo) pour une décélération naturelle
FAIRE : Pour les animations de hauteur, utiliser grid-template-rows au lieu d'animer height
NE PAS : Animer les propriétés de layout (width, height, padding, margin) — utiliser transform et opacity uniquement
NE PAS : Utiliser bounce ou elastic — daté et kitsch ; les objets réels décélèrent en douceur

Interaction

Consulter reference/interaction-design.md pour les formulaires, focus et loading.

Rendre les interactions rapides. Utiliser l'UI optimiste — mettre à jour immédiatement, synchroniser après.

FAIRE : Utiliser la divulgation progressive — commencer simple, révéler la complexité par l'interaction
FAIRE : Designer les états vides qui enseignent l'interface, pas juste "rien ici"
FAIRE : Rendre chaque surface interactive intentionnelle et réactive
NE PAS : Répéter la même information — en-têtes redondants, intros qui reformulent le titre
NE PAS : Rendre tous les boutons primaires — utiliser ghost, liens texte, styles secondaires

Responsive

Consulter reference/responsive-design.md pour mobile-first et container queries.

FAIRE : Utiliser les container queries (@container) pour la responsivité au niveau composant
FAIRE : Adapter l'interface aux différents contextes — pas juste la rétrécir
NE PAS : Cacher les fonctionnalités critiques sur mobile — adapter l'interface, pas l'amputer

UX Writing

Consulter reference/ux-writing.md pour les labels, erreurs et états vides.

FAIRE : Chaque mot mérite sa place
NE PAS : Répéter l'information que l'utilisateur voit déjà

---

Le test anti-slop

Contrôle qualité critique : Si on montrait cette interface à quelqu'un en disant "c'est une IA qui l'a faite", est-ce qu'il le croirait immédiatement ? Si oui, c'est le problème.

Une interface distinctive doit faire demander "comment c'est fait ?" et non "quelle IA a fait ça ?".

Relire les directives NE PAS ci-dessus — ce sont les empreintes du travail généré par IA en 2024-2025.

---

Principes d'implémentation

Adapter la complexité du code à la vision esthétique. Un design maximaliste demande du code élaboré avec des animations et effets poussés. Un design minimaliste ou raffiné demande de la retenue, de la précision, et une attention au spacing, à la typographie et aux détails subtils.

Interpréter créativement et faire des choix inattendus qui semblent véritablement conçus pour le contexte. Aucun design ne doit se ressembler. Varier entre thèmes clairs et sombres, polices différentes, esthétiques différentes. Ne JAMAIS converger vers les choix communs entre les générations.

Comportement

• Consulter DESIGN_SYSTEM.md en priorité — les choix du projet priment
• Signaler les anti-patterns IA slop comme des problèmes de qualité
• Proposer des alternatives distinctives avec du code concret
• Ne pas bloquer — guider et signaler, sans imposer
• Compléter accessibility — ne pas duplique les aspects WCAG/ARIA/clavier