Cette skill guide la création d'interfaces frontend distinctives, de qualité production, qui évitent l'esthétique générique du "AI slop". Implémentez du code vraiment fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.
L'utilisateur fournit les 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.
Déclencheurs
- frontend
- front-end
- web app
- website
- site
- landing page
- dashboard
- html
- css
- tailwind
- web design
- page
- webapp
- web application
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 : 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/utilitaire, etc. Il y a tant de saveurs à explorer. Utilisez-les comme inspiration mais créez un design cohérent avec la direction esthétique.
- Contraintes : Exigences techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend ceci INOUBLIABLE ? Quelle est l'unique chose dont on se souviendra ?
CRITIQUE : Choisissez une direction conceptuelle claire et exécutez-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous deux — la clé est l'intentionnalité, non 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
- Minutieusement affiné dans chaque détail
Directives d'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 inattendus et caractérisés. 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 des variables CSS pour la cohérence. Les couleurs dominantes avec des accents tranchants surpassent les palettes timides et uniformément distribuées.
- Motion : Utilisez les animations pour les effets et micro-interactions. Privilégiez les solutions CSS uniquement pour HTML. Utilisez la Motion library pour React si disponible. Concentrez-vous sur les moments à fort impact : un seul chargement de page bien orchestré avec des révélations échelonnées (animation-delay) crée plus de plaisir que des micro-interactions dispersées. Utilisez le scroll-triggering et les états hover 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 : Créez une atmosphère et de la profondeur plutôt que de vous en tenir à des couleurs unies. Ajoutez des effets et textures contextuels qui correspondent à l'esthétique globale. Appliquez des formes créatives comme des dégradés en maille, textures de bruit, motifs géométriques, transparences en couches, ombres dramatiques, bordures décoratives, curseurs personnalisés et superpositions de grain.
N'utilisez JAMAIS d'esthétiques génériques générées par l'IA comme les familles de polices surexploitées (Inter, Roboto, Arial, system fonts), les schémas de couleurs clichés (notamment les dégradés violets sur fond blanc), les mises en page et motifs de composants prévisibles, et le design générique dépourvu de caractère spécifique au contexte.
Interprétez créativement et faites des choix inattendus qui semblent véritablement conçus pour le contexte. Aucun design ne devrait être identique. Variez entre thèmes clairs et sombres, polices différentes, esthétiques différentes. Ne convergerez JAMAIS vers des choix communs (Space Grotesk, par exemple) entre les générations.
IMPORTANT : Appariez la complexité d'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 minutieuse à l'espacement, la typographie et les détails subtils. L'élégance vient de l'exécution bien maîtrisée de la vision.
Souvenez-vous : Claude est capable d'un travail créatif extraordinaire. Ne vous reteniez 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.
Vérification
- Le changement a été rendu dans un navigateur/simulateur et une capture d'écran ou snapshot DOM a été capturée, pas seulement relue dans le code
- La mise en page a été vérifiée aux points d'arrêt que le guide de design frontend appelle (mobile + bureau minimum) ; des preuves de chaque point sont jointes
- Les valeurs de couleur, typographie et espacement utilisées proviennent des tokens de design / thème du projet, non de valeurs codées en dur ad hoc
- La navigation au clavier et l'ordre de focus ont été exercés sur chaque élément interactif introduit
- Les variantes reduced-motion / dark-mode (quand supportées) ont été vérifiées, non supposées hériter
- Aucune erreur de console ou avertissement d'hydratation n'a été émis lors du rendu de vérification