Slide Deck Gráfico
Gere um slide deck HTML profissional a partir de um resumo, notas de conteúdo ou um arquivo existente. A saída é um único arquivo HTML auto-contido — abre em qualquer navegador, sem ferramentas de build.
Regras críticas — não negociáveis:
- Cada slide DEVE caber em 100vh. Sem rolagem dentro dos slides. Se o conteúdo transbordar → divida em dois slides.
- TODOS os tamanhos de fonte e espaçamento DEVEM usar
clamp(). Nunca px/rem fixos em elementos que escalam. - HTML auto-contido único: todo CSS/JS inline. Zero dependências externas, exceto link CDN de fontes.
- Nunca despeje HTML no chat. Salve em arquivo, mostre apenas o resumo.
- Sem estética genérica de IA — verifique a lista 'NÃO USAR' em
references/style-presets.md.
Passo 1: Coleta de Resumo
Preciso de três coisas para começar. Se todas as três estiverem presentes na mensagem: pule para o Passo 2.
Se alguma estiver faltando, pergunte exatamente:
"Para começar, preciso de três coisas:
- Propósito — para que serve este deck? (pitch de investidor / chamada de vendas / palestra / apresentação interna / onboarding / outro)
- Público — quem o verá? (VCs, prospects, sua equipe, executivos, sala de conferência, LinkedIn)
- Tópico ou conteúdo — cole notas, uma URL, uma breve descrição ou faça upload de um arquivo"
Aguarde os três antes de continuar.
Passo 2: Coleta Completa
Faça todas as perguntas em uma mensagem, agrupadas por categoria. O usuário pode pular qualquer uma — os padrões se aplicam.
"Algumas perguntas antes de começar:
Conteúdo
- Mensagem-chave — uma única frase que o público deve lembrar ao sair
- Quantidade de slides — Curta (5-10) / Média (10-20) / Longa (20+)?
- Fonte do conteúdo — Conteúdo totalmente pronto / Notas brutas (estruturarei) / Apenas tópico (redigirei)?
- Recursos existentes — Alguma imagem, captura de tela ou logotipo para incluir? (sim + caminhos / não)
Design 5. Estilo — midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "mostrar opções" 6. Proporção — 16:9 (1920×1080, padrão) / 1:1 (1080×1080, LinkedIn) 7. Edição inline — o texto deve ser editável no navegador após exportação? (Sim / Não)
Saída 8. Formato de saída — Apenas HTML / HTML + PDF / HTML + PDF + implantar em URL 9. Nome do deck — slug para nomeação de arquivo/pasta (ex.: "q2-investor-pitch"); derivarei se for pulado"
Padrões se pulados:
| Pergunta | Padrão |
|---|---|
| Mensagem-chave | derivada do propósito + tópico |
| Quantidade de slides | 12 |
| Fonte do conteúdo | apenas tópico |
| Recursos existentes | nenhum |
| Estilo | clean-slate |
| Proporção | 16:9 |
| Edição inline | Não |
| Formato de saída | HTML + PDF |
| Nome do deck | derivado do slug do tópico |
Se estilo = "mostrar opções":
Gere 3 pré-visualizações HTML de slide único (uma para cada 3 presets de estilo diferentes que se encaixem no propósito do deck). Salve em .claude-design/previews/style-a.html, style-b.html, style-c.html. Abra cada: open .claude-design/previews/style-a.html etc. Peça ao usuário para escolher antes do Passo 3.
Passo 2.5: Direção de Design Interna (não mostrada ao usuário)
Das respostas do Passo 2, determine antes do Passo 3:
Caráter visual (derivado do estilo, ou inferido se não especificado):
- midnight-editorial ou magazine-red →
dark-editorial - clean-slate ou product-minimal →
light-minimal - matt-gray →
neutral-professional - brutalist →
bold-expressive - mint-pixel-corporate ou soft-cloud →
fresh-corporate - Estilo não especificado: pitch de investidor → midnight-editorial; vendas → clean-slate; palestra → brutalist ou midnight-editorial; interno → matt-gray
UM slide inesquecível — identifique antes do Passo 3:
- Pitch de investidor → destaque-de-estatística (slide de tração/métricas)
- Deck de vendas → destaque-de-estatística (slide de ROI/resultados)
- Palestra → citação-em-destaque ou destaque-de-estatística (insight-chave)
- Apresentação interna → CTA-de-encerramento (slide de decisão/recomendação)
Viés de seleção de layout — anote os 2-3 layouts mais relevantes para este tipo de deck para priorizar no Passo 3.
Nunca pergunte ao usuário por direção de design — derive-a inteiramente de suas respostas.
Passo 3: Estrutura do Design
Leia references/layout-library.md antes de planejar.
Planeje a sequência completa de slides. Atribua um tipo de layout dos 13 em references/layout-library.md para cada slide.
Tipo de deck → estrutura típica:
Pitch de investidor (12 slides):
- [titulo-heroi] Empresa + slogan
- [divisor-de-secao] O Problema
- [texto-completo] Detalhe do problema
- [texto-esquerda-imagem-direita] Visão geral da solução
- [imagem-completa] Captura de tela do produto
- [destaque-de-estatistica] Tração — slide inesquecível
- [tabela-comparativa] vs. concorrentes
- [linha-do-tempo] Roadmap
- [texto-completo] Equipe
- [destaque-de-estatistica] Tamanho do mercado
- [texto-esquerda-imagem-direita] Modelo de negócio
- [CTA-de-encerramento] A solicitação
Deck de vendas (8-10 slides):
- [titulo-heroi]
- [citacao-em-destaque] Ponto de dor do prospect
- [texto-esquerda-imagem-direita] Solução
- [grade-de-imagens] Capturas de tela do produto
- [destaque-de-estatistica] ROI/resultados — inesquecível
- [tabela-comparativa] vs. alternativas
- [texto-completo] Implementação / próximos passos
- [CTA-de-encerramento]
Palestra (15-20 slides): titulo-heroi → divisores-de-secao → slides de texto-completo → imagem-completa → destaque-de-estatistica ou citacao-em-destaque (inesquecível) → linha-do-tempo → CTA-de-encerramento
Apresentação interna (8-12 slides): titulo-heroi → texto-completo (contexto) → destaque-de-estatistica (estado atual) → texto-duas-colunas (opções) → tabela-comparativa → texto-completo (recomendação) → CTA-de-encerramento (a decisão — inesquecível)
Saída da estrutura proposta como uma lista numerada com [tipo-de-layout] entre colchetes. Exemplo:
Estrutura proposta (12 slides, estilo midnight-editorial):
1. [titulo-heroi] DataPulse — Decisões de receita em 5 minutos
2. [divisor-de-secao] O Problema
...
12. [CTA-de-encerramento] A solicitação + [email protected]
Essa estrutura funciona, ou devo ajustar algum slide?
Aguarde confirmação antes do Passo 4.
Passo 4: Rascunho de Conteúdo
Escreva o texto de cada slide em sequência. Apenas texto simples — ainda sem HTML.
Regras de texto por layout:
titulo-heroi: manchete (máx. 6 palavras) + subtítulo (1 frase) + texto opcional de selodivisor-de-secao: apenas rótulo de seção de 2 a 4 palavrastexto-completo: título (máx. 5 palavras) + 4 a 6 tópicos OU 2 parágrafos (nunca ambos no mesmo slide)texto-esquerda-imagem-direita/imagem-esquerda-texto-direita: título + 3 a 4 tópicos +[IMAGEM: descrição]texto-duas-colunas: 2 títulos de coluna + máx. 3 tópicos cadaimagem-completa:[IMAGEM: descrição]+ legenda opcional (máx. 10 palavras)grade-de-imagens: até 6 placeholders[IMAGEM: descrição]com legendas curtasdestaque-de-estatistica: 2 a 4 métricas escritas comoNÚMERO | rótulo(ex.:3× | fechamento mais rápido). ZERO texto corrido.citacao-em-destaque: citação (máx. 30 palavras) + atribuição (nome, cargo)tabela-comparativa: cabeçalhos de coluna (máx. 3) + 4 a 6 rótulos de linha + conteúdo da célula (1 a 3 palavras cada)linha-do-tempo: 3 a 6 marcos (rótulo + data + descrição de 1 linha)CTA-de-encerramento: manchete (máx. 5 palavras) + texto da ação de CTA + informações de contato (e-mail + URL — ambos obrigatórios)
Palavras proibidas (em todo texto, sem exceções): "poderoso", "perfeito", "revolucionário", "alavancar", "inovador", "revolucionário", "transformar", "de ponta", "robusto", "desbloquear", "escalável" (como adjetivo genérico).
Filosofia de texto: Fragmentos são aceitáveis. Números superam adjetivos. Cada palavra merece seu lugar.
Passo 5: Geração de HTML
Leia TUDO antes de gerar qualquer HTML:
Referências desta skill:
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.md
Referências cruzadas do frontend-slides (leia estes arquivos exatos):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css— inclua o conteúdo COMPLETO literalmente dentro do bloco<style>/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md— classe SlidePresentation, navegação por teclado, sistema de edição inline/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md— animações de entrada, efeitos de fundo, efeitos interativos
Regras de geração:
- HTML auto-contido único. Todo CSS e JS inline. O link CDN de fontes é a única referência externa.
- Inclua o conteúdo COMPLETO literalmente de
viewport-base.cssdentro do bloco<style>— não parafraseie ou encurte. - Fontes apenas do Google Fonts ou Fontshare. As escolhas de fontes vêm do preset escolhido em
references/style-presets.md. - Use a classe SlidePresentation de
html-template.md. Implemente navegação completa por teclado (setas, espaço, page up/down), toque/deslize, barra de progresso e pontos de navegação.navDotsContainer.innerHTML = ""antes de construir os pontos de navegação — nunca pule isso. - Se a edição inline foi optada: implemente o sistema completo de edição inline de
html-template.md, incluindoexportFile(). A funçãoexportFile()DEVE removercontenteditable,body.edit-activee as classes.active/.showantes de capturarouterHTML. - Proporção:
- 16:9 (padrão): slides têm
width: 100vw; height: 100vh - 1:1 (LinkedIn): adicione a propriedade personalizada CSS
--slide-height: min(100vh, 100vw)e use-a em.slide
- 16:9 (padrão): slides têm
- Cada seção de slide DEVE usar
class="slide"— obrigatório para a detecção de slides do export-pdf.sh. - Adicione um comentário antes de cada slide:
/* === SLIDE N: TIPO-DE-LAYOUT === */ - Aplique o slide inesquecível do Passo 2.5 com peso visual máximo — maior tipografia, mais animação, o elemento característico do preset de estilo em intensidade total. Todos os outros slides são composicionalmente mais silenciosos.
- Nenhuma imagem fornecida → use visuais gerados por CSS (malhas de gradiente, formas geométricas, padrões de grade de
animation-patterns.md). Este é um caminho de primeira classe, não um fallback.
Disciplina tipográfica:
- Números de estatística:
clamp(3.5rem, 12vw, 9rem)— uma métrica que preenche um terço do slide parece autoritária - Manchete do herói:
clamp(2.5rem, 8vw, 6rem)no mínimo. Nunca reduza o tamanho por segurança. - Nunca use px/rem fixos em qualquer elemento que o usuário verá. Use clamp em tudo.
Pegadinha de CSS do viewport-base.css: Nunca escreva -clamp(), -min(), -max() diretamente no CSS. Embrulhe em calc(-1 * clamp(...)).
Passo 6: Auto-QA
Verifique cada item. Corrija cada falha — não pule.
Viewport e renderização:
- Cada
.slidetemheight:100vh; height:100dvh; overflow:hidden - TODOS os tamanhos de fonte e espaçamento usam
clamp()— sem px fixos em elementos de escala - Nenhum slide transborda no viewport de 1280×720 (verifique os limites de densidade de
layout-library.md) - Imagens usam
max-height: min(50vh, 400px) - Breakpoints para alturas de viewport de 700px, 600px, 500px presentes (de viewport-base.css)
- Media query
prefers-reduced-motionpresente - Nenhum
-clamp(),-min(),-max()no CSS — embrulhado emcalc(-1 * ...)se necessário negativo
Estrutura:
- Contagem de slides corresponde ao plano do Passo 3
- Cada slide usa
class="slide" - Cada tipo de layout implementado corretamente por
references/layout-library.md - Classe SlidePresentation presente com navegação por teclado, toque, barra de progresso, pontos de navegação
-
navDotsContainer.innerHTML = ""antes de construir os pontos de navegação - Se a edição inline foi optada:
exportFile()remove o estado de edição antes de capturarouterHTML
Qualidade do design:
- Um slide inesquecível visualmente dominante — não enterrado entre slides de peso igual
- Hierarquia tipográfica clara: exibição >> título >> corpo (proporção de tamanho de pelo menos 2:1 entre níveis)
- Tokens do preset de estilo aplicados consistentemente (cores, fontes de
references/style-presets.md) - Nenhum padrão de má qualidade (verifique a lista NÃO USAR em
references/style-presets.md)
Conteúdo:
- Nenhuma palavra proibida em nenhum texto de slide
- Manchete de titulo-heroi tem 6 palavras ou menos
- destaque-de-estatistica tem ZERO texto corrido competindo com os números
- CTA-de-encerramento tem ação específica + informações de contato (não apenas "Obrigado")
Se alguma verificação falhar: corrija inline e execute novamente a lista mentalmente antes de prosseguir.
Passo 7: Saída
Salve o HTML principal primeiro:
mkdir -p deck/[nome]-slides
Escreva em: deck/[nome]-slides/index.html
Abra: open deck/[nome]-slides/index.html
Arquivos HTML por slide (sempre gere estes):
Extraia cada <section class="slide"> do HTML principal. Para cada um, crie um arquivo autônomo com:
- O bloco
<style>completo do HTML principal (copiado literalmente) - A
<section class="slide">individual embrulhada em um shell HTML mínimo - Nenhum JS de SlidePresentation (visualização estática por slide, sem navegação necessária)
Escreva em: deck/[nome]-slides/slide-001.html, slide-002.html, etc. (preenchidos com zeros até 3 dígitos).
Se PDF for solicitado:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
deck/[nome]-slides/index.html \
deck/[nome].pdf
Nota: a primeira execução instala Playwright automaticamente (~30-60 segundos). Informe o usuário.
Se deploy for solicitado:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
deck/[nome]-slides/
Limpeza: Delete .claude-design/previews/ se arquivos de pré-visualização de estilo foram gerados no Passo 2.
Passo 8: Resumo (sem HTML no chat)
Apresente no chat:
## Slide Deck: [nome do deck]
Data: [hoje] | Estilo: [estilo] | Slides: [N] | Proporção: [16:9 ou 1:1]
Propósito: [propósito] | Público: [público]
---
### Arquivos
Principal: deck/[nome]-slides/index.html
Por slide: deck/[nome]-slides/slide-001.html → slide-0NN.html
PDF: deck/[nome].pdf [se gerado]
URL ao vivo: [url] [se implantado]
---
### Navegação
Teclas de seta / Espaço / Page Up/Down — avançar slides
Clique nos pontos de navegação — pule para qualquer slide
Toque / deslize — funciona em dispositivos móveis
---
### Personalizar
Edite as variáveis CSS em :root no topo do arquivo para alterar cores
Troque a URL de fonte @import para mudar a tipografia
Remova a classe .reveal de elementos para desabilitar animações de entrada
---
### Checklist do Deck
- [ ] Substitua placeholders [IMAGEM: descrição] por imagens reais
- [ ] Verifique se a métrica/citação no slide [N] está precisa (o slide inesquecível)
- [ ] Teste no tamanho de tela alvo ([1920×1080 ou 1080×1080])
- [ ] Se apresentar ao vivo: teste a navegação por teclado em tela cheia
[truncado para tradução]