Direction de Design Frontend
Utilisez cette compétence lorsque le travail ne consiste pas seulement à rendre une interface fonctionnelle, mais à la rendre intentionnelle, soignée et adaptée au domaine produit.
Source : récupéré du PR #1659 obsolète de la communauté par linus707.
Note : ECC ne reconditionne pas intentionnellement la compétence frontend-design canonique d'Anthropic. Installez-la depuis anthropics/skills lorsque vous souhaitez la compétence officielle en amont. Cette compétence est la récupération de la direction de design spécifique à ECC des conseils locaux utiles du #1659.
Quand l'utiliser
- L'utilisateur demande de créer une page web, une application, un tableau de bord, un artefact, un composant ou une interface utilisateur.
- L'utilisateur demande de rendre une interface plus soignée, distinctive, belle ou moins générique.
- L'implémentation nécessite des choix de hiérarchie visuelle, de typographie, de couleur, de mouvement, de mise en page et d'interaction.
- L'interface actuelle fonctionne mais semble plate, générique, basée sur des modèles ou inadaptée au public.
Direction de Design
Avant de coder, choisissez une direction spécifique :
- Objectif : quel travail l'interface accomplit-elle ?
- Public : qui répète ce flux de travail, et que doivent-ils scanner en premier ?
- Ton : utilitaire, éditorial, ludique, industriel, raffiné, technique, maximal, minimal, dense, calme, ou une autre direction explicite.
- Détail mémorable : une idée de design qui rend le résultat intentionnel.
- Contraintes : framework, accessibilité, performance, réactivité et système de design existant.
Adaptez la direction au domaine. Un outil d'opérations SaaS doit généralement être dense, calme et scannable. Un portfolio, une page de lancement, un jeu ou une pièce éditoriale peut être plus expressif. Ne forcez pas une composition de page d'atterrissage sur un outil qui nécessite une utilisation quotidienne répétée.
Conseils d'Implémentation
- Construisez l'expérience utilisateur réelle comme premier écran, sauf si l'utilisateur demande explicitement du contenu marketing.
- Utilisez les composants, tokens, bibliothèques d'icônes et motifs de routage existants du projet avant d'introduire un nouveau système visuel.
- Utilisez des assets visuels réels ou générés lorsque l'interface dépend d'images, de produits, de lieux, de personnes, de gameplay, de graphiques ou de médias inspectables.
- Privilégiez la typographie et l'espacement contextuels plutôt que le texte héros générique surdimensionné.
- Gardez les palettes multidimensionnelles : évitez une interface dominée par une seule famille de teintes.
- Utilisez des variables CSS ou des tokens de design existants pour que la direction reste cohérente entre les états.
- Concevez des contraintes responsives explicites : les grilles, les rapports d'aspect, les tailles min/max, les barres d'outils stables et les contrôles à format fixe ne doivent pas se décaler lorsque des étiquettes ou des états de survol apparaissent.
- Utilisez le mouvement avec parcimonie mais délibérément. Privilégiez les transitions à fort signal qui clarifient l'état plutôt que l'animation décorative.
- Vérifiez l'adaptation du texte sur mobile et desktop. Les étiquettes longues doivent s'enrouler ou se redimensionner proprement plutôt que de déborder.
Anti-Patrons
- Ne recourez pas par défaut aux motifs générés courants : gradients violets, blobs décoratifs, cartes surdimensionnées, copie héros vague ou médias atmosphériques de type stock.
- N'ajoutez pas de cartes UI à l'intérieur d'autres cartes.
- N'utilisez pas un seul style décoratif partout lorsque le domaine exige de la retenue.
- Ne cachez pas le produit principal, l'outil, l'objet ou le flux de travail derrière des sections marketing génériques.
- N'ajoutez pas une nouvelle dépendance pour un embellissement de design à moins qu'elle ne se justifie clairement.
- Ne décrivez pas les fonctionnalités de l'interface à l'intérieur de l'interface lorsque les contrôles peuvent parler d'eux-mêmes.
Checklist de Revue
- La première zone d'affichage communique immédiatement le produit, le flux de travail ou l'objet.
- La hiérarchie visuelle prend en charge le balayage et l'utilisation répétée.
- La typographie s'adapte au conteneur et ne chevauche pas le contenu adjacent.
- Les choix de couleurs ont du contraste et ne se réduisent pas à une palette monotone.
- Les icônes sont utilisées pour les actions d'outils familières lorsque disponibles.
- La mise en page responsive a des dimensions stables pour les tableaux, les grilles, les barres d'outils, les contrôles, les tuiles et les compteurs.
- Les assets s'affichent et portent le sujet au lieu de servir de remplissage.
- Le mouvement améliore l'orientation et ne masque pas la lenteur.
- Le résultat correspond aux conventions frontend existantes du dépôt, sauf s'il y a une raison claire de s'en écarter.