html-ppt — Studio de PPT em HTML

Crie apresentações profissionais em HTML como arquivos estáticos. Um arquivo de tema = um visual. Um arquivo de layout = um tipo de página. Uma classe de animação = um efeito de entrada. Todas as páginas compartilham um sistema de design baseado em tokens em assets/base.css.

Instalação

npx skills add https://github.com/lewislulu/html-ppt-skill

Um comando, sem compilação. HTML/CSS/JS puramente estático com apenas webfonts de CDN.

O que a ferramenta oferece

• 36 temas (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
• 15 modelos de decks completos (templates/full-decks/<name>/) — decks multi-slides completos com CSS .tpl-<name> com escopo. 8 extraídos de decks do mundo real (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 modelos de cenário (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — para modo de apresentador)
• 31 layouts (templates/single-page/*.html) com dados de demonstração realistas
• 27 animações CSS (assets/animations/animations.css) via data-anim
• 20 animações Canvas FX (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
• Runtime de teclado (assets/runtime.js) — setas, T (tema), A (anim), F/O, S (modo apresentador: popup de cartão magnético com cartões ATUAL/PRÓXIMO/ROTEIRO/TIMER), N (gaveta de notas), R (reiniciar timer no apresentador)
• Runtime de FX (assets/animations/fx-runtime.js) — inicializa automaticamente [data-fx] ao entrar no slide, limpa ao sair
• Decks de Showcase para galeria de temas / layouts / animações / decks completos
• Script de renderização Chromium gerenciado para exportação de PNG

Quando usar

Use quando o usuário solicitar qualquer tipo de saída baseada em slides ou quiser transformar texto/notas em um deck apresentável. Prefira esta opção em vez de construir do zero.

🎤 Modo Apresentador (演讲者模式 + 逐字稿)

Se o usuário mencionar qualquer um dos seguintes: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, ou disser coisas como "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use o modelo de deck completo presenter-mode-reveal e escreva de 150 a 300 palavras de 逐字稿 em <aside class="notes"> de cada slide.

Veja references/presenter-mode.md para o guia completo de autoria, incluindo as 3 regras de escrita de roteiro para palestrantes:

1. 不是讲稿，是提示信号 — Negrite palavras-chave + frases de transição em parágrafos separados
2. 每页 150–300 字 — Ritmo de 2–3 minutos/página
3. 用口语，不用书面语 — "因此" → "所以", "该方案" → "这个方案"

Todos os modelos de decks completos suportam o modo apresentador com a tecla S (está integrado em runtime.js). S abre uma nova janela pop-up com 4 cartões magnéticos:

• 🔵 ATUAL — prévia em iframe pixel-perfect do slide atual
• 🟣 PRÓXIMO — prévia em iframe pixel-perfect do próximo slide
• 🟠 ROTEIRO DO APRESENTADOR — 逐字稿 em fonte grande (rolável)
• 🟢 TIMER — tempo decorrido + contador de slides + botões anterior/próximo/reiniciar

Cada cartão é arrastável pelo seu cabeçalho e redimensionável pela alça no canto inferior direito. As posições/tamanhos dos cartões persistem em localStorage por deck. Um botão "Redefinir layout" restaura a organização padrão.

Por que as prévias são pixel-perfect: cada prévia é um <iframe> que carrega o HTML do deck real com um parâmetro de consulta ?preview=N; runtime.js detecta isso e renderiza apenas o slide N sem chrome. Assim, a prévia usa o mesmo CSS, tema, fontes e viewport da visualização do público — cores e layout são garantidos como idênticos.

Navegação suave: na mudança de slide, a janela do apresentador envia postMessage({type:'preview-goto', idx:N}) para cada iframe. O iframe apenas alterna .is-active entre os slides — sem recarregar, sem piscar. As duas janelas também permanecem sincronizadas via BroadcastChannel.

…