Tipo
Tipografia Global
Fonte titular
Fonte corpo
Títulos
Corpo
Aqui você cria apresentações completas no visual da Mentoria Do Diagnóstico ao Resultado — com as suas fontes, as suas cores e o seu vocabulário clínico. Sem depender de designer, sem precisar do PowerPoint para montar do zero.
Funciona 100% no navegador, sem internet, sem instalação. O arquivo gerador-slides-kelis.html já carrega tudo que você precisa.
Clique em + Novo na barra de ferramentas e escolha como quer criar sua apresentação. Se quiser criar tudo de uma vez, vá direto para a seção "Fluxo com IA" neste manual.
A tela do gerador é dividida em três colunas. Cada uma tem uma função específica.
| Painel | Onde fica | Para que serve |
|---|---|---|
| Config | Esquerda | Editar o conteúdo e visual do slide selecionado |
| Preview | Centro | Ver o slide em tempo real, exatamente como vai sair no PowerPoint |
| Slides | Direita | Lista de todos os slides — clicar seleciona, arrastar reordena |
| Botão | O que faz |
|---|---|
| 📚 Histórico | Abre o histórico de versões salvas |
| + Novo | Começa uma nova apresentação do zero |
| Campo de título | Nome da apresentação (aparece no arquivo exportado) |
| ⌨ Preencher em lote | Cria ou preenche slides a partir de texto formatado |
| ✓ Salvo | Indicador de salvamento automático (pisca após cada alteração) |
| ↓ Exportar PPTX | Gera e baixa o arquivo PowerPoint |
| ? Ajuda | Abre este manual |
Sempre mostra as opções do slide que está selecionado. Está organizado em seções — role para baixo para ver todas.
| Seção | O que contém |
|---|---|
| Seletor de tipo | Topo do painel — muda o modelo do slide |
| Tipografia Global | Fonte e tamanho para toda a apresentação |
| Cor de fundo | Chips de cor da marca + seletor livre |
| Foto de fundo | Foto opcional que fica por baixo do conteúdo |
| Cores do texto | Eyebrow, título e corpo — cada um tem seu picker |
| Campos de conteúdo | O texto que aparece escrito no slide |
| Posição da imagem | Aparece quando o slide tem foto no layout |
| Extras | Imagens ou ícones adicionais por slide |
Clique em + Novo na barra de ferramentas. Um modal aparece com duas opções.
A tela fica vazia. Use quando quiser montar slide a slide, com controle total.
Você escreve o conteúdo em texto livre. A IA formata. O gerador cria todos os slides de uma vez. Veja a seção Fluxo com IA para o passo a passo completo.
Ao clicar em "🤖 Criar via IA", o modal de Preencher em Lote já abre com a seção de IA expandida e o toggle "Criar slides automaticamente" marcado.
Ela lê o seu conteúdo e decide qual tipo de slide é mais adequado para cada bloco. Um texto com vários pontos vira um slide de Conteúdo. Uma frase de impacto vira Citação. Uma lista numerada vira Lista Numerada. Ela também formata os campos no padrão exato do gerador.
Após criar os slides, revise cada um. A IA acerta na maioria, mas alguns ajustes manuais podem ser necessários — especialmente para o tipo de slide escolhido.
O modal de Preencher em Lote aceita conteúdo já estruturado no formato SLIDE N / tipo: / campo: valor. É o resultado que a IA devolve depois que você usa o fluxo descrito na seção anterior.
Este toggle controla o comportamento do botão Preencher slides:
| Estado | O que acontece |
|---|---|
| ✅ Marcado | Lê o campo tipo: de cada bloco e cria os slides do tipo correto. Apaga os slides anteriores. |
| ☐ Desmarcado | Não cria slides novos. Preenche os campos dos slides já existentes em ordem. Use quando quiser atualizar uma apresentação sem perder a estrutura. |
Cada bloco começa com SLIDE N e o campo tipo: obrigatório:
| Tipo | Para que serve |
|---|---|
| Capa | Slide de abertura. Título em duas linhas, subtítulo, autor, foto à direita. |
| Apresentadora | Quem é Kelis. Nome em destaque, bio, citação, foto. |
| Capítulo | Divisor entre módulos. Fundo vinho escuro, número grande. |
| Encerramento | Último slide. Citação final, assinatura, site. |
| Tipo | Para que serve |
|---|---|
| Conteúdo | O slide mais usado. Título + bullets. Versão clara ou escura. |
| Duas Colunas | Dois pontos lado a lado — comparar, contrastar ou desenvolver. |
| Lista Numerada | Itens com número à esquerda. Formato: 01 | texto do item. |
| Imagem + Texto | Foto com texto ao lado. Posição configurável. |
| Cards | Até 4 cards com legenda, título e corpo. |
| Checklist | Lista com marcadores de verificação dourados. Fundo claro ou escuro. |
| Tipo | Para que serve |
|---|---|
| Citação | Frase de impacto em duas linhas — a segunda em itálico dourado. |
| Estatísticas | Três números grandes. Ideal para resultados da mentoria. |
| Timeline | Linha do tempo com até 4 etapas numeradas. |
| Módulos | Grade com até 6 módulos numerados — visão geral do conteúdo programático. |
| Comparativo | Tabela Antes × Depois. Formato: antes | depois por linha. |
| Depoimento | Fala de mentorada com nome, cargo e foto à direita. |
| Fullbleed | Foto em tela cheia com texto sobreposto. Máximo impacto visual. |
| Campo | O que é | Exemplo |
|---|---|---|
| Legenda (eyebrow) | Texto pequeno em caixa alta no topo | MENTORIA · 3 MESES |
| Título | Título principal em Cormorant grande | A pele como sistema. |
| Pontos / Itens | Um item por linha — bullets automáticos | Ponto 1↵Ponto 2 |
| Texto | Parágrafo de corpo | O resultado não é sorte. |
No campo Pontos, escreva um item por linha. O slide coloca os marcadores automaticamente — você não precisa digitar •.
Alguns tipos de slide têm uma foto integrada ao layout — ela ocupa uma metade do slide ou preenche todo o fundo. São eles: Capa, Apresentadora, Imagem+Texto, Depoimento, Fullbleed.
A Foto de fundo funciona em todos os tipos de slide — inclusive nos que não têm foto no layout. Ela aparece por baixo do conteúdo.
Veja a seção Foto de fundo neste manual para os controles detalhados.
O batch fill (preencher em lote) é apenas para texto. As fotos precisam ser adicionadas manualmente em cada slide após o preenchimento.
A seção "Cor de fundo" fica logo abaixo do seletor de tipo em todos os slides.
Passe o mouse sobre cada chip para ver o nome. O número no canto mostra quantos slides já usam aquela cor. Clique para aplicar.
Abaixo dos chips há um seletor de cor livre. Clique no quadradinho para abrir o seletor nativo do sistema. Ou digite o código hex diretamente no campo de texto.
O botão ↺ ao lado volta à cor padrão do tipo de slide.
A Foto de fundo coloca uma imagem por baixo do conteúdo do slide — em qualquer tipo, inclusive nos que não têm foto integrada. A cor de fundo funciona como um overlay por cima da foto.
| Controle | O que faz | Referência |
|---|---|---|
| Posição H ←→ | Move a foto horizontalmente | 0% = esquerda · 50% = centro · 100% = direita |
| Posição V ↕ | Move a foto verticalmente | 0% = topo · 50% = centro · 100% = base |
| Zoom | Amplia ou reduz a foto | 100% = padrão · acima = recorta mais · abaixo = mostra mais |
| Overlay | Opacidade da cor sobre a foto | 0% = foto pura · 80% = quase só cor · 65% = equilíbrio |
Adicione uma foto de fundo e ajuste o Overlay para 60-70%. A foto fica visível por baixo do fundo vinho escuro, criando profundidade sem perder a legibilidade do texto.
Com a foto adicionada, você pode clicar e arrastar diretamente sobre ela no preview para reposicionar. Os sliders atualizam em tempo real.
A seção "Cores do texto" tem três pickers independentes.
| Picker | O que controla | Cor padrão |
|---|---|---|
| Eyebrow | A legenda em caixa alta no topo do slide | Mauve (#A79895) |
| Título | Todos os títulos: h1, h2, h3 | Texto (#2C1F1E) |
| Corpo | Bullets, parágrafos, subtítulos, depoimentos | Texto Suave (#5A3F3E) |
Clique no quadradinho de cor à esquerda de cada picker — abre o seletor nativo. Ou edite o código hex diretamente no campo de texto ao lado.
O botão ↺ fica ativo quando há um override — clique para voltar à cor padrão do tipo.
Os slides de fundo escuro (Capítulo, Estatísticas, Conteúdo escuro) já têm cores claras por padrão. Use os pickers quando quiser personalizar além do padrão — por exemplo, eyebrow dourado em um slide claro.
O painel "Tipografia Global" fica fixo no topo da coluna de config. Qualquer mudança aplica em todos os slides instantaneamente.
| Controle | O que faz |
|---|---|
| Fonte titular | Fonte dos títulos, h1, h2, citações. Padrão: Cormorant Garamond |
| Fonte corpo | Fonte do texto de conteúdo, legendas, bullets. Padrão: DM Sans |
| Slider Títulos | Escala global dos títulos. 100% = padrão da marca |
| Slider Corpo | Escala global dos textos de conteúdo |
Mantenha Cormorant Garamond + DM Sans — são as fontes oficiais da sua marca. Só mude se for para uma apresentação com contexto visual diferente.
A seção "Extras" fica no final do painel de config e funciona em qualquer tipo de slide. Use para adicionar ícones, logos, ilustrações ou qualquer imagem extra.
Prefira PNG com fundo transparente para ícones e elementos gráficos. Para fotos, JPG funciona bem. O slider de tamanho vai de 40px até 600px no canvas.
| Ação | Como fazer |
|---|---|
| Adicionar slide | Clique no + no topo da lista de slides. Escolha o tipo no modal. |
| Selecionar slide | Clique em qualquer slide na lista da direita. |
| Reordenar | Clique, segure e arraste o slide para a posição desejada na lista. |
| Excluir | Passe o mouse sobre o slide na lista — aparece o botão ×. Clique. |
| Navegar entre slides | Clique nas setas ‹ › abaixo do preview. |
| Ver número total | Contador "X / Y" abaixo do preview. |
Não há "ctrl+z" para exclusão de slide. Se excluir por engano, acesse o Histórico e carregue uma versão recente.
O gerador salva automaticamente a cada alteração. Quando você reabrir o arquivo, a última sessão é restaurada. O indicador "✓ Salvo" pisca discretamente no header.
Para guardar no Google Drive, fazer backup ou transferir para outro computador, use o Exportar JSON no modal de Histórico. O arquivo baixa no seu computador e pode ser reaberto pelo Importar JSON.
Ao terminar uma sessão de trabalho importante: (1) salve uma versão nomeada no Histórico, (2) exporte o JSON para o Google Drive. São 30 segundos que evitam perder horas de trabalho.
| Recurso | Onde guardar | Limite |
|---|---|---|
| Salvamento automático | Neste navegador / computador | 1 sessão ativa |
| Histórico | Neste navegador / computador | 30 versões |
| Exportar JSON | Onde você quiser (Drive, HD) | Sem limite |
O gerador captura cada slide como imagem de alta qualidade e os insere no arquivo PowerPoint. O resultado é pixel-perfect — mesmas fontes, mesmas cores, mesmas fotos que você vê no preview.
| Qtd de slides | Tempo aproximado |
|---|---|
| 10 slides | ~20-30 segundos |
| 20 slides | ~40-60 segundos |
| 35 slides | ~60-90 segundos |
Isso garante fidelidade total ao visual. Se precisar editar o texto depois, faça no gerador e exporte novamente. É mais rápido do que editar no PowerPoint.
Reabra o arquivo — ele restaura automaticamente a última sessão salva. Se não restaurou, acesse o Histórico e abra a versão mais recente. Para evitar isso, exporte JSON ao final de cada sessão.
Sim. Leve o arquivo JSON exportado e o arquivo .html do gerador. No outro computador, abra o gerador e importe o JSON pelo 📚 Histórico → ↑ Importar JSON.
Os slides são exportados como imagem — a fonte é idêntica ao preview. Se parecer diferente, é o zoom do PowerPoint distorcendo. Apresente em modo de apresentação (F5) para ver corretamente.
A foto precisa estar carregada antes da exportação. Confirme que ela aparece no preview e exporte novamente.
Ao trocar o tipo, os campos são redefinidos — tipos diferentes têm estruturas diferentes. Decida o tipo antes de digitar. Se trocou por engano, verifique o Histórico.
Certifique-se de estar com internet na primeira vez que abre o arquivo (para carregar as bibliotecas). Após isso, funciona offline. Se persistir, feche e reabra o navegador.
O gerador é um único arquivo HTML. Você pode usá-lo de dois jeitos: abrir diretamente no computador (sem internet) ou acessar pelo site hospedado no Hostinger (com internet). Os slides são os mesmos — a diferença está em onde você acessa e o que precisa para funcionar.
| Item | 📁 Arquivo local | 🌐 Hostinger |
|---|---|---|
| Precisa de internet? | ❌ Não — funciona 100% offline | ✅ Sim — sempre |
| URL de acesso | Caminho da pasta no PC G:\Meu Drive\...\gerador.html | Link limpo slides.keliscostacosmetologa.com.br |
| Fontes (Cormorant, DM Sans) | Carrega do Google na 1ª vez, depois fica em cache | Carrega do Google toda vez |
| Exportar PPTX | Funciona offline (após 1º carregamento) | Precisa de internet |
| Histórico salvo | Fica neste computador | Fica no navegador que acessou |
| Compartilhar o link | Não é possível — é um arquivo local | Sim — qualquer pessoa com o link acessa |
| Acessar de outro dispositivo | Precisa copiar o arquivo | Qualquer celular, tablet ou PC |
Ideal para trabalhar sem depender de conexão — no avião, no consultório, onde quiser.
Gerador de Slides / output no seu Google Drive ou HD.Salve o arquivo em uma pasta sincronizada com o Google Drive ou OneDrive. Assim ele fica acessível de qualquer computador — só não esqueça de exportar o JSON das apresentações também, porque o histórico não sincroniza automaticamente.
Ideal quando quiser acessar de qualquer lugar ou compartilhar o link com alguém. A Kelis já tem hospedagem ativa na Hostinger — o processo abaixo cria o endereço slides.keliscostacosmetologa.com.br.
slides no campo. O domínio principal aparece preenchido automaticamente. Confirme.index.html. Esse nome faz o arquivo abrir automaticamente quando alguém acessa o endereço.Quando você acessa pelo Hostinger, o gerador precisa de internet ativa o tempo todo — não só para abrir, mas para:
| Recurso | Por que precisa de internet |
|---|---|
| Fontes (Cormorant + DM Sans) | Carregadas do Google Fonts a cada acesso |
| Exportar PPTX | Biblioteca pptxgenjs carregada do CDN |
| Captura dos slides (html2canvas) | Biblioteca html2canvas carregada do CDN |
O PPTX pode falhar no meio do processo. Aguarde a conexão se estabilizar e tente novamente. Os slides não são perdidos — apenas a exportação precisa ser refeita.
O histórico salvo no arquivo local e o salvo pelo Hostinger são separados — cada um tem seu próprio armazenamento. Para levar uma apresentação de um para o outro:
Crie localmente (mais rápido, sem depender de internet) → exporte o JSON → importe no Hostinger para ter o link limpo para compartilhar ou apresentar de outro dispositivo.
Quando a Gisele enviar uma versão nova do gerador (com melhorias ou novos tipos de slide), repita o upload:
Este gerador foi construído especificamente para a sua marca e o seu vocabulário clínico. Quando tiver dúvidas ou precisar de novos tipos de slide, fale com a Gisele — a ferramenta evolui com a sua mentoria.