Cette compétence guide la création d'interfaces frontend distinctives et de qualité production, qui évitent les esthétiques génériques « made in 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 des informations sur le contexte, le public cible ou les contraintes techniques.
Réflexion sur le design
Avant de coder, comprenez le contexte et engagez-vous sur une direction esthétique AUDACIEUSE :
- Objectif : 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, luxueux/raffiné, ludique/jouet, éditorial/magazine, brut/raw, art déco/géométrique, doux/pastel, industriel/utilitariste, etc. Il existe de nombreuses nuances. Utilisez-les comme inspiration mais créez-en une fidèle à la direction esthétique.
- Contraintes : Exigences techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend cette interface INOUBLIABLE ? Quelle est la chose dont on se souviendra ?
CRITIQUE : Choisissez une direction conceptuelle claire et exécutez-la avec précision. Le maximalisme assumé et le minimalisme raffiné fonctionnent tous deux – la clé est l'intentionnalité, pas l'intensité.
Ensuite, implémentez le code fonctionnel (HTML/CSS/JS, React, Vue, etc.) qui soit :
- 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 pour le 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 typographiques inattendus et pleins de caractère. Associez une police d'affichage distinctive à une police de corps raffinée.
- Couleur & Thème : Engagez-vous dans une esthétique cohérente. Utilisez des variables CSS pour la cohérence. Des couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties.
- Mouvement : Utilisez des animations pour les effets et les micro-interactions. Privilégiez les solutions CSS-only pour l'HTML. Utilisez la bibliothèque Motion pour React quand 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 au défilement et des états de survol qui surprennent.
- Composition spatiale : Mises en page 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 & Détails visuels : Créez une atmosphère et de la profondeur plutôt que de se 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 mailles de dégradé, 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 des esthétiques génériques d'IA comme des familles de polices trop utilisé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 mises en page et schémas de composants prévisibles, et un design standardisé sans caractère spécifique au contexte.
Interprétez de manière créative et faites des choix inattendus qui semblent véritablement conçus pour le contexte. Aucun design ne doit être le même. Variez entre les thèmes clairs et sombres, les polices, les esthétiques. Ne convergez JAMAIS vers des choix courants (Space Grotesk, par exemple) entre les générations.
IMPORTANT : Adaptez 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 minutieuse à l'espacement, la typographie et les détails subtils. L'élégance vient d'une 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 sortant des sentiers battus et en s'engageant pleinement dans une vision distinctive.
Workflow de conception adapté à la tâche
Consultez le workflow de conception complet pour la classification surveiller/opérer/autoriser, la découverte du contexte, les variantes, les états et la validation. Dans les produits existants, leur système de design et la tâche utilisateur priment sur l'exploration esthétique ci-dessus : n'imposez pas de polices inhabituelles, de chevauchements, de fonds décoratifs ou de composition marketing dans une UI opérationnelle. Utilisez les outils de navigation et de fichiers disponibles, pas un modèle de produit spécifique. Les catalogues de référence optionnels sont prismer-popular-web-designs et prismer-design-md ; chargez-les uniquement pour la tâche demandée par l'utilisateur.