visual-design-foundations
Construire les bases du design visuel
Une typographie, des couleurs, des espacements et des icônes incohérents rendent les interfaces plus difficiles à utiliser et à maintenir. Cette compétence aide Claude, Codex et Claude Code à définir des systèmes visuels pratiques avec des tokens accessibles et des modèles réutilisables.
Installer avec mon Agent
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "visual-design-foundations" from https://skillstore.io/skills/wshobson-visual-design-foundations.md and its manifest at https://skillstore.io/api/skills/wshobson-visual-design-foundations/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Ressources lisibles par les agents
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Tester
Utilisation de « visual-design-foundations ». Une équipe a besoin d’une base de design pour un nouveau tableau de bord analytique.
Résultat attendu:
- Une échelle typographique concise pour les titres, le corps de texte, les libellés et les tableaux riches en données.
- Des rôles de couleur sémantiques pour la marque, le succès, l’avertissement, l’erreur, les surfaces, les bordures et le texte.
- Des règles d’espacement et d’icônes qui gardent les mises en page denses de tableaux de bord lisibles et cohérentes.
Utilisation de « visual-design-foundations ». Un produit existant présente des espacements incohérents et une hiérarchie peu claire.
Résultat attendu:
- Un audit priorisé des dérives d’espacement, du contraste faible, de la surcharge typographique et des états manquants.
- Des noms de tokens recommandés et des valeurs de remplacement pour les motifs de mise en page répétés.
- Un court plan de remédiation pour les composants ayant le plus fort impact utilisateur.
Utilisation de « visual-design-foundations ». Un designer veut des recommandations de mode sombre pour des tokens existants.
Résultat attendu:
- Un modèle de tokens sémantiques qui sépare les couleurs de marque, de surface, de texte, de bordure et d’état.
- Des vérifications de contraste pour garantir un texte lisible et des états interactifs dans les deux thèmes.
- Des recommandations pour éviter les noms de couleurs directs dans les décisions au niveau des composants.
Audit de sécurité
SûrThe static findings are false positives from Markdown fences, JavaScript template literals, regular expression matching, and resource links. No prompt injection, credential handling, process execution, or malicious network intent was found in the reviewed files.
Facteurs de risque
⚡ Contient des scripts (1)
⚙️ Commandes externes (35)
🌐 Accès réseau (5)
Partager et citer ce rapport
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
Copier le lien du rapport
https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-visual-design-foundations/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Carte intégrable
<iframe src="https://skillstore.io/embed/skills/wshobson-visual-design-foundations.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citations académiques (APA · BibTeX · CFF)
Citation APA
wshobson. (2026). visual-design-foundations security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4Citation BibTeX
@techreport{wshobson-wshobson-visual-design-foundations-2026,
author = {wshobson},
title = {visual-design-foundations security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "visual-design-foundations security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-visual-design-foundations:audit:4"
description: "Skillstore immutable audit report identifier"
Score Skillstore
Pourquoi ce score Niveau de confiance des preuves: ÉlevéCe que vous pouvez créer
Créer un nouvel ensemble de tokens de design
Définir des tokens pratiques de typographie, d’espacement, de couleur et d’icônes avant de construire une nouvelle interface.
Améliorer la cohérence de l’interface
Auditer les écrans existants pour repérer la hiérarchie visuelle, les dérives d’espacement, les mauvais usages de couleur et le traitement incohérent des icônes.
Documenter un guide de style léger
Transformer les choix de design en règles d’utilisation claires que les développeurs peuvent appliquer à travers les composants.
Essayez ces prompts
Examine cette interface du point de vue de la typographie, du contraste des couleurs, de l’espacement et de la cohérence des icônes. Donne des corrections priorisées avec des suggestions simples de tokens de design.
Crée un système de design visuel de départ pour un tableau de bord SaaS. Inclue une échelle typographique, des tokens de couleur, une échelle d’espacement, des tailles d’icônes et des règles d’utilisation.
Traduis ces couleurs de marque et choix typographiques en tokens de design prêts pour Tailwind. Inclue des notes d’accessibilité et des considérations pour le mode sombre.
Audite cette bibliothèque de composants pour repérer les lacunes du système visuel. Identifie les dérives de tokens, les problèmes de hiérarchie, les risques de contraste, les incohérences d’icônes et les étapes de migration.
Bonnes pratiques
- Commencer par des tokens sémantiques avant d’ajouter des exceptions propres aux composants.
- Vérifier tôt le contraste, les zones tactiles et les couleurs d’état avec du contenu réel.
- Documenter les règles d’utilisation de la typographie, de l’espacement, des couleurs et des icônes avec les valeurs de tokens.
Éviter
- Utiliser des valeurs arbitraires ponctuelles lorsqu’un token d’espacement ou de typographie existant convient.
- Nommer les tokens selon leur apparence visuelle alors que leur objectif peut changer selon les thèmes.
- Ajouter de nombreuses familles de polices, graisses ou styles d’icônes sans besoin clair de hiérarchie.
Foire aux questions
Qu’aide cette compétence à créer ?
Peut-elle aider avec l’accessibilité ?
Fonctionne-t-elle avec Tailwind CSS ?
Est-ce uniquement pour les designers ?
Choisira-t-elle les couleurs de marque finales pour moi ?
Peut-elle auditer une interface existante ?
Détails du développeur
Auteur
wshobsonLicence
MIT
Révision Skillstore
r1
Avis de version
L’auteur n’a déclaré aucune version.
Dépôt
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations/Réf
64ca8af0f54a325752f08bd54e52151061ea659a
Récence de maintenance
20/07/2026
Utilisation
17 téléchargements · 173 vues
Structure de fichiers