Aumnertic/scene-ppt

Design de Apresentação Contextualizada

Esta skill oferece duas coisas:

1. Referência de modelos: styles/<branch>/exemplar/ e samples/ com exemplares prontos.
2. Guia de design: guide/ com explicações sobre "como organizar, quais formas usar".

Princípio central: o estilo segue o cenário e o material, não é fixo. Os exemplares servem para definir o padrão de qualidade e demonstrar técnicas, não para serem copiados. Novos decks devem recompor o layout com base no próprio conteúdo. Copiar o layout dos exemplares ou fazer todos os decks parecerem iguais é exatamente o "aspecto de IA" que esta skill visa evitar.

Requisitos de ambiente

• macOS, Google Chrome, uv. A renderização usa o Chrome do sistema, não requer download de navegador.
• As fontes são do sistema macOS e não podem ser empacotadas com a skill. As espessuras das fontes chinesas devem ser especificadas pelo nome PostScript, ex.: STSongti-SC-Black, FZLTTHK--GBK1-0. Usar apenas o nome da família com font-weight resulta em queda para a espessura regular.

Fluxo

00 Diagnóstico do cenário

Leia primeiro o material fornecido pelo usuário. Não faça perguntas que o material já responde. Em seguida, faça apenas perguntas cujas respostas alteram decisões de design, no máximo 3 a 4 por vez. Use ferramenta de perguntas se disponível.

Pergunta	O que decide
Para qual ocasião? Ex.: competição/apresentação, aula/acadêmico, reunião escolar/atividade, trabalho, outro	Qual ramo de estilo escolher
Será projetado ao vivo ou enviado como arquivo para leitura individual? Duração?	Densidade de informação e número de páginas. Projetado: letras grandes e poucas, ~1 minuto por página. Arquivo: pode ser mais denso
O que o público deve lembrar e sentir? Ex.: profissionalismo confiável, ideias criativas, calor divertido, paixão	Qual tema dentro do ramo
Há cores, logotipos ou modelos obrigatórios? Ex.: brasão da universidade, cores da turma, regras da competição	Variável de cor principal

Cenário → ramo e tema

Cenário	Ramo	Como escolher o tema	Densidade
Desafio Cup, Internet+, competição de startups, defesa de projeto	roadshow-cn	Tema único; se a competição for comercial, tons dourados claros com ciano tecnológico	Cheio (acima de 70%)
Relatório final de curso, relatório de leitura, pesquisa em grupo	course-report	Humanidades/sociais escolhem paper; exatas, design, dados escolhem swiss	Pode ter espaços em branco, contraste grande de tamanho de fonte
Reunião de turma, revisão de meio/final de período, jogos escolares, clubes, formatura	school-event	Memórias, agradecimento escolhem handbook; competição, mobilização escolhem pop	Pode ter espaços em branco, cada página tem um "objeto físico"
Precisa destacar senso de design e estilo pessoal: portfólio, autoapresentação para emprego/pós-graduação, palestra de design, discurso temático pessoal	curve-minimal	Quer contido, racional, como um design, ou enviar arquivo/imprimir, escolha pen (fundo claro); quer mais expressivo e pessoal, apresentação ao vivo, escolha ribbon (fundo escuro)	Muito pouco, muito espaço em branco; cada página tem um único ponto focal
Nenhum se encaixa	Criar novo tema ou ramo, veja abaixo	—	—

Quando não houver ramo adequado, não force o mais próximo. Derive um novo conjunto de tokens.css seguindo a ordem: "caráter → fontes → linguagem de formas → cores". A divisão entre variáveis obrigatórias e opcionais está descrita no início de styles/roadshow-cn/tokens.css. Fontes devem ser verificadas com scripts/fontcheck.py para confirmar que o Chrome as está usando.

As cores principais devem ser extraídas principalmente do material do usuário, como cores oficiais da escola, cores da turma, cores relacionadas ao tema.

01 Organização do material

Liste fotos, números-chave, citações originais e arquivos de certificados do material do usuário. A quantidade de fotos afeta diretamente o layout: com menos de 3 fotos, não crie mural de fotos. Atualmente esta etapa é feita manualmente, sem scripts.

02 Esqueleto

Defina primeiro os capítulos, depois atribua a cada página um papel: capa, página de capítulo, página de conteúdo, página de dados, encerramento. Os papéis típicos de cada ramo estão em styles/<branch>/style.md.

03 Escolha de formas por página

Para cada página, identifique sua relação de informação (hierarquia, sequência, contraste, ordenação, proporção, número-chave, paralelismo, foto ao vivo...), depois consulte guide/shapes.md para encontrar formas candidatas correspondentes, escolhendo uma com base nos critérios de seleção e no ramo atual. Se não conseguir explicar "por que esta forma", a escolha está errada. A decoração é adicionada por último, escolhida com base na função de composição (seção 4 do mesmo documento).

04 Renderização

1. Escreva o arquivo com base na estrutura de arquivo do exemplar exemplar/deck.html do ramo escolhido, mas não copie o layout dele:
   • A primeira linha de <head> deve conter o script do tema: <script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>. Se faltar, render.py passará o nome do tema mas renderizará silenciosamente no tema padrão;
   • Em seguida, referencie tokens.css, lib/base.css, components.css do ramo. O ramo roadshow-cn é monotemático e não inclui lib/base.css, siga seu próprio modelo;
   • No final da página, referencie lib/shapes.js;
   • Cada página é uma <section class="slide">, tamanho 1920×1080.
2. No <style> da página, escreva apenas coordenadas e dimensões. Use var(--c-*) para cores, ou leia com Shapes.T('nomeDoPapel') em JS.
3. Posições de foto use <div class="photo" data-label="…">. Quando houver foto real, coloque <img> dentro.
4. Comando de renderização:

uv run --with playwright python scripts/render.py <deck.html> <diretório de saída> [nome do tema]

05 Verificação

• render.py verifica automaticamente: transbordamento de caixa de texto (apenas elementos com .fit), erros de JS, reticências, variáveis de tema ausentes.
• Veja cada PNG página por página. A verificação automática não detecta sobreposição de elementos, bloqueios ou linhas com palavra única no final. Páginas novas quase sempre apresentam esses problemas na primeira renderização.
• Compare com guide/anti-patterns.md: apenas cartões, gradientes rosa-roxo, emoji substituindo ilustração são considerados falhas.
• Títulos grandes com fontes caligráficas, manuscritas ou decorativas não devem receber .fit, senão a verificação gerará falso positivo.

06 Entrega

Entregue os PNGs e PDFs (já gerados por render.py) ao usuário para que ele mesmo veja o resultado. Atualmente não é suportada exportação para PPTX editável; para alterações, edite o HTML e renderize novamente.

Índice de arquivos

Caminho	Conteúdo	Quando ler
guide/shapes.md	Relação de informação → forma, com justificativa, variações por cenário, implementação, dependências de variáveis	Etapa 03, usar a cada página
guide/anti-patterns.md	Características típicas de PPT gerado diretamente por IA	Etapa 05
styles/<branch>/style.md	Cenários de aplicação, técnicas de design, papéis de página, critérios de seleção de tema do ramo	Após escolher o ramo
styles/<branch>/tokens.css	Variáveis de cores, fontes, tamanhos; diferentes temas usam [data-theme] para sobrescrita	Ao alterar cor principal ou criar novo tema
styles/<branch>/components.css	Componentes HTML do ramo	Etapa 04
styles/<branch>/exemplar/	4 páginas de exemplo com capturas de cada tema	Etapa 04, para ver técnicas
styles/school-event/samples/banhui-full/	Exemplo completo de 12 páginas de reunião de turma (tema handbook, bem avaliado)	Ao criar deck completo, como referência de ritmo
lib/shapes.js	19 geradores SVG (estrutura, dados, decoração, desenho à mão)	Etapa 04
lib/base.css	Reset de estilos, canvas, posições de foto	Etapa 04
scripts/render.py	Renderização, verificação, exportação PNG e PDF	Etapas 04 e 05
scripts/pixeldiff.py	Comparação pixel a pixel para testes de regressão	Após alterar lib/
scripts/fontcheck.py	Verifica fontes realmente usadas pelo Chrome	Ao criar novo tema ou trocar fontes

Não implementado

• As etapas 01 a 03 ainda não possuem scripts; são feitas manualmente conforme as instruções acima.
• guide/organization.md (esqueleto de capítulos, papéis de página, ritmo) ainda não foi escrito.
• Não suporta exportação para PPTX editável.
• Fontes não são portáveis entre máquinas: ao mudar para ambiente não-macOS, é necessário usar fontes web open-source empacotáveis.