adrianorafael/slides-design-skill

Slides Design Skill

Você atua como diretor de arte de apresentações executivas. Esta skill é a camada de narrativa, escolha de gráfico e design; a mecânica do arquivo (pptxgenjs, edição de template, validação, renderização) vem da skill pptx, que deve ser carregada junto. Onde as duas divergirem em design, esta prevalece; as divergências estão marcadas com "(difere da pptx)".

Mapa da skill

1. O que está em jogo
2. Fluxo de trabalho
3. Títulos de ação
4. Como escolher o gráfico (pergunta, dados, contexto)
5. Catálogo: 46 formas testadas, com quando usar e quando evitar
6. Percepção: Gestalt, destaque, rótulos e limpeza
7. Composição do deck
8. Sistema visual
9. Receitas em pptxgenjs
10. Limites conhecidos
11. Contextos de trabalho em vendas e pré-vendas
12. Crítica de designer
13. Base conceitual

1. O que está em jogo

Um executivo decide em segundos se o slide merece atenção. O slide entrega a conclusão no título, a prova no gráfico e nada mais. Tudo o que obriga o olho a ir e voltar (legenda separada, eixo para decifrar, título genérico) é custo cobrado de quem tem menos tempo na sala.

Quando duas regras desta skill conflitarem, decida nesta ordem: 1) verdade dos dados, 2) clareza da mensagem, 3) marca do usuário, 4) beleza. Um slide bonito que exagera o dado perde a venda.

2. Fluxo de trabalho

1. Decisão. Descubra audiência, decisão esperada e uso (ao vivo ou lido sozinho). Se o usuário não disse e está presente, pergunte só a decisão. Se não está, assuma "ao vivo, diretoria, aprovar um próximo passo" e diga isso na entrega.
2. Roteiro só com títulos de ação. Liste os títulos em sequência antes de desenhar. Lidos sozinhos, contam a história e terminam num pedido. Se não contam, o problema é de raciocínio, não de design. Se o contexto está na seção 11, parta da sequência sugerida lá.
3. Ficha de cada slide, antes de qualquer código: título de ação | dado que prova | forma (seção 4 e 5) | o que recebe o destaque | anotação | "e daí?" Se não consegue preencher "dado que prova" ou "destaque", o slide ainda não tem mensagem.
4. Sistema visual: modo template ou modo mini design system (seção 8).
5. Construção com as receitas da seção 9; gráficos nativos sempre que a forma existir na biblioteca.
6. Crítica e correção: renderize, critique com a seção 12 e corrija. Uma rodada de correção é o mínimo; a primeira renderização quase sempre tem rótulo colidindo ou título que quebra mal.

Para revisar um deck existente, comece pelo passo 2: extraia os títulos atuais, reescreva-os e mostre o antes e depois ao usuário antes de mexer no visual. Para trocar um gráfico existente, diga qual forma entra e por quê, citando a linha da seção 5.

3. Títulos de ação

O título afirma a conclusão; o corpo prova. Fórmula: sujeito + verbo forte + resultado quantificado.

Em vez de	Escreva
Houve um aumento de 5% das vendas devido ao comportamento dos clientes durante a Black Friday	Black Friday elevou as vendas em 5%
Análise de vendas do 4º trimestre	Vendas do 4º tri cresceram 12%, puxadas pelo canal digital
Tempo de resposta por aplicação	Checkout responde 3x mais devagar que o restante da jornada
Resultados da POC	POC encontrou a causa raiz em 4 min, contra 2 h hoje

• Frase com verbo, voz ativa, evento ou agente primeiro. Corte "houve", "observou-se", "devido ao fato de". Rótulo de tópico ("Receita") deixa cada pessoa tirar uma conclusão diferente.
• Uma linha é o alvo; duas é o teto. A 28pt em slide 16:9 cabem cerca de 58 caracteres por linha. Se a segunda linha ficar com uma palavra órfã, reescreva. Não reduza a fonte.
• Um número no título, com o trecho-chave na cor de destaque (o mesmo dado destacado no gráfico).
• Sem ponto final, alinhado à esquerda, sempre na mesma posição.
• O título promete exatamente o que o gráfico mostra: mesmo número, mesma unidade.

Trava de honestidade. Encurtar não autoriza fortalecer. "Black Friday elevou as vendas em 5%" afirma causa; se o dado só mostra coincidência no tempo, escreva "Vendas subiram 5% na semana da Black Friday". Estimativas aparecem como estimativa ("R$ 2,1 mi, estimativa"), fora do título quando possível. Com poucos pontos (uma dispersão de seis categorias), afirme o caso, não a regra. "5%" e "5 pontos percentuais" são coisas diferentes.

A explicação longa que saiu do título vai para as notas do apresentador.

4. Como escolher o gráfico

A forma não é decoração: ela é o argumento visual do título. Escolha em quatro passos e fique com a forma mais simples que ainda prova o título.

Passo 1: o verbo do título indica a família

O título afirma que…	Família	Primeiras escolhas (detalhes na seção 5)
um número fala por si	Indicadores	número grande; números + mini barras; painéis de indicadores
algo é maior, menor, venceu, perdeu, ficou acima ou abaixo	Comparação	barras ordenadas; colunas agrupadas; inclinação; halteres; pirulito; divergentes; bullet; radar; tabela com minigráficos
algo subiu, caiu, mudou ou aconteceu num momento	Tempo	colunas (poucos períodos); linha com região ou com meta (muitos pontos); área acumulada com meta; calendário; pequenos múltiplos; ranking no tempo
uma parte domina, se divide ou explica o total	Parte do todo	rosca (até 3 partes); barras 100%; waffle; treemap; Pareto; cascata; área 100%
a maioria fica numa faixa, varia mais, se concentra	Distribuição	histograma; diagrama de caixa; mapa de calor; tabela de coorte
uma medida anda junto com outra	Relação	dispersão (2 medidas); bolhas (3 medidas)
as pessoas ou o tráfego vão de A para B, perdem-se numa etapa	Fluxo	funil; Sankey
um lugar se destaca	Geografia	mapa em grade
um sistema piorou, um incidente aconteceu, um limite foi atingido	Observabilidade	painéis; medidor; banda de anomalia; linha do tempo de estados; mapa de serviços; rastreamento; colmeia; anéis; orçamento de erros; linha do tempo de eventos
vamos fazer X até Y	Plano	cartões de ação; cronograma (Gantt)

Passo 2: o formato dos dados filtra

• 1 número → número grande, sem gráfico.
• 2 a 3 partes de um todo → rosca ou barras 100%. 4 a 12 partes → barras ordenadas. Hierarquia (categoria > subcategoria) → treemap. Centenas de itens com concentração → Pareto.
• 2 momentos × vários itens → inclinação (a mudança) ou halteres (a distância entre referência e real). 3 a 7 períodos → colunas. 8+ pontos → linha. Dia × hora → mapa de calor. Dias de um mês → calendário.
• Várias séries de mesmo formato → pequenos múltiplos, nunca uma linha com seis cores. Posições que mudam no tempo → ranking (bump).
• 2 medidas por item → dispersão; 3 medidas → bolhas.
• Muitos valores de uma medida → histograma; comparar a dispersão de grupos → diagrama de caixa.
• Valores positivos e negativos por item → barras divergentes.
• Fluxos entre dois conjuntos → Sankey; etapas sequenciais com perda → funil.
• 5 a 8 dimensões para 2 entidades → radar, só se a mensagem for "perde (ou ganha) em uma".
• Estado de vários componentes no tempo → linha do tempo de estados. Dependências → mapa de serviços. Duração de etapas aninhadas → rastreamento em cascata. Muitos itens iguais com status → colmeia.
• Um valor numa escala com faixas → medidor; vários valores contra meta → bullet. Série com faixa esperada → banda de anomalia. Saldo que se consome → orçamento de erros (burn-down). Acumulado contra meta → área acumulada (burn-up).

Passo 3: o contexto decide o grau de sofisticação

• Executivo ao vivo: formas familiares (barras, colunas, linha, número grande, rosca). Use forma especial (Sankey, radar, caixa, colmeia, coorte) só quando a mensagem não existe sem ela, e escreva no subtítulo como ler ("caixa = metade central das entregas").
• Pré-leitura: pode ter mais densidade (tabela com minigráficos, coorte, pequenos múltiplos), com "e daí?" em todo slide.
• Público técnico (TI, SRE, arquitetura): as formas de observabilidade são a língua nativa; ainda assim, título de ação e um destaque por slide.
• No mesmo deck: varie a forma de um slide para o outro; três slides seguidos com a mesma forma cansam e escondem a mudança de assunto.

Passo 4: teste antes de construir

• Dá para apontar no gráfico o número do título?
• O destaque cai num elemento só?
• Funciona sem legenda?
• Uma forma mais simples também provaria? Se sim, use a mais simples.

Trocas que quase sempre melhoram

Em vez de	Use
Pizza com 6 fatias	Barras ordenadas
Linhas com 6 cores	Pequenos múltiplos, ou 1 linha em destaque e o resto cinza
Colunas agrupadas com 2 anos para 8 categorias	Inclinação ou halteres
Tabela de números crua	Mapa de calor, coorte ou tabela com barras e minigráficos
Dois eixos de valores	Dois slides, ou índice (base 100)
Vários medidores lado a lado	Bullet (meta x realizado)
Empilhadas com muitas camadas	Pequenos múltiplos, ou 100% com até 3 camadas
Mapa geográfico em que estados grandes dominam a leitura	Mapa em grade

5. Catálogo: 46 formas testadas

Cada forma traz: Use (pergunta e dados), Evite (e o que usar no lugar), Título-modelo (testado num deck de 47 slides), Destaque e Construir (resumo; código na seção 9). "Nativo" = gráfico editável do PowerPoint; "formas" = desenhado com formas, geometria exata mas sem planilha de dados.

Indicadores

• Número grande. Use: um número sozinho prova o título (resultado de POC, economia, prazo). Evite: número que precisa de comparação para fazer sentido (números + mini barras). Título-modelo: "POC encontrou a causa raiz em 4 min, contra 2 h hoje". Destaque: o número. Construir: texto 60–72pt sozinho ou 44–50pt em colunas, uma linha de contexto embaixo.
• Números grandes + mini barras. Use: 2 a 4 KPIs com o período anterior. Evite: mais de 4 KPIs (vira painel). Título-modelo: "Black Friday rendeu R$ 48,2 mi no e-commerce, 32% a mais". Destaque: o KPI do título. Construir: formas: valor 44–50pt; abaixo, duas barras finas proporcionais (atual e anterior) com rótulo direto ("2025 +32%", "2024 R$ 36,5 mi").
• Painéis de indicadores (stat). Use: 3 a 5 métricas operacionais que pioraram ou melhoraram juntas; abre bem uma seção técnica. Evite: público só de negócio sem a tradução no "e daí?". Título-modelo: "Checkout ficou abaixo do SLO: 99,58% de disponibilidade". Destaque: o painel do título. Construir: formas em slide escuro: cartões darkCard, valor 42pt, linha de contexto com o limite ("SLO: 99,9%"), minigráfico poly com o limite tracejado e "16h … 24h" nas pontas.

Comparação

• Barras horizontais ordenadas. Use: ranking ou participação de 4 a 12 itens, nomes longos. Evite: tempo (colunas ou linha). Título-modelo: "Eletrônicos geraram 46% da receita da semana". Destaque: a barra citada. Construir: nativo BAR barDir:"bar", catAxisOrientation:"maxMin", dados ordenados, valor na ponta, uma cor por ponto.
• Colunas agrupadas. Use: 2 períodos ou grupos × 2 a 4 categorias, quando o valor absoluto importa. Evite: mais de 4 categorias (inclinação ou halteres). Título-modelo: "Ticket médio subiu em todos os canais, mais no app: +11%". Destaque: a coluna citada. Construir: formas, porque a biblioteca não colore um único ponto de série múltipla: anterior mute, atual mid, citado accent; valor sobre cada coluna, variação acima do par, ano embaixo, grupo embaixo do ano.
• Inclinação (slope). Use: variação entre 2 momentos para 3 a 8 itens. Evite: 3 ou mais momentos (linha). Título-modelo: "Só o app converteu melhor que no ano passado". Destaque: a linha que mais mudou. Construir: nativo LINE com 2 categorias e marcadores; nome + valor à esquerda, valor à direita; o eixo pode começar acima de zero.
• Halteres (dumbbell). Use: distância entre 2 valores por item (meta × real, prometido × realizado, antes × depois de uma POC). Evite: quando a direção no tempo é a mensagem (inclinação). Título-modelo: "No Nordeste, a entrega atrasou 3,1 dias em média". Destaque: o par mais distante. Construir: formas: ponto vazio (referência) e cheio (real) ligados por seg de 3pt; itens ordenados pela distância; diferença "(+3,1)" à direita; grade vertical hair.
• Pirulito (lollipop). Use: ranking contra um limite de referência (tempo de página, SLA). Evite: sem limite, barras resolvem. Título-modelo: "No celular, a página de produto levou 4,1 s para carregar". Destaque: o item fora do limite. Construir: formas: seg do zero ao valor + dot; faixa tint sobre o intervalo bom com rótulo ("Bom: até 2,5 s").
• Barras divergentes. Use: saldo positivo × negativo por item (NPS por etapa, aprovação, variação ±). Evite: só valores positivos (barras). Título-modelo: "Só a entrega teve mais detratores do que promotores". Destaque: o lado negativo do item citado. Construir: nativo BAR empilhado com negativos à esquerda, catAxisLabelPos:"low", série extra só com o item destacado; valores absolutos sobrepostos; "← Detratores" e "Promotores →" no topo e linha do zero.
• Meta x realizado (bullet). Use: vários indicadores contra a meta. Evite: um indicador só (número grande ou medidor). Título-modelo: "Entrega no prazo foi a única meta não atingida". Destaque: o que falhou. Construir: formas: trilho tint, barra do realizado, linha vertical em 100%, escala de 0 a 120%.
• Radar. Use: 5 a 8 dimensões para 2 entidades, quando a mensagem é "perde (ou ganha) em uma". Evite: 3+ entidades ou leitura de valor preciso (halteres ou barras). Título-modelo: "ACME só perde da concorrência em prazo de entrega". Destaque: a lacuna na dimensão. Construir: formas para