Entregável final: painel HTML autocontido da semana 12 a 18 de maio de 2026 da Lumina. Um arquivo visual só, dentro da identidade da marca, pronto pra Nathália abrir no notebook na reunião das 14h com o CMO.
A AP04 te deu o reconciliation report em tabela e bullets. Números e narrativa, tudo em prosa. Agora você pede pro Claude virar isso em peça visual única: hero metrics em destaque, gráfico pixel × real, comentário executivo formatado e recomendação em coral. O Claude entrega um arquivo HTML como artefato, pronto pra baixar e apresentar.
O que você sai com (8 seções do painel)
- Header com logo Lumina (SVG inline), título da semana e data de geração
- Hero metric row: 3 cards. ROAS real consolidado, gap pixel → real e status vs meta semanal
- Tabela reconciliation: pixel × real lado a lado, full-width, com gap absoluto e gap %
- Gráfico de barras pixel vs real para Meta e Google (SVG inline)
- Mix de canais no CRM (first-click) em donut ou tabela
- Highlight card sobre lojas físicas captando mídia paga digital
- Comentário executivo em 4 blocos com bullets
- Card destacado em coral com a recomendação única da semana
Ficha técnica
| Tipo | Introdução + Demonstração + Atividade Prática |
| Duração | 15 minutos (atividade prática) |
| Pré-requisito | AP01 + AP02 + AP03 + AP04 concluídas, na MESMA conversa do Project com os outputs das 3 Skills |
| Modelo recomendado | Claude Sonnet 4.6 (plano gratuito atende) |
| Downloads | Nenhum. A AP é puro prompt |
| Mensagens consumidas | 1 (a geração do painel) · acumulado da aula: 4 de 5 |
1 arquivo HTML autocontido. Abre em qualquer navegador. Identidade visual da Lumina aplicada. Pronto para a reunião das 14h.
Você vai pedir pro Claude gerar um artefato HTML autocontido que junta, numa peça visual só, todos os números e narrativas das AP02, AP03 e AP04. A identidade visual da Lumina entra automática, porque já foi carregada no Project desde a AP01.
O que isso te dá
- Um artefato visual único pronto pro CMO. Sem planilha, sem 4 anexos, sem “copia isso pra mim”
- Identidade da marca aplicada automaticamente, direto do brand book da AP01
- Domínio do padrão de prompt embutido pra gerar peças visuais. Reutilizável em qualquer Project futuro
- 4 horas de planilha viram 1 página de decisão executiva
Claude vai muito além de responder em texto. Quando você pede uma peça visual (página HTML, dashboard, relatório formatado), ele te entrega um artefato HTML autocontido: arquivo único, CSS embutido, gráficos em SVG inline, pronto pra abrir em qualquer navegador. Essa é uma capacidade padrão do Claude, vale pro plano gratuito e pro pago.
A diferença entre mandar planilha e mandar um painel HTML pro CMO é absurda. A planilha empurra o trabalho de interpretar pro CMO: onde tá o número crítico? O que cada linha significa? O painel HTML inverte isso: entrega os números já interpretados, com o destaque visual no lugar certo, a recomendação em destaque e a marca aplicada.
Pra seguir esta AP com tranquilidade, use estas definições curtas:
.svg separado). Permite barras, donuts e ícones sem carregar imagens externas.identidade-visual-lumina.md) e o Claude consulta automaticamente.O prompt da seção seguinte é só pra ilustração durante a aula expositiva. Você roda ele de verdade na sua atividade prática, que começa na seção 07.
O professor tá na mesma conversa do Project onde já rodou as 3 Skills da aula (AP02, AP03 e AP04). Sem anexar arquivo nenhum, ele cola um prompt longo (~80 linhas) que descreve a estrutura do painel inteira: seção por seção, com paleta, tipografia e comportamento visual.
Em uns 2 a 3 minutos o Claude entrega o artefato HTML completo. Ele aparece no canto direito da tela como uma “janela visual” com botão de baixar. O professor abre o artefato em tela cheia, percorre as 8 seções (header, hero metrics, tabela reconciliation, gráfico, mix de canais, highlight lojas físicas, comentário em bullets, recomendação em coral e footer) e mostra que todos os números vieram da memória da conversa das APs anteriores. Zero dado inventado.
Esse é o prompt longo embutido. O aluno pode ignorar a leitura durante a aula, porque é exatamente o mesmo prompt que ele vai colar no Passo 02 da Atividade Prática. Role o bloco abaixo pra ver o conteúdo inteiro:
- Prompt longo (~80 linhas) e específico. Diferente do prompt curto de invocação de Skill (1 linha). Aqui o aluno faz o papel de “diretor de arte”: descreve estrutura, paleta, tipografia e cada seção. Quanto mais específico, mais previsível o output.
- Claude trabalha sem arquivo anexado. Igual na AP04, ele puxa os números da memória da conversa (outputs das 3 Skills anteriores). O brand book carregado no Project na AP01 entra automático na hora de aplicar paleta e tipografia.
- O artefato aparece como janela visual no canto direito com botão de baixar. É a mesma feature que o Claude usa pra gerar qualquer arquivo (HTML, código, documento). Roda no plano gratuito.
- A geração demora mais que nas APs anteriores (uns 2 a 3 minutos vs 30 a 60 segundos das Skills). É o custo do tamanho do output: o HTML completo tem centenas de linhas.
- O painel respeita a identidade visual da Lumina porque o arquivo
identidade-visual-lumina.mdfoi carregado no Project na AP01. Se a paleta saiu errada, o problema costuma estar naquele arquivo de contexto, não no prompt.
Você vai pedir pro Claude gerar o painel HTML semanal da Lumina na mesma conversa do Project. Sem instalar Skill nova, sem anexar arquivo. O Claude usa os números das mensagens anteriores (AP02, AP03 e AP04) e o brand book carregado no Project.
Ficha da atividade
| Duração estimada | 15 minutos |
| Modelo recomendado | Claude Sonnet 4.6 |
| Plano necessário | Gratuito (artefato HTML é feature padrão do Claude) |
| Downloads | Nenhum. Tudo tá no prompt do Passo 02 |
| Mensagens consumidas | 1 (a geração do painel no Passo 02) |
| Total acumulado da aula | 4 de 5 mensagens reservadas |
Nas AP02, AP03 e AP04 você mandou prompts de 1 linha porque as Skills carregam as instruções detalhadas. Aqui não tem Skill. O “como gerar o painel” está todo escrito dentro do prompt. Essa é a forma original de pedir pro Claude gerar peças visuais: você escreve as regras (estrutura, paleta, tipografia) e o Claude executa. Skills são só a versão “embalada” desse mesmo padrão.
Artefato (no Claude): qualquer arquivo gerado pelo Claude que aparece como janela separada na conversa, com botão de baixar. Pode ser HTML, código, documento. É feature padrão do Claude, roda inclusive no plano gratuito.
Antes de disparar o prompt do painel, confirma:
- A aba aberta do Claude está dentro do Project “Resultados de Mídia, Lumina”.
- O histórico da conversa atual mostra os outputs da AP02 (consolidação de mídia), AP03 (receita do CRM) e AP04 (reconciliation report).
Se você fechou ou recarregou a conversa do Project entre a AP04 e agora, o Claude perde acesso aos números do reconciliation e o painel sai errado. Aí o jeito é refazer AP02, AP03 e AP04 antes de seguir.
Prompt embutido: prompt longo (50 a 100 linhas) que descreve em detalhe pro Claude como gerar uma peça visual. Diferente do prompt curto de invocação de Skill (1 linha), aqui o “como” está todo escrito dentro do próprio prompt.
Use o botão Copiar abaixo pra pegar o prompt inteiro do painel (~80 linhas). Cole no campo de mensagem da conversa do Project e envie.
Detalhamento: o botão Copiar leva o conteúdo inteiro do prompt, inclusive a parte fora da barra de rolagem. Confirme no campo de mensagem do Claude que o prompt completo foi colado antes de enviar.
HTML autocontido: arquivo HTML com todo o CSS e os gráficos embutidos dentro dele, sem depender de arquivos externos. Abre em qualquer navegador, em qualquer computador, mesmo sem internet (exceto Google Fonts).
O Claude vai começar a gerar o painel. É a AP com a geração mais demorada da aula: cerca de 2 a 3 minutos, porque o HTML completo tem centenas de linhas de código.
Durante a geração, você vê:
- Uma janela visual aparece no lado direito da tela. É o artefato HTML sendo construído.
- O conteúdo da janela vai se preenchendo aos poucos: primeiro o header, depois as seções, depois o comentário.
- O Claude pode mostrar texto no chat principal entre as gerações. Isso é normal.
Detalhamento: deixe a página em paz. Não recarregue, não feche a aba. Aguarde até o artefato aparecer completo, com botão de baixar visível.
Identidade visual (brand book): conjunto de regras estéticas da marca: paleta de cores, tipografia, princípios de design. Foi carregado no Project na AP01 (identidade-visual-lumina.md) e o Claude consulta automático na hora de gerar o painel.
Confira se o painel gerado tem as 8 seções esperadas, na ordem:
- Header com logo Lumina (SVG inline: círculo verde-musgo + tipografia serifada), título da semana e data.
- 3 hero cards em destaque: ROAS real consolidado · Gap pixel → real · Status vs meta semanal.
- Tabela reconciliation full-width com pixel × real lado a lado, gap absoluto e gap % visíveis.
- Gráfico de barras comparando pixel × real para Meta e Google (4 barras totais).
- Mix de canais no CRM em donut ou tabela com percentuais por canal first-click.
- Highlight card sobre lojas físicas captando mídia paga digital.
- Comentário executivo em bullets: 4 blocos, todos em bullets curtos.
- Card destacado em coral com a recomendação única da semana.
- Footer com nota de atribuição first-click.
Validações da identidade visual:
- Verde-musgo
#5C7A5Acomo cor primária do painel. - Coral
#C97A5Ano card da recomendação (chamada visual). - Fundo branco quente
#FBF9F5. - Tipografia Fraunces (serifada) nos títulos, Inter (sans-serif) no corpo.
- Linhas finas, espaçamento generoso entre seções.
Validações dos números (vêm da memória da conversa, devem bater com AP04):
- ROAS real consolidado: 2,14x
- Gap pixel → real: −44%
- ROAS real Meta: 2,28x (acima da meta)
- ROAS real Google: 1,86x (abaixo da meta)
Se algum elemento visual saiu fora do padrão (cor errada, comentário em texto corrido, mais de 1 bullet na recomendação), você pode pedir refino ao Claude. Só que isso consome mais uma mensagem. Pra esta aula, fica com o resultado da primeira geração e segue pro Passo 05. Em uso real na sua empresa, você refinaria.
Clica no botão Baixar no canto superior direito do artefato. O arquivo cai na pasta de Downloads do seu computador, com nome tipo painel-resultados-midia-lumina.html ou parecido.
Detalhamento: abre o arquivo no seu navegador (Chrome, Safari, Firefox) com duplo-clique. Confirma que:
- As fontes do Google (Fraunces e Inter) carregam direito. Pode levar 1 a 2 segundos na primeira abertura.
- O layout segura em desktop (1280px ou mais).
- Os números, gráficos e cards aparecem como você viu no artefato dentro do Claude.
- Dá pra mandar esse arquivo por e-mail ou Slack sem anexo nenhum. Tudo tá dentro dele.
Pronto. Esse é o painel da semana. Exatamente o que a Nathália abriria no notebook pra reunião das 14h com o CMO.
Você sai desta atividade com
- Um arquivo HTML autocontido com o painel semanal de Resultados de Mídia da Lumina. Roda em qualquer navegador, mesmo sem internet (exceto Google Fonts).
- Identidade visual da marca aplicada automaticamente: paleta verde-musgo + coral + branco quente, tipografia Fraunces + Inter, espaço negativo e linhas finas. Tudo veio do brand book carregado no Project na AP01.
- Domínio do padrão de prompt embutido pra gerar artefatos visuais. Você sabe descrever uma peça em texto pro Claude executar.
- A história da semana numa página só, pronta pra mandar pra liderança da Lumina por Slack ou e-mail.
Em 15 minutos, a Nathália virou 4 horas de planilha em 1 página de decisão executiva. Painel pronto, recomendação em coral, história da semana num arquivo só. Falta uma peça do quebra-cabeça: fazer tudo isso rodar sozinho toda segunda-feira às 8h. Na AP06 você configura a automação semanal via Claude Cowork (plano pago) ou recebe o playbook manual equivalente (plano gratuito), fechando o pipeline completo da aula.