Data Visualizationpor Owl-Listener

Data Visualization Skill.

Escolha o gráfico que torna a comparação compreensível, não o gráfico que parece mais elaborado.

Data Visualization
Orientação de design

Revisão da fonte · Data VisualizationSKILL.md

Tarefa UX Produz • Uma escolha de gráfico ligada à pergunta • Uma especificação de marcas, eixos, rótulos e contexto • Alternativas acessíveis e para telas pequenas Antes de começar Forneça os dados reais, as definições dos campos, a pergunta do leitor e as restrições de exibição. A skill orienta o design do gráfico; a validação dos dados e a implementação do gráfico continuam sendo tarefas separadas.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Data Visualization: Escolha codificações visuais honestas

Seleção de gráficos, codificação visual, rotulagem contextual, acessibilidade e apresentação responsiva.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Data Visualization é uma skill de design de gráficos. Ela relaciona perguntas de comparação, tendência, composição, distribuição e relação a formatos de gráfico candidatos e depois trata de rótulos, eixos, contexto e codificação visual.

Seu escopo é a apresentação, não a coleta de dados nem a prova estatística. Ela enfatiza dados reais, anotações diretas, indicações além da cor e alternativas responsivas, como uma tabela. O design da paleta de cores do produto continua sendo uma questão separada.

Entregas esperadas

Uma escolha de gráfico ligada à pergunta
Uma especificação de marcas, eixos, rótulos e contexto
Alternativas acessíveis e para telas pequenas

Veja o briefing de exemplo

Do briefing à revisão

01
Defina a pergunta
Identifique a comparação ou o padrão que os espectadores precisam entender.
02
Escolha a codificação
Selecione um gráfico simples e defina eixos, rótulos, unidades e tratamento consistente das séries.
03
Verifique condições reais
Use dados reais, acrescente contexto útil e revise indicações além da cor e o comportamento em telas pequenas.

02 Quando usar

Quando usar

Forneça os dados reais, as definições dos campos, a pergunta do leitor e as restrições de exibição. A skill orienta o design do gráfico; a validação dos dados e a implementação do gráfico continuam sendo tarefas separadas.

Boa opção

Gráficos de dashboardEsclareça o tipo de gráfico e o contexto de uma métrica específica.
Visuais enganososRevise codificações e eixos que distorcem ou escondem uma comparação.

Limites a verificar

Não define métricasA skill não consegue estabelecer a veracidade dos números fornecidos nem o significado deles para o negócio.
Não é arquitetura de paletaEla cuida da codificação do gráfico, não de toda a camada de sistema de cores do produto.

Traga estas entradas

Dados reaisForneça valores, unidades, condições de dados ausentes e definições.
Pergunta do leitorIndique a decisão ou a comparação que o gráfico deve apoiar.
Contexto de exibiçãoEspecifique tamanho, interação, uso em celular e alternativas em texto.

03 Decisões importantes

Decisões que importam

Seleção guiada pela pergunta
Um formato de gráfico se justifica pela relação que ele precisa revelar.
Redundância acessível
Rótulos, formas ou padrões transmitem informações que apenas o matiz não consegue transmitir.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com o seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo de origem upstream

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

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use data-visualization para redesenhar este gráfico de meta versus realizado a partir dos valores mensais fornecidos. Recomende um gráfico com unidades e contexto claros, explique as escolhas de eixo e inclua uma alternativa legível para celular e um resumo em texto. Não deduza causas a partir da tendência.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

O gráfico responde à pergunta formulada.
Eixos, rótulos e codificações refletem os dados reais.
O significado continua disponível sem cor nem passar o mouse sobre o elemento.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Leia o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/data-visualization/SKILL.md
Licença: MIT
Snapshot revisado: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Seleção de gráficos, codificação visual, rotulagem contextual, acessibilidade e apresentação responsiva.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela calcula as métricas subjacentes?

A fonte se concentra na seleção e na codificação de gráficos; a validação de métricas é separada.

A versão para celular precisa manter o mesmo gráfico?

Não. A fonte permite expressamente visualizações mais simples, inclusive tabelas.

A cor pode ser a única indicação de série?

A fonte recomenda rótulos, padrões ou formas redundantes.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design