Os nove pedidos do painel grande e denso (curso Frontends com Vibecoding, 05/11/2026) ====================================================================================== Cole um pedido por mensagem no agente de código (Claude Code, Codex ou outro parecido), na ordem dos passos, e confira o resultado antes de mandar o próximo. Os dados de exemplo são da Mirante, uma agência fictícia: troque pelos seus quando o painel estiver de pé. Guias de referência: https://brasilgeo.ai/leadlovers2026/design/graficos/ https://brasilgeo.ai/leadlovers2026/design/dashboards/ ------------------------------------------------------------------------------ PASSO 1: A pergunta, a decisão e os dados de exemplo ------------------------------------------------------------------------------ Você é um analista de produto que desenha painéis de marketing para gestores. Tarefa: antes de qualquer gráfico, escreva o roteiro do painel da agência fictícia Mirante (leads por canal em 26 semanas). Arquivos: crie docs/painel-mirante.md com o roteiro e src/data/mirante-ficticio.ts com os dados de exemplo. Aceite: 1. O roteiro abre com uma pergunta numa frase e a decisão que ela alimenta (por exemplo, mudar a verba entre canais). 2. Lista de 6 a 12 visões, cada uma com a pergunta menor que responde e o denominador do número. 3. Os dados têm 6 canais e 26 semanas, gerados com semente fixa, e o arquivo diz no topo que são fictícios. 4. Cada número que vai para a tela tem fonte e data previstas no roteiro. Proibido: desenhar gráfico, instalar biblioteca ou inventar dado que pareça real. Armadilha "lista de desejos": o roteiro vira uma lista de tudo o que dá para medir. Corte toda visão que não muda a decisão escrita no topo. ------------------------------------------------------------------------------ PASSO 2: A grade grande em três faixas ------------------------------------------------------------------------------ Você é um desenvolvedor de frontend que monta painéis de dados em React com CSS Grid. Tarefa: monte a casca do painel da Mirante em três faixas nomeadas, ainda com caixas vazias no lugar dos gráficos. Arquivos: src/components/painel/PainelMirante.tsx e src/components/painel/painel.module.css. Leia docs/painel-mirante.md antes. Aceite: 1. Faixa 1 (a decisão): manchete calculada do dado, número principal com 48 px ou mais e denominador ao lado, e duas comparações (período anterior e meta). 2. Faixa 2 (o tempo) e faixa 3 (a comparação), cada uma com título visível. 3. Grade de 12 colunas que usa a largura toda a partir de 1.280 px; gráfico de destaque com 480 a 640 px de altura, apoio com 300 a 400 px e miniatura com 140 a 200 px. 4. A 390 px tudo vira uma pilha na ordem da decisão, sem rolagem lateral da página. Proibido: coluna central estreita (max-width de 1.100 px) no painel, número sem denominador e mais de 12 visões na mesma tela. Armadilha "caixa sem altura": o gráfico não aparece porque a caixa dele tem altura zero. Declare a altura de cada caixa no CSS. ------------------------------------------------------------------------------ PASSO 3: O tipo de cada visão ------------------------------------------------------------------------------ Você é um especialista em visualização de dados que escolhe gráfico pela pergunta. Tarefa: para cada visão do roteiro, escolha o tipo de gráfico e escreva o motivo em uma linha. Arquivos: atualize docs/painel-mirante.md (tabela visão, pergunta, tipo, motivo). Não mexa no código ainda. Aceite: 1. Evolução no tempo em linha ou área; ranking em barra horizontal ordenada; o que somou e o que tirou em cascata (waterfall); padrão por semana e canal em mapa de calor; a mesma pergunta por canal em múltiplos pequenos. 2. Toda barra com eixo começando no zero. 3. Cada visão diz qual comparação a pessoa faz ao olhar para ela. Proibido: pizza com mais de quatro fatias, velocímetro e gráfico em 3D. Armadilha "galeria": escolher o tipo mais bonito da galeria da biblioteca. O tipo vem da pergunta, e a galeria serve depois, para copiar a configuração. ------------------------------------------------------------------------------ PASSO 4: Somar e empilhar sem enganar ------------------------------------------------------------------------------ Você é um desenvolvedor de frontend que usa Apache ECharts 6 com cuidado estatístico. Tarefa: desenhe as visões da faixa 2 (o tempo) do painel da Mirante. Arquivos: src/components/painel/VisoesDoTempo.tsx, com os dados de src/data/mirante-ficticio.ts. Aceite: 1. Leads por canal em área empilhada (os canais somam o total), com 2 px de separador entre as camadas e o nome do canal na ponta de cada uma. 2. Na mesma escala da área: período anterior em linha tracejada, a meta como linha reta e o último valor marcado. 3. Custo por lead numa visão separada, logo abaixo, com a mesma semana na mesma coluna e média móvel de 4 semanas por cima. 4. Dica (tooltip) com a linha inteira da semana: todos os canais, total, participação e variação sobre o período anterior. Proibido: dois eixos Y no mesmo gráfico, empilhar taxas ou médias e eixo de barra que não começa no zero. Armadilha "soma de taxas": empilhar a taxa de conversão de seis canais desenha um total que não existe. Só empilhe o que soma de verdade. ------------------------------------------------------------------------------ PASSO 5: A paleta de 8 nos dois temas ------------------------------------------------------------------------------ Você é um designer de sistema que cuida de cor por token. Tarefa: aplique a paleta categórica de 8 cores, nos temas claro e escuro, a todas as visões do painel. Arquivos: src/styles/painel-tokens.css (os tokens) e o componente que inicializa o ECharts (lê as cores com getComputedStyle). Aceite: 1. Os tokens --serie-1 a --serie-8 existem no tema claro (superfície #ffffff) e no escuro (superfície #182230), na ordem fixa da paleta colada abaixo. 2. A cor segue o canal em todas as visões: o mesmo canal tem a mesma cor no gráfico, na tabela e na legenda. 3. O gráfico refaz as cores quando o tema muda, sem recarregar a página. 4. Um teste reprova se alguma cor ficar abaixo de 3:1 contra a superfície do próprio tema. Proibido: hexadecimal dentro de componente, texto pintado com a cor da série e status (bom, atenção, crítico) só por cor, sem ícone e palavra. Armadilha "verde e laranja": os dois ficam parecidos para quem tem daltonismo. Ponha o nome na ponta da série e 2 px de separador entre fatias. Paleta, claro: #0b63b5 #d55e00 #0a8a62 #a64d9a #b07a00 #2b8ab3 #c2356e #5d6bc4 Paleta, escuro: #4a90d9 #d66b2a #2c9f70 #c46fb9 #b8861f #3a9fc7 #d9457a #7f78e8 ------------------------------------------------------------------------------ PASSO 6: Movimento com função ------------------------------------------------------------------------------ Você é um desenvolvedor de interface que anima dados para explicar mudança. Tarefa: dê movimento ao painel da Mirante só nos sete usos com função listados no aceite. Arquivos: o componente que inicializa o ECharts e src/components/painel/NumeroPrincipal.tsx. Aceite: 1. Entrada em cadeia: cada visão de 100 a 500 ms, 60 a 90 ms entre uma e outra, total de até 1.600 ms. 2. Ao filtrar, os elementos caminham para o novo valor em 300 a 500 ms, cada um seguindo o próprio canal. 3. Troca de visão no mesmo espaço (barra para mapa de área) em 400 a 700 ms com universalTransition; destaque de série em 150 a 250 ms. 4. O número principal conta de 400 a 800 ms só quando o valor muda; a reprodução das semanas anda um passo a cada 400 a 1.000 ms, com botão de pausa e a semana à vista. 5. Com prefers-reduced-motion ou o botão de menos movimento do site, o painel aparece direto no estado final. Proibido: nada gira, pulsa ou pisca sem dado novo; nada pisca mais de 3 vezes por segundo; opacity 0 como estado inicial no CSS. Armadilha "painel festa": animar tudo o tempo todo. Cada movimento precisa responder à pergunta "o que mudou?". ------------------------------------------------------------------------------ PASSO 7: Ligar as visões ------------------------------------------------------------------------------ Você é um desenvolvedor de frontend que monta painéis interativos com ECharts 6. Tarefa: ligue as visões do painel da Mirante para que um clique filtre todas. Arquivos: src/components/painel/PainelMirante.tsx e um estado único do filtro (por exemplo, src/components/painel/useFiltro.ts). Aceite: 1. Clicar num canal em qualquer visão, ou na linha da tabela, filtra todas as visões pelo mesmo canal; clicar de novo desfaz. 2. A regra do filtro aparece escrita na tela (vale para todas as visões, um canal por vez) e o botão Limpar fica sempre visível. 3. As visões com o mesmo eixo de tempo usam echarts.connect: a linha de leitura e o zoom andam juntos. 4. O filtro funciona pelo teclado, pela tabela, e um aviso em role="status" diz o que mudou. Proibido: filtro escondido num menu, visão que ignora o filtro sem avisar e estado de filtro duplicado em cada gráfico. Armadilha "filtro fantasma": uma visão continua mostrando todos os canais e ninguém percebe. Escreva no título de cada visão o recorte que ela mostra. ------------------------------------------------------------------------------ PASSO 8: Tela cheia e modo reunião ------------------------------------------------------------------------------ Você é um desenvolvedor de frontend que prepara painéis para telão e reunião. Tarefa: acrescente ao painel da Mirante o botão Tela cheia e o modo reunião. Arquivos: src/components/painel/PainelMirante.tsx e src/components/painel/painel.module.css. Aceite: 1. O botão usa a Fullscreen API do navegador no contêiner do painel; onde ela não existe, o painel cobre a janela e sai com Esc. 2. No modo reunião a letra cresce (manchete com 32 px ou mais, número principal com 80 px ou mais) e os controles somem, menos o botão de sair. 3. Os gráficos se redesenham no tamanho novo, sem cortar rótulo. 4. Funciona nas larguras de 1.280, 1.920 e 2.560 px. Proibido: abrir o painel em outra aba para simular tela cheia e esconder o botão de sair. Armadilha "gráfico que não cresce": a tela aumenta e o gráfico fica do tamanho antigo. Chame o resize de cada gráfico quando o contêiner muda de tamanho. ------------------------------------------------------------------------------ PASSO 9: Revisar no celular e com movimento reduzido ------------------------------------------------------------------------------ Você é um revisor de qualidade de interface com Playwright e axe. Tarefa: revise o painel da Mirante e entregue as capturas e a lista de defeitos com a correção de cada um. Arquivos: tests/painel-mirante.spec.ts e a pasta de capturas que o projeto já usa. Aceite: 1. Capturas a 390, 1.280 e 1.920 px, nos temas claro e escuro, com movimento normal e reduzido. 2. A 390 px: pilha na ordem da decisão, nenhum rótulo de gráfico abaixo de 12 px e nenhuma rolagem lateral da página. 3. Com movimento reduzido, a primeira captura já mostra o estado final de todas as visões. 4. Cada gráfico tem a tabela equivalente e o axe não aponta erro grave; todo controle tem alvo de 44 px no toque. Proibido: aprovar pela captura de 1.280 px sozinha e corrigir o defeito escondendo a visão no celular. Armadilha "celular espremido": o painel de 12 colunas encolhe até a letra virar 6 px. No celular, a grade vira uma coluna e cada visão ganha a sua altura.