Aller au guide d’utilisation
Color Systempar Owl-Listener

Color System Skill.

Transformez une couleur de marque en un ensemble exploitable de rôles d'interface et de combinaisons avant-plan/arrière-plan.

  • Design de la couleur
  • Conseils de design
Revue de la source · Color SystemSKILL.md
Tâche UX Produit • Des échelles tonales de marque et de neutres • Des rôles sémantiques d'avant-plan, d'arrière-plan, de bordure et d'icône • Une matrice de contraste et d'usage Avant de commencer Fournissez les couleurs de marque, les rôles d'interface et les objectifs d'accessibilité. Utilisez les états réels des composants et un outil de vérification du contraste pour évaluer les combinaisons de couleurs proposées.
Résumé éditorial · source examinée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

Color System : construire une couleur de produit sémantique

Couches de palette produit, échelles tonales, correspondance sémantique des couleurs et conseils d'usage axés sur le contraste.

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

La méthode de travail

Color System sert à construire ou reconstruire une palette de produit. Il sépare les échelles de marque, les neutres, les couleurs sémantiques d'état et les usages étendus. Le résultat est plus qu'une poignée de beaux nuanciers : chaque couleur a besoin d'un rôle et de relations exploitables avec les surfaces voisines.

La source associe des échelles tonales à des vérifications de contraste et déconseille de communiquer par la seule couleur. Elle demande aussi de prévoir tôt les correspondances pour le mode sombre. Une palette générée reste une proposition de design tant que ses textes, composants et combinaisons d'états réels n'ont pas été vérifiés.

Livrables attendus

  • Échelles tonales de marque et de neutres
  • Rôles sémantiques d'avant-plan, d'arrière-plan, de bordure et d'icône
  • Une matrice de contraste et d'usage
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Définir les couches de la palette

    Partez de la direction de marque et déduisez-en les neutres et les rôles d'état réellement utilisés par le produit.

  2. 02
    Associer les paires réelles

    Affectez les couleurs au texte, aux surfaces, aux bordures et aux états, plutôt que de les laisser comme des nuanciers sans étiquette.

  3. 03
    Vérifier l'accessibilité

    Testez les combinaisons prévues et ajoutez des signaux autres que la couleur là où l'état doit être compris.

02 Cas d’usage

Quand l'utiliser

Fournissez les couleurs de marque, les rôles d'interface et les objectifs d'accessibilité. Utilisez les états réels des composants et un outil de vérification du contraste pour évaluer les combinaisons de couleurs proposées.

Cas adaptés

  • Une nouvelle palette de produitPosez des fondations lorsque les couleurs fondées sur des rôles n'existent pas encore.
  • Couleurs d'état incohérentesRésolvez les traitements concurrents du succès, de l'avertissement et de l'erreur entre les composants.

Limites à vérifier

  • Pas seulement une adaptation au mode sombreLa traduction en mode sombre d'une palette claire existante relève d'une tâche distincte, dédiée au mode sombre.
  • Pas de conformité automatiqueLes combinaisons réelles de composants et de texte doivent toujours être mesurées et revues.

Apportez ces éléments

  • Direction de marqueFournissez les couleurs de marque existantes et leurs restrictions.
  • Rôles d'interfaceListez les surfaces, niveaux de texte, actions et états.
  • Objectif d'accessibilitéIndiquez les exigences de contraste pertinentes et les exigences de communication sans recours à la couleur.

03 Décisions importantes

Décisions importantes

  1. Des rôles plutôt que des nuanciers

    La correspondance sémantique rend la palette utilisable d'un composant à l'autre.

  2. La paire est l'unité de test

    Une couleur n'a pas de résultat de contraste de texte significatif sans son arrière-plan et son usage.

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 amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md

Fournissez les couleurs de marque, les rôles d'interface et les objectifs d'accessibilité. Utilisez les états réels des composants et un outil de vérification du contraste pour évaluer les combinaisons de couleurs proposées.

Commencer par un seul livrable

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

Brief d'exemple
Utilisez color-system pour créer une palette pour ce produit de planification à partir du bleu de marque fourni. Définissez des échelles tonales et neutres, des rôles réussite/avertissement/erreur sémantiques et une matrice de combinaisons réelles texte sur surface. Signalez les valeurs de contraste non vérifiées au lieu d'affirmer la conformité.

Examiner le résultat

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

  • Chaque rôle proposé s'accompagne de conseils d'usage.
  • Les paires importantes ont un contraste mesuré.
  • L'état n'est pas transmis par la seule teinte.

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

05 Source et licence

Source et licence

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

Propriétaire de la source
Owl-Listener
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Couches de palette produit, échelles tonales, correspondance sémantique des couleurs et conseils d'usage axés sur le contraste.

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

06 Questions avant de commencer

Questions avant de commencer

S'agit-il seulement d'une palette de marque ?

Non. Elle comprend des neutres, des états sémantiques et des relations d'usage.

Faut-il envisager le mode sombre dès maintenant ?

La source recommande de prévoir les correspondances tôt, l'adaptation détaillée étant traitée séparément.

Une palette adaptée au daltonisme résout-elle tout ?

Non. La source demande aussi des libellés, des formes ou d'autres indices là où le sens compte.

OpenDesign

Faites de la place pour 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.

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