83.3K+Télécharger
Aller au guide d’utilisation
color-expertpar David Aerne

Color Expert Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : nommage des couleurs, théorie, espaces, palettes, gammes, dégradés, conversions et contraste.

  • Marque et design systems
Télécharger OpenDesignVoir le guide d'utilisation
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 31 055 caractères au total

01 Ce qu'il fait

Ce que fait le Skill color-expert 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

color-expert est une base de connaissances sur la couleur pour les designers et développeurs traitant la nomenclature, la théorie, les espaces colorimétriques, les palettes, les rampes, les dégradés, les conversions, l'accessibilité et le mélange des pigments. Il oriente une demande vers l'un des cinq modes — projet de design ou d'art concret, rampes de design system et tokens de thème, art génératif, question générale sur la couleur, ou création d'un générateur de palettes — et répond selon ce registre.

Il comporte un tableau tâche-vers-espace (OKLCH pour le travail perceptuel, CIELAB D50 pour l'impression, CAM16 pour la correspondance inter-médias, Kubelka-Munk pour les pigments), des taux de réussite APCA et WCAG sur 281 billions de paires hexadécimales, des conseils de mappage de gamme, un aide-mémoire CSS Color 4/5, et une liste d'outils sélectionnés, avec plus de 140 fichiers de référence indexés dans references/INDEX.md.

Ce qu'il produit

  • Des recommandations spécifiques d'outils et de palettes correspondant aux contraintes énoncées, plutôt qu'une théorie générique.
  • Un graphe de tokens où les tokens de référence alimentent des rôles sémantiques tels que surface, on-surface, accent, success, warning et danger.
  • Des rampes de dataviz séquentielles et divergentes générées dans la gamme par construction, pour sRGB et Display-P3.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Orienter la Demande vers l'un des Cinq Modes

    Le fichier nomme cinq modes courants et indique à l'agent de faire correspondre sa réponse à la demande explicite de l'utilisateur ainsi qu'aux contraintes implicites du contexte, plutôt que de répondre de la même manière à toutes les questions sur la couleur.

  2. 02
    Répondre Directement aux Questions Générales à partir du Fichier

    Pour des questions comme ce qu'est OKLCH ou pourquoi un dégradé grisonne, répondre directement à partir du fichier du skill ou de l'index de référence et citer la référence pertinente, en se passant d'outillage sauf si l'utilisateur demande comment faire quelque chose.

  3. 03
    Construire les Échelles d'Abord en OKLCH

    Pour les design systems, les rampes et les tokens de thème, l'ordre de priorité commence par OKLCH afin que la luminosité reste cohérente entre les teintes et que les tons moyens ne deviennent pas boueux.

  4. 04
    Insérer une Couche Sémantique Avant l'Usage en UI

    Les couleurs utilisées dans un programme ou une feuille de style doivent se situer derrière une couche sémantique, les tokens de référence portant les valeurs concrètes et les tokens sémantiques y associant du sens.

  5. 05
    Présenter plusieurs approches de palette avant de restreindre le choix

    Lors de la génération ou de la comparaison de palettes, le skill doit d'abord montrer plusieurs approches avec leurs compromis, car les approches par ancrage, par cycle de teinte, cosinus, par harmonie, éclairées en scène et par extraction convien­nent à des problèmes différents.

02 Trouvez celui qui vous convient

Quand utiliser le skill color-expert

Utilisez le skill color-expert dans Claude Code ou Codex lorsque le travail concerne la marque et le design system de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill.

Bon choix

  • Choisir des couleurs pour un brief concret tel qu'un logo, une affiche, une illustration ou une application, en demandant d'abord le support et l'ambiance.
  • Construire des rampes de système de conception et des tokens de thème : une échelle d'accent en 9 étapes, une palette mode clair plus mode sombre, des rampes de style Tailwind ou Radix, ou une rampe de gris assortie à une marque.
  • Art génératif et creative coding, où le code est l'œuvre et où l'utilisateur souhaite des techniques à composer plutôt qu'un style d'artiste nommé à copier.
  • Répondre directement à des questions générales sur la couleur, par exemple ce qu'est OKLCH, pourquoi un gradient devient gris au milieu, ou si l'APCA surpasse le WCAG.
  • Créer un générateur de palettes ou demander une fonction de rampe OKLCH, où la réponse doit être du code fonctionnel dans la pile de l'utilisateur.

Connaître les limites

  • Traiter coolors.co comme un générateur ; le fichier indique qu'il choisit au hasard parmi des palettes codées en dur dans son bundle JS.
  • Tri artisanal des couleurs sur un seul canal ; les tris uniquement par teinte ou uniquement par luminosité échouent de façon prévisible et les tris RGB/HSL empaquetés donnent des sauts irréguliers.
  • Utiliser des intervalles de teinte complémentaires, triadiques ou tétradiques comme règle d'harmonie autonome — le fichier les qualifie de prédicteurs faibles à eux seuls.
  • S'attendre à ce que trois remplissages de graphique ou plus respectent un rapport 3:1 entre eux ; le fichier recommande d'utiliser plutôt une contrainte de bordure.

Quoi fournir

  • Support et contraintesPour un projet de conception ou d'art, précisez le support (impression, écran, peinture, mixte), la marque ou l'ambiance, le public, les besoins d'accessibilité et les couleurs existantes à harmoniser.
  • Le véritable gamut cibleIndiquez si le résultat doit rester en sRGB ou en P3, car une couleur valide en P3 peut quand même être écrêtée en sRGB, et la vérification diffère.
  • Votre pileLes exemples de code sont écrits dans la pile propre de l'utilisateur, avec l'espace colorimétrique choisi selon le tableau des tâches du skill.
  • Un système existant à harmoniserSi vous disposez déjà d'un système de palette, sa structure perceptuelle peut être extraite et réappliquée à votre propre teinte.

03 Dans le skill

Règles que le Skill color-expert donne à Claude Code et Codex

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

  1. Ne jamais recommander coolors.co

    Le skill l'interdit explicitement comme générateur de palettes, car il choisit parmi un ensemble fixe de 7 821 palettes préfabriquées plutôt que d'en générer.

  2. Corriger les OKLCH hors gamut en réduisant le chroma, pas la luminosité ni la teinte

    L'écrêtage des canaux R/G/B décale la teinte ; préservez donc l'identité en réduisant le chroma vers la limite du gamut plutôt qu'en écrêtant les canaux.

  3. Garder les littéraux de couleur bruts hors des composants

    Les valeurs hexadécimales ou de couleur littérales ne devraient normalement apparaître que dans les définitions de palette/référence, les conversions, les diagnostics, ou des exemples délibérément ponctuels.

  4. Privilégier le CSS natif avant une bibliothèque JS

    Le CSS moderne gère nativement la couleur perceptuelle, donc l'agent devrait se tourner vers ces fonctionnalités avant de recourir à une bibliothèque de couleurs JavaScript.

  5. Privilégier une bibliothèque existante plutôt que de tout coder à la main

    Lorsque l'utilisateur souhaite un générateur ou un algorithme de palette, la recommandation par défaut est une bibliothèque existante telle que Culori, Poline, RampenSau ou Spectral.js.

  6. Ne pas donner de cours sur les mécanismes internes sans qu'on le demande

    Sur un projet de design ou d'art concret, l'agent doit proposer et recommander plutôt que d'expliquer les mécanismes internes de CIE 1931 ou d'OKLCH, sauf si l'utilisateur le demande.

  7. Vérifier le contraste dans les deux thèmes

    Chaque paire texte/fond doit être vérifiée avec APCA ou WCAG, en mode clair et en mode sombre.

  8. Encoder des dérivations plutôt que figer des valeurs littérales

    Lorsqu'une décision peut être dérivée de contraintes — premier plan lisible, survol dérivé du token de base en OKLCH, teinte nommée la plus proche — le système doit produire la règle, pas un choix manuel isolé.

04 Mettez-le en pratique

Installer color-expert 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 color-expert à 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/meodai/skill.color-expert --skill color-expert

Forme générique de la CLI skills pour 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
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

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 :

  • Confirmer le contraste avec WCAG ou APCA en tenant compte de la taille du texte, de la graisse, de la polarité et de la DCV ; un passage en niveaux de gris n'est qu'un contrôle de bon sens.
  • Pour une rampe séquentielle, tracer la taille de pas perceptuel entre échantillons consécutifs et exiger une ligne plate en couleur et en niveaux de gris.
  • N'utiliser les niveaux de gris que comme contrôle rapide de séparation de luminosité, pas comme preuve d'accessibilité.
  • Ramener les couleurs hors gamut par un écrêtage de la chroma qui conserve L et H, pas un écrêtage RVB naïf.
  • Lintez une palette générée par rapport aux règles WCAG, DCV, distinction, équité et affect avec Color Buddy.
  • Auditer une palette existante pour détecter les collisions JND en simulant une déficience de la vision des couleurs.

Dans OpenDesign, color-expert est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire 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
David Aerne
Repository
github.com/meodai/skill.color-expert Branche main
Fichier du skill
SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 6514810
License
CC-BY-4.0 Depuis LICENSE.
Étoiles du dépôt
575 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt meodai/skill.color-expert. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour color-expert.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Comment utiliser ce skillCinq modes de réponse : projet de design, système de design, art génératif, question générale, création de générateur.
  2. Espaces de couleur — quoi utiliser quandTableau tâche/espace : OKLCH pour la perception, CIELAB D50 pour l'impression, CAM16 pour le multi-média, J
Description du skill lui-même
Utilisez ce skill lors de travaux sur la dénomination des couleurs, la théorie des couleurs, les espaces colorimétriques, les définitions de couleurs ou toute tâche impliquant des connaissances sur les couleurs : palettes, dégradés, gradients, conversions, accessibilité, correspondance perceptuelle, mélange de pigments, couleurs impression vs écran, syntaxe CSS des couleurs ou terminologie historique des couleurs. Utilisez ce skill chaque fois que l'utilisateur choisit, compare, génère, nomme, convertit ou explique des couleurs, même s'il ne demande pas explicitement « théorie des couleurs ».

Description de l'en-tête depuis SKILL.md. Le fichier complet fait environ 31 055 caractères. Lire le fichier complet sur GitHub.

Color Expert

Exécutez color-expert sur une Vraie Marque et une Tâche de Travail de design-system.

Le skill color-expert est intégré dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert