102.3K+Scarica
Vai alla guida all’uso
Theming Systemdi Owl-Listener

Theming System Skill.

Permetti a un'unica libreria di componenti di cambiare aspetto senza duplicarne la struttura.

  • Design system
  • Theming
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Theming SystemSKILL.md
Attività Design system Produce • Un'architettura di token a tre livelli con regole di override. • Una matrice dei temi che copre le modalità di colore, brand o densità richieste. • Indicazioni sulla copertura dei componenti e sui token fissi rispetto a quelli personalizzabili tramite tema. Prima di iniziare L'implementazione usa il sistema di token del progetto o equivalenti della piattaforma; il cambio a runtime va realizzato e testato.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Supportare più temi tramite i token

Un'architettura di theming a livelli per componenti condivisi tra brand, modalità colore e varianti di densità.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Theming System colloca le differenze tra temi in un'architettura di token a livelli. I valori grezzi della palette alimentano i ruoli semantici, che a loro volta alimentano i token specifici dei componenti. Gli override del tema modificano principalmente il livello semantico, permettendo agli stessi componenti di servire brand o modalità colore diversi.

La fonte distingue i temi dalla semplice inversione dei colori. Superfici scure, elevazione, saturazione e varianti delle immagini richiedono un trattamento deliberato. Indica inoltre la densità come dimensione del tema, rendendo la specifica rilevante oltre il solo colore.

Risultati attesi

  • Un'architettura di token a tre livelli con regole di override.
  • Una matrice dei temi che copre le modalità di colore, brand o densità richieste.
  • Indicazioni sulla copertura dei componenti e sui token fissi rispetto a quelli personalizzabili tramite tema.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Separare i livelli di token

    Individua i primitivi grezzi, gli alias basati sullo scopo e i riferimenti a livello di componente.

  2. 02
    Mappare gli override del tema

    Modifica i ruoli semantici per ogni tema richiesto, preservando il contratto dei componenti.

  3. 03
    Controllare l'intera libreria

    Verifica ogni componente in ogni tema supportato, comprese le immagini e il comportamento legato alle preferenze del sistema operativo.

02 Quando usarlo

Quando usarla

L'implementazione usa il sistema di token del progetto o equivalenti della piattaforma; il cambio a runtime va realizzato e testato.

Un buon caso d'uso

  • Prodotti multi-brandUtile quando interfacce white-label o di sotto-brand devono condividere una libreria di componenti.
  • Oltre chiaro e scuroOffre una struttura anche per varianti ad alto contrasto o di densità.

Limiti da verificare

  • Non è un esercizio su una sola paletteScegliere un solo insieme di colori non basta a creare un'architettura di theming manutenibile.
  • Nessuna certificazione automatica del contrastoOgni combinazione reale di testo, superficie e stato va comunque testata.

Cosa portare

  • Temi supportatiElenca brand, modalità colore, modalità di contrasto e requisiti di densità.
  • Token esistentiFornisci palette, alias semantici e riferimenti dei componenti.
  • Elementi di brand fissiIndica le risorse o i valori che non devono cambiare tra i temi.

03 Decisioni importanti

Decisioni che contano

  1. Fare l'override al livello giusto

    Gli alias semantici evitano di disseminare colori specifici del brand nelle implementazioni dei componenti.

  2. Le risorse fanno parte del tema

    Immagini e illustrazioni possono richiedere varianti; modificare solo le variabili CSS potrebbe non rendere coerente la modalità scura.

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

Usa la procedura di installazione documentata nel repository e conserva gli eventuali file complementari indicati. Questa scheda descrive un metodo di progettazione mirato, non un'applicazione eseguibile.

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

L'implementazione usa il sistema di token del progetto o equivalenti della piattaforma; il cambio a runtime va realizzato e testato.

Parti da un solo risultato

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

Brief di esempio
Usa theming-system per una libreria di componenti condivisa da due brand in modalità chiara e scura. Definisci i livelli primitivo, semantico e di componente, individua i token fissi e mostra come funzionano gli override del tema. Includi le varianti delle immagini e una matrice QA componente per tema, senza presumere che l'inversione dei colori sia sufficiente.

Esamina il risultato

Confronta l'output reale con questi criteri osservabili.

  • I token dei componenti si risolvono tramite i ruoli semantici documentati.
  • I valori personalizzabili tramite tema e quelli fissi sono distinti.
  • La matrice di test include ogni tema supportato.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di coding. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

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

Proprietario della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
design-systems/skills/theming-system/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Un'architettura di theming a livelli per componenti condivisi tra brand, modalità colore e varianti di densità.

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

06 Domande prima di iniziare

Domande prima di iniziare

Dove dovrebbero i temi fare l'override dei token?

La fonte colloca gli override principali al livello semantico, tra i valori grezzi e i token specifici dei componenti.

La densità può essere un tema?

Sì. La fonte include le densità comoda, compatta e spaziosa accanto alle modalità di colore e di brand.

Prescrive un unico strumento di implementazione?

Elenca proprietà personalizzate CSS, file di token, modalità variabili di Figma e cambio a runtime, senza imporre un unico stack.

OpenDesign

Fai spazio alla prossima iterazione di design.

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

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md