102.3K+Scarica
Vai alla guida all’uso
Dark Mode Designdi Owl-Listener

Dark Mode Design Skill.

Traduci la gerarchia dell'interfaccia in superfici scure invece di invertirne i colori.

  • Design del colore
  • Guida al design
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Dark Mode DesignSKILL.md
Attività UX Produce • Una gerarchia di superfici scure ed elevazione • Colori mappati per testo, bordi, azioni e stati • Indicazioni sul comportamento del tema e sull'adattamento dei contenuti multimediali Prima di iniziare Parti da una palette esistente in modalità chiara, da esempi di componenti e da asset multimediali. Usa un'interfaccia renderizzata per verificare il contrasto in modalità scura, il cambio di tema e il trattamento delle immagini.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Dark Mode Design: adattare una palette esistente

Adattamento della palette scura con elevazione, contrasto, trattamento dei contenuti multimediali e comportamento della selezione del tema.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Dark Mode Design parte da una palette chiara esistente. Usa superfici scure progressivamente più chiare per esprimere l'elevazione e regola colori vivaci, testo, bordi e trattamenti degli stati per il nuovo sfondo.

La fonte include anche immagini, illustrazioni, loghi, preferenze di schema colore del sistema e un selettore manuale. I suoi esempi numerici di colore sono punti di riferimento, non valori universali. Il design va verificato su componenti reali e nelle condizioni in cui gli utenti lo vedranno.

Risultati attesi

  • Una gerarchia di superfici scure ed elevazione
  • Colori mappati per testo, bordi, azioni e stati
  • Indicazioni sul comportamento del tema e sull'adattamento dei contenuti multimediali
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Leggi i ruoli del tema chiaro

    Individua i colori semantici esistenti e le gerarchie dei componenti.

  2. 02
    Rimappa le superfici

    Usa passaggi di luminanza ponderati e accenti regolati, invece di un'inversione diretta.

  3. 03
    Rivedi l'intera interfaccia

    Controlla il contrasto dei componenti, i loghi, le immagini, le preferenze automatiche e una scelta manuale del tema.

02 Quando usarlo

Quando usarla

Parti da una palette esistente in modalità chiara, da esempi di componenti e da asset multimediali. Usa un'interfaccia renderizzata per verificare il contrasto in modalità scura, il cambio di tema e il trattamento delle immagini.

Quando è adatta

  • Un prodotto chiaro esistenteDa usare quando il sistema colore di base è già definito.
  • Schermate scure sbilanciateRisolvi card, overlay e contenuti multimediali che in modalità scura si contendono l'attenzione.

Limiti da verificare

  • Non crea paletteLa costruzione della palette originale del prodotto spetta all'attività color-system.
  • Gli esempi richiedono misurazioniColori suggeriti e intervalli di desaturazione non bastano a stabilire l'accessibilità.

Cosa portare

  • Palette attualeFornisci i ruoli semantici della modalità chiara.
  • Inventario dei componentiMostra superfici elevate, stati e overlay.
  • Contenuti multimediali e preferenzeIndica le immagini del brand e il comportamento atteso della selezione del tema.

03 Decisioni importanti

Decisioni che contano

  1. Elevazione senza ombre pesanti

    La luminanza delle superfici può comunicare i livelli dove le ombre scure diventano inefficaci.

  2. I contenuti multimediali fanno parte del tema

    Un'immagine luminosa o un logo inadatto possono compromettere un'interfaccia scura altrimenti coerente.

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.

Rivedi la configurazione

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

File sorgente originale
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md

Parti da una palette esistente in modalità chiara, da esempi di componenti e da asset multimediali. Usa un'interfaccia renderizzata per verificare il contrasto in modalità scura, il cambio di tema e il trattamento delle immagini.

Parti da un solo risultato

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

Brief di esempio
Usa dark-mode-design per adattare questa dashboard chiara esistente. Mappa superfici e testo in modo semantico, rivedi i colori di avviso e le immagini dei grafici, e definisci preferenza di sistema e selezione manuale. Misura coppie di contrasto reali e segnala gli asset che richiedono varianti scure.

Ispeziona il risultato

Confronta l'output reale con questi criteri osservabili.

  • I livelli di superficie restano distinguibili.
  • Il contrasto di testo e stati è verificato.
  • Immagini, loghi e controlli del tema sono rivisti.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questo elenco non significa che la skill sia inclusa nel pacchetto né che ne siano inclusi strumenti esterni, credenziali e dipendenze software.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

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

Autore della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
ui-design/skills/dark-mode-design/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Adattamento della palette scura con elevazione, contrasto, trattamento dei contenuti multimediali e comportamento della selezione del tema.

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

06 Domande prima di iniziare

Domande prima di iniziare

Posso semplicemente invertire la palette?

La fonte raccomanda esplicitamente di riprogettare le relazioni tra le superfici anziché invertire.

Crea la palette originale del brand?

No. Presuppone una palette di base da adattare.

La modalità automatica deve sostituire un selettore?

La fonte raccomanda di rispettare la preferenza di sistema offrendo anche una scelta manuale.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni insieme brief, materiale di partenza e lavoro di design 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/ui-design/skills/dark-mode-design/SKILL.md