Cette compétence guide la création d'interfaces frontend distinctives, de qualité production, qui évitent les esthétiques génériques de « contenu IA ». Implémentez du code fonctionnel réel avec une attention exceptionnelle 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 du contexte sur l'objectif, l'audience ou les contraintes techniques.
Design Thinking
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, brutaliste/brut, art déco/géométrique, doux/pastel, industriel/utilitaire, etc. Il y a tellement de saveurs à explorer. Utilisez-les comme inspiration mais créez une direction qui soit fidèle à votre orientation esthétique.
- Contraintes : Exigences techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend cela INOUBLIABLE ? Quelle est l'une des choses 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é.
Implémentez ensuite du 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
- Méticuleusement affiné dans chaque détail
Directives sur l'esthétique 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 caractéristiques et inattendus. Associez une police d'affichage distinctive avec une police de corps raffinée.
- Couleur & Thème : Engagez-vous dans une esthétique cohésive. Utilisez les variables CSS pour la cohérence. Les couleurs dominantes avec des accents nets surpassent les palettes timides et uniformément distribuées.
- Mouvement : Utilisez les animations pour les effets et les micro-interactions. Privilégiez les solutions CSS uniquement pour HTML. Utilisez la library Motion pour React quand disponible. Concentrez-vous sur les moments à fort impact : un chargement de page bien orchestré avec des révélations en cascade (animation-delay) crée plus de délice que des micro-interactions éparses. Utilisez le déclenchement au scroll et les états au survol qui surprennent.
- Composition Spatiale : Mises en page inattendues. Asymétrie. Chevauchement. Flux diagonal. Éléments qui cassent la grille. Espace négatif généreux OU densité contrôlée.
- Arrière-plans & Détails Visuels : Créez de l'atmosphère et de la profondeur plutôt que de vous contenter de couleurs unies. Ajoutez des effets contextuels et des textures qui correspondent à l'esthétique globale. Appliquez des formes créatives comme les dégradés mesh, les textures de bruit, les motifs géométriques, les transparences en couches, les ombres dramatiques, les bordures décoratives, les curseurs personnalisés et les superpositions de grain.
N'UTILISEZ JAMAIS d'esthétiques génériques produites par IA comme les familles de polices surutilisées (Inter, Roboto, Arial, polices système), les schémas de couleurs clichés (particulièrement les dégradés violets sur fond blanc), les mises en page prévisibles et les motifs de composants, et le design générique qui manque de 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 devrait être pareil. Variez entre les thèmes clairs et sombres, différentes polices, différentes esthétiques. N'ABOUTISSEZ JAMAIS à des choix communs (Space Grotesk, par exemple) d'une génération à l'autre.
IMPORTANT : Adaptez la complexité de l'implémentation à la vision esthétique. Les designs maximalistes nécessitent du code élaboré avec des animations et des effets étendus. Les designs minimalistes ou raffinés nécessitent de la retenue, de la précision et une attention soignée à l'espacement, la typographie et les détails subtils. L'élégance vient de l'exécution réussie de la vision.
Souvenez-vous : Codex est capable de travail créatif extraordinaire. Ne vous retenez pas, montrez ce qui peut véritablement être créé en pensant en dehors des sentiers battus et en s'engageant pleinement dans une vision distinctive.