visual-design-foundationspar Seth Hobson

Visual Design Foundations Skill.

Une skill Claude Code et Codex pour le brand et les design-systems : typographie, théorie de la couleur, systèmes d'espacement et iconographie pour des visuels cohérents.

Marque et design systems

Télécharger OpenDesign Voir le guide d'utilisation

wshobson/agents · plugins/ui-design/skills/visual-design-foundations/SKILL.mdSKILL.md

--- name: visual-design-foundations description: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. --- ## When to Use This Skill ## Core Systems ## Quick Start: Design Tokens in Tailwind ## Typography Best Practices ## Color Theory ## Spacing Guidelines

Front matter et titres de section lus depuis le fichier source le 14 septembre 2026 · 7 218 caractères au total

01 Ce qu'il fait

Ce que fait le Skill visual-design-foundations dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill enseigne comment construire des systèmes visuels cohérents et accessibles à l'aide d'échelles typographiques, de la théorie des couleurs, de systèmes d'espacement et des fondamentaux de l'iconographie. Il couvre la mise en place de tokens de design avec des échelles de type modulaires, un espacement en grille de 8 points, des palettes de couleurs sémantiques respectant les exigences de contraste WCAG, et des systèmes de dimensionnement d'icônes.

Le skill fournit des modèles d'implémentation concrets pour Tailwind CSS, la typographie fluide et responsive, le thème sombre avec des tokens sémantiques, et la validation d'accessibilité. Il traite des défis courants du design visuel comme l'espacement incohérent, le faible contraste et les nombres magiques arbitraires en définissant des échelles basées sur des ratios et des systèmes de tokens réutilisables.

Ce qu'il produit

Définitions de tokens de design en propriétés personnalisées CSS ou en configuration Tailwind
Composant d'icône avec variantes de taille

Voir l'exemple de prompt ↗

Fonctionnement

01
Établir des Tokens de Design Modulaires
Définissez des échelles typographiques avec un dimensionnement basé sur des ratios (0,75rem à 3rem), un espacement en grille de 8 points (4px à 64px), et des tokens de couleur sémantiques pour la marque, les états et les neutres.
02
Appliquer une Typographie Responsive
Utilisez une typographie fluide avec clamp() pour un dimensionnement adapté au viewport, et maintenez une largeur de lecture optimale de 65 caractères maximum.
03
Mettre en Place des Palettes de Couleurs Accessibles
Construisez des systèmes de couleur qui respectent les ratios de contraste WCAG : 4,5:1 pour le texte courant, 3:1 pour le texte de grande taille et les composants d'interface, avec une vérification programmatique du contraste.
04
Créer des systèmes d'icônes cohérents
Définissez des échelles de tailles d'icônes de 12px à 32px avec des composants réutilisables qui acceptent des props de taille et conservent le comportement flex-shrink-0.
05
Concevoir le mode sombre avec des tokens sémantiques
Utilisez une nomenclature de tokens sémantique basée sur la fonction plutôt que sur l'apparence, permettant de changer de thème via des attributs data sans modifier les composants.
06
Maintenir un rythme vertical
Appliquez des règles d'espacement cohérentes aux éléments adjacents en utilisant des valeurs d'échelle définies pour créer une harmonie visuelle dans toute l'interface.

02 Trouvez celui qui vous convient

Quand utiliser le Skill visual-design-foundations

Utilisez le skill visual-design-foundations dans Claude Code ou Codex lorsque le travail concerne la marque et les systèmes de conception de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Établir des design tokens pour un nouveau projet
Créer ou affiner un système d'espacement et de dimensionnement
Créer des palettes de couleurs accessibles
Concevoir des systèmes d'icônes et des éléments visuels
Audit des designs pour la cohérence visuelle

Quoi fournir

Spécifications de thématisationExigences pour l'implémentation du mode sombre ou de systèmes multi-thèmes avec des stratégies de tokens sémantiques

03 Dans le skill

Règles que le skill visual-design-foundations donne à Claude Code et Codex

4 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe à l'agent — la partie du fichier qui change le résultat.

Utiliser un espacement en grille de 8 points
Toutes les valeurs d'espacement doivent suivre des multiples de 4px, de 0,25rem (4px) jusqu'à 4rem (64px), en utilisant les tokens d'échelle d'espacement définis.
Appliquer des plages strictes de hauteur de ligne
Les titres doivent utiliser une hauteur de ligne de 1,1 à 1,3, le texte courant de 1,5 à 1,7, et les libellés d'interface de 1,2 à 1,4 pour une lisibilité optimale.
Limiter la largeur du texte à 65 caractères
Définissez une largeur maximale de 65ch pour le texte courant afin de maintenir une largeur de lecture optimale et d'éviter la fatigue oculaire sur les grands écrans.
Appliquer des plages d'espacement de composants
Le padding des cartes doit être de 16-24px, les espaces entre sections de 32-64px, les espaces entre champs de formulaire de 16-24px, et les espaces icône-texte de 8px, selon l'échelle d'espacement.

04 Mettez-le en pratique

Installer visual-design-foundations dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter visual-design-foundations à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour plugins/ui-design/skills/visual-design-foundations/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Create a design token system for [project name] with an 8-point spacing grid, modular typography scale from 12px to 48px, and an accessible color palette including primary brand color [hex value], semantic status colors for success/warning/error, and a complete neutral gray scale. Implement both light and dark mode variants using semantic token naming. Include Tailwind configuration and verification that all text combinations meet WCAG AA contrast requirements.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que toutes les combinaisons de couleurs du texte et des composants d'interface respectent les exigences de ratio de contraste WCAG grâce à une vérification programmatique
Testez que le chargement des polices utilise font-display swap pour éviter les décalages de mise en page
Assurez-vous que la typographie réactive s'adapte harmonieusement aux différentes tailles de viewport grâce aux fonctions clamp

Dans OpenDesign, importez visual-design-foundations depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/ui-design/skills/visual-design-foundations/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ni d'un décompte d'utilisation pour visual-design-foundations.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillRépertorie des scénarios tels que l'établissement de tokens, la création de palettes, l'audit de cohérence et l'implémentation du mode sombre
Systèmes fondamentauxDéfinit une échelle typographique modulaire, une grille d'espacement de 8 points et une structure de tokens de couleur sémantiques avec des propriétés CSS personnalisées
Démarrage rapide : tokens de design dans TailwindFournit un exemple de configuration Tailwind étendant le thème avec des polices, tailles, couleurs et valeurs d'espacement personnalisées
Bonnes pratiques typographiquesCouvre les associations de polices, la typographie fluide et responsive avec clamp, et la prévention du décalage de mise en page lors du chargement des polices
Théorie des couleursDétaille les exigences de contraste WCAG, la stratégie d'implémentation du mode sombre et une fonction de vérification programmatique du ratio de contraste
Directives d'espacementPrécise les plages d'espacement des composants et illustre les modèles de rythme vertical pour le contenu textuel
IconographieDéfinit un système de tailles d'icônes de 12px à 32px et fournit une implémentation de composant d'icône en TypeScript
Bonnes pratiquesSept principes incluant l'établissement de contraintes, la documentation des décisions, le test de l'accessibilité et l'utilisation d'un nommage sémantique
Problèmes courantsListe des problèmes comme un espacement incohérent, un contraste insuffisant, une surcharge de polices, des nombres magiques et une planification manquante du mode sombre

Description du skill lui-même

Appliquez la typographie, la théorie des couleurs, les systèmes d'espacement et les principes d'iconographie pour créer des designs visuels cohérents. Utilisez cette skill lors de la définition de tokens de design, de la création de guides de style ou de l'amélioration de la hiérarchie visuelle et de la cohérence.

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 7 218 caractères. Lire le fichier complet sur GitHub.

Visual Design Foundations

Exécutez visual-design-foundations sur une tâche réelle de marque et de design-system.

Téléchargez OpenDesign, importez visual-design-foundations depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills