Color Systemdi Owl-Listener

Color System Skill.

Trasforma un colore di brand in un insieme utilizzabile di ruoli dell'interfaccia e di combinazioni tra primo piano e sfondo.

Design del colore
Guida al design

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Color SystemSKILL.md

Attività UX Produce • Scale tonali di brand e neutre • Ruoli semantici per primo piano, sfondo, bordo e icone • Una matrice di contrasto e di utilizzo Prima di iniziare Fornisci i colori del brand, i ruoli dell'interfaccia e gli obiettivi di accessibilità. Usa gli stati reali dei componenti e uno strumento di verifica del contrasto per valutare le combinazioni di colore proposte.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Color System: Costruire il colore semantico di prodotto

Livelli della palette di prodotto, scale tonali, mappatura semantica dei colori e indicazioni d'uso orientate al contrasto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Color System serve a costruire o ricostruire la palette di un prodotto. Separa scale di brand, neutri, colori di stato semantici e usi estesi. Il risultato è più di una manciata di campioni attraenti: ogni colore richiede un ruolo e relazioni utilizzabili con le superfici adiacenti.

La fonte combina scale tonali e verifiche di contrasto, e sconsiglia di comunicare solo tramite il colore. Chiede inoltre di definire presto le mappature per la modalità scura. Una palette generata resta una proposta di design finché testi, componenti e combinazioni di stato reali non sono stati verificati.

Risultati attesi

Scale tonali di brand e neutre
Ruoli semantici per primo piano, sfondo, bordo e icone
Una matrice di contrasto e di utilizzo

Vedi il brief di esempio

Dal brief alla revisione

01
Definisci i livelli della palette
Parti dalla direzione del brand e ricava i neutri e i ruoli di stato che il prodotto usa davvero.
02
Mappa le coppie reali
Assegna i colori a testo, superfici, bordi e stati invece di lasciarli come campioni senza etichetta.
03
Verifica l'accessibilità
Testa le combinazioni previste e aggiungi segnali non cromatici dove lo stato deve essere compreso.

02 Quando usarlo

Quando usarla

Fornisci i colori del brand, i ruoli dell'interfaccia e gli obiettivi di accessibilità. Usa gli stati reali dei componenti e uno strumento di verifica del contrasto per valutare le combinazioni di colore proposte.

Adatta quando

Una nuova palette di prodottoCostruisci una base quando non esistono ancora colori basati sui ruoli.
Colori di stato incoerentiRisolvi trattamenti in conflitto di successo, avviso ed errore tra i componenti.

Limiti da verificare

Non è solo adattamento alla modalità scuraLa traduzione in scuro di una palette chiara esistente è un'attività separata, dedicata alla modalità scura.
Nessuna conformità automaticaLe combinazioni reali di componenti e testo richiedono comunque misurazione e revisione.

Cosa fornire

Direzione del brandFornisci i colori di brand esistenti e le relative restrizioni.
Ruoli dell'interfacciaElenca superfici, livelli di testo, azioni e stati.
Obiettivo di accessibilitàIndica i requisiti di contrasto e di comunicazione non basata sul colore.

03 Decisioni importanti

Decisioni importanti

Ruoli prima dei campioni
La mappatura semantica rende la palette utilizzabile tra i componenti.
Le coppie sono l'unità di test
Un colore non ha un risultato di contrasto del testo significativo senza lo sfondo e l'uso.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica il SKILL.md di questa attività dal repository designer-skills nella posizione di skill supportata dal tuo agente. Il file di ingresso non stabilisce alcun comando di installazione universale.

File sorgente upstream

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

Parti da un solo risultato

Adatta ambito, materiali di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa color-system per creare una palette per questo prodotto di pianificazione a partire dal blu del brand fornito. Definisci scale tonali e neutre, ruoli semantici di successo, avviso ed errore e una matrice di combinazioni reali di testo su superficie. Segnala i valori di contrasto non verificati invece di dichiarare la conformità.

Esamina il risultato

Confronta l'output reale con questi criteri osservabili.

Ogni ruolo proposto ha indicazioni d'uso.
Le coppie importanti hanno un contrasto misurato.
Lo stato non è comunicato dalla sola tonalità.

OpenDesign offre uno spazio di lavoro locale per il design destinato agli agenti di codifica. Questo elenco non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano inclusi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione fissata della fonte collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Titolare della fonte: Owl-Listener
Repository: Owl-Listener/designer-skills
File della skill: ui-design/skills/color-system/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Livelli della palette di prodotto, scale tonali, mappatura semantica dei colori e indicazioni d'uso orientate al contrasto.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore datato di popolarità, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

È solo una palette di brand?

No. Comprende neutri, stati semantici e relazioni d'uso.

Conviene considerare subito la modalità scura?

La fonte consiglia di pianificare presto le mappature, lasciando l'adattamento dettagliato a un'attività separata.

Una palette sicura per il daltonismo risolve tutto?

No. La fonte richiede anche etichette, forme o altri segnali dove il significato conta.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni insieme brief, materiali di partenza e lavoro di design in uno spazio di lavoro locale. Controlla la configurazione propria della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design