Claude HTML Slides: A Skill que Substituiu Canva, Gamma e PowerPoint

Última atualização: 29 de abril de 2026

Canva custa R$55/mês. Gamma custa R$96/mês. PowerPoint vem dentro do pacote Office que ninguém pediu para ter. Os três exigem arrastar elemento por elemento, ajustar cor manualmente e exportar em formatos que perdem qualidade.

Existe uma alternativa que não custa nada, gera apresentações com animações suaves, design system aplicado automaticamente e código que você pode versionar no Git. É uma skill do Claude Code — e depois que você configura uma vez, nunca mais precisa de ferramenta externa para criar slides.

A lógica é simples: HTML + CSS + JavaScript fazem tudo que qualquer ferramenta de apresentação faz — com a vantagem de que você controla 100% do código, pode reutilizar componentes e o output é um arquivo leve que abre em qualquer browser sem instalar nada.

---

Por que parar de usar Canva e Gamma

O problema com Canva, Gamma e PowerPoint não é que sejam ruins. É que cada um cobra uma assinatura separada para funcionalidades que se sobrepõem, e todos têm o mesmo gargalo: você gasta mais tempo ajustando do que criando.

Ferramenta	Custo	Limitação principal
Canva Pro	R$55/mês	Arrastar elemento, exportar, perder qualidade
Gamma	R$96/mês	IA gera mas você ainda ajusta layout manualmente
PowerPoint	R$40/mês	Formato .pptx quebra em qualquer outro sistema
Claude HTML Slides	R$0	Nenhuma — output é HTML puro

Com a skill calibrada no Claude Code, você descreve o conteúdo e o estilo em linguagem natural. O Claude gera o HTML completo com animações CSS, tipografia consistente, paleta de cores da sua marca e transições entre slides.

---

Como a skill de HTML Slides funciona

Passo 1 — Configurar o design system da sua marca

Antes de gerar qualquer slide, você passa para o Claude as cores, fontes e espaçamentos da sua identidade visual. Isso vai para o CLAUDE.md do projeto — o Claude usa essas regras em toda apresentação que criar a partir daí.

Exemplo de instrução:

Minha marca usa fundo #0B0B0B, cor primária #F1500B, fonte Space Grotesk para títulos e Inter para corpo. Slides em proporção 16:9, padding 48px, máximo 6 linhas por slide.

Passo 2 — Descrever a apresentação em linguagem natural

Com o design system configurado, você descreve o que quer:

Crie uma apresentação de 8 slides sobre os 3 maiores erros que infoprodutores cometem no funil. Slide 1 é capa com número impactante, slides 2-6 são os erros com explicação + exemplo, slide 7 é resumo visual, slide 8 é CTA para o produto X.

O Claude entrega o HTML completo — você abre no browser e está pronto.

Passo 3 — Iterar com prompts cirúrgicos

Qualquer ajuste é feito em linguagem natural:

• "Aumenta o tamanho do número na capa para 120px"
• "Adiciona animação de fade-in nos bullet points"
• "Troca o slide 4 por um comparativo de antes/depois em duas colunas"

Sem arrastar, sem menus, sem exportar. O arquivo atualiza no browser na hora.

---

O que você consegue criar com HTML Slides

A skill cobre todos os formatos que um infoprodutor usa no dia a dia:

Apresentações de vendas — deck de pitch, webinar, aula ao vivo com tela cheia no segundo monitor

Carrosseis para Instagram — slides 4:5 em HTML que você captura via screenshot ou Puppeteer

Material de curso — módulos completos com numeração, progress bar e design consistente

Apresentações internas — relatórios, reuniões de time, briefings de campanha

Todos usando o mesmo design system, sem custo adicional por ferramenta.

---

Leia também

• Caveman: A Skill que Reduz 70% dos Tokens do Claude Code
• Claude Code do Zero: o Sistema que Vira Seu Sócio Executor
• Como Usar Claude Code de Graça com OpenRouter

---

FAQ

O HTML gerado funciona em qualquer browser? Sim. O Claude usa apenas HTML5, CSS3 e JavaScript vanilla — sem dependências externas. Funciona em Chrome, Firefox, Safari e Edge sem instalar nada.

Dá para usar os slides em apresentações ao vivo? Sim — abra o arquivo HTML em tela cheia (F11) no segundo monitor. As animações e transições funcionam normalmente. É exatamente assim que os vídeos do canal GI são gravados.

Precisa saber programar para usar a skill? Não. Você descreve o que quer em português e o Claude escreve o código. O único momento em que você vê HTML é se quiser fazer um ajuste muito específico — e mesmo isso você pede pro Claude fazer.

---

Fontes e referências

• Anthropic Claude Documentation — documentação oficial do Claude e suas capacidades
• MDN Web Docs — CSS Animations — referência de animações CSS usadas nos slides
• Gamma App Pricing — preços oficiais do Gamma para comparação

---

Quer a skill de HTML Slides já calibrada com design system completo?

O GEEK-OS inclui a skill de HTML Slides configurada, design system das 4 marcas do ecossistema Geek, 20+ skills do pipeline editorial e o CLAUDE.md com os princípios do Karpathy.

→ Acessar o GEEK-OS