Habilidade do Agente PPT HTML da Guizang

Uma habilidade de agente para Claude Code, Codex e ambientes de agentes de codificação similares. Ela gera decks HTML de arquivo único com navegação por deslize horizontal, visuais de deck e páginas de capa para redes sociais.

Ela vem com dois sistemas visuais:

• Estilo A: revista editorial × tinta eletrônica. Imagine Monocle com código costurado. Ideal para palestras narrativas, opiniões, salões e voz pessoal.
• Estilo B: Estilo Tipográfico Internacional Suíço. Prioridade de grid, uma cor âncora de alta saturação, retângulos nítidos, regras finas e extremo contraste tipográfico. Ideal para fatos, produtos, análises e frameworks.

Destilado por Guizang a partir de palestras offline como "One-Person Company: Organizations Folded by AI" e "A New Way of Working". Todas as armadilhas encontradas durante esses decks estão registradas em checklist.md.

Tema Antigo · Estilo A Revista Editorial

Novo Tema · Estilo B Suíço Internacional

Começo em 30 segundos

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Ou cole isto em um agente de IA com acesso ao shell:

Install guizang-ppt-skill for me. Clone https://github.com/op7418/guizang-ppt-skill into ~/.claude/skills/guizang-ppt-skill, then verify that SKILL.md, assets/, and references/ exist.

Se você já o instalou, atualize com:

Update guizang-ppt-skill for me. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, then tell me the latest commit.

Então pergunte ao seu agente:

Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals.

Outros prompts úteis:

Turn this Markdown file into an editorial magazine-style presentation.
Create a 21:9 social cover from the core idea of this deck.
Redesign this product screenshot as a 16:10 slide visual.

O que você obtém

• 🖋 Dois sistemas visuais: narrativa editorial para o Estilo A, estrutura suíça factual para o Estilo B
• 📐 Navegação por deslize horizontal: setas ← → / roda de rolagem / toque de deslize / pontos inferiores / ESC para índice
• 🧩 Estilo A 10 layouts: capa, divisor, números grandes, imagem/texto, grade de imagens, pipeline, comparação e mais
• 🧱 Estilo B 22 layouts bloqueados: Capa, Declaração, Torre de KPI, Diagrama de Loop, Comparação Dupla, Imagem Hero, Manifesto de Encerramento e mais
• 🎨 Predefinições de tema curadas: 5 temas de tinta eletrônica para o Estilo A, 4 temas de cores âncora suíças para o Estilo B
• 🖼 Fluxo de imagem opcional via Codex: gere fotos documentais, infográficos, diagramas de fluxo, mapas de sistema e cenas de IU com GPT-Image 2.0 / GPT-M 2.0, então insira-os nas proporções seguras do template
• 📰 Capas para redes sociais: gere imagens de capa para WeChat 21:9, cartões de compartilhamento 1:1, capas para Xiaohongshu 3:4, miniaturas de vídeo e variantes relacionadas
• 📴 Modo estático de baixo consumo: pressione B para transformar animações WebGL / canvas em visuais estáticos
• 📄 Arquivo HTML único — sem compilação, sem servidor, abra diretamente no navegador

Adequado / Não adequado

✅ Adequado: palestras offline, keynotes da indústria, salões privados, lançamentos de produtos de IA, dia de demonstração, apresentações com forte voz pessoal

❌ Não adequado: tabelas com muitos dados, decks de treinamento (densidade muito baixa), edição colaborativa multiusuário (HTML estático)

Casos de uso comuns

Por que decks HTML

• Edição nativa para agentes: HTML / CSS é texto simples, então os agentes podem ler, editar e validar diretamente.
• Maior densidade visual que Markdown: layout preciso, posicionamento, movimento, interatividade e formatos de capa.
• Entrega leve: um arquivo HTML pode ser aberto, apresentado, enviado, capturado ou gravado.
• Melhores portões de qualidade: o validador suíço pode detectar desvio de layout, posicionamento inseguro de imagens, títulos de corpo centralizados e armadilhas de texto SVG.
• Um sistema visual para todas as saídas: decks, visuais gerados, capas e redesenho de capturas de tela podem compartilhar as mesmas regras de estilo.

Suporte de plataforma

Instalar

Opção 1: Instalação em uma linha (recomendado)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Opção 2: Cole isto em uma IA

Instale a habilidade guizang-ppt-skill do Claude Code para mim. Passos:

1. Certifique-se de que ~/.claude/skills/ existe (crie se não)
2. Execute git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Verifique: ls ~/.claude/skills/guizang-ppt-skill/ deve mostrar SKILL.md, assets/, references/
4. Avise quando terminar. Depois, dizer coisas como "faça um deck estilo revista" acionará esta habilidade.

Cole o bloco acima no Claude Code / Cursor / qualquer agente de IA com acesso a shell e ele cuidará da instalação.

Opção 3: CLI manual

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Como acioná-la

Uma vez instalada, o Claude Code detecta a habilidade automaticamente. Frases de acionamento:

• "Faça um deck estilo revista"
• "Faça um deck estilo suíço"
• "Gere um deck com deslize horizontal"
• "Apresentação estilo revista editorial"
• "Slides de tinta eletrônica para minha palestra"
• "Crie uma capa WeChat 21:9 a partir deste artigo"
• "Crie um cartão de compartilhamento 1:1 a partir deste deck"

Fluxo de trabalho

A habilidade é um fluxo de trabalho estruturado; o agente o guia por cada etapa:

1. Escolha o estilo — Estilo A revista editorial, ou Estilo B Suíço Internacional
2. Esclareça a intenção — checklist de 7 perguntas: estilo, audiência, duração, material de origem, imagens/capturas de tela, tema, restrições rígidas
3. Copie o template — Estilo A usa assets/template.html; Estilo B usa assets/template-swiss.html
4. Preencha o conteúdo — crie um plano de ritmo, então escolha e adapte os esqueletos de layout correspondentes
5. Geração de imagem opcional — no Codex, pergunte se deseja usar imagens GPT-Image 2.0 / GPT-M 2.0, então insira-as nas proporções adequadas à página
6. Autoverificação — compare com references/checklist.md; problemas P0 devem todos passar; decks suíços também devem passar no validador de layout
7. Visualizar — abra o HTML em um navegador
8. Iterar — use estilos inline para ajustar tamanho da fonte, altura, espaçamento

Especificação completa em SKILL.md.

Estilo B Suíço

O tema suíço é um sistema de layout rigoroso, não apenas uma skin CSS.

• 22 layouts nomeados: slides de corpo devem usar S01 a S22; não invente novas estruturas
• 4 cores âncora: Azul Klein Internacional, amarelo limão, verde limão, laranja de segurança
• Trava de grid: grid de 16 colunas, retângulos nítidos, linhas finas de 1px, sem sombras, sem gradientes, sem cartões arredondados
• Escala de títulos chineses: títulos totalmente em chinês devem ser um passo menores para preservar espaço para conteúdo e imagens
• Alinhamento inferior de imagem/texto: blocos de texto e imagem devem alinhar na parte inferior em layouts de imagem esquerda/direita, mantendo-se afastados dos controles de paginação
• Slots de imagem: imagens devem ficar em regiões data-image-slot definidas pelo template, frequentemente geradas em 21:9 ou 16:10
• Validação rígida: o validador captura títulos de corpo centralizados, layouts experimentais, texto SVG visível e imagens colocadas fora dos slots

Validação suíça:

node scripts/validate-swiss-deck.mjs path/to/index.html

Fluxo de Imagem Codex

No Codex, após o primeiro rascunho do deck estar pronto, o agente pode perguntar se o usuário deseja visuais gerados. Uma vez confirmado, escolha um tipo ou estilo de imagem. Os tipos comuns incluem:

• Fotos documentais: cenas do mundo real ao estilo Fuji / Leica que adicionam textura humana
• Infográficos / diagramas de fluxo / gráficos de comparação / mapas de sistema: para conceitos que não podem ser bem explicados com fotos
• Enquadramento de capturas de tela / redesenho de capturas de tela: preserve capturas brutas com ativos de fundo agrupados e uma tela no estilo CleanShot X primeiro; use geração de cena de IU apenas quando a captura precisar de reconstrução
• Posters de dados / gráficos: transforme números-chave em ativos visuais prontos para inserir
• Composições de múltiplas imagens: úteis para slots ultra-largos onde três imagens 16:9 não relacionadas quebrariam o grid

Imagens geradas devem seguir quatro regras principais:

• Trate a imagem como um ativo incorporado, não um slide independente: sem rodapé, parte inferior da página, título, número de página, marca de canto, assinatura ou borda decorativa
• Combine com o idioma do deck: decks em chinês usam rótulos em chinês dentro de infográficos, decks em inglês usam rótulos em inglês
• Combine com a proporção do slot antes da geração: 21:9 para muitos slots hero suíços, 16:9 / 16:10 para visuais principais comuns, 16:10 para cenas de IU, alturas iguais fixas para grades de imagens
• Quando uma captura bruta deve permanecer fiel, leia references/screenshot-framing.md primeiro e use os fundos agrupados em assets/screenshot-backgrounds/ mais escalonamento programático, preenchimento e alinhamento em vez de redesenhar a captura por padrão

Os prompts de imagem estão em references/image-prompts.md. O enquadramento de capturas de tela está em references/screenshot-framing.md.

Geração de Capas

A habilidade também pode transformar um artigo ou ideia de deck em capas de plataforma:

• Capa principal do WeChat: 21:9, com título em primeiro lugar, com uma âncora visual
• Cartão de compartilhamento do WeChat: 1:1, visualmente emparelhado com a capa 21:9
• Capa / carrossel do Xiaohongshu: 3:4, título grande, escala tipográfica consistente em um lote
• Miniatura de vídeo: 16:9, título + subtítulo + um visual focal

A mesma regra se aplica: use algumas palavras-chave fortes, mantenha o título como centro visual e não preencha a tela com texto corrido.

Exemplos de prompts

Copie qualquer um destes prompts no seu agente, depois anexe seu artigo, arquivo Markdown ou ativos de imagem:

Create an 8-slide Swiss-style deck from this article, with 3 generated visuals matched to the template image slots.

Turn this product analysis document into an editorial magazine-style deck with a strong narrative rhythm.

From this deck's core idea, create two covers: a 21:9 main cover and a visually paired 1:1 share card.

Redesign these product screenshots into consistent 16:10 slide visuals. Preserve key UI information; do not add slide titles or footers inside the images.

Diretório

guizang-ppt-skill/
├── SKILL.md              ← arquivo principal da habilidade: fluxo de trabalho, princípios, erros comuns
├── README.md             ← README em chinês
├── README.en.md          ← este arquivo
├── assets/
│   ├── template.html         ← template do Estilo A revista editorial
│   ├── template-swiss.html   ← template do Estilo B Suíço
│   └── screenshot-backgrounds/ ← fundos WebP para capturas de tela: 5 estilo-a / 4 estilo-b
├── scripts/
│   └── validate-swiss-deck.mjs ← validador de layout suíço
└── references/
    ├── components.md     ← catálogo de componentes (tipo, cor, grid, ícones, callout, stat, pipeline)
    ├── layouts.md        ← 10 esqueletos de layout (prontos para colar)
    ├── layouts-swiss.md  ← 22 layouts suíços bloqueados
    ├── swiss-layout-lock.md ← fidelidade suíça e regras rígidas de layout
    ├── themes.md         ← 5 predefinições de tema (escolha, não personalize)
    ├── themes-swiss.md   ← 4 temas suíços de cor âncora
    ├── image-prompts.md  ← tipos de imagem, proporções e prompts base para GPT-Image 2.0 / GPT-M 2.0
    ├── screenshot-framing.md ← semântica de enquadramento de capturas de tela estilo CleanShot X
    └── checklist.md      ← checklist de qualidade (níveis P0 / P1 / P2 / P3)

Predefinições de tema

Escolha de references/themes.md. Valores hex personalizados não são permitidos — proteger a estética importa mais que a liberdade de escolha.

Temas Editoriais do Estilo A

Trocar temas requer apenas substituir as 6 variáveis no topo do bloco :root{} do template.html — todo o restante do CSS flui através de var(--...).

Temas Suíços do Estilo B

Escolha de references/themes-swiss.md. Valores hex personalizados não são permitidos aqui também.

Se o usuário pedir um deck estilo suíço sem especificar cor, use Azul Klein Internacional como padrão.

Princípios de design fundamentais

1. Restrição sobre ostentação — fundos WebGL só aparecem em páginas hero
2. Estrutura sobre decoração — hierarquia de informação via tamanho da fonte + tipo de letra + espaços em branco do grid, não sombras ou cartões flutuantes
3. Imagens são cidadãs de primeira classe — alinhe-as com a área de conteúdo do corpo, mantenha proporções estáveis, corte apenas da parte inferior e preserve topo/laterais
4. Visuais gerados são ativos — mantenha apenas a foto/gráfico/IU central; não renderize títulos de slide, rodapés ou marcas de canto dentro da imagem
5. O ritmo vive nas páginas hero — a alternância hero / não-hero evita a fadiga visual
6. Efeitos dinâmicos devem ser opcionais — B alterna para modo estático para que a animação nunca se torne um fardo de leitura
7. Termos permanecem consistentes — Skills é Skills; sem misturar traduções
8. Layouts suíços permanecem bloqueados — Estilo B deve restaurar e reutilizar o sistema de layout original de 22 páginas em vez de inventar páginas não relacionadas

Referências visuais

• layouts da revista Monocle
• YC Garry Tan — "Arreio Fino, Habilidades Gordas"
• Massimo Vignelli / Helvetica Forever / Estilo Tipográfico Internacional Suíço
• Série de decks de palestras offline de Guizang

Roteiro

• Adicionar mais exemplos do mundo real e demos de decks HTML que podem ser abertos
• Expandir formatos de capa para mais plataformas de publicação
• Adicionar mais regras de validação de layout suíço
• Melhorar os fluxos de trabalho de redesenho de capturas de tela e geração de infográficos
• Preparar variantes específicas para marketplace como WorkBuddy
• Adicionar mais pacotes de temas curados, mantendo cores personalizadas restritas

Perguntas Frequentes

Pode exportar para PPTX? A saída principal é HTML. Você pode apresentá-lo em um navegador, capturar a tela ou gravá-lo. A conversão para PPTX pode ser feita como um fluxo de trabalho separado, mas não é o caminho principal hoje.

Por que cores personalizadas não são permitidas? A habilidade é projetada para saída visual estável. Cores arbitrárias frequentemente quebram o sistema, então os decks devem usar predefinições curadas.

Posso adicionar meu próprio layout? Sim. Os layouts do Estilo A podem ser estendidos em references/layouts.md. O Estilo B é mais rigoroso: atualize template-swiss.html, layouts-swiss.md, swiss-layout-lock.md e o validador juntos.

A geração de imagens Codex é obrigatória? Não. Decks funcionam sem imagens geradas. O fluxo de imagens é usado apenas quando você precisa de fotos, infográficos, cenas de IU ou capas.

Como atualizo a habilidade? Execute o comando de instalação novamente, ou execute git pull dentro do diretório local da habilidade.

Contribuindo

Bugs, problemas de layout, pedidos de novos layouts — Issues e PRs são bem-vindos. Priorize:

• Adicione novas classes ao template.html primeiro; não deixe layouts.md referenciar classes não definidas
• Ao alterar template-swiss.html, atualize layouts-swiss.md e swiss-layout-lock.md juntos
• Ao adicionar regras suíças, atualize scripts/validate-swiss-deck.mjs
• Registre armadilhas no checklist.md no nível correspondente P0 / P1 / P2 / P3
• Novas cores de tema vão para themes.md com um caso de uso recomendado

Licença

MIT © 2026 op7418