Cette skill guide la création d'interfaces frontend distinctives, prêtes pour la production, qui évitent les esthétiques génériques de « contenu IA ». Implémente du vrai code fonctionnel avec une attention exceptionnelle aux détails esthétiques et aux choix créatifs.
L'utilisateur fournit les requirements 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, comprends le contexte et engage-toi vers une direction esthétique AUDACIEUSE :
- Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
- Ton : Choisis 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 tellement de saveurs à explorer. Utilise-les comme inspiration mais conçois une direction qui lui est vraie.
- Contraintes : Requirements techniques (framework, performance, accessibilité).
- Différenciation : Qu'est-ce qui rend ceci INOUBLIABLE ? Quelle est l'une chose que quelqu'un se souviendra ?
CRITIQUE : Choisis une direction conceptuelle claire et exécute-la avec précision. Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous les deux - la clé est l'intentionnalité, non l'intensité.
Puis implémente du code fonctionnel (HTML/CSS/JS, React, Vue, etc.) qui est :
- Prêt pour la production et fonctionnel
- Visuellement frappant et mémorable
- Cohérent avec un point de vue esthétique clair
- Méthodiquement affiné dans chaque détail
Lignes directrices Frontend Aesthetics
Concentre-toi sur :
- Typographie : Choisis des polices belles, uniques, et intéressantes. Évite les polices génériques comme Arial et Inter ; opte plutôt pour des choix distinctifs qui élèvent l'esthétique du frontend ; des choix de police caractérisés et inattendus. Apparie une police display distinctive avec une police de corps raffinée.
- Couleur & Thème : Engage-toi vers une esthétique cohésive. Utilise des variables CSS pour la cohérence. Les couleurs dominantes avec des accents tranchants surpassent les palettes timides et uniformément distribuées.
- Motion : Utilise les animations pour les effets et les micro-interactions. Privilégie les solutions CSS-only pour HTML. Utilise la Motion library pour React quand disponible. Concentre-toi sur les moments à haut impact : un chargement de page bien orchestré avec des révélations échelonnées (animation-delay) crée plus de délice que des micro-interactions éparses. Utilise le scroll-triggering et les hover states qui surprennent.
- Composition Spatiale : Mises en page inattendues. Asymétrie. Chevauchement. Flux diagonal. Éléments qui brisent la grille. Espace blanc généreux OU densité contrôlée.
- Fonds & Détails Visuels : Crée une atmosphère et de la profondeur plutôt que de recourir aux couleurs unies. Ajoute des effets contextuels et des textures qui correspondent à l'esthétique globale. Applique des formes créatives comme les dégradés maillés, les textures de bruit, les motifs géométriques, les transparences superposées, les ombres dramatiques, les bordures décoratives, les curseurs personnalisés, et les incrustations de grain.
N'UTILISE JAMAIS les esthétiques génériques générées 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 fonds blancs), les mises en page et les motifs de composants prévisibles, et le design standard qui manque de caractère spécifique au contexte.
Interprète de manière créative et fais des choix inattendus qui se sentent genuinely conçus pour le contexte. Aucun design ne devrait être identique. Varie entre les thèmes clairs et sombres, différentes polices, différentes esthétiques. N'CONVERGE JAMAIS vers des choix communs (Space Grotesk, par exemple) d'une génération à l'autre.
IMPORTANT : Adapte la complexité de l'implémentation à la vision esthétique. Les designs maximalistes ont besoin de code élaboré avec des animations et des effets étendus. Les designs minimalistes ou raffinés ont besoin de retenue, de précision, et d'attention soignée à l'espacement, la typographie, et les détails subtils. L'élégance vient de l'exécution bien faite de la vision.
Souviens-toi : Claude est capable d'un travail créatif extraordinaire. Ne te retiens pas, montre ce qui peut vraiment être créé en pensant en dehors des sentiers battus et en s'engageant pleinement vers une vision distinctive.