Guilherme Furlan

Técnica

Kit de deck portátil: a engine de slides que eu reuso

claudeslidesdesign-systemhtmlapresentacao

Toda vez que eu ia fazer uma apresentação do zero, repetia as mesmas decisões: escala de tipo, ritmo dos slides, quando o fundo vira escuro, qual layout serve pra um confronto e qual serve pra um passo a passo. Demorava, e o resultado variava sem motivo.

Então separei o que muda do que não muda. O que não muda virou uma engine: o storytelling, os 9 arquétipos de slide, a escala, a cor como mapa do arco. O que muda virou um skin: paleta, tipos, tom. A engine fica pronta de uma vez. Por projeto, eu troco só o skin e o conteúdo. É daí que vem a economia de tempo: a parte cara já está resolvida, e o que sobra é a decisão de marca (cinco escolhas) e o storyline.

O kit nasceu do design system de um workshop (“Make IA Cool Again”) e é par do método CANETA. O que segue é a descrição do sistema. O kit completo, com todo o CSS, é copiável pra você colar numa sessão nova do Claude.

A separação engine / skin

A engine é neutra. Ela não tem opinião sobre cor ou fonte: tem opinião sobre estrutura. O skin entra em um lugar só, no topo do <style>, e dá identidade ao deck inteiro.

São cinco decisões de skin: fundo padrão (claro, quente, não branco puro), escuro de pico (o fundo dos slides de evento), acento único (uma cor de marca, só uma), par tipográfico (display, mono e sans) e tom (o léxico da fala). Os tokens ficam num bloco :root:

:root{
  /* ===== SKIN: preencha ===== */
  --bg:#F7F6F3;          /* 1. fundo padrão claro */
  --bg-alt:#EFEDE8;      /* variação clara pra blocos de apoio */
  --ink:#0E0E10;         /* 2. escuro de pico */
  --accent:#2D5BFF;      /* 3. acento único (cor da marca) */
  --sticker:#C8F000;     /* badge/checkpoint só. nunca fundo nem texto corrido */
  --display:'Playfair Display',serif;  /* 4a. peso e emoção */
  --mono:'Space Mono',monospace;       /* 4b. estrutura e metadado */
  --body:'DM Sans',sans-serif;         /* 4c. respiro */

  /* ===== engine: não precisa mexer ===== */
  --text:#161616;
  --on-ink:#F2F1EC;          /* texto sobre escuro */
}

Troque os cinco valores comentados como SKIN e o deck inteiro muda de cara sem você tocar em mais nada.

Os 6 princípios da engine

São seis regras que governam tudo. Quem monta o deck instancia um template, não inventa layout novo a cada tela.

  1. Uma ideia por tela. Se precisa de dois pensamentos, são dois slides. O slide ancora, a voz explica.
  2. Grande e sem margem sobrando. Tipo dimensionado pela largura do slide (cqw), margem de ~4,5%. Legível de longe, independente do projetor.
  3. Claro padrão, escuro no pico. O fundo claro respira o dia inteiro. O escuro entra em capa, no momento “uau” e no fechamento. A cor vira mapa de onde a pessoa está no arco.
  4. Snap, um slide por vez. Cada slide preenche a viewport e o avanço trava no próximo. Previsível pra apresentar ao vivo e pra voltar um ponto.
  5. Léxico próprio, sem muleta. Cena, não feature. Sem travessão, sem genérico de abertura, sem adjetivo de catálogo. Tom nunca motivacional.
  6. Ícone no lugar de texto. Quando um ícone grande comunica na hora, ele substitui a frase em vez de enfeitar.

Os 9 arquétipos de slide

Todo slide do seu storyline cai em um destes nove. Se um slide não encaixa, repense o conteúdo, não invente layout.

  1. Frase. Uma frase grande sobre fundo escuro. Pra capa, pausa ou transição forte.
  2. Título + apoio. Um título e uma lista curta. O cavalo de batalha: promessa, agenda, combinados, plano.
  3. Confronto. Dois painéis com seta no meio. Pra antes/depois, isto vs aquilo, mostrar transformação.
  4. Diagrama. Nós com ícones e setas. Pra fluxo de etapas conectadas, bom no escuro como momento “uau”.
  5. Parede de frases. Cards levemente tortos com aspas e um soco no fim. Pra vozes da plateia, citações, dores.
  6. Grade de cards. Quatro cards com ícone à esquerda. Pra enumerar itens sem virar bullet point.
  7. Passo GPS. Número grande, micro-passos e uma confirmação. O motor de qualquer parte hands-on ou tutorial ao vivo.
  8. Placar. Linhas com dot que acende. Pra acompanhar um progresso recorrente: abre cedo, reabre no meio, fecha cheio.
  9. Divisor de bloco. Título de seção e um stepper que marca onde a apresentação está. Repete a cada abertura de bloco.

Como usar o kit

O kit carrega a engine inteira e deixa o skin pra você preencher. Você diz ao Claude onde está o storyline e manda ele construir. A instrução de build é esta:

Leia o storyline em CAMINHO_DO_STORYLINE. Construa um deck de slides em um
único arquivo HTML autossuficiente usando o sistema deste kit. Regras:

1. Cole os tokens do SKIN no :root (use os defaults se eu não tiver trocado) e
   o scaffold no <style>. Inclua o <link> da Google Fonts pras três famílias.
2. Para cada slide do storyline, escolha UM dos 9 arquétipos e instancie com o
   conteúdo real. Se algum não encaixar, repense o conteúdo do slide; não invente
   layout novo.
3. Aplique a cor como mapa do arco: fundo claro padrão, escuro só em capa, picos
   e fechamento. Use o divisor pra abrir cada bloco, com o stepper marcando o
   progresso.
4. Desenhe ícones custom pros conceitos do storyline. Sem emoji, sem biblioteca
   pronta.
5. Respeite as regras de voz: sem travessão, sem genérico de abertura, sem muleta
   de IA, uma ideia por tela, frase curta.
6. Numere os slides e rotule o bloco no topo de cada um.
7. Saída: um .html que abre no navegador, um slide por viewport, scroll-snap
   vertical. Antes de finalizar, liste quantos slides saíram e qual arquétipo
   cada um usou.

O scaffold de base é pequeno: snap vertical e escala relativa à largura, então o mesmo código serve em qualquer projetor.

.deck{scroll-snap-type:y mandatory;height:100vh;overflow-y:scroll;}
.slide{
  scroll-snap-align:start;height:100vh;width:100%;
  container-type:inline-size;   /* habilita cqw: 1cqw = 1% da largura do slide */
  position:relative;overflow:hidden;padding:4.5%;
}
.slide.cream{background:var(--bg);color:var(--text);}
.slide.dark{background:var(--ink);color:var(--on-ink);}

O resto (o CSS de cada arquétipo, o set de ícones, os três padrões de movimento) vive no kit completo, que você copia inteiro pra uma sessão nova. A ideia é não recomeçar: a engine não muda, e cada projeto novo é só skin novo mais storyline novo.