O que data-illustration faz?
Bibliotecas de gráficos comuns (barras, linhas, radar) são precisas, mas esquecíveis. O erro oposto — uma "visualização de dados" gerada por IA — é bonita, mas não consegue codificar um número com fidelidade, sendo decoração disfarçada de dado. Esta skill faz ambos com honestidade: os dados conduzem a geometria de um SVG gerado (o núcleo preciso e reproduzível), e qualquer imagem gerada por IA é sobreposta apenas como atmosfera, nunca para transmitir um valor.
Quando usar
- Alguém quer visualizar pontuações/métricas/dimensões, mas um gráfico simples de barras/linhas/pizza seria monótono ou destoaria da marca.
- Pedidos como "faça esta visualização parecer realmente projetada", "algo mais ilustrativo do que um gráfico", ou "gere um gráfico real para o painel, não um gráfico padrão".
- Prefira esta skill em vez de codificar manualmente um gráfico avulso sempre que o resultado precisar parecer intencionalmente projetado, em vez de um gráfico de biblioteca padrão.
O contrato de precisão (inegociável)
- Cada quantidade na saída é calculada a partir dos valores de entrada, em código. Comprimento da forma, raio, texto do rótulo, o número central de destaque — tudo derivado programaticamente, nunca estimado visualmente ou desenhado por um modelo de imagem.
- A geração de imagens por IA é apenas decoração. Se você sobrepor um fundo gerado, restrinja o prompt a textura abstrata — sem texto, sem números, sem figuras, sem logotipos. Se a geração de imagens não estiver disponível, o gráfico ainda deve estar completo e correto sem ela.
- Tudo é rotulado. Cada elemento codificado recebe um rótulo, o número principal ganha um destaque central, e uma linha de legenda declara o que a forma realmente significa. Um gráfico bonito que ninguém consegue decodificar é uma falha, não um sucesso.
Se você alguma vez sentir vontade de deixar um modelo de imagem "desenhar o gráfico" diretamente — pare. Isso quebra o contrato e o resultado será sutilmente (ou gravemente) errado.
A forma padrão: um "florescimento" orgânico
N dimensões/pontuações → N pétalas irradiando de um ponto central. Por pétala:
- O comprimento codifica o valor (mais longo = maior), contra anéis-guia de números inteiros para que ainda seja legível como número, não apenas como sensação.
- A plenitude alarga-se ligeiramente com o valor — pontuações mais altas parecem visualmente "mais exuberantes".
- A cor mapeia a faixa do valor por meio de uma rampa semântica (ex.: verde para alto, âmbar para médio, vermelho-terracota para baixo).
- Um rótulo na ponta exibe o nome da dimensão e seu número exato.
- Um disco central mostra a média, colorida de acordo com seu próprio valor, com uma legenda curta.
- Uma linha de legenda declara a codificação em linguagem simples ("comprimento da pétala = pontuação de 5").
Isso se lê como um organismo único por conjunto de dados — não como um gráfico radar genérico — enquanto cada valor ainda é exatamente legível.
Construindo
- Receba a entrada como um mapa simples
{dimensão: valor}mais um título e uma média. - Escreva um pequeno script (qualquer linguagem com saída SVG serve) que calcule a geometria de cada pétala diretamente a partir dos valores — ângulo = espaçado uniformemente pelo número de dimensões, raio = uma função do valor, cor = uma consulta aos limites da sua faixa.
- Renderize rótulos e a legenda como elementos de texto SVG reais, não incorporados em nenhuma camada de imagem.
- Camada de atmosfera opcional: gere uma imagem de fundo abstrata e temática por meio de qualquer API de geração de imagem que você tenha acesso, componha-a sob a ilustração com baixa opacidade atrás de uma vinheta para que o centro permaneça legível. Armazene em cache — gere uma vez no momento da construção/autoria, nunca em cada renderização de página (é lento e custa dinheiro).
- Torne a saída autocontida (um único
.svg, com qualquer fundo incorporado como URI de dados) para que não haja um ativo separado para gerenciar. - Se você quiser que as formas sejam interativas (passar o mouse/clicar para revelar a definição, pontuação exata e fonte de cada dimensão), envolva cada elemento com atributos de dados (
data-dimension,data-score,data-definition) que um pequeno script possa ler para alimentar um painel lateral.
Estendendo a forma
O florescimento é o padrão, não a única opção — escolha a forma que se adapta à estrutura dos dados, mas mantenha o contrato de precisão independentemente de qual usar:
- Linha de crista/contorno para uma distribuição ou um valor acompanhado ao longo de muitos itens.
- Isótipo (glifos repetidos, o último parcialmente preenchido) quando a contagem é o ponto principal e você quer que seja lido como quantidade literal.
- Constelação quando as relações entre os itens importam mais do que suas magnitudes individuais.
Antipadrões
- Deixar um modelo de imagem renderizar o gráfico ou os números — os valores estarão errados ou fabricados.
- Um gráfico deslumbrante sem rótulos ou legenda — indecodificável é inútil, por mais bonito que pareça.
- Um fundo gerado com opacidade alta o suficiente para competir com a legibilidade da camada de dados — mantenha-o com baixa opacidade, atrás de uma vinheta.
- Chamar uma API de geração de imagem em cada renderização de página em vez de armazenar em cache — lento e desnecessariamente caro.
Como usar
Instalação: copie esta pasta para ~/.claude/skills/data-illustration/ para uso pessoal, ou .claude/skills/data-illustration/ dentro de um repositório de projeto.
Invocação:
Transforme estas 6 pontuações em um florescimento de data-illustration em vez de um gráfico de barras
chato — intitule como "Retro Q3", coloque uma média central e adicione uma legenda.
O gráfico deste painel parece genérico. Use data-illustration para transformá-lo em uma
ilustração precisa e rotulada — sem números desenhados por IA, tudo calculado a partir dos dados reais.