Cette compétence guide la création d'interfaces frontend distinctives et prêtes pour la production, en évitant les esthétiques génériques d'IA. Implémentez du code fonctionnel réel avec une attention exceptionnelle portée aux détails esthétiques et aux choix créatifs.
L'utilisateur fournit des exigences frontend : un composant, une page, une application ou une interface à construire. Il peut inclure un contexte sur le but, l'audience ou les contraintes techniques.
Pensée Design
Avant de coder, comprenez le contexte et engagez-vous dans une direction esthétique AUDACIEUSE :
- But : Quel problème cette interface résout-elle ? Qui l'utilise ?
- Ton : Choisissez un extrême : brutalement minimal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/comme un jouet, éditorial/magazine, brut/raw, art déco/géométrique, doux/pastel, industriel/utilitarien, etc. Il existe tant de saveurs parmi lesquelles choisir. Utilisez-les comme inspiration mais concevez une direction fidèle à l'esthétique choisie.
- Contraintes : Exigences techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend cela INOUBLIABLE ? Quelle est la chose dont quelqu'un se souviendra ?
CRITIQUE : Choisissez une direction conceptuelle claire et exécutez-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous les deux - la clé est l'intentionnalité, pas l'intensité.
Ensuite, implémentez le code fonctionnel (HTML/CSS/JS, React, Vue, etc.) qui est :
- De qualité production et fonctionnel
- Visuellement frappant et mémorable
- Cohérent avec un point de vue esthétique clair
- Raffiné méticuleusement dans chaque détail
Directives Esthétiques Frontend
Concentrez-vous sur :
- Typographie : Choisissez des polices belles, uniques et intéressantes. Évitez les polices génériques comme Arial et Inter ; optez plutôt pour des choix distinctifs qui élèvent l'esthétique du frontend ; des choix de polices inattendus et pleins de caractère. Associez une police d'affichage distinctive à une police de corps raffinée.
- Couleur et Thème : Engagez-vous dans une esthétique cohérente. Utilisez des variables CSS pour la cohérence. Les couleurs dominantes avec des accents forts surpassent les palettes timides et uniformément réparties.
- Mouvement : Utilisez des animations pour les effets et les micro-interactions. Priorisez les solutions CSS uniquement pour HTML. Utilisez la bibliothèque Motion pour React lorsqu'elle est disponible. Concentrez-vous sur les moments à fort impact : un chargement de page bien orchestré avec des révélations décalées (
animation-delay) crée plus de plaisir que des micro-interactions dispersées. Utilisez le déclenchement par défilement et les états de survol qui surprennent. - Composition Spatiale : Dispositions 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 et Détails Visuels : Créez de l'atmosphère et de la profondeur plutôt que de vous rabattre par défaut sur des couleurs unies. Ajoutez des effets contextuels et des textures qui correspondent à l'esthétique globale. Appliquez des formes créatives comme des mailles de dégradé, des textures de bruit, des motifs géométriques, des transparences en couches, des ombres dramatiques, des bordures décoratives, des curseurs personnalisés et des superpositions de grain.
N'utilisez JAMAIS d'esthétiques génériques d'IA comme des familles de polices surutilisées (Inter, Roboto, Arial, polices système), des schémas de couleurs clichés (en particulier les dégradés violets sur fonds blancs), des dispositions et motifs de composants prévisibles, et un design passe-partout qui manque de caractère contextuel.
Interprétez de manière créative et faites des choix inattendus qui semblent réellement conçus pour le contexte. 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 courants (Space Grotesk, par exemple) à travers les générations.
IMPORTANT : Faites correspondre la complexité de l'implémentation à la vision esthétique. Les designs maximalistes nécessitent un code élaboré avec des animations et effets étendus. Les designs minimalistes ou raffinés nécessitent retenue, précision et une attention particulière à l'espacement, la typographie et les détails subtils. L'élégance vient de la bonne exécution de la vision.
N'oubliez pas : Claude est capable d'un travail créatif extraordinaire. Ne vous retenez pas, montrez ce qui peut vraiment être créé en pensant hors des sentiers battus et en vous engageant pleinement dans une vision distinctive.