83.3K+Scarica
Vai alla guida all’uso
color-expertdi David Aerne

Color Expert Skill.

Una skill per Claude Code e Codex per il lavoro su brand e design system: denominazione colori, teoria, spazi, palette, scale, gradienti, conversioni e contrasto.

  • Brand e design system
Scarica OpenDesignGuida all'uso
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
Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 31.055 caratteri in totale

01 Cosa fa

Cosa fa la Skill color-expert in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

color-expert è una base di conoscenza sul colore per designer e sviluppatori che si occupano di naming, teoria del colore, spazi colore, palette, ramp, gradienti, conversioni, accessibilità e miscelazione dei pigmenti. Indirizza una richiesta verso una delle cinque modalità — progetto concreto di design o arte, ramp di design system e token di tema, arte generativa, domanda generale sul colore, o costruzione di un generatore di palette — e risponde nel registro appropriato.

Contiene una tabella task-spazio (OKLCH per il lavoro percettivo, CIELAB D50 per la stampa, CAM16 per il matching cross-media, Kubelka-Munk per i pigmenti), i tassi di successo APCA e WCAG su 281mila miliardi di coppie hex, indicazioni sul gamut-mapping, un cheat sheet CSS Color 4/5 e un elenco curato di strumenti, con oltre 140 file di riferimento indicizzati in references/INDEX.md.

Che cosa produce

  • Raccomandazioni specifiche su strumenti e palette in base ai vincoli indicati, piuttosto che teoria generica.
  • Un grafo di token con reference token che alimentano ruoli semantici come surface, on-surface, accent, success, warning e danger.
  • Ramp dataviz sequenziali e divergenti generate all'interno del gamut per costruzione, per sRGB e Display-P3.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Instradare la Richiesta verso una delle Cinque Modalità

    Il file elenca cinque modalità comuni e indica all'agente di adattare la risposta alla richiesta esplicita dell'utente più i vincoli impliciti dal contesto, piuttosto che rispondere sempre allo stesso modo a ogni domanda sul colore.

  2. 02
    Rispondere alle Domande Generali Direttamente dal File

    Per domande come cosa sia OKLCH o perché un gradiente diventi grigiastro, rispondere direttamente dal file della skill o dall'indice dei riferimenti e citare il riferimento pertinente, evitando gli strumenti a meno che l'utente non chieda come fare qualcosa.

  3. 03
    Costruire le Scale Prima in OKLCH

    Per design system, ramp e token di tema, l'ordine di priorità inizia con OKLCH in modo che la luminosità resti coerente tra le tonalità e i mid-tone non diventino torbidi.

  4. 04
    Inserire un Livello Semantico Prima dell'Uso in UI

    I colori usati in un programma o in un foglio di stile dovrebbero trovarsi dietro un livello semantico, con i reference token che contengono i valori concreti e i semantic token che mappano il significato su di essi.

  5. 05
    Presentare più approcci alla palette prima di restringere la scelta

    Quando genera o confronta palette, la skill deve mostrare prima più approcci con i relativi compromessi, perché gli approcci basati su ancoraggio, ciclo di tonalità, coseno, armonia, illuminazione di scena ed estrazione sono adatti a problemi diversi.

02 Trova la tua applicazione

Quando usare la skill color-expert

Utilizzare la skill color-expert in Claude Code o Codex quando il lavoro riguarda brand e design-system di questo tipo. Idoneità e limiti sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Scegliere i colori per un brief concreto come un logo, un poster, un'illustrazione o un'app, chiedendo prima il medium e il mood.
  • Costruire rampe per design system e token di tema: una scala accent a 9 passi, una palette light più dark mode, rampe in stile Tailwind o Radix, oppure una rampa di grigi abbinata a un brand.
  • Arte generativa e creative coding, dove il codice è l'opera e l'utente vuole tecniche da comporre piuttosto che lo stile di un artista specifico da copiare.
  • Rispondere direttamente a domande generali sul colore, come cos'è OKLCH, perché un gradiente diventa grigio nel mezzo, o se APCA batte WCAG.
  • Costruire un generatore di palette o richiedere una funzione per rampe OKLCH, dove la risposta deve essere codice funzionante nello stack dell'utente.

Conosci i limiti

  • Trattare coolors.co come un generatore; il file indica che sceglie in modo casuale tra palette codificate nel suo bundle JS.
  • Ordinamento manuale su un solo canale dei colori; gli ordinamenti basati solo su tonalità o solo su luminosità falliscono in modo prevedibile, e gli ordinamenti RGB/HSL compattati producono salti irregolari.
  • Usare intervalli di tonalità complementari, triadici o tetradici come regola di armonia autonoma — il file li definisce predittori deboli se usati da soli.
  • Aspettarsi che tre o più riempimenti di grafico mantengano un rapporto 3:1 tra loro; il file indica di usare invece un vincolo sui bordi.

Cosa fornire

  • Medium e vincoliPer un progetto di design o arte, indichi il medium (stampa, schermo, pittura, misto), il brand o il mood, il pubblico, le esigenze di accessibilità e eventuali colori esistenti con cui armonizzare.
  • Il gamut target realeIndichi se l'output deve rimanere in sRGB o P3, poiché un colore valido in P3 può comunque essere fuori gamut in sRGB, e il controllo differisce.
  • Il suo stackGli esempi di codice sono scritti nello stack dell'utente, con lo spazio colore scelto secondo la tabella dei task della skill.
  • Un sistema esistente con cui armonizzareSe ha già un sistema di palette, la sua struttura percettiva può essere estratta e riapplicata alla propria tonalità.

03 Dentro la skill

Regole che la skill color-expert dà a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Non raccomandare mai coolors.co

    La skill lo vieta esplicitamente come generatore di palette perché sceglie da un insieme fisso di 7.821 palette predefinite invece di generarne di nuove.

  2. Correggere l'OKLCH fuori gamut riducendo il croma, non la luminosità o la tonalità

    Il clipping dei canali R/G/B sposta la tonalità, quindi preservi l'identità riducendo il croma verso il confine del gamut invece di clippare i canali.

  3. Tenere i valori di colore letterali fuori dai componenti

    I valori hex o colore letterali dovrebbero normalmente apparire solo in definizioni di palette/riferimento, conversioni, diagnostiche o esempi deliberatamente occasionali.

  4. Preferire il CSS nativo prima di una libreria JS

    Il CSS moderno gestisce il colore percettivo in modo nativo, quindi l'agente dovrebbe ricorrere a queste funzionalità prima di introdurre una libreria colore JavaScript.

  5. Preferire una libreria esistente al codice scritto a mano

    Quando l'utente desidera un generatore o un algoritmo di palette, l'opzione predefinita è consigliare una libreria esistente come Culori, Poline, RampenSau o Spectral.js.

  6. Non spiegare i dettagli interni senza che sia richiesto

    Su un progetto concreto di design o arte, l'agente dovrebbe proporre e consigliare piuttosto che spiegare i dettagli interni di CIE 1931 o OKLCH, a meno che l'utente non lo chieda.

  7. Verificare il contrasto in entrambi i temi

    Ogni coppia testo-sfondo deve essere verificata rispetto ad APCA o WCAG sia in modalità chiara che scura.

  8. Codificare le derivazioni invece di congelare valori letterali

    Quando una decisione può essere derivata da vincoli — primo piano leggibile, hover derivato dal token base in OKLCH, tinta con nome più vicina — il sistema dovrebbe generare la regola, non una singola scelta manuale.

04 Mettila al lavoro

Installa color-expert in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi color-expert a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

Forma generica della CLI skills per SKILL.md; il repository può documentare un proprio percorso.

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Verificare il contrasto con WCAG o APCA e tenere conto di dimensione del testo, peso, polarità e CVD; una verifica in scala di grigi è solo un controllo di buon senso.
  • Per una rampa sequenziale, tracciare la dimensione percettiva del passo tra campioni consecutivi e richiedere una linea piatta sia a colori che in scala di grigi.
  • Usare la scala di grigi solo come rapido controllo di separazione della luminosità, non come prova di accessibilità.
  • Mappare i colori fuori gamma con un clamping della crominanza che mantiene L e H, non un clamping RGB ingenuo.
  • Verificare una palette generata rispetto a WCAG, CVD, distinguibilità, equità e regole di impatto emotivo con Color Buddy.
  • Analizzare una palette esistente per individuare collisioni JND in condizioni simulate di deficit della visione dei colori.

In OpenDesign color-expert è incluso: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Branch main
File della skill
SKILL.md Checksum del contenuto registrato alla verifica; commit 6514810
License
CC-BY-4.0 Da LICENSE.
Stelle del repository
575 Snapshot GitHub acquisita il 14 settembre 2026 per l'intero repository meodai/skill.color-expert. Non è un rating o un conteggio di utilizzo per color-expert.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Come usare questa skillCinque modalità di risposta: progetto di design, design system, arte generativa, domanda generale, costruzione di un generatore.
  2. Spazi colore — cosa usare e quandoTabella attività-spazio: OKLCH per la percezione, CIELAB D50 per la stampa, CAM16 cross-media, J
Descrizione della skill
"Da usare quando si lavora con nomenclatura dei colori, teoria del colore, spazi colore, definizioni di colore o qualsiasi task che coinvolge conoscenza dei colori - palette, ramp, gradienti, conversioni, accessibilità, corrispondenza percettiva, miscelazione pigmenti, colore stampa vs schermo, sintassi colore CSS o terminologia storica dei colori. Usa questa skill ogni volta che l'utente sceglie, confronta, genera, nomina, converte o spiega colori, anche se non chiede esplicitamente "teoria del colore"."

Descrizione front-matter da SKILL.md. Il file completo è di circa 31.055 caratteri. Leggi il file completo su GitHub.

Color Expert

Esegui color-expert su un Brand Reale e un'Attività di Lavoro di design-system.

Lo skill color-expert è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert