DeckMason: Fluxo de Trabalho de Apresentação com IA
Resumo: Crie decks de slides HTML de qualidade profissional a partir de um tópico, documento ou esboço. Este arquivo é o ponto de entrada para o fluxo de trabalho de 6 fases. Leia este primeiro e carregue os arquivos de referência sob demanda conforme você atinge cada fase. Não carregue todos os arquivos de referência de uma vez.
Requer um agente de codificação de IA com acesso ao sistema de arquivos: Claude Code, Cursor, Codex CLI, Windsurf, Aider ou qualquer agente que possa ler arquivos e executar scripts.
Padrão de Qualidade de Saída
Cada apresentação deve parecer que pertence a uma página de marketing SaaS de alto nível ou a uma edição editorial. Limpo, confiante, minimalista, profissional. Sem porcaria de IA. Sem gradientes genéricos. Sem cópia de preenchimento.
Início Rápido
Para uma nova apresentação:
"Crie um pitch deck sobre [tópico]"
"Faça uma apresentação sobre [assunto] para [público]"
Com seu próprio conteúdo:
"Transforme estas anotações em slides: [cole o conteúdo]"
"Estilize este esboço como apresentação"
Com uma marca:
"Crie uma apresentação usando a marca de company-deck.pptx"
"Combine o estilo de https://linear.app para este pitch deck"
Importar um PPTX existente:
"Converta company-deck.pptx em uma apresentação HTML"
Pré-Avaliação (antes de gerar qualquer deck)
Trave a direção estética antes de escrever um único slide. Pule uma pergunta apenas se o usuário já tiver dado uma resposta inequívoca. Se pular, reafirme a suposição explicitamente.
Etapa 0: Pré-visualização Visual (caminho preferido)
Gere 3 slides de pré-visualização visual rápida usando 3 temas diferentes para que o usuário possa escolher uma direção visualmente:
python3 scripts/preview_themes.py "Seu Tópico Aqui"
Isso cria 3 arquivos HTML de slide único em previews/:
previews/preview-1-dark.html(tema Deep Space)previews/preview-2-light.html(tema Modern SaaS)previews/preview-3-bold.html(tema Bold Signal)
Peça ao usuário para abrir os 3 arquivos e escolher uma direção. A direção escolhida se torna a direção estética (etapa 1), pulando a proposta baseada em texto abaixo.
Etapa 1: Direção estética (fallback textual)
Se o usuário preferir texto, proponha 3 direções visuais adaptadas a ESTE tópico e público específicos. Não de uma lista fixa de predefinições. Cada opção combina uma palavra de vibe + uma dica visual concreta (paleta, tipografia, motivo) para que o usuário possa visualizar. As três direções devem parecer significativamente diferentes umas das outras, não três variações da mesma ideia. Marque uma como recomendada.
Para cada direção, declare a harmonia de cores (monocromática, análoga, complementar, split-complementar, tríade, neutro+acento), a temperatura (quente, fria, neutra) e a distribuição 60-30-10 (qual cor é dominante, secundária, acento). Isso força decisões de cor na fase de planejamento, não como pensamento posterior.
Etapa 2: Contagem de páginas
Ofereça faixas:
- 3-5 slides: curto / teaser
- 6-10 slides: padrão
- 11-20 slides: mergulho profundo
- Personalizado: o usuário especifica
Etapa 3: Densidade de texto por página
Um dos quatro níveis:
- Mínimo: uma linha ou um número grande
- Leve: título + 2-3 marcadores
- Padrão: título + 4-5 marcadores
- Denso: conteúdo de referência detalhado em várias colunas
Etapa 4: Movimento
Estático, movimento sutil de revisão ao vivo ou ativo de vídeo separado. Escolha estático por padrão para PDF, PPTX, Google Slides e decks de leitura antecipada.
Para padrões de animação com GSAP (fade-in-up, stagger-reveal, clip-path-reveal, scale-in, slide-in-left/right, blur-in), veja references/animation-patterns.md. Use-os quando o usuário quiser revisão HTML ao vivo ou reprodução estilo keynote.
Só prossiga para o esboço depois que estes estiverem definidos.
O Fluxo de Trabalho de 6 Fases (Visão Geral)
Leia esta visão geral para entender o pipeline completo. Carregue cada arquivo de referência quando atingir aquela fase.
| Fase | Nome | O que acontece | Arquivo de referência |
|---|---|---|---|
| Pré-Avaliação | Escopo | Pré-visualização visual ou 4 perguntas textuais: direção estética, contagem de páginas, densidade de texto, movimento | Este arquivo (acima) |
| 0 | Brief | Registre a solicitação, padrões, suposições. Escreva um brief com público, arco, pedido, sucesso. Também cobre o fluxo de trabalho de importação de PPT. | references/phase0-brief.md |
| 1 | Estrutura | Princípio da Pirâmide, títulos de afirmação-evidência, tese, batidas de contraste, Camadas de Design de Produto | references/phase1-structure.md |
| 2 | Esboço | Taxonomia de Tipos de Página, 10 Tipos de Layout Editorial, dimensionamento de contagem de slides | references/phase2-outline.md |
| 3 | HTML | Arquitetura de Escala de Tela, Ajuste de Viewport, Matemática de Orçamento Vertical, Uma Ideia Por Slide, estrutura HTML, padrões de animação, regras DOM, proporções de grade | references/phase3-html.md |
| 4 | Imagens | 7 funções de imagem nomeadas, taxonomia de tipos de imagem, Modo de Slides de Imagem, Anti-Padrões de Gráfico | references/phase4-images.md |
| 5 | Polimento | Ritmo de Página, Hierarquia de Fontes, Sistema de Teoria de Cores, Armadilhas de IA, Restrições da Indústria, Orientação de Voz, Crítica de Olho de Designer, Espinha Narrativa | references/phase5-polish.md |
| 6 | Exportação | PPTX (python-pptx ou pptxgenjs), PDF, implantação Vercel | references/phase6-export.md |
Modos especializados (carregar sob demanda)
- Modo de Slide Cinemático: clipe de filme de 22 segundos com 5 cenas para demonstrações de fluxo de trabalho
- Modo Suíço Internacional Estrito: design de grade ultra-limpo inspirado em Vignelli
- Modo de Deck Web Editorial: decks de keynote estilo revista
- Biblioteca de Modelos de Slide HTML: 32 modelos de qualidade de produção de
beautiful-html-templates - Protocolo de Variação de Tema: 3 direções visuais distintas antes de travar
- Sistema de Escola de Filosofia de Design: 5 escolas para briefs vagos
- Sobreposição de Notas do Apresentador: alternância da tecla N, atualização automática por slide
- Fluxo de Trabalho de Importação de Marca: extrair tema de PPTX, URL do site ou PDF de diretrizes de marca
Detalhes completos para todos os modos especializados: references/specialized-modes.md
Salvaguardas de qualidade (carregar antes da entrega)
Todas as salvaguardas de qualidade, palavras proibidas, Regra de Despejo de Dados, Regra de Corte de 30% de Cópia, Autoverificação Antes da Entrega, solução de problemas e requisitos: references/quality-guardrails.md
Predefinições de Estilo
Veja STYLE_PRESETS.md para 31 estilos curados (11 originais + 20 estendidos) além do Kami Warm Editorial:
Originais 11: Modern SaaS (padrão), Neon Cyber, Midnight Executive, Deep Space, Terminal Green, Paper & Ink, Swiss Modern, Soft Pastel, Warm Editorial, Brutalist, Gradient Wave
Estendidos 20: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Liquid Glass Bento, Engineering Blueprint, Watercolor Map, Golden Serif Quote, Chalkboard Lesson, Exploded Layer Stack, Hyperreal Product, Summary Infographic, Cobalt Grid, 8-Bit Orbit, Raw Grid, Broadside
Kami Warm Editorial: uma especificação editorial completa para decks com qualidade de impressão, semelhantes a papel. Veja a seção Kami em STYLE_PRESETS.md.
CSS completo e detalhes de fonte em STYLE_PRESETS.md.
Como Ler Esta Habilidade
- Leia este arquivo primeiro. Ele contém o Início Rápido, Pré-Avaliação e a visão geral de 6 fases.
- Carregue os arquivos de referência sob demanda quando atingir aquela fase. Não carregue todas as referências de uma vez.
- Antes de entregar qualquer deck, carregue
references/quality-guardrails.mde execute a lista de verificação de Autoverificação. - Para modos especializados (Cinemático, Suíço Estrito, Web Editorial, etc.), carregue
references/specialized-modes.mdapenas quando o usuário solicitar esse modo. - Para animações GSAP, carregue
references/animation-patterns.mdquando o usuário quiser movimento além das transições CSS padrão.
Essa estrutura de divulgação progressiva economiza tokens de contexto. O SKILL.md original de arquivo único tinha 1.195 linhas. Este ponto de entrada tem ~200 linhas. Cada arquivo de referência é carregado apenas quando necessário.
Referência Rápida de Exportação
# Exportação PPTX (Caminho A: python-pptx, baseado em imagem)
python3 scripts/pptx_export.py presentation.html --output presentation.pptx
# Importação PPTX (converter .pptx existente para JSON para DeckMason)
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json
# Pré-visualização visual (3 temas para o usuário escolher)
python3 scripts/preview_themes.py "Seu Tópico"
# Exportação PDF (Chrome headless)
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html
# Implantação Vercel (URL ao vivo)
npx vercel
Requisitos
- Um agente de codificação de IA com acesso ao sistema de arquivos e terminal
- Qualquer backend de LLM capaz
- Python 3 +
python-pptxpara caminho de exportação PPTX A (pip3 install python-pptx) - Node.js +
pptxgenjspara caminho de exportação PPTX B (npm install pptxgenjs) - Navegador moderno (Chrome/Edge/Firefox/Safari)
Nenhuma chave de API adicional. Tudo é executado localmente.
Instalação npm (opcional)
# Início rápido sem clonar
npx deckmason init [dir]
# Instalação global
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "Seu Tópico"
deckmason import company-deck.pptx
Veja README.md para instruções completas do npm.