Transforme Slides de IA em Apresentações Interativas Detalhadas: O Framework de 6 Estruturas

1【Prompt de Apresentação Interativa v2.1】
2Texto completo omitido devido a restrições de tamanho; por favor, copie e cole a partir do note.
3
4## Adição: Torne-a Interativa
5Use este bloco anexado ao prompt de criação de apresentação acima. Cole os materiais abaixo deste bloco (mantenha intacta a linha "Cole os materiais abaixo disto" do prompt anterior).
6
7### Prioridade
8- O conteúdo (tratamento de números, títulos, lógica, templates, padrões de desenho, validação) segue o prompt de criação de apresentação acima.
9- O formato de saída prioriza este bloco: HTML interativo em arquivo único, 3 páginas (4 se os materiais forem extensos), títulos com no máximo 36 caracteres por linha (sem quebra). Não gere um documento de design separado; substitua-o pela lista de páginas e pela tabela de números (inclua os itens de design exigidos no prompt anterior nestes dois).
10- Faça perguntas apenas uma vez antes de começar, e somente se o objetivo ou o público não estiver claro nos materiais/contexto. Caso contrário, use seu julgamento, anote as premissas e escreva tudo de uma só vez.
11
12### Template de Página (Alinhe o visual ao exemplo abaixo)
13- Páginas 2-3: Gráfico principal à esquerda (60% da largura), painel de evidências à direita (caixa com fundo claro). Estrutura do painel: Um número grande (88-96px) → O que ele representa (1 linha) → Contexto (2-3 linhas) → Alvo de comparação e delta (com fórmula) → "Ver Detalhamento ›"
14- Página 1: Linha superior com 3 números grandes, parte inferior mostrando o fluxo/estrutura geral (o que está acontecendo onde). Posicione cards que levem a páginas específicas ("p.2 ›") dentro do fluxo.
15- Gráficos e números devem preencher o quadro. Sem faixas vazias abaixo do conteúdo.
16- Use todos os números dos materiais (gráficos, painéis, destaques, evidências). Calcule deltas/proporções e mostre as fórmulas. Não invente números que não estejam nos materiais.
17- O assunto principal usa a cor primária, comparações usam tons de gradiente claro, outros ficam em cinza. Um número grande por página.
18- Deixe os elementos clicáveis óbvios: Use "›", "Clique para...", bordas ao passar o mouse, destaque em anel uma vez ao entrar na página. Barras/pontos mostram tooltip com "Valor, Nome, Fonte" ao passar o mouse.
19
20### Uma Interação Por Página (Derivada da Estrutura)
21Adicione exatamente uma operação por página que permita ao leitor validar a conclusão do título. Escolha a operação com base no tipo estrutural do título.
22- Pirâmide (Conclusão/Evidência) → Clique para aprofundar. Painel de evidências à direita (com fonte; inclua em quase todas as páginas).
23- Classificação (Segmentação) → Alterne critérios (visão agregada, métrica, ano) para reordenar todas as barras.
24- Comparação (Diferença) → O estado anterior se transforma no atual, deixando o delta/diferença como linha pontilhada.
25- Causalidade (Causa/Efeito) → Controle deslizante ajusta a condição e recalcula o resultado. Mostre a fórmula na tela.
26- Resolução de Problemas (Lacuna/Solução) → Ative/desative soluções para preencher/deixar lacunas.
27- Sequência (Fluxo/Processo/Tempo) → Montagem sequencial, ator percorre o processo, marcador "Agora" na linha do tempo.
28Não adicione animações sem relação com o título. Animações quantitativas devem ser calculadas a partir dos valores.
29
30### Painel de Evidências (Desliza da direita ao clicar)
31- Largura de 720px. Desliza da direita e escurece o fundo. Feche via X, Esc ou clicando no fundo.
32- Estrutura de cima para baixo: Contexto de localização ("Status Atual > Nome do Item") → Conclusão (1-2 linhas) → Abas (máx. 2, ex.: Detalhamento / Fontes e Premissas) → Gráfico/tabela pequena → Fonte.
33- Coloque aqui os números detalhados que não cabem na página principal. Inclua em quase todas as páginas.
34
35### Apresentação Geral
36- Habilite navegação com zoom da visão geral da Página 1 para páginas específicas. Permita pular das soluções para as páginas de evidência.
37- Teclas: → e Espaço para avançar, ← para voltar, Números para pular, Esc para fechar/voltar, O para visão geral de todas as páginas, D para demonstração automática (o cursor em seta segue o roteiro, termina na visão geral. Marque elementos interativos com nomes data-demo).
38- As páginas se montam em ~3 segundos: Título → Gráfico principal (barras crescem do 0, defasadas em 60ms) → Números → Painel de evidências. Use transições/atrasos CSS; se usar JS, combine requestAnimationFrame com timer de 50ms.
39- Suporte ao parâmetro de URL #static e à configuração "Reduzir Movimento" para mostrar o estado final montado (para páginas interativas, mostre o estado onde a conclusão do título é visível, ex.: todas as soluções ATIVADAS). Também deve ser legível como apresentação estática.
40- Escale o canvas de 1920x1080 para caber na tela. Carregamentos externos limitados ao Google Fonts Noto Sans JP.
41
42### Padrões Mínimos (Apenas se não houver o prompt de criação de apresentação acima)
431. Crie uma tabela de números a partir dos materiais (Item, Valor, Data, Fonte, População). Marque números ausentes como "xx" com observação. Itens sem valores ficam por último no ranking.
442. Uma mensagem por página. Títulos são frases completas combinando fato e conclusão, máx. 36 caracteres/linha. Evite estrutura bipartida "A. B", contagens como "Existem 3..." ou fragmentos terminados em substantivo.
453. Escreva todos os títulos primeiro, verifique o fluxo vertical (Visão Geral→Evidência→Solução) antes de criar os gráficos.
464. Escolha o tipo de gráfico com base na intenção estrutural do título (veja "Uma Interação" acima).
475. Títulos dos gráficos: "O quê, Quando, Unidade". Sem conclusões nos títulos. Inclua a fonte tanto no rodapé da página quanto no painel de evidências.
486. Cores: 1 primária, 3 gradientes claros, cinza. Primária padrão #1976D2. Cor de destaque (Âmbar #D97706) usada apenas uma vez em toda a apresentação. Tamanho mínimo de fonte 18px.
497. Não afirme causalidade a partir de correlação. Rotule estimativas como "Estimativa" com fórmula e premissas na tela.
50
51### Saída
52- HTML: Claude como Artifact, ChatGPT como Canvas (ou um único bloco de código se nenhum dos dois estiver disponível). Escreva tudo de uma só vez. Limite as páginas e consolide componentes em funções para encurtar o código. Se for cortado, continue o mesmo documento quando o usuário pedir "continuar" (não peça colagem manual).
53- A linha 1 indica o método: "Conteúdo = Prompt de Apresentação / Interatividade = Bloco Interativo" ou "Apenas Bloco Interativo (regras simplificadas de conteúdo aplicadas)".
54- Lista de páginas (Título/Estrutura/Operação/Conteúdo do Painel de Evidências), Tabela de Números e Instruções vão FORA DO HTML (no corpo da resposta), de forma breve. Não dentro do HTML.
55- Tamanho total do HTML alvo: ~40KB. Reduza textos se necessário (NÃO reduza gráficos, painéis de evidências ou operações).
56- Termine com 2-3 sugestões de melhoria adicional e peça ao usuário para escolher.
57
58### Verificação Final
59Antes de gerar, revise e corrija: Cada página tem "operação para validar o título" e "painel de evidências com fonte" / Nenhum número inventado / Sem faixas vazias, sobreposições, estouro de layout ou texto <18px / Terminações dos títulos consistentes entre as páginas (nem todas "deveriam...") / Roteiro de demonstração automática não referencia elementos inexistentes.
60
61(O código de uma página de exemplo vem a seguir. Incluir exemplos melhora significativamente a qualidade. A versão completa com código está no note.)