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 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 desta" 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 pela lista de páginas e pelo livro-razão de números (inclua os itens de design exigidos do 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 vez.
11
12### Template de Página (Alinhe o visual ao exemplo abaixo)
13- Páginas 2-3: Gráfico principal no lado esquerdo (60% da largura), painel de evidências no lado direito (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 com links para 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 o julgamento 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, 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) → Monte sequencialmente, o ator percorre o processo, marcador "Agora" na linha do tempo.
28Não adicione animações não relacionadas ao 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, 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") → Julgamento (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ências.
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 (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, escalonadas em 60ms) → Números → Painel de evidências. Use transições/delays 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 o julgamento 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 um livro-razão 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 julgamento, 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 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 de gráficos: "O quê, Quando, Unidade". Sem julgamentos 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 bloco de código único se nenhum dos dois). Escreva tudo de uma 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 para "continuar" (não peça colagem manual).
53- A linha 1 declara 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), Livro-Razão 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 alvo do HTML ~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 melhorias adicionais e peça ao usuário para escolher.
57
58### Verificação Final
59Antes de gerar, revise e corrija: Toda 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 ou texto <18px / Terminações dos títulos consistentes entre páginas (nem todas "deveria...") / 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.)