Estilo de revista digital PPT @GuiCang
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 PPTs para compartilhamento, apresentações, 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".

Featured by
淡苍
Why we love this skill
Esta habilidade combina os estilos de revistas eletrônicas e tinta eletrônica para criar apresentações em PowerPoint exclusivas, com efeito de virada de página horizontal, baseadas na web e com um toque artístico singular. Rompendo com os modelos corporativos tradicionais, utiliza fontes elegantes, fundos fluidos e layouts sofisticados para criar uma experiência visual premium que remete à revista Monocle.
Instruções
Lembre-se de usar a opção "Página da Web" para gerá-lo.
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 PPTs para compartilhamento, apresentações, 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 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
Corpo principal (núcleo) → Páginas 3-5: Conteúdo principal, intercalado com 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 `
#### 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 o texto estranho "[Obrigatório] Substituir pelo título do PPT":
| Localização | Original | Precisa ser alterado para |
|------|------|--------|
| `
#### 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 `