Data Visualizationdi Owl-Listener

Data Visualization Skill.

Scegli il grafico che rende comprensibile il confronto, non quello che sembra più elaborato.

Data Visualization
Linee guida di design

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Data VisualizationSKILL.md

Attività UX Produce • Una scelta di grafico legata alla domanda • Una specifica per segni, assi, etichette e contesto • Alternative accessibili e per schermi piccoli Prima di iniziare Fornisci i dati reali, le definizioni dei campi, la domanda del lettore e i vincoli di visualizzazione. La skill guida la progettazione del grafico; la validazione dei dati e l'implementazione del grafico restano attività separate.

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

01 Funzionalità

Data Visualization: scegliere codifiche visive oneste

Scelta del grafico, codifica visiva, etichettatura contestuale, accessibilità e presentazione responsive.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Data Visualization è una skill di progettazione di grafici. Associa le domande su confronto, andamento, composizione, distribuzione e relazione a possibili forme di grafico, poi si occupa di etichette, assi, contesto e codifica visiva.

Il suo ambito è la presentazione, non la raccolta dei dati né la prova statistica. Dà risalto a dati reali, annotazioni dirette, indicazioni non basate sul colore e alternative responsive come una tabella. La progettazione della palette cromatica del prodotto resta un tema separato.

Risultati attesi

Una scelta di grafico legata alla domanda
Una specifica per segni, assi, etichette e contesto
Alternative accessibili e per schermi piccoli

Vedi il brief di esempio

Dal brief alla revisione

01
Formula la domanda
Individua il confronto o lo schema che chi guarda deve capire.
02
Scegli la codifica
Seleziona un grafico semplice e definisci assi, etichette, unità e un trattamento coerente delle serie.
03
Verifica le condizioni reali
Usa dati reali, aggiungi contesto utile e controlla le indicazioni non cromatiche e il comportamento su schermi piccoli.

02 Quando usarlo

Quando usarla

Fornisci i dati reali, le definizioni dei campi, la domanda del lettore e i vincoli di visualizzazione. La skill guida la progettazione del grafico; la validazione dei dati e l'implementazione del grafico restano attività separate.

Adatta a

Grafici di dashboardChiarisci tipo di grafico e contesto per una metrica specifica.
Visualizzazioni fuorviantiRivedi codifiche e assi che distorcono o oscurano un confronto.

Limiti da verificare

Non definisce le metricheLa skill non può stabilire la veridicità dei numeri forniti né il loro significato per il business.
Non è architettura della paletteGestisce la codifica del grafico, non l'intero livello del sistema cromatico del prodotto.

Cosa portare

Dati realiFornisci valori, unità, condizioni di dati mancanti e definizioni.
Domanda del lettoreIndica la decisione o il confronto che il grafico deve supportare.
Contesto di visualizzazioneSpecifica dimensioni, interazione, uso su mobile e alternative testuali.

03 Decisioni importanti

Decisioni che contano

Scelta guidata dalla domanda
Una forma di grafico si giustifica con la relazione che deve rivelare.
Ridondanza accessibile
Etichette, forme o pattern trasmettono informazioni che la sola tinta non può dare.

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 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/data-visualization/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 data-visualization per riprogettare questo grafico obiettivo contro valore effettivo a partire dai valori mensili forniti. Consiglia un grafico con unità e contesto chiari, spiega le scelte sugli assi e includi un'alternativa mobile leggibile e un riepilogo testuale. Non dedurre cause dall'andamento.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

Il grafico risponde alla domanda posta.
Assi, etichette e codifiche riflettono i dati reali.
Il significato resta disponibile senza colore o hover.

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

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata 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/data-visualization/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 9a6930cf84a8

Sintesi editoriale della fonte

Scelta del grafico, codifica visiva, etichettatura contestuale, accessibilità e presentazione responsive.

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

06 Domande prima di iniziare

Domande prima di iniziare

Calcola le metriche sottostanti?

La fonte si concentra su scelta del grafico e codifica; la validazione delle metriche è un'attività separata.

La vista mobile deve mantenere lo stesso grafico?

No. Ammette esplicitamente viste più semplici, comprese le tabelle.

Il colore può essere l'unico indicatore delle serie?

La fonte raccomanda etichette, pattern o forme ridondanti.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali 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 OpenDesign Sfoglia le skill di design