Data Visualizationpor Owl-Listener

Data Visualization Skill.

Elige el gráfico que haga comprensible la comparación, no el que parezca más elaborado.

Data Visualization
Guía de diseño

Revisión de la fuente · Data VisualizationSKILL.md

Tarea UX Produce • Una elección de gráfico vinculada a la pregunta • Una especificación de marcas, ejes, etiquetas y contexto • Alternativas accesibles y para pantallas pequeñas Antes de empezar Aporta los datos reales, las definiciones de los campos, la pregunta del lector y las restricciones de visualización. La skill orienta el diseño del gráfico; la validación de los datos y la implementación del gráfico son tareas distintas.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Data Visualization: Elegir codificaciones visuales honestas

Selección de gráficos, codificación visual, etiquetado contextual, accesibilidad y presentación adaptable.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

Cómo trabaja

Data Visualization es una skill de diseño de gráficos. Asocia preguntas de comparación, tendencia, composición, distribución y relación con formas de gráfico candidatas, y luego aborda etiquetas, ejes, contexto y codificación visual.

Su alcance es la presentación, no la recopilación de datos ni la prueba estadística. Hace hincapié en datos reales, anotación directa, señales que no dependan del color y alternativas adaptables, como una tabla. El diseño de la paleta de color del producto es un asunto aparte.

Entregables previstos

Una elección de gráfico vinculada a la pregunta
Una especificación de marcas, ejes, etiquetas y contexto
Alternativas accesibles y para pantallas pequeñas

Ver el brief de ejemplo

Del brief a la revisión

01
Formula la pregunta
Identifica la comparación o el patrón que los espectadores necesitan entender.
02
Elige la codificación
Selecciona un gráfico sencillo y define ejes, etiquetas, unidades y un tratamiento coherente de las series.
03
Comprueba las condiciones reales
Usa datos reales, añade contexto útil y revisa las señales que no dependen del color y el comportamiento en pantallas pequeñas.

02 Cuándo usarlo

Cuándo usarla

Aporta los datos reales, las definiciones de los campos, la pregunta del lector y las restricciones de visualización. La skill orienta el diseño del gráfico; la validación de los datos y la implementación del gráfico son tareas distintas.

Buen encaje

Gráficos de panelesAclara el tipo de gráfico y el contexto para una métrica concreta.
Visualizaciones engañosasRevisa codificaciones y ejes que distorsionan u ocultan una comparación.

Límites que conviene comprobar

No define métricasLa skill no puede establecer la veracidad de las cifras proporcionadas ni su significado para el negocio.
No es arquitectura de paletasSe encarga de la codificación del gráfico, no de toda la capa de color-system del producto.

Aporta estos datos de partida

Datos realesProporciona valores, unidades, condiciones de datos ausentes y definiciones.
Pregunta del lectorIndica la decisión o la comparación que el gráfico debe respaldar.
Contexto de visualizaciónEspecifica tamaño, interacción, uso en móvil y alternativas de texto.

03 Decisiones importantes

Decisiones que importan

Selección guiada por la pregunta
Una forma de gráfico se justifica por la relación que necesita revelar.
Redundancia accesible
Las etiquetas, formas o patrones transmiten información que el tono por sí solo no puede.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo que sigue no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible con tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo de origen en el repositorio original

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

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa data-visualization para rediseñar este gráfico de objetivo frente a resultado real a partir de los valores mensuales proporcionados. Recomienda un gráfico con unidades y contexto claros, explica la elección de los ejes e incluye una alternativa legible para móvil y un resumen en texto. No deduzcas causas a partir de la tendencia.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El gráfico responde a la pregunta planteada.
Los ejes, las etiquetas y las codificaciones reflejan los datos reales.
El significado sigue disponible sin color ni hover.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill venga incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada a continuación. El comportamiento y los requisitos del repositorio original pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: ui-design/skills/data-visualization/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Selección de gráficos, codificación visual, etiquetado contextual, accesibilidad y presentación adaptable.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Calcula las métricas subyacentes?

La fuente se centra en la selección y la codificación de gráficos; la validación de métricas es un aspecto aparte.

¿La vista móvil debe mantener el mismo gráfico?

No. Permite expresamente vistas más simples, incluidas las tablas.

¿Puede el color ser la única señal de las series?

La fuente recomienda etiquetas, patrones o formas redundantes.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño