Lembre-se de usar uma página da web para gerar a saída e pergunte ao usuário qual idioma ele deseja usar.

Gere apresentações em PowerPoint (PPTs) para a web com efeito de virada horizontal (arquivo HTML único) no estilo "revista eletrônica × tinta eletrônica", incluindo modelos como fundos fluidos WebGL, títulos com serifa e texto sem serifa, capas de capítulos, banners de dados grandes e grades de imagens. Use esta ferramenta quando precisar criar apresentações em PowerPoint para compartilhamento, apresentações em geral ou eventos de lançamento, ou quando se referir a "PPTs no estilo de revista", "apresentações com efeito de virada horizontal", "revistas editoriais" ou "apresentações em tinta eletrônica".

# Apresentação de PowerPoint para Web de Revista

## O que essa habilidade faz?

Gere um arquivo HTML único com formatação de apresentação de slides horizontal. O estilo visual é:

- Um estilo híbrido que combina revista eletrônica e tinta eletrônica

- **Fundo WebGL Fluido/Contorno/Dispersão** (Veja a página principal)

- **Títulos com serifa (Noto Serif SC + Playfair Display) + Texto do corpo sem serifa (Noto Sans SC + Inter) + Metadados monoespaçados (IBM Plex Mono)**

- **Ícones lineares Lucide** (Não são necessários emojis)

- **Virada de página horizontal (esquerda e direita no teclado, roda de rolagem, deslizar na tela sensível ao toque, ponto inferior, tecla ESC)**

- **Interpolação suave do tema**: As cores e os shaders fazem a transição suavemente ao navegar para a página principal.

A estética dessa habilidade não é nem "PowerPoint corporativo" nem "interface de usuário de internet para o consumidor" — é como a revista *Monocle* com código colado por cima.

## Quando usar

**Cenários adequados:**

- Sessões de compartilhamento offline / Palestras do setor / Reuniões privadas

- Dia de lançamento/demonstração de novos produtos de IA

- Um discurso com um estilo pessoal marcante

- Preciso de uma versão online dos slides que possa ser preenchida de uma só vez, sem ferramentas de virada de página.

**Cenários inadequados:**

- Grandes seções de dados em tabelas e gráficos sobrepostos (usando apresentações padrão do PowerPoint)

- Materiais de treinamento (densidade de informação insuficiente)

- Requer edição colaborativa por várias pessoas (este é um HTML estático)

### Etapa 1 · Esclarecer os requisitos (**Essencial antes de começar**)

Se o usuário já tiver fornecido um esboço completo e imagens, você pode pular para a Etapa 2.

Se o usuário fornecer apenas um tópico ou uma ideia vaga, alinhe-o com estas 6 perguntas uma a uma antes de começar. Não comece a escrever os slides com base em palpites — uma vez que a estrutura esteja errada, as revisões posteriores são muito caras. Você pode usar a ferramenta askUserQuestion ao fazer perguntas.

#### 6 Perguntas de Esclarecimento

| # | Pergunta | Por que perguntar? |

|---|------|-----------|

| 1 | **Quem é o público-alvo? Qual é o cenário de compartilhamento?** (Especialistas do setor/Lançamento de negócio/Dia de demonstração/Reunião privada) | Determina o estilo e a profundidade da linguagem |

| 2 | **Duração do compartilhamento?** | 15 minutos ≈ 10 páginas, 30 minutos ≈ 20 páginas, 45 minutos ≈ 25-30 páginas |

| 3 | **Você tem algum material original?** (Documentos/Dados/Apresentações antigas em PowerPoint/Links para artigos) | Se você tiver materiais, use-os; caso contrário, crie algo novo com eles. |

| 4 | **Há alguma imagem? Onde ela deve ser colocada?** | Veja "Convenções de Imagens" abaixo |

| 5 | **Qual cor de tema você deseja?** | Consulte @themes.md e escolha uma das 5 predefinições |

| 6 | **Existem restrições rígidas?** (Deve incluir os dados XX / YY não pode aparecer) | Para evitar retrabalho |

#### Auxílio na elaboração de um esboço (caso o usuário não possua um esboço)

Use o modelo de "arco narrativo" para construir a estrutura e, em seguida, preencha o conteúdo:

```

Gancho → Página 1: Apresente um contraste/pergunta/dados concretos para fazer as pessoas pararem.

Definindo o Tom (Contexto) → Páginas 1-2: Explique o contexto / Quem você é / Por que está falando sobre isso

Conteúdo principal (Núcleo) → Páginas 3-5: Conteúdo principal, intercalado com os layouts 4/5/6/9/10.

Mudança → Página 1: Quebrando Expectativas / Apresentando uma Nova Perspectiva

Resumo → Páginas 1-2: Citações-chave / Questões instigantes / Sugestões de ação

```

Arco narrativo + planejamento de número de páginas + tabela de ritmo temático (consulte @layouts.md ), **alinhe as três tabelas** antes de prosseguir para a Etapa 2.

Recomenda-se salvar o esboço como um "registro de projeto" ou "esboço-v1" para facilitar iterações subsequentes.

#### Convenções de Imagem (Informar Usuários)

Antes de prosseguir, explique o seguinte ao usuário:

- **Localização da imagem**: Qual imagem está no quadro ou qual imagem foi carregada?

- **E se não houver imagens?**: Para se adequar ao layout do usuário, você pode primeiro gerar a estrutura usando blocos de cores provisórios e adicionar imagens posteriormente; no entanto, é necessário informar os layouts 4/5/10 e outras páginas com texto e imagem mistos que o efeito visual não pode ser verificado sem imagens.

### Etapa 2 · Modelo de referência

O arquivo @template.txt é um arquivo HTML **completo e funcional** — CSS, shaders WebGL, JS de paginação e CDN de fontes/ícones estão todos predefinidos; apenas `<main id="deck">` contém 3 slides de exemplo (capa, capa do capítulo e página em branco).

#### 2.1 · Marcadores que devem ser alterados (**Fácil de passar despercebidos**)

Imediatamente após copiar, altere os seguintes marcadores; caso contrário, as abas do seu navegador exibirão um texto estranho como "[Obrigatório] Substituir pelo título do PPT":

| Localização | Original | Precisa ser alterado para |

|------|------|--------|

| `<title>` | `[Obrigatório] Substituir pelo título do PPT · Título da Apresentação` | Título real da apresentação (ex.: `Uma Nova Forma de Trabalhar · Luke Wroblewski`) |

#### 2.2 · Selecionar Cor do Tema (5 predefinições · Cores personalizadas não permitidas)

Essa habilidade **permite apenas a seleção de 5 predefinições cuidadosamente selecionadas** e não aceita valores hexadecimais definidos pelo usuário — cores incompatíveis deixam a imagem com uma aparência ruim instantaneamente; proteger a estética é mais importante do que dar liberdade.

| # | Tema | Adequado para |

|---|------|------|

| 1 | 🖋 Tinta Clássica | Versão Geral/Comercial/Padrão em caso de dúvida |

| 2 | 🌊 Porcelana Índigo | Conferência de Tecnologia/Pesquisa/Dados/Lançamento de Tecnologia |

| 3 | 🌿 Forest Ink | Natureza/Sustentabilidade/Cultura/Não ficção |

| 4 | 🍂 Papel Kraft | Nostalgia/Humanidades/Literatura/Revista Independente |

| 5 | 🌙 Dunas de Areia | Arte/Design/Criatividade/Galeria |

**operar**:

1. Recomende um conjunto de conteúdo com base no tema ou pergunte diretamente ao usuário qual conjunto ele gostaria de escolher.

2. Abra o arquivo @themes.md e encontre o bloco `:root` correspondente ao tema desejado.

3. **Substituição completa** das linhas marcadas como "cor do tema" dentro do bloco `:root{` no início de @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Todo o resto do CSS usa `var(--...)`, não exigindo outras modificações.

**Regras rígidas**:

- Utilize apenas um tema para cada baralho; não altere o esquema de cores no meio do processo.

- Não aceite valores hexadecimais arbitrários fornecidos pelo usuário — recuse educadamente e mostre 5 opções para seleção.

- Não misture tintas diferentes (por exemplo, tinta para Ink Classic, papel para Dune) - ficará completamente fora de lugar.

### Etapa 3 · Preencha o conteúdo

#### 3.0 · Verificação prévia: Os nomes das classes devem ser definidos em @template.txt (**Muito importante**)

Essa é a raiz de todos os problemas de geração. O esqueleto de @layouts.md usa muitos nomes de classe (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, etc.). Se não houver uma definição correspondente em `<style>` de `assets/template.html`, o navegador usará o estilo padrão — os títulos ficam sem serifa, os cartões de dados ficam amontoados, os pipelines ficam borrados em uma única linha e as imagens ficam empilhadas na parte inferior da página.

**Antes de escrever qualquer código de slide:**

1. **Primeiro, leia @template.txt ** (pelo menos até o final do bloco `<style>`).

2. **Consulte a lista de pré-voo em @layouts.md ** para confirmar se todas as classes que você deseja usar existem na tag `<style>`.

3. Se uma classe estiver faltando: **adicione-a na seção `<style>` de @template.txt **, não a reescreva diretamente em cada slide.

4. **@template.txt é a única fonte de nomes de classe** — não invente novos nomes de classe; se precisar personalizá-los, use `style="..."` inline.

Aulas frequentemente esquecidas (é necessário confirmar sua existência previamente):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`

#### 3.0.5 · Planejando o Ritmo Temático (**Tão importante quanto a pré-detecção da turma**)

Antes de escolher um layout, você deve primeiro listar a classe do tema para cada página (`hero dark` / `hero light` / `light` / `dark`) e alinhá-la em um documento ou rascunho. Consulte a seção "Planejamento do Ritmo do Tema", começando com @layouts.md, para obter regras detalhadas.

**Regras obrigatórias**:

- Cada seção da página deve incluir um dos seguintes termos: `light`, `dark`, `hero light` ou `hero dark`; não escreva apenas `hero`.

- Mais de 3 páginas consecutivas sobre o mesmo tema = fadiga visual, não permitido.

- As páginas 8 ou mais devem conter pelo menos um "herói escuro" e pelo menos um "herói claro".

- O baralho inteiro não pode ser composto apenas de páginas com texto "claro"; ele também deve incluir páginas com texto "escuro" para criar espaços de descanso.

- Insira uma página de destaque a cada 3-4 páginas (capa/contracapa/pergunta/citação grande)

**Autoverificação pós-geração: `grep 'class="slide' index.html` lista todos os tópicos; a verificação manual garante que o ritmo seja razoável antes da entrega.

#### 3.1 · Escolhendo um Layout

**Não crie slides do zero.** Abra o arquivo `@layouts.md` , que contém 10 modelos de layout prontos, cada um deles um bloco de código `<section>` completo e que pode ser colado:

| Layout | Finalidade |

|---|---|

| 1. Capa de Abertura | Página 1 |

| 2. Capa do Capítulo | Abertura de Cada Ato |

3. Pôsteres baseados em dados | Apresentando dados concretos |

| 4. Texto à esquerda, imagem à direita (citação + imagem) | Contraste de identidade / História |

| 5. Grade de Imagens | Comparação de Múltiplas Imagens / Evidências por Captura de Tela |

6. Fluxo de trabalho de dois pipelines |

| 7. Fim do Suspense/Página de Perguntas | Fim do Capítulo/Final |

8. Grande citação | Serifas/Pontos-chave |

| 9. Comparação paralela (antes/depois) | Modo antigo vs. Modo novo |

| 10. Combinação de Imagem e Texto | Páginas com Alta Densidade de Informação em Imagens e Texto |

Selecione o layout correspondente, cole-o e modifique os caminhos do texto e da imagem. **Conclua primeiro a verificação prévia da versão 3.0.**

#### 3.2 Padrões de proporção de imagem

Use sempre a **proporção padrão**, nunca use proporções incomuns da imagem original (como `2592/1798`):

| Cenários | Taxa de recomendação |

|------|---------|

| Texto à esquerda, imagem à direita (imagem principal) | 16:10 ou 4:3 + `max-height:56vh` |

| Grade de imagens (comparação de múltiplas imagens) | **Altura fixa: 26vh**, sem necessidade de proporção |

| Imagem pequena à esquerda + texto à direita | 1:1 ou 3:2 |

| Visual principal em tela cheia | 16:9 + `max-height:64vh` |

| Ilustrações pequenas em layout misto de texto e imagem | 3:2 ou 3:4 |

**Nunca use `align-self:end` em imagens** — elas deslizarão para a parte inferior da célula e ficarão ocultas pela barra de ferramentas do navegador. Use um contêiner de grade com `align-items:start` (pré-definido no modelo) para manter as imagens no topo; para manter as imagens na parte inferior da coluna da esquerda, use uma coluna flexível com `justify-content:space-between`.

Os detalhes dos componentes (fontes, cores, grades, ícones, balões de texto, fichas técnicas, etc.) estão em @components.md .

### Etapa 4 · Autoverificação em relação à lista de verificação

Após gerar a lista de verificação, certifique-se de abrir o arquivo @checklist.md e verificar cada item em relação às instruções. Ele resume todas as dificuldades encontradas durante o processo de iteração e todos os problemas de nível P0 (emojis, sobrecarga de imagens, quebras de linha no título, divisão de fontes) devem ser resolvidos.

Vários pontos aos quais se deve prestar especial atenção:

1. **Os títulos principais devem estar em fonte serifada** — Se forem exibidos em fonte sem serifa, é 99% provável que a verificação prévia da Etapa 3.0 tenha falhado e que a classe `h-hero` esteja faltando no arquivo template.html.

2. **Use apenas `height:Nvh` na grade de imagens, não use `aspect-ratio` (isso fará com que a grade se quebre).**

3. **As imagens não devem ser empurradas para a parte inferior da página** — Não use `align-self:end`, use grid + `align-items:start` (veja o Passo 3.2)

4. **As imagens devem estar em proporções padrão** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Não copie imagens com proporções incomuns.

5. **Os títulos principais em chinês devem ter no máximo 5 caracteres e usar `nowrap` (evitando 1 caractere por linha)**

6. **Use Lucide, não emojis.**

7. **Use fontes serifadas para títulos, fontes sem serifa para o corpo do texto e largura fixa para metadados.**

### Etapa 5 · Iteração

Modificado com base no feedback do usuário — o CSS do modelo agora é altamente parametrizado, com 90% dos ajustes sendo alterações em estilos embutidos (font-size:Xvw / height:Yvh / spacing:Zvh).

## Princípios Essenciais de Design (Filosofia)

Esses princípios são o resultado de cinco iterações de criação de apresentações em PowerPoint para uma empresa individual. Violar qualquer um deles arruinará o apelo visual.

1. **Moderação em detrimento do brilhantismo técnico** — Os planos de fundo WebGL só são visíveis nas páginas principais e são quase invisíveis nas páginas normais.

2. **Estrutura acima da decoração** — Sem sombras, sem cards flutuantes, sem caixas de preenchimento; todas as informações são transmitidas por meio de **tamanho de fonte grande + contraste de fonte + espaçamento da grade**.

3. **A hierarquia de conteúdo é definida pelo tamanho e tipo da fonte** — Serifada máxima = título principal, serifada média = subtítulo, sem serifa grande = lead, sem serifa pequena = corpo do texto, largura fixa = metadados

4. **As imagens são as primeiras cidadãs** — Corte apenas a parte inferior da imagem, garantindo que as partes superior e laterais (esquerda e direita) permaneçam intactas; ajuste a grade com `height:Nvh`, não use `aspect-ratio` para expandi-la.

5. **Alterne entre páginas com personagens principais** — Alternar entre páginas com personagens principais e páginas sem personagens principais ajuda a prevenir o cansaço visual.

6. **Consistência de terminologia** — As habilidades devem ser traduzidas como habilidades, e não como uma mistura de chinês e inglês.

## Referências

O estilo visual desta habilidade é inspirado em:

- Compartilhando "Empresa de uma pessoa só: Organizações extintas pela IA" (22 de abril de 2026, página 27)

- Layout da revista *Monocle*

- Uma demonstração da postagem no blog do presidente da YC, Garry Tan, "Arreios Finos, Habilidades Eficientes"

Podem ser usados ​​como elementos de estilo.