Direction de design frontend

Que fait Direction de design frontend ?

Utilisez cette compétence lorsque le travail ne consiste pas seulement à rendre l'interface fonctionnelle, mais à la rendre intentionnelle, soignée et appropriée au domaine du produit.

Source : récupéré de la PR communautaire #1659 par linus707.

Remarque : ECC ne regroupe pas intentionnellement la compétence canonique frontend-design d'Anthropic. Installez celle-ci depuis anthropics/skills lorsque vous souhaitez la compétence officielle en amont. Cette compétence est le sauvetage de la direction de design spécifique à ECC des conseils locaux utiles de #1659.

Quand l'utiliser

• L'utilisateur demande de construire 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, typographie, couleur, mouvement, mise en page et interaction.
• L'interface actuelle fonctionne mais semble plate, générique, modelée ou mal adaptée au public.

Direction de design

Avant le codage, choisissez une direction spécifique :

1. But : quel travail l'interface accomplit-elle ?
2. Public : qui répète ce flux de travail et qu'a-t-il besoin de scanner en premier ?
3. Ton : utilitaire, éditorial, ludique, industriel, raffiné, technique, maximal, minimal, dense, calme ou une autre direction explicite.
4. Détail mémorable : une idée de design qui rend le résultat intentionnel.
5. Contraintes : framework, accessibilité, performance, réactivité et système de design existant.

Adaptez la direction au domaine. Un outil SaaS d'opérations doit généralement être dense, silencieux et scannable. Un portfolio, une page de lancement, un jeu ou une pièce éditoriale peuvent être plus expressifs. N'imposez pas une composition de page d'atterrissage à un outil qui nécessite une utilisation quotidienne répétée.

Conseils de mise en œuvre

• Construisez l'expérience utilisable réelle comme premier écran, sauf si l'utilisateur demande explicitement un texte marketing.
• Utilisez les composants existants du projet, les tokens, les bibliothèques d'icônes et les motifs de routage avant d'introduire un nouveau système visuel.
• Utilisez des ressources visuelles réelles ou générées lorsque l'interface dépend d'images, de produits, de lieux, de personnes, de gameplay, de graphiques ou de médias inspectables.
• Préférez une typographie et un espacement contextuels plutôt qu'un texte héroïque surdimensionné générique.
• Maintenez des palettes multi-dimensionnelles : é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 ratios d'aspect, les tailles min/max, les barres d'outils stables et les contrôles de format fixe ne doivent pas changer lorsque des étiquettes ou des états de survol apparaissent.
• Utilisez le mouvement avec parcimonie mais délibérément. Préférez les transitions à fort signal qui clarifient l'état plutôt que l'animation décorative.
• Vérifiez l'ajustement du texte sur mobile et desktop. Les étiquettes longues doivent se renvoyer ou se redimensionner proprement plutôt que déborder.

Anti-patrons

• Ne vous rabattez pas par défaut sur des motifs générés courants : dégradés violets, blobs décoratifs, cartes surdimensionnées, texte héroïque vague ou médias atmosphériques génériques.
• 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 révision

• Le premier viewport communique immédiatement le produit, le flux de travail ou l'objet.
• La hiérarchie visuelle soutient 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 familiers lorsqu'elles sont disponibles.
• La mise en page responsive a des dimensions stables pour les planches, les grilles, les barres d'outils, les contrôles, les tuiles et les compteurs.
• Les ressources s'affichent et portent le sujet plutôt que 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 existe une raison claire de s'en écarter.