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

Design Token Skill.

Donnez aux décisions visuelles des noms et des relations que les composants peuvent réutiliser.

  • Design systems
  • Spécifications
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · Design TokenSKILL.md
Tâche Design systems Produit • Une catégorisation des tokens et un schéma de nommage • Les relations entre tokens globaux, alias et tokens de composant • Des consignes d'utilisation et de versionnage Avant de commencer Fournissez les valeurs visuelles existantes, des exemples de composants et les contraintes de nommage. Le skill définit les noms et les relations des tokens ; l'outillage d'export et l'intégration au framework nécessitent une configuration distincte.
Synthèse éditoriale · source consultée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Design Token : définir une base sémantique

Catégories de design tokens, relations à trois niveaux, nommage, usage et consignes de versionnage.

Workflow fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Design Token définit la base d'un design system. Il couvre la couleur, l'espacement, la typographie, l'élévation, les bordures et le mouvement, avec des règles de nommage et d'usage qui relient les valeurs brutes à leur sens sémantique.

La structure à trois niveaux sépare les valeurs globales, les alias sémantiques et les tokens propres aux composants. Cette distinction aide une équipe à changer une valeur sans perdre la raison de son usage. L'audit de l'usage existant et le mappage multi-marques sont explicitement des tâches distinctes.

Livrables attendus

  • Une catégorisation des tokens et un schéma de nommage
  • Les relations entre tokens globaux, alias et tokens de composant
  • Des consignes d'utilisation et de versionnage
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Inventorier les fondations

    Listez les valeurs dont le produit a besoin pour la couleur, la mise en page, la typographie, l'élévation et le mouvement.

  2. 02
    Définir les niveaux

    Séparez les échelles brutes des rôles sémantiques et n'ajoutez des noms propres aux composants que lorsque c'est utile.

  3. 03
    Documenter la consommation

    Expliquez où s'appliquent les alias et comment les composants doivent s'y référer au lieu d'utiliser des valeurs codées en dur.

02 Cas d’usage

Quand l'utiliser

Fournissez les valeurs visuelles existantes, des exemples de composants et les contraintes de nommage. Le skill définit les noms et les relations des tokens ; l'outillage d'export et l'intégration au framework nécessitent une configuration distincte.

Un bon choix

  • Une nouvelle couche de tokensÀ utiliser quand les valeurs visuelles existent, mais pas leurs noms et rôles partagés.
  • Fondations incohérentesDonnez un vocabulaire commun aux décisions répétées d'espacement ou de couleur.

Limites à vérifier

  • Pas un audit automatiséLa source renvoie l'audit de l'usage existant à un autre skill.
  • Pas une chaîne de buildIl décrit une architecture de tokens, pas un export ni une intégration de framework garantis.

À apporter

  • Valeurs actuellesFournissez les choix de palette, de typographie, d'espacement et d'élévation.
  • Besoins des composantsMontrez des usages et des états représentatifs.
  • Contraintes de nommageIndiquez les conventions de la plateforme et les attentes de versionnage.

03 Décisions importantes

Décisions qui comptent

  1. Les noms préservent l'intention

    Les alias sémantiques préservent l'intention quand les valeurs brutes changent.

  2. Les niveaux évitent la confusion

    Une couleur globale et la couleur d'état d'un bouton ne doivent pas être traitées comme des noms interchangeables.

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 dans l'emplacement de skills pris en charge par votre agent. Le fichier d'entrée n'établit aucune commande d'installation universelle.

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

Fournissez les valeurs visuelles existantes, des exemples de composants et les contraintes de nommage. Le skill définit les noms et les relations des tokens ; l'outillage d'export et l'intégration au framework nécessitent une configuration distincte.

Commencer par un livrable

Adaptez la portée, les sources et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilisez design-token pour définir une couche de tokens pour ce petit système produit. Séparez les échelles brutes, les alias sémantiques et les tokens de composant nécessaires. Mappez les exemples de bouton et de carte fournis, documentez les règles de nommage et évitez d'affirmer l'existence d'une chaîne d'export que nous n'avons pas mise en place.

Examiner le résultat

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

  • Les alias renvoient à des valeurs définies.
  • Les noms expriment l'usage plutôt qu'une apparence accidentelle.
  • Les composants référencent le niveau de token prévu.

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

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

05 Source et licence

Source et licence

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

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
design-systems/skills/design-token/SKILL.md
Licence
MIT
Instantané consulté
2026-10-07 · 9a6930cf84a8
Synthèse éditoriale de la source
Catégories de design tokens, relations à trois niveaux, nommage, usage et consignes de versionnage.

Synthèse originale de OpenDesign, fondée 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

Les tokens se limitent-ils aux couleurs ?

Non. La source inclut l'espacement, la typographie, l'élévation, les bordures et le mouvement.

Chaque composant doit-il utiliser des valeurs brutes ?

La source recommande des références sémantiques plutôt que des valeurs brutes directes.

Gère-t-il plusieurs marques ?

L'entrée distingue l'architecture de tokens de base d'une tâche distincte de système de thèmes.

OpenDesign

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

Gardez votre brief, vos sources et votre travail de design réunis dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

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