📊 Pitch Deck com guizang-ppt

O que é

guizang-ppt é uma skill canibalizada do guizang-ppt-skill (Op7418) — um framework de slides em HTML único, magazine-style, inspirado em Monocle/FT/The Information. Cada slide é uma section com layout próprio, sem dependência de PowerPoint, Keynote ou Google Slides. Roda no browser, exporta direto pra PDF de impressão.

Por que aprender

É o caminho mais rápido pra um deck profissional sem desenhar slide por slide. Você mantém o conteúdo no chat (texto), o agente entrega o deck rodável. Edita em texto, vê em browser. Não precisa abrir Keynote nem se preocupar com fonte ausente em outra máquina.

Conceitos-chave

• Magazine-style: referências editoriais (Monocle, FT)
• HTML único: 1 arquivo, navegação por keyboard, sem build
• Print-aware CSS: @media print + page-break por slide
• Default no OD: `od.mode: deck` ativa esta skill

O que é

A skill guizang-ppt tem uma das pastas mais densas do catálogo:

skills/guizang-ppt/
├── SKILL.md
├── assets/
│   └── template.html       # base navegável + keyboard handlers
└── references/
    ├── themes.md           # 8 temas (FT-orange, NYT-classic, Monocle...)
    ├── layouts.md          # 12 layouts (cover, kpi, quote, timeline, team, ...)
    ├── components.md       # callout, marginalia, chart inline
    └── checklist.md        # P0 (theme rhythm, fit-tela, contrast)

Por que aprender

Cada arquivo é a "memória editorial" da skill. Themes garantem consistência visual; layouts garantem que cada tipo de slide tenha um padrão; components evitam reinvenção; checklist é o gate. Você não precisa decorar — basta saber que existem e abrir quando precisar.

Conceitos-chave

• template.html: framework JS de navegação + slide engine
• themes.md: ~8 temas pré-feitos com paleta + tipografia
• layouts.md: ~12 layouts paste-ready (cover, kpi, quote, timeline)
• checklist.md: theme rhythm, fit-na-tela, contraste de impressão

O que é

Slides de capa podem ter um background animado em WebGL/Three.js (gradiente vivo, particle field, mesh distortion). É opcional — a skill só ativa se o usuário pediu "feel premium" ou explicitamente. Default = solid background. WebGL é luxo, não default.

Por que aprender

WebGL impressiona em demo (browser); falha em PDF (vira frame estático). Saber quando ligar = saber qual canal de saída domina. Pra deck que será impresso: nunca. Pra demo executiva ao vivo: às vezes.

Conceitos-chave

• Use: deck premium ao vivo, único slide de capa
• Evite: deck para PDF, mais de 1 slide com WebGL
• Bibliotecas: Three.js (rico), p5.js (simples) — vendorizadas
• Performance: < 60fps = corta logo

O que é

Regra de ritmo editorial: nunca repita o mesmo theme/layout em 3+ slides consecutivos. Se você tem 3 slides de KPI, intercale com um quote ou timeline. O olho cansa de monotonia visual; o ritmo mantém atenção.

Por que aprender

É a regra que diferencia "deck profissional" de "deck que parece tabela do Excel". Investidores escaneiam decks em 90 segundos — ritmo é o que faz o olho parar onde você quer.

Conceitos-chave

• Rule: max 2 slides do mesmo layout em sequência
• Solução: intercale "quote" ou "marginalia" entre KPIs
• Theme rotation: 8 themes disponíveis em themes.md
• P0 enforcement: agente checa antes de emit

O que é

O template.html da guizang-ppt vem com:

• Keyboard: ← → entre slides, F/Esc fullscreen, P print
• Counter: "3 / 12" no canto inferior
• localStorage: reabriu? volta no slide onde parou
• Deep-link: ?slide=5 abre no slide 5

Por que aprender

Apresentar deck em browser sem essas features = experiência amadora. Com elas, parece um app pensado. Tudo já vem pronto no template; agente não precisa reinventar — só preencher conteúdo.

Conceitos-chave

• Vanilla JS: sem framework, sem build
• localStorage key: guizang-deck-{slug}
• Print bind: Ctrl/Cmd+P → @media print formatado
• Page transitions: CSS scroll-snap + smooth

O que é

O deck é um único arquivo HTML autocontido (CSS + JS inline). Para PDF, basta Ctrl/Cmd+P → "Save as PDF" no browser. CSS de impressão usa @page + page-break-after: always em cada slide → cada slide vira uma página A4/Letter no PDF.

@page { size: 1280px 720px landscape; margin: 0; }
section.slide { page-break-after: always; height: 720px; }
@media print { .nav-controls, .counter { display: none; } }

Por que aprender

É o que torna o deck universal: link compartilhável (HTML) + arquivo enviável (PDF). Sem dependência de plataforma de slide. Você manda no email, no Slack, no WhatsApp.

Conceitos-chave

• Self-contained HTML: CSS + JS inline, sem CDN
• @page size: 1280x720 ou 16:9 paisagem
• Hide nav-controls em print: @media print esconde counter
• PDF generation: via browser; sem ferramenta extra
• Headless export: playwright pode automatizar PDF de batch

O que é

Para slides em apresentação ao vivo, o template suporta speaker notes em aside.notes. Visíveis em modo "presenter" (Ctrl+S), invisíveis em "audience". O agente decide automaticamente baseado em sinais do brief: "vou apresentar pra investidor" → adiciona notes; "deck pra mandar por email" → não adiciona.

Por que aprender

Pitch deck pra apresentação ≠ pitch deck pra leitura. Notes traem o segundo uso (lê os notes em vez do slide). Saber a diferença = entregar o deck certo pro contexto certo.

Conceitos-chave

• Trigger automático: agente lê palavras "pitch ao vivo", "investidor", "presentation"
• Hidden by default: .notes { display: none; }
• Toggle Ctrl+S: entra/sai presenter mode
• ~30-50 palavras por slide: notas concisas; nunca paráfrase do slide