Apresentação editorial/revista
Featured by
淡苍
Why we love this skill
Essa habilidade pode transformar seu conteúdo em um PPT baseado na web com estilo único, no formato "revista eletrônica × tinta eletrônica", combinando fundos fluidos WebGL com tipografia requintada, tornando suas apresentações artísticas e sofisticadas e dando adeus à monotonia dos PPTs tradicionais.
Instruções
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 dados XX / Não pode conter YY) | 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 um texto estranho como "[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 `