- \n
- Forne\u00e7a ao agente o link do reposit\u00f3rio GitHub da habilidade e pe\u00e7a para instal\u00e1\u2011lo.<\/li>\n
- Descreva o objetivo da apresenta\u00e7\u00e3o (palestra, estudo, pitch etc.) e a densidade de conte\u00fado desejada.<\/li>\n
- O agente apresenta tr\u00eas op\u00e7\u00f5es de capa; voc\u00ea escolhe a dire\u00e7\u00e3o visual que mais lhe agrada.<\/li>\n
- A partir da\u00ed, o agente constr\u00f3i todos os slides, tirando screenshots de cada rascunho e auto\u2011corrigindo erros.<\/li>\n
- Para adicionar imagens, basta enviar o caminho completo do arquivo (no Mac, use \u00abmostrar barra de caminho\u00bb no Finder) e o agente posiciona a m\u00eddia exatamente onde voc\u00ea pediu.<\/li>\n
- O resultado \u00e9 um arquivo HTML local que voc\u00ea abre no navegador; ele funciona em qualquer dispositivo.<\/li>\n
- Para compartilhar, basta fazer o deploy em servi\u00e7os gratuitos como Vercel \u2013 alguns comandos e voc\u00ea obt\u00e9m um URL p\u00fablico.<\/li>\n<\/ul>\n
![\"Fluxo](\"https:\/\/www.bernabauer.com\/blog\/wp-content\/uploads\/2026\/07\/como-criar-apresentacoes-incriveis-com-ia-e-html-deixando-o-1.jpg\")
Foto: Mikael Blomkvist \/ Pexels<\/a><\/figcaption><\/figure>\n Depois de ter o slide como site, voc\u00ea pode edit\u00e1\u2011lo a qualquer momento: basta descrever a altera\u00e7\u00e3o ao agente ou anotar diretamente no slide (se estiver usando a vers\u00e3o desktop). Essa flexibilidade transforma a cria\u00e7\u00e3o de decks em um ciclo de feedback r\u00e1pido, onde o foco passa a ser o conte\u00fado, n\u00e3o o layout.<\/p>\n
Personalizando com sua identidade visual<\/h3>\n
Se o modelo padr\u00e3o ainda n\u00e3o reflete a sua marca, voc\u00ea pode ensinar o agente a seguir um guia de estilo. Basta fornecer ao agente um screenshot do site que voc\u00ea admira ou um PDF com as cores, tipografia e \u00edcones da sua empresa. O agente ent\u00e3o atualiza a habilidade, gerando slides que j\u00e1 v\u00eam com a paleta e os componentes corretos. Esse n\u00edvel de personaliza\u00e7\u00e3o \u00e9 dif\u00edcil de alcan\u00e7ar em ferramentas tradicionais sem gastar horas ajustando cada elemento.<\/p>\n
![\"Exemplo](\"https:\/\/www.bernabauer.com\/blog\/wp-content\/uploads\/2026\/07\/como-criar-apresentacoes-incriveis-com-ia-e-html-deixando-o-2.jpg\")
Foto: Matheus Bertelli \/ Pexels<\/a><\/figcaption><\/figure>\n Alternativa: Marp e Markdown<\/h3>\n
Outra abordagem poderosa \u00e9 usar o Marp<\/strong>, que converte arquivos Markdown em slides. Com um agente, voc\u00ea pode transformar dados de CSV, relat\u00f3rios ou simplesmente um esbo\u00e7o em uma apresenta\u00e7\u00e3o pronta para projetar. O Marp permite:<\/p>\n
- \n
- Edi\u00e7\u00e3o pura de texto \u2013 f\u00e1cil de versionar e reutilizar como modelo.<\/li>\n
- Inclus\u00e3o de elementos HTML, como \u00edcones SVG, gr\u00e1ficos interativos e at\u00e9 terminais simulados.<\/li>\n
- Exporta\u00e7\u00e3o para PowerPoint ou PDF, caso ainda precise desses formatos.<\/li>\n
- Integra\u00e7\u00e3o com extens\u00f5es como Marp para VS Code, que oferece pr\u00e9\u2011visualiza\u00e7\u00e3o ao vivo.<\/li>\n<\/ul>\n
Ambas as t\u00e9cnicas mostram que o futuro das apresenta\u00e7\u00f5es est\u00e1 em deixar a IA cuidar do design enquanto voc\u00ea foca na mensagem.<\/p>\n
Como buscar mais conte\u00fados<\/h2>\n
Para aprofundar, tente as seguintes combina\u00e7\u00f5es de palavras\u2011chave no Google:<\/p>\n
- \n
- AI generated HTML slides<\/a><\/li>\n
- Front End Slides Claude Code tutorial<\/a><\/li>\n
- Marp AI agent presentation<\/a><\/li>\n
- automate slide creation with AI<\/a><\/li>\n
- deploy HTML slides Vercel<\/a><\/li>\n<\/ul>\n
Alguns v\u00eddeos que j\u00e1 ajudaram muitos criadores s\u00e3o:<\/p>\n
- \n
- I built a skill that lets AI make slides \u2013 Front End Slides<\/a><\/li>\n
- Creating HTML slides with Claude \u2013 tutorial pr\u00e1tico<\/a><\/li>\n
- Marp + AI agent \u2013 substituto para PowerPoint<\/a><\/li>\n<\/ul>\n
Experimente instalar a habilidade, brincar com os comandos e ver como seu fluxo de trabalho muda. Em pouco tempo, voc\u00ea perceber\u00e1 que gastar menos tempo com caixas de texto e mais tempo com o que realmente importa \u2013 suas ideias \u2013 faz toda diferen\u00e7a nas apresenta\u00e7\u00f5es.<\/p>\n","protected":false},"excerpt":{"rendered":"
Descubra como usar habilidades de IA como Front End Slides e Marp para gerar slides interativos, bonitos e totalmente personalizados, sem lutar com alinhamentos no PowerPoint.<\/p>\n","protected":false},"author":2,"featured_media":351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[6],"tags":[102,104,103,92,105,106],"class_list":["post-352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automacao","tag-apresentacoes","tag-front-end-slides","tag-html","tag-ia","tag-marp","tag-vba"],"jetpack_featured_media_url":"https:\/\/www.bernabauer.com\/blog\/wp-content\/uploads\/2026\/07\/como-criar-apresentacoes-incriveis-com-ia-e-html-deixando-o-featured.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/posts\/352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/comments?post=352"}],"version-history":[{"count":0,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/posts\/352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/media\/351"}],"wp:attachment":[{"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/media?parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/categories?post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bernabauer.com\/blog\/wp-json\/wp\/v2\/tags?post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Creating HTML slides with Claude \u2013 tutorial pr\u00e1tico<\/a><\/li>\n
- Front End Slides Claude Code tutorial<\/a><\/li>\n
- AI generated HTML slides<\/a><\/li>\n