visual-design-foundations

Aperçu

Qu'est-ce que visual-design-foundations ?

visual-design-foundations est une compétence pratique destinée aux designers UI et développeurs souhaitant créer des interfaces visuellement cohérentes et accessibles. Elle offre des conseils fondamentaux sur les échelles typographiques, la théorie des couleurs, les systèmes d'espacement et l'iconographie, aidant les équipes à établir des tokens de design et des guides de style pour les interfaces web et produits.

À qui s'adresse cette compétence ?

• Designers UI/UX construisant ou affinant des systèmes de design
• Développeurs frontend implémentant des tokens de style
• Équipes cherchant à améliorer la hiérarchie visuelle et la lisibilité
• Toute personne auditant ou mettant à jour la cohérence visuelle des produits

Problèmes résolus

• Mise en place de systèmes typographiques et d'espacement évolutifs
• Guide pour la création de palettes de couleurs accessibles (y compris le mode sombre)
• Support pour la conception de systèmes d'icônes et la cohérence des ressources visuelles
• Aide à l'audit et à l'amélioration de la hiérarchie visuelle dans les interfaces

Comment utiliser

Étapes d'installation

1. Installez visual-design-foundations avec :

   npx skills add https://github.com/wshobson/agents --skill visual-design-foundations
   

2. Commencez par consulter SKILL.md pour un résumé des principes clés et des workflows recommandés.
3. Explorez les fichiers complémentaires :
   • references/color-systems.md : Découvrez les échelles de couleurs perceptuellement uniformes et les tokens de couleur sémantiques.
   • references/spacing-iconography.md : Comprenez la grille en 8 points et les tokens d'espacement sémantiques pour une cohérence de mise en page.
   • references/typography-systems.md : Construisez des échelles typographiques modulaires et appliquez des propriétés CSS personnalisées.

Adaptation à votre workflow

• Intégrez les propriétés CSS personnalisées et les systèmes de tokens recommandés dans votre propre dépôt ou bibliothèque Figma.
• Utilisez l'échelle modulaire et le système d'espacement comme base, puis personnalisez les ratios et unités selon votre marque ou produit.
• Référez-vous aux conseils sur le système de couleurs pour générer des palettes accessibles et des tokens sémantiques pour le theming.

Quand visual-design-foundations est-il adapté ?

• Lors du démarrage d'un nouveau système de design ou d'une bibliothèque UI
• Pour auditer des interfaces existantes en vue d'assurer leur cohérence
• Pour implémenter un mode sombre ou des variantes de thème
• Pour créer des ressources visuelles accessibles et évolutives

Quand ne pas l'utiliser

• Si votre projet dispose déjà d'un système de design mature et bien documenté
• Pour des styles visuels très personnalisés ou expérimentaux ne reposant pas sur des tokens standards

FAQ

Où puis-je trouver tous les fichiers complémentaires ?

Ouvrez l'onglet Fichiers pour inspecter l'arborescence complète, incluant les références imbriquées et les scripts d'aide.

visual-design-foundations prend-il en charge les workflows Figma ?

Oui. Les principes et systèmes de tokens peuvent être adaptés aux bibliothèques Figma et aux fichiers de systèmes de design.

Puis-je utiliser visual-design-foundations pour le mode sombre ?

Absolument. La compétence inclut des conseils pour la génération de palettes de couleurs accessibles et des tokens sémantiques, essentiels pour le theming et la prise en charge du mode sombre.

Comment personnaliser l'échelle typographique ou d'espacement ?

Consultez references/typography-systems.md et references/spacing-iconography.md pour les formules d'échelle modulaire et des exemples de propriétés CSS. Ajustez les ratios et unités de base selon les besoins de votre projet.

Cette compétence convient-elle aux équipes de systèmes de design ?

Oui. visual-design-foundations est idéale pour les équipes établissant ou affinant des tokens de design, des guides de style et des patterns UI cohérents.