Design Frontend
Créez des interfaces frontend distinctives et de qualité production qui évitent l'esthétique générique "fade de l'IA". Du code fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.
Réflexion Conceptuelle (Avant de Coder)
Engagez-vous dans une direction esthétique audacieuse :
- Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
- Tonalité : Choisissez un extrême — minimalisme brutal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/jouet, éditorial/magazine, brutaliste/brut, art déco/géométrique, doux/pastel, industriel/utilitariste
- Contraintes : Exigences techniques (framework, performance, accessibilité)
- Différenciation : Qu'est-ce qui rend cette interface INOUBLIABLE ? Quelle est la chose dont on se souvient ?
Choisissez une direction conceptuelle claire et exécutez-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous les deux — l'essentiel est l'intentionnalité, pas l'intensité.
Piliers de l'Esthétique Frontend
Typographie
Choisissez des polices belles, uniques et intéressantes. Évitez les polices génériques comme Arial, Inter, Roboto, les polices système. Associez une police d'affichage distinctive avec une police de corps raffinée. Des choix inattendus, pleins de caractère.
Couleur & Thème
Engagez-vous dans une esthétique cohérente. Utilisez des variables CSS pour la cohérence. Les couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties.
Mouvement
Animations pour les effets et micro-interactions. CSS uniquement pour HTML, bibliothèque Motion pour React. Moments à fort impact : un chargement de page bien orchestré avec des révélations échelonnées crée plus de plaisir que des micro-interactions dispersées. Déclencheurs de défilement et états de survol qui surprennent.
Composition Spatiale
Mises en page inattendues. Asymétrie. Chevauchement. Flux diagonal. Éléments brisant la grille. Espace négatif généreux OU densité contrôlée.
Arrière-plans & Détails Visuels
Atmosphère et profondeur plutôt que couleurs unies. Maillages de dégradés, textures de bruit, motifs géométriques, transparences superposées, ombres dramatiques, bordures décoratives, curseurs personnalisés, superpositions de grain.
À NE JAMAIS UTILISER
- Les familles de polices surutilisées (Inter, Roboto, Arial, polices système)
- Les schémas de couleurs clichés (dégradés violets sur fonds blancs)
- Les mises en page et motifs de composants prévisibles
- Un design standardisé qui manque de caractère contextuel
Interprétez de manière créative. Aucun design ne doit être identique. Variez entre les thèmes clairs et sombres, différentes polices, différentes esthétiques. NE CONVERGEZ JAMAIS vers des choix communs d'une génération à l'autre.
Adaptez la complexité de l'implémentation à la vision esthétique. Les designs maximalistes nécessitent un code élaboré. Les designs minimalistes nécessitent retenue, précision et une attention particulière à l'espacement, la typographie et les détails subtils.
Contexte de Design de Kevin
Lisez wiki/design/design-system.md pour les tokens de design actuels avant de commencer tout travail d'UI.
Voir aussi : wiki/design/aesthetic-systems.md pour les archétypes de direction artistique.
Compétences Connexes
web-design-guidelines— Conformité aux directives d'interface Web de Vercelvercel-react-best-practices— Optimisation des performances pour Reactfrontend-design-taste— Compétence personnelle de direction artistique de Kevinmodern-web-design— Tendances de design et modèles d'implémentation