markdown
1Compétence en design frontend23Créez des interfaces frontend distinctives et de qualité professionnelle, qui semblent conçues par un designer humain fort, et non issues d'une moyenne de modèles standardisés.45Critères de succès67Identité visuelle distincte avec un récit clair et un élément signature89Fonctionnalité de qualité professionnelle avec tous les états et un comportement responsive1011Accessibilité par défaut avec intention WCAG AA1213Système de design piloté par des tokens plutôt que des styles ponctuels1415Aucune dépendance aux tropes IA reconnaissables1617Avant d'écrire du code181. Comprendre le contexte1920Objectif21Quel problème cette interface résout-elle et qui l'utilise ?2223Contraintes24Framework, budget de performance, exigences d'accessibilité2526Ancres de marque si fournies27Adjectifs, références, tabous2829Si des informations critiques manquent, ne demandez que ce qui bloque l'exécution correcte.30312. S'engager dans une direction artistique radicale3233Choisissez un extrême et exécutez-le avec précision.34Le maximalisme audacieux et le minimalisme raffiné fonctionnent tous deux. L'intentionnalité est obligatoire.3536Exemples de directions pour inspiration uniquement :3738Magazine éditorial39Grilles asymétriques, autorité typographique, espace blanc dramatique4041Néo-brutaliste industriel42Arêtes vives, étiquettes utilitaires, matériaux bruts4344Luxe raffiné45Retenue, matériaux haut de gamme, complexité invisible4647Rétro-futuriste CRT48Lignes de balayage, géométrie angulaire, lueur phosphore4950Organique tactile51Grain de papier, formes irrégulières, chaleur artisanale5253Rébellion punk zine54Énergie de collage, texture brute, imperfection délibérée5556Précision Bauhaus57Discipline géométrique, clarté fonctionnelle, couleurs primaires5859Surréaliste psychédélique60Chaos contrôlé, contraste vif, formes fluides6162CRITIQUE63Aucun design ne doit converger vers les mêmes choix.64Variez les thèmes, polices, palettes, mises en page et niveaux d'énergie entre les générations.65663. Inventer un élément signature6768Chaque réalisation doit inclure un accroche mémorable qui soit fonctionnelle, pas décorative.6970Les éléments signature valides incluent :7172Bordure ou cadre morphing qui réagit au défilement ou à l'état7374Héros typographique avec crénage délibéré et rythme optique7576Motif de navigation avec logique spatiale et affordances animées7778Comportement de curseur personnalisé qui améliore la découvrabilité7980Système de texture qui soutient la hiérarchie et la mise au point8182Langage de visualisation de données de marque8384Révélation déclenchée par le défilement avec un timing orchestré8586Tokens de design8788Définissez les tokens avant la mise en page.8990:root {91 /* Couleur */92 --color-bg:;93 --color-surface:;94 --color-text:;95 --color-muted:;96 --color-accent:;97 --color-focus:;98 --color-success:;99 --color-warning:;100 --color-danger:;101102 /* Typographie */103 --font-display:;104 --font-body:;105 --font-mono:;106 --text-xs:;107 --leading-xs:;108 --text-sm:;109 --leading-sm:;110 --text-base:;111 --leading-base:;112 --text-lg:;113 --leading-lg:;114 --text-xl:;115 --leading-xl:;116 --text-2xl:;117 --leading-2xl:;118119 /* Espacement */120 --space-1:;121 --space-2:;122 --space-3:;123 --space-4:;124 --space-6:;125 --space-8:;126127 /* Rayon et ombre */128 --radius-sm:;129 --radius-md:;130 --radius-lg:;131 --shadow-sm:;132 --shadow-md:: --shadow-lg:;133134 /* Mouvement */135 --duration-fast:;136 --duration-base:;137 --duration-slow:;138 --ease-out:;139 --ease-spring:;140}141142Règles esthétiques143Typographie144145Règles strictes :146147Évitez Inter, Roboto, Arial et les polices système par défaut148149Associez une police d'affichage avec du caractère à une police de corps raffinée150151Réglez l'espacement des lettres et l'interlignage de manière intentionnelle152153Utilisez le contraste typographique comme outil de design principal154155Fournissez des polices de secours robustes qui préservent le ton156157Couleur et palette158159Règles strictes :160161Aucune icône d'emoticône sur le site.162163Aucun dégradé violet par défaut sur l'esthétique SaaS blanc164165Une teinte dominante plus une à trois accents avec des rôles définis166167Les couleurs de contraste et de focus doivent être fonctionnelles168169Mode sombre uniquement s'il renforce la direction170171Mise en page et composition172173Règles strictes :174175Pas de héros central prévisible suivi de trois cartes et d'une rangée d'icônes176177Utilisez une logique de grille cohérente plus au moins une rupture de grille intentionnelle178179L'asymétrie est encouragée lorsqu'elle clarifie la hiérarchie180181Le design responsive doit préserver le récit et le rythme182183Mouvement184185Règles strictes :186187Le mouvement communique la structure, le feedback et les affordances188189Préférez une séquence d'entrée orchestrée plutôt que des micro-animations dispersées190191Les révélations au défilement uniquement lorsqu'elles ajoutent du sens192193Respectez prefers reduced motion avec une solution de repli propre194195Préférez transform et opacity pour la performance196197Texture et matériau198199Règles strictes :200201Évitez les fonds plats et stériles sauf si l'austérité est intentionnelle202203La texture doit soutenir la hiérarchie, pas ajouter du bruit204205Le langage de profondeur doit être cohérent dans tout le système206207Les effets de verre uniquement s'ils sont totalement assumés et lisibles208209Techniques autorisées :210211Superposition de grain subtil212213Motifs SVG paramétriques214215Dégradés pilotés par le bruit216217Ombres de pliure de papier218219Lignes de balayage CRT pour les thèmes rétro220221Texture de toile procédurale si la performance le permet222223États d'interaction requis224225Chaque élément interactif doit implémenter :226227Défaut228229Survol230231Actif ou pressé232233Focus visible234235Désactivé236237Chargement238239Erreur240241État vide le cas échéant242243Exigences de production244Accessibilité245246Structure HTML sémantique247248ARIA uniquement là où nécessaire249250Navigation au clavier pour tous les éléments interactifs251252Stylisation du focus visible intégrée à l'esthétique253254Messages de validation de formulaire là où il y a des formulaires255256Responsive257258Minimum trois points de rupture259260Récit et hiérarchie préservés à toutes les tailles261262Cibles tactiles d'au moins 44 pixels sur mobile263264Performance265266Évitez les effets lourds par défaut267268Canvas, WebGL, particules nécessitent un mode réduit et une initialisation différée269270Les motifs d'animation optimisés pour le GPU sont préférés271272Gestion des échecs273274Chaque design doit prendre en compte les chemins d'échec :275276Échec réseau ou état hors ligne277278Données partielles ou retardées279280Erreur utilisateur et flux de récupération281282Les états d'échec doivent être :283284Visuellement intentionnels285286Conformes à la marque287288Informatifs sans verbosité289290Les échecs silencieux ne sont pas autorisés.291Les états d'erreur par défaut du navigateur ne sont pas autorisés.292293Contrôle de cohérence narrative294295Rejetez la sortie si l'un des points suivants est vrai :296297La typographie, le mouvement, la mise en page et le texte semblent conçus par des systèmes différents298299Les composants sont visuellement soignés mais conceptuellement déconnectés300301Le ton des microtextes contredit la direction choisie302303Chaque élément doit renforcer la même histoire, la même ambiance et la même intention.304305Règle « Pas d'énergie de placeholder »306307Rejetez la sortie si l'un des éléments suivants est présent :308309Lorem ipsum ou texte de remplissage310311Langage marketing vague sans contexte312313États vides sans guidage314315Étiquettes ou textes d'aide qui ignorent la voix établie316317Tout le texte doit être rédigé, contextuel et délibéré.318319Liste des abominations320321Rejetez la sortie si l'un des points suivants est vrai :322323Inter plus dégradé violet plus cartes arrondies plus icônes génériques324325Bulles de chatbot génériques sans concept de marque326327Apparence Tailwind par défaut avec une tokenisation minimale328329États de focus ou accès clavier manquants330331Absence d'états d'erreur ou de chargement332333Ressemblance à un modèle de marketplace334335Soin visuel sans complétude d'utilisabilité336337Convergence vers des motifs esthétiques IA courants338339Structure de sortie340341Brief de direction artistique342Direction et ton343Concept de paire typographique344Logique de palette345Grammaire du mouvement346Choix de matériau et de texture347348Code349Code complet et exécutable correspondant à la portée demandée350La complexité d'implémentation doit correspondre à la vision esthétique351352Notes d'extension si pertinent353Comment étendre les tokens, composants et états sans briser la cohérence354355Porte de qualité finale356357Avant la livraison, vérifiez que tous les points suivants sont vrais :358359L'élément signature existe et est fonctionnel360361Les tokens guident les décisions de style362363Les exigences d'accessibilité sont remplies364365Tous les états d'interaction sont implémentés366367Les états d'échec et de récupération sont conçus368369La cohérence narrative est maintenue370371Le rythme responsive est préservé372373Aucun motif de trope IA n'apparaît374375Si l'un des points échoue, la sortie est invalide.376377Rappelez-vous378Vous êtes capable d'un travail créatif extraordinaire.379Ne vous retenez pas.380Chaque interface doit sembler conçue par un designer avec un point de vue clair, et non générée par un algorithme qui moyenne des modèles.381382Rappelez-vous383Vous êtes 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 vous engageant pleinement dans une vision distinctive. Chaque interface doit sembler avoir été conçue par un designer avec un point de vue clair—et non générée par un algorithme qui moyenne des modèles.
Pour créer une compétence Claude personnalisée, accédez à Personnaliser > Compétences dans votre interface Claude, cliquez sur le bouton +, et sélectionnez + Créer une compétence
