102.3K+Télécharger
Aller au guide d’utilisation
Icon Systempar Owl-Listener

Icon System Skill.

Donnez aux icônes un système cohérent de construction et de nommage, au lieu de rassembler des symboles sans lien entre eux.

  • Design systems
  • Spécifications
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Icon SystemSKILL.md
Tâche Design systems Produit • Une spécification de construction et de tailles des icônes • Des catégories de nommage et des exigences de livraison • Des règles d’accessibilité et de contribution Avant de commencer Un agent capable d’examiner des icônes représentatives, leurs tailles prévues et les formats de design et de code requis.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Icon System : standardiser l’iconographie d’un produit

Définit comment les icônes sont dessinées, nommées, livrées et utilisées de façon accessible dans un produit.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Icon System définit les règles encadrant la bibliothèque d’icônes d’un produit : grille, lignes de repère, épaisseur de trait, traitement des angles, variantes de taille, nommage et livraison. Il distingue les usages en trait, en aplat et en duotone au lieu de considérer tous les styles d’icônes comme interchangeables.

La source couvre aussi les libellés, le masquage des icônes décoratives, le contraste et les zones d’interaction. Les tailles en pixels qu’elle propose sont des valeurs de référence à adapter au produit. Une spécification icon-system ne signifie pas qu’une bibliothèque SVG complète a déjà été dessinée ou testée.

Livrables attendus

  • Une spécification de construction et de tailles des icônes
  • Des catégories de nommage et des exigences de livraison
  • Des règles d’accessibilité et de contribution
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Définir les règles de construction

    Définissez la grille, les lignes de repère, le trait, les angles et les styles pris en charge.

  2. 02
    Organiser la bibliothèque

    Choisissez les catégories, les noms, les variantes et les formats source ou composants requis.

  3. 03
    Vérifier l’usage en contexte

    Examinez les tailles prises en charge, les libellés, le texte des actions critiques et les zones interactives.

02 Cas d’usage

Quand l’utiliser

Utilisez-le pour réunir des jeux d’icônes hétérogènes dans un même système ou documenter une bibliothèque partagée pour le design et le développement.

Un bon choix

  • Bibliothèques d’icônes hétérogènesRassemblez des familles de symboles incohérentes sous une même norme de construction.
  • Composants produit partagésDéfinissez des noms et des wrappers que le design et le développement peuvent utiliser de manière cohérente.

Limites à vérifier

  • Ce n’est pas un guide complet d’illustrationLes visuels narratifs plus larges relèvent de illustration-style.
  • Ce n’est pas une création automatique de ressourcesLa source spécifie un système ; les icônes et wrappers réels restent à produire.

Éléments à fournir

  • Icônes actuellesFournissez des symboles représentatifs et les conflits constatés.
  • Tailles d’usageIndiquez les tailles d’affichage prévues et les contextes d’interaction.
  • Chaîne de livraisonPrécisez les besoins : SVG, sprites, wrappers de composants ou bibliothèque de design.

03 Décisions importantes

Les décisions qui comptent

  1. Cohérence de construction

    Des règles géométriques communes rendent les symboles apparentés, même quand leurs sujets diffèrent.

  2. Des noms porteurs de sens

    Les noms de catégories et de variantes facilitent la recherche et la maintenance.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills à l’emplacement de skills pris en charge par votre agent. Le fichier d’entrée n’établit aucune commande d’installation universelle.

Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Fournissez des icônes représentatives et leurs contextes d’usage. Le skill définit des règles ; la création et le test des ressources d’icônes réelles sont une étape distincte.

Commencer par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilise icon-system pour standardiser nos icônes de navigation hétérogènes. Définis les règles de grille, de trait, d’angle, de taille et de nommage, puis spécifie la livraison en SVG et en composants. Distingue les icônes décoratives des actions libellées et signale où un texte visible est nécessaire.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Les icônes suivent des règles de construction documentées.
  • Les noms distinguent la catégorie et la variante.
  • Le traitement de l’accessibilité correspond à chaque usage.

OpenDesign fournit un espace de travail de design local pour les agents de codage. Cette fiche ne signifie pas que le skill est fourni avec l’outil, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesignLire le guide de démarrage

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
design-systems/skills/icon-system/SKILL.md
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Définit comment les icônes sont dessinées, nommées, livrées et utilisées de façon accessible dans un produit.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

La taille visuelle d’une icône correspond-elle à sa zone tactile ?

Non. La source traite séparément la taille d’affichage et les recommandations sur les zones interactives.

Chaque icône doit-elle avoir un nom accessible ?

Les icônes porteuses de sens doivent être correctement libellées ; les icônes décoratives peuvent être masquées pour les technologies d’assistance.

Cela couvre-t-il les illustrations principales ?

Non. La source renvoie les travaux d’illustration plus larges vers un skill distinct.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md