Cette compétence guide la création d'interfaces frontend distinctives et de grade production, qui évitent l'esthétique générique de l'IA. Implémentez un code fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.
L'utilisateur fournit les besoins frontend : un composant, une page, une application ou une interface à construire. Il peut inclure le contexte sur l'objectif, l'audience ou les contraintes techniques.
Réflexion Design
Avant de coder, comprenez le contexte et engagez-vous dans une direction esthétique AUDACIEUSE :
- Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
- Ton : Choisissez un extrême : minimaliste brutal, chaos maximaliste, rétro-futuriste, organique/naturel, luxe/raffiné, ludique/jouet, éditorial/magazine, brut/raw, art déco/géométrique, doux/pastel, industriel/utilitariste, etc. Il existe de nombreuses saveurs. Utilisez-les pour vous inspirer mais créez-en une qui soit fidèle à la direction esthétique.
- 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 du code fonctionnel (HTML/CSS/JS, React, Vue, etc.) qui soit :
- De grade production et fonctionnel
- Visuellement frappant et mémorable
- Cohérent avec un point de vue esthétique clair
- Méticuleusement raffiné 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 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 micro-interactions. Privilégiez les solutions CSS uniquement pour HTML. Utilisez la bibliothèque Motion pour React si 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 au défilement et des états de survol qui surprennent.
- Composition spatiale : Dispositions inattendues. Asymétrie. Chevauchement. Flux diagonal. Éléments qui brisent la grille. Espace négatif généreux OU densité contrôlée.
- Arrière-plans et détails visuels : Créez une atmosphère et une profondeur plutôt que de vous rabattre sur des couleurs unies. Ajoutez des effets contextuels et des textures qui correspondent à l'esthétique globale. Appliquez des formes créatives comme des dégradés maillés, des textures de bruit, des motifs géométriques, des transparences superposées, des ombres dramatiques, des bordures décoratives, des curseurs personnalisés et des superpositions de grain.
N'utilisez JAMAIS l'esthétique générique de l'IA comme les familles de polices surutilisées (Inter, Roboto, Arial, polices système), les schémas de couleurs clichés (en particulier les dégradés violets sur fond blanc), les motifs et composants prévisibles, et le design standardisé qui manque de caractère contextuel.
Interprétez de manière créative et faites des choix inattendus qui semblent vraiment conçus pour le contexte. Aucun design ne doit être identique. Variez entre thèmes clairs et sombres, différentes polices, différentes esthétiques. NE convergez JAMAIS vers des choix communs (Space Grotesk, par exemple) entre les générations.
IMPORTANT : Faites correspondre la complexité d'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 attention particulière à l'espacement, la typographie et les détails subtils. L'élégance vient de l'exécution de la vision.
Rappelez-vous : Claude est capable d'un travail créatif extraordinaire. Ne vous retenez pas, montrez ce qui peut vraiment être créé en sortant des sentiers battus et en s'engageant pleinement dans une vision distinctive.