Criador de HTML PPT

O que Criador de HTML PPT faz?

Crie um deck de slides HTML claro e visualmente intencional que abre diretamente em um navegador. Por padrão, produza um único presentation.html autocontido com CSS e JavaScript inline e sem etapa de build.

Fluxo de Trabalho

1. Inspecione o briefing do usuário, texto fonte, dados, ativos da marca e local de saída solicitado.
2. Infira padrões razoáveis para detalhes ausentes. Pergunte apenas quando público, propósito, idioma, número de slides ou direção visual alterem materialmente o resultado e não puderem ser inferidos.
3. Projete uma sequência concisa de slides. Dê a cada slide um objetivo e um título útil; remova repetições antes de codificar.
4. Escolha um sistema visual que se ajuste ao assunto. Defina propriedades personalizadas CSS para cor, tipografia, espaçamento, bordas, sombras e movimento, e use-as de forma consistente.
5. Copie assets/starter.html como base ao começar do zero. Substitua todos os slides de exemplo e tokens de tema em vez de tratar o estilo de exemplo como tema obrigatório.
6. Implemente o deck completo. Use elementos semânticos <section class="slide">, um palco fixo 16:9 que escala à viewport e navegação por teclado/clique/toque.
7. Leia references/QUALITY.md antes da verificação final. Abra o deck em um navegador quando o controle do navegador estiver disponível, inspecione cada slide, corrija defeitos de overflow e interação e, em seguida, entregue o arquivo HTML.

Não introduza um ponto de verificação de planejamento ou exija aprovação capítulo por capítulo, a menos que o usuário solicite um fluxo de trabalho iterativo.

Contrato de Saída

• Produza presentation.html por padrão. Use uma pasta com múltiplos arquivos apenas quando o usuário solicitar ou o deck realmente precisar de ativos locais reutilizáveis ou lógica de aplicação substancial.
• Mantenha o deck padrão utilizável offline: CSS e JavaScript inline; use imagens e fontes locais ou incorporadas. Evite dependências de CDN, a menos que o usuário as aprove.
• Preserve fatos fornecidos, restrições de redação, citações, logotipos e regras da marca. Nunca invente estatísticas ou fontes.
• Inclua um slide de título, um corpo coerente e um slide de encerramento proposital quando apropriado; não force estes elementos quando o formato solicitado disser o contrário.
• Suporte ArrowLeft, ArrowRight, Space, PageUp, PageDown, Home e End; suporte navegação por clique/toque e deslizamentos por toque. Use F para tela cheia.
• Mostre um contador de slides ou indicador de progresso sutil. Mantenha os controles visualmente discretos e seguros para apresentação.
• Adicione CSS de impressão para que cada slide seja impresso como uma página em paisagem e os controles decorativos fiquem ocultos.
• Respeite prefers-reduced-motion. Use movimento com moderação e nunca dependa de animação para revelar informações essenciais.
• Não adicione notas do apresentador, scripts de narração, áudio, reprodução automática, ajudantes de gravação, linhas do tempo de vídeo ou infraestrutura de TTS, a menos que explicitamente solicitado.

Regras de Conteúdo e Visuais

• Faça uma afirmação principal por slide. Prefira de 3 a 6 itens de suporte concisos em vez de parágrafos.
• Use a forma visual certa para a relação: comparação, processo, linha do tempo, hierarquia, métrica, citação, imagem, gráfico ou diagrama.
• Prefira conteúdo real, SVG simples, diagramas CSS e gráficos significativos em vez de preenchimento decorativo.
• Mantenha hierarquia forte e espaçamento generoso. Projete para visualização à distância, não para leitura de documentos.
• Mantenha um tema coerente em todo o deck, permitindo variedade de layout. Evite que cada slide seja a mesma grade de cartões arredondados.
• Evite estilos genéricos de IA: gradientes roxos gratuitos, brilho excessivo, painéis de vidro aleatórios, decoração com emoji, cromados falsos de aplicativos e gráficos ornamentais sem dados.
• Garanta contraste de texto, estados de foco visíveis, texto alternativo útil e uma ordem de leitura DOM sensata.
• Se o conteúdo não couber, encurte-o ou divida o slide. Não reduza o tamanho do texto do corpo até que tecnicamente caiba.

Editando Decks Existentes

Preserve a arquitetura atual e a linguagem de design, a menos que o usuário solicite um redesenho. Faça a menor mudança coerente e, em seguida, verifique novamente navegação, numeração de slides, overflow, layout de impressão e dimensionamento responsivo.

Verificação de Conclusão

Antes de relatar a conclusão:

1. Verifique as mensagens, números, citações e ordem de slides solicitados.
2. Teste os limites do primeiro/último slide e cada método de navegação.
3. Inspecione todos os slides no tamanho desktop 16:9 e em pelo menos uma viewport menor.
4. Verifique se há texto cortado, colisões, tipo pequeno, mídia quebrada, erros de console e rolagem acidental.
5. Confirme que o arquivo abre sem etapa de build e permanece utilizável offline, a menos que dependências externas tenham sido aprovadas.
6. Corrija todas as falhas antes de entregar o resultado.