Magazine Web Ppt
O que esta skill faz
Gera um deck de HTML de arquivo único com navegação horizontal e um tom visual de:
- Um estilo híbrido de revista eletrônica + tinta eletrônica
- Um fundo WebGL fluido / contorno / dispersão (visível em páginas de destaque)
- Títulos serifados (Noto Serif SC + Playfair Display) + corpo sem serifa (Noto Sans SC + Inter) + metadados monoespaçados (IBM Plex Mono)
- Ícones de linha Lucide (sem emoji)
- Paginação horizontal esquerda/direita (teclado ← →, roda de rolagem, toque deslizante, pontos inferiores, índice ESC)
- Interpolação suave de tema: ao virar para uma página de destaque, as cores e o shader fazem uma transição suave
A estética desta skill não é "PPT corporativo", nem "UI de internet de consumo": parece a revista Monocle depois que código foi costurado nela.
Quando usar
Cenários adequados:
- Palestras offline / palestras internas do setor / salões privados
- Lançamentos de novos produtos de IA / dia de demonstração
- Palestras com um estilo pessoal forte
- Uma versão web de slides que você "faz uma vez, sem necessidade de ferramenta de paginação"
Cenários inadequados:
- Longas sequências de dados tabulares, gráficos empilhados (use um PPT normal)
- Material didático de treinamento (densidade de informação muito baixa)
- Edição colaborativa multi-pessoas (isto é HTML estático)
Fluxo de trabalho
Passo 0 · Inferir uma direção; pergunte apenas quando uma comparação for solicitada
Inferir uma das 5 direções de revista a partir do briefing, público, conteúdo e contexto conhecido. Cada direção agrupa sua cor de tema, layouts recomendados, estilo de cromo e contagem de slides. Use o ajuste mais próximo e continue sem perguntar.
Apenas quando o usuário pedir explicitamente para ver ou comparar opções de direção, abra references/styles.md e apresente os resumos de uma linha em um formulário de pergunta direction-cards:
1. Monocle Editorial · Estilo de revista internacional ✦ padrão
2. WIRED Tech · Dados + engenharia
3. Kinfolk Slow · Vida lenta / humanista
4. Domus Arquitetônico · Arquitetura / senso de espaço
5. Lab / Referência · Acadêmico + manual de ofício
Se o usuário disser "não sei, você recomenda" ou não fornecer nenhuma dica de direção: padrão para Monocle Editorial sem perguntar, porque tem a menor probabilidade de falha. Se o usuário mencionar "IA / benchmark / lançamento técnico": escolha WIRED; "leitura / privado / círculo social": escolha Kinfolk; "design / arquitetura / portfólio": escolha Domus; "pesquisa / acadêmico / metodologia": escolha Lab.
Após escolher uma direção, crie ou atualize 项目记录.md (Registro do Projeto) na pasta do projeto, com a primeira linha indicando claramente direção + cor do tema + público + duração (veja o modelo no final de styles.md). Não mude de direção em nenhum ponto: mudar no meio = tudo antes é desperdiçado.
Passo 1 · Resolver intenção
Se o usuário já forneceu um esboço completo + imagens, você pode pular direto para o Passo 2.
Inferir a lista de verificação abaixo a partir do briefing, metadados do projeto, conteúdo fornecido e conversa. Se uma resposta ausente mudar materialmente o deck e nenhum padrão seguro existir, pergunte apenas esses campos não resolvidos em um formulário de pergunta consolidado. Não faça as perguntas da lista uma por uma.
Lista de verificação esclarecedora de 6 perguntas
Direção e cor do tema são inferidas no Passo 0, a menos que o usuário peça explicitamente para comparar opções.
| # | Pergunta | Por que perguntar |
|---|---|---|
| 1 | Quem é o público? Cenário de compartilhamento? (setor interno / lançamento comercial / dia de demonstração / salão privado) | determina o estilo de linguagem e profundidade |
| 2 | Duração da palestra? | 15 min ≈ 10 páginas, 30 min ≈ 20 páginas, 45 min ≈ 25-30 páginas (veja a faixa recomendada de cada direção em styles.md) |
| 3 | Algum material de origem? (documentos / dados / PPT antigo / links de artigos) | com material, construa sobre ele; sem, ajude a construir |
| 4 | Alguma imagem? Onde estão? | veja a "Convenção de imagem" abaixo |
| 5 | ✓ já decidido pela direção no Passo 0 | |
| 6 | Alguma restrição forte? (deve incluir XX dados / não deve mostrar YY) | evita retrabalho |
Assistência de esboço (se o usuário não tiver esboço)
Use o modelo "arco narrativo" para construir o esqueleto, depois preencha o conteúdo:
Gancho → 1 página : lance um contraste / pergunta / número duro que faça as pessoas pararem
Contexto → 1-2 páginas : explique o fundo / quem você é / por que este tópico
Núcleo → 3-5 páginas : o conteúdo central, intercalando Layouts 4/5/6/9/10
Mudança → 1 página : quebre a expectativa / proponha uma nova visão
Conclusão → 1-2 páginas : uma mensagem final / uma pergunta de suspense / um chamado à ação
Arco narrativo + plano de contagem de páginas + tabela de ritmo de tema (veja layouts.md); alinhe todas as três tabelas antes de passar para o Passo 2.
É melhor salvar o esboço como 项目记录.md (Registro do Projeto) ou 大纲-v1.md (Esboço v1) para iteração posterior.
Convenção de imagem (informe o usuário)
Deixe claro para o usuário antes de começar:
- Localização da pasta: sob
项目/XXX/ppt/images/(irmão deindex.html) - Convenção de nomes:
{número da página}-{semântica}.{ext}, ex.01-cover.jpg/03-figma.jpg/05-dashboard.png- Preencha o número da página com zeros para facilitar a ordenação
- Use inglês para a parte semântica, curta, específica, combinando com o conteúdo
- Recomendações de especificações:
- Cada imagem ≥ 1600px de largura (evita desfoque em telas grandes)
- JPG para fotos/capturas de tela, PNG para UI/gráficos transparentes
- Mantenha o tamanho total abaixo de 10MB (afeta a suavidade da paginação)
- Como substituir: substituição com o mesmo nome é a mais estável (não precisa mudar o caminho no HTML); se o nome do arquivo mudar, lembre-se de pesquisar globalmente
images/nomeantigoe alterar para o novo nome - E se não houver imagens: alinhe com o usuário; você pode gerar a estrutura com blocos de cor de placeholder primeiro e preencher as imagens depois, mas avise que páginas de mistura de imagem e texto como layouts 4/5/10 não podem ter seus visuais verificados sem imagens
Passo 2 · Copiar o template
Copie assets/template.html para o local de destino (geralmente 项目/XXX/ppt/index.html) e crie uma pasta images/ como irmã, pronta para receber imagens.
mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"
template.html é um arquivo completo e executável: CSS, shader WebGL, JS de paginação, CDNs de fontes/ícones estão todos pré-configurados; apenas dentro de <main id="deck"> há 3 slides de exemplo (capa, divisória de ato, página de preenchimento em branco).
2.1 · Placeholders que você deve alterar (fácil de esquecer)
Imediatamente após copiar, altere os placeholders abaixo, ou a aba do navegador mostrará texto estranho como "[必填] replace with the PPT title":
| Localização | Original | Alterar para |
|---|---|---|
<title> | [必填] 替换为 PPT 标题 · Deck Title | o título real do deck (ex. 一种新的工作方式 · Luke Wroblewski) |
A primeira coisa a fazer sempre que terminar de copiar template.html: use grep para "[必填]" para confirmar que tudo foi substituído.
2.2 · Escolher a cor do tema (5 predefinições · nenhuma personalização permitida)
Esta skill permite apenas escolher uma das 5 predefinições cuidadosamente ajustadas; não aceita valores hexadecimais definidos pelo usuário: uma combinação de cores errada torna os visuais feios instantaneamente, e proteger a estética é mais importante do que oferecer liberdade.
| # | Tema | Melhor para |
|---|---|---|
| 1 | 🖋 Tinta Clássica | geral / lançamento comercial / o padrão quando você não sabe o que escolher |
| 2 | 🌊 Porcelana Índigo | tecnologia / pesquisa / dados / palestras técnicas |
| 3 | 🌿 Tinta Floresta | natureza / sustentabilidade / cultura / não-ficção |
| 4 | 🍂 Papel Kraft | nostálgico / humanista / literário / revistas independentes |
| 5 | 🌙 Dunas | arte / design / criativo / galeria |
Como fazer:
- Recomende um com base no tema do conteúdo, ou apenas pergunte ao usuário qual escolher
- Abra
references/themes.mde encontre o bloco:rootpara o tema correspondente - Substitua como um todo as linhas marcadas com o comentário "cor do tema" no bloco de abertura
:root{deassets/template.html(a versão copiada):--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint - Todo o resto do CSS flui através de
var(--...), nenhuma outra alteração é necessária
Regras rígidas:
- Um deck usa apenas um tema, não mude as cores no meio
- Não aceite um valor hex arbitrario do usuário: recuse gentilmente e mostre as 5 predefinições para escolher
- Não misture (ex. pegar a tinta do Tinta Clássica e o papel do Dunas): isso colide completamente
Passo 3 · Preencher o conteúdo
3.0 · Pré-verificação: nomes de classe devem estar definidos em template.html (mais importante)
Esta é a fonte de todos os problemas de geração. Os esqueletos de layouts.md usam muitos nomes de classe (h-hero / h-xl / stat-card / pipeline / grid-2-7-5, etc.); se o <style> de assets/template.html não tiver a definição correspondente, o navegador volta para os estilos padrão: o título grande fica sem serifa, os cartões de dados se comprimem em um aglomerado, o pipeline se amassa em uma linha, as imagens se acumulam no fundo da página.
Antes de escrever qualquer código de slide:
- Primeiro Leia
assets/template.html(pelo menos até o final do bloco<style>) - Contra a lista de pré-verificação de layouts.md, confirme que toda classe que você vai usar existe no
<style> - Se uma classe estiver faltando: adicione-a ao
<style>de template.html, não a reescreva inline em cada slide - template.html é a fonte única de nomes de classe: não invente novos nomes de classe; se precisar de um personalizado, use
style="..."inline
Classes comumente esquecidas (devem ser confirmadas como existentes com antecedência):
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 · Planejar o ritmo do tema (igualmente importante quanto a pré-verificação de classe)
Antes de escolher layouts, você deve primeiro listar a classe de tema para cada página (hero dark / hero light / light / dark) e escrevê-la em um documento ou rascunho para alinhar. Para regras detalhadas, veja a seção "Planejamento de ritmo de tema" no topo de references/layouts.md.
Regras obrigatórias:
- Toda seção de página deve carregar um de
light/dark/hero light/hero dark; não escreva apenashero - 3+ páginas consecutivas no mesmo tema = fadiga visual, não permitido
- 8+ páginas devem ter ≥1
hero dark+ ≥1hero light - O deck inteiro não pode ter apenas páginas de corpo
light; deve ter uma página de corpodarkpara criar espaço de respiro - Insira 1 página de destaque (capa/divisória/pergunta/grande citação) a cada 3-4 páginas
Auto-verificação após gerar: grep 'class="slide' index.html lista todos os temas; confirme manualmente que o ritmo é razoável antes de entregar.
3.1 · Escolher um layout
Não escreva slides do zero. Abra references/layouts.md; ele tem 10 esqueletos de layout prontos, cada um um bloco de código <section> completo e pronto para colar:
| Layout | Uso |
|---|---|
| 1. Capa | página 1 |
| 2. Divisória de ato | abertura de cada ato |
| 3. Números grandes | lance dados duros |
| 4. Imagem principal + texto (Citação + Imagem) | contraste de identidade / história |
| 5. Grade de imagens | comparação de múltiplas imagens / evidência de captura de tela |
| 6. Pipeline de duas colunas (Pipeline) | processo de fluxo de trabalho |
| 7. Fechamento de suspense / página de pergunta | fechamento de ato / conclusão |
| 8. Página de citação grande (Grande Citação) | frases de efeito serifadas / conclusão |
| 9. Comparação lado a lado (Antes / Depois) | modelo antigo vs modelo novo |
| 10. Mistura de imagem + texto (Imagem Principal + Texto Lateral) | páginas de imagem-texto com densidade de informação |
Escolha o layout correspondente, cole-o, altere o texto e os caminhos das imagens. Certifique-se de completar a pré-verificação 3.0 primeiro.
3.2 · Regras de proporção de imagem
Sempre use uma proporção padrão, nunca a proporção estranha da imagem de origem (como 2592/1798):
| Cenário | Proporção recomendada |
|---|---|
| Imagem principal + texto, imagem principal | 16:10 ou 4:3 + max-height:56vh |
| Grade de imagens (comparação de múltiplas imagens) | fixo height:26vh, não aspect-ratio |
| Imagem pequena à esquerda + texto à direita | 1:1 ou 3:2 |
| Visual de destaque em tela cheia | 16:9 + max-height:64vh |
| Mistura de imagem + texto, inserção pequena | 3:2 ou 3:4 |
Nunca use align-self:end em uma imagem: ela desliza para o fundo da célula, escondida pela barra de ferramentas do navegador. Use um contêiner de grade + align-items:start (já pré-configurado no template) para que a imagem grude no topo; se você quiser que a coluna da esquerda grude no fundo, use coluna flex + justify-content:space-between.
Detalhes dos componentes (fontes, cores, grades, ícones, callout, stat-card, etc.) estão em references/components.md.
Passo 4 · Auto-verificação contra a lista de verificação
Após gerar, sempre abra references/checklist.md e verifique item por item. Ele resume cada armadilha em que se pisou durante a iteração real; os problemas de nível P0 (emoji, imagens estourando, quebra de título, divisão de trabalho de tipo) devem todos passar.
Alguns itens para observar especialmente:
- Títulos grandes devem ser serifados: se aparecer como sem serifa, 99% das vezes a pré-verificação do Passo 3.0 não foi feita e a classe
h-heroestá faltando em template.html - Em grades de imagens use apenas
height:Nvh, nãoaspect-ratio(estoura) - Imagens não devem se acumular no fundo da página: não use
align-self:end, use grade +align-items:start(veja Passo 3.2) - Imagens podem usar apenas proporções padrão (16:10 / 4:3 / 3:2 / 1:1 / 16:9), não copie a proporção estranha da imagem de origem
- Títulos grandes em chinês ≤ 5 caracteres e
nowrap(evite 1 caractere por linha) - Use Lucide, não emoji
- Serifado para títulos, sem serifa para corpo, mono para metadados
Passo 5 · Pré-visualização local
Basta abrir index.html diretamente no navegador. No macOS:
open "项目/XXX/ppt/index.html"
Nenhum servidor local é necessário. As imagens usam o caminho relativo images/xxx.png.
Passo 6 · Iterar
Modifique com base no feedback do usuário: o CSS do template é altamente parametrizado, e 90% dos ajustes são alterar i
...
[truncado para tradução]