Data Visualizationvon Owl-Listener

Data Visualization Skill.

Wählen Sie die Grafik, die den Vergleich verständlich macht, nicht das Diagramm, das am aufwendigsten aussieht.

Data Visualization
Gestaltungsleitfaden

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Data VisualizationSKILL.md

Aufgabe UX Ergebnis • Eine an die Fragestellung gebundene Diagrammwahl • Eine Spezifikation für Marker, Achsen, Beschriftungen und Kontext • Barrierefreie Alternativen und Alternativen für kleine Bildschirme Bevor Sie beginnen Liefern Sie die tatsächlichen Daten, Felddefinitionen, die Frage der Leserschaft und die Anzeigebedingungen. Der Skill unterstützt die Diagrammgestaltung; Datenvalidierung und Diagrammimplementierung sind separate Aufgaben.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Data Visualization: Ehrliche visuelle Kodierungen wählen

Diagrammauswahl, visuelle Kodierung, kontextbezogene Beschriftung, Barrierefreiheit und responsive Darstellung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Data Visualization ist ein Skill für Diagrammgestaltung. Er ordnet Fragen zu Vergleich, Verlauf, Zusammensetzung, Verteilung und Zusammenhang möglichen Diagrammformen zu und behandelt dann Beschriftungen, Achsen, Kontext und visuelle Kodierung.

Sein Umfang ist die Darstellung, nicht Datenerhebung oder statistischer Beweis. Betont werden echte Daten, direkte Annotation, Hinweise jenseits von Farbe und responsive Alternativen wie eine Tabelle. Die Gestaltung der Farbpalette des zugrunde liegenden Produkts bleibt ein eigenes Thema.

Erwartete Ergebnisse

Eine an die Fragestellung gebundene Diagrammwahl
Eine Spezifikation für Marker, Achsen, Beschriftungen und Kontext
Barrierefreie Alternativen und Alternativen für kleine Bildschirme

Beispielbriefing ansehen

Vom Briefing zur Prüfung

01
Frage formulieren
Bestimmen Sie den Vergleich oder das Muster, das die Betrachtenden verstehen müssen.
02
Kodierung wählen
Wählen Sie ein einfaches Diagramm und legen Sie Achsen, Beschriftungen, Einheiten und eine einheitliche Behandlung der Datenreihen fest.
03
Reale Bedingungen prüfen
Verwenden Sie echte Daten, ergänzen Sie hilfreichen Kontext und prüfen Sie Hinweise jenseits von Farbe sowie das Verhalten auf kleinen Bildschirmen.

02 Einsatzbereiche

Wann er passt

Liefern Sie die tatsächlichen Daten, Felddefinitionen, die Frage der Leserschaft und die Anzeigebedingungen. Der Skill unterstützt die Diagrammgestaltung; Datenvalidierung und Diagrammimplementierung sind separate Aufgaben.

Gut geeignet

Dashboard-DiagrammeDiagrammtyp und Kontext für eine bestimmte Kennzahl klären.
Irreführende VisualisierungenKodierungen und Achsen prüfen, die einen Vergleich verzerren oder verschleiern.

Grenzen prüfen

Keine KennzahldefinitionDer Skill kann weder die Richtigkeit der gelieferten Zahlen noch deren geschäftliche Bedeutung feststellen.
Keine PalettenarchitekturEr verantwortet die Diagrammkodierung, nicht die gesamte Farbsystem-Ebene des Produkts.

Diese Eingaben mitbringen

Echte DatenLiefern Sie Werte, Einheiten, Bedingungen für fehlende Daten und Definitionen.
Frage der LeserschaftNennen Sie die Entscheidung oder den Vergleich, die das Diagramm unterstützen soll.
AnzeigekontextGeben Sie Größe, Interaktion, mobile Nutzung und Textalternativen an.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Fragegeleitete Auswahl
Eine Diagrammform ist durch die Beziehung gerechtfertigt, die sie sichtbar machen soll.
Barrierefreie Redundanz
Beschriftungen, Formen oder Muster vermitteln Informationen, die der Farbton allein nicht leisten kann.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispielbriefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie die SKILL.md dieser Aufgabe aus dem designer-skills-Repository an einen von Ihrem Agenten unterstützten Skill-Speicherort. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

Upstream-Quelldatei

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

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben dieses Briefings an, bevor Sie den Skill ausführen.

Beispielbriefing

Verwende data-visualization, um dieses Soll-Ist-Diagramm anhand der gelieferten Monatswerte neu zu gestalten. Empfiehl ein Diagramm mit klaren Einheiten und klarem Kontext, erläutere die Achsenwahl und ergänze eine gut lesbare mobile Alternative sowie eine Textzusammenfassung. Leite aus dem Verlauf keine Ursachen ab.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Das Diagramm beantwortet die gestellte Frage.
Achsen, Beschriftungen und Kodierungen spiegeln die tatsächlichen Daten wider.
Die Bedeutung bleibt auch ohne Farbe oder Hover verfügbar.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: ui-design/skills/data-visualization/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Diagrammauswahl, visuelle Kodierung, kontextbezogene Beschriftung, Barrierefreiheit und responsive Darstellung.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Berechnet er die zugrunde liegenden Kennzahlen?

Die Quelle konzentriert sich auf Diagrammauswahl und Kodierung; die Validierung von Kennzahlen ist separat.

Muss die mobile Ansicht dasselbe Diagramm beibehalten?

Nein. Einfachere Ansichten, darunter Tabellen, sind ausdrücklich zulässig.

Darf Farbe der einzige Hinweis auf eine Datenreihe sein?

Die Quelle empfiehlt redundante Beschriftungen, Muster oder Formen.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen