# Habilidade do Agente PPT HTML da Guizang

> Gere apresentações HTML com dois estilos visuais distintos com esta Habilidade do Agente PPT, completa com geração de imagens e criação de capas multiplataforma. Crie apresentações profissionais e visualmente atraentes em segundos.

- Canonical: https://nanoskill.ai/pt/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/pt/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: pt
- Source type: github
- Popularity signal: 11121

## Sources

- https://github.com/op7418/guizang-ppt-skill

## Install

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

## About

A Habilidade do Agente PPT HTML da Guizang capacita Agentes de IA a gerar apresentações HTML profissionais e de arquivo único com facilidade. Projetado para plataformas como Claude Code e Codex, esta habilidade agiliza a criação de conteúdo visualmente atraente, oferecendo dois sistemas estéticos distintos: o estilo de Revista Eletrônica focado em narrativa e o estilo de Internacionalismo Suíço orientado a fatos. Os usuários podem transformar rapidamente artigos em decks envolventes, produzir análises detalhadas de produtos e gerar capas multiplataforma consistentes, tudo isso mantendo alta qualidade visual.

Esta habilidade se destaca por fornecer saída HTML leve, fácil de compartilhar e visualizar sem configurações complexas. Integra capacidades avançadas, como geração de imagens alimentada por IA através do GPT-Image 2.0 / GPT-M 2.0 no Codex, permitindo visuais e infográficos sensíveis ao contexto. Além disso, fornece layouts estruturados e princípios de design rigorosos, particularmente para o estilo Suíço, garantindo uma aparência polida e consistente em todo o conteúdo gerado, desde slides até capas de redes sociais.

Ideal para uma variedade de cenários, de palestras internas e lançamentos de produtos a compartilhamento pessoal e apresentações de métodos, a Habilidade do Agente PPT HTML da Guizang simplifica os fluxos de trabalho de criação de conteúdo. Permite aos usuários converter conteúdo de formato longo em apresentações concisas, aprimorar capturas de tela de produtos para se adequarem a proporções de modelo específicas e garantir uma identidade visual coesa em todos os canais de comunicação. O foco da habilidade em fluxos de trabalho estruturados e regras visuais predefinidas garante resultados de alta qualidade e esteticamente agradáveis com o mínimo esforço.

## Key features

- **Sistemas Visuais Duais**: Escolha entre 'Estilo A: Revista Eletrônica × E-ink' para narrativa e expressão pessoal, ou 'Estilo B: Internacionalismo Suíço' para fatos, análise de produtos e metodologias, garantindo que sua mensagem seja transmitida de forma eficaz.
- **Saída HTML em Arquivo Único**: Gere apresentações HTML leves e autossuficientes que não exigem processo de build ou servidor, facilitando a abertura, compartilhamento e demonstração diretamente em qualquer navegador web.
- **Compatibilidade com AI Agent**: Projetado para Claude Code, Codex e outros AI Agents com acesso ao shell, permitindo geração, modificação e iteração perfeitas de HTML PPTs através de comandos em linguagem natural.
- **Geração de Imagens Codex**: Integre o GPT-Image 2.0 / GPT-M 2.0 dentro do Codex para gerar imagens, infográficos e cenários de interface de alta qualidade e sensíveis ao contexto, perfeitamente dimensionados e inseridos nos seus slides.
- **Geração de Capas Multiplataforma**: Crie automaticamente capas consistentes e visualmente unificadas para várias plataformas como Contas Oficiais do WeChat (21:9, 1:1), Xiaohongshu (3:4) e Contas de Vídeo (16:9) com base no conteúdo central da sua apresentação.

## Use cases

- **Transforme Artigos em Apresentações**: Converta artigos ou documentos longos em HTML PPTs concisos e envolventes para discursos, palestras internas ou sessões de compartilhamento privado, extraindo ideias centrais e estruturando-as em uma narrativa convincente.
- **Crie Análises Profissionais de Produtos**: Utilize o estruturado 'Estilo B: Internacionalismo Suíço' para apresentar análises de produtos, metodologias ou lançamentos de produtos de IA com foco em fatos, dados e comunicação visual clara.
- **Projete Conteúdo Multiplataforma Consistente**: Gere uma identidade visual unificada em sua apresentação, imagens complementares e várias capas de mídia social, garantindo consistência de marca e impacto em todos os seus canais de comunicação.
- **Aprimore Capturas de Tela para PPTs**: Redesenhe e adapte capturas de tela de produtos para se adequarem aos templates de apresentação, mantendo informações-chave enquanto alcança um estilo visual consistente adequado para HTML PPTs profissionais.

## Result preview

Veja um PPT real gerado a partir de um artigo por esta Habilidade do Agente.

![guizang-ppt-demo01](https://file.nanoskill.ai/guizang-ppt-demo01)

![guizang-ppt-demo02](https://file.nanoskill.ai/guizang-ppt-demo02)

![guizang-ppt-demo-03](https://file.nanoskill.ai/guizang-ppt-demo-03)

## Result walkthrough

### Passo 1：Instalar

Adicione a habilidade ao seu agente.

![guizang-ppt-step-1](https://file.nanoskill.ai/guizang-ppt-step-1)

### Passo 2：Fornecer Conteúdo

Digite um tópico, notas ou faça upload de material existente (por exemplo, relatório, esboço, ideias).

![guizang-ppt-step-2](https://file.nanoskill.ai/guizang-ppt-step-2)

### Passo 3：Obtenha seu PPT

Revise a apresentação HTML que você pode usar diretamente.

![guizang-ppt-step-03](https://file.nanoskill.ai/guizang-ppt-step-03)

## Skill definition

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](https://x.com/op7418) 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**

![Style A Editorial Magazine preview](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-6.png)

**Novo Tema · Estilo B Suíço Internacional**

![Style B Swiss International preview](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-6.png)

## Começo em 30 segundos

```bash
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:

```text
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:

```text
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:

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

Outros prompts úteis:

```text
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

| Tarefa | Fluxo recomendado |
|------|------------------|
| Artigo longo para deck de palestra | Extraia o argumento central, então construa um ritmo de 6-10 slides |
| Análise de framework / produto | Use Estilo B Suíço com layouts bloqueados e visuais hero 21:9 |
| Palestra pessoal / artigo de opinião | Use Estilo A revista editorial para um ritmo narrativo mais forte |
| Visuais do deck | No Codex, gere fotos, infográficos, diagramas de fluxo, mapas de sistema ou cenas de IU |
| Capas sociais | Gere capas principais 21:9, cartões de compartilhamento 1:1, capas verticais 3:4 e miniaturas de vídeo a partir da mesma ideia |
| Normalização de capturas de tela | Redesenhe capturas de tela brutas em proporções seguras para o template antes de inseri-las nos slides |

## 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

| Plataforma | Status | Notas |
|----------|--------|-------|
| Claude Code | Suportado | Fluxo de trabalho nativo de Skill para criar e iterar decks HTML |
| Codex | Suportado | Bom para geração de deck, geração de imagens e QA visual baseado em navegador |
| Cursor / outros agentes locais | Funciona | Requer acesso ao sistema de arquivos e execução de shell |
| WorkBuddy | Em adaptação | Uma versão pronta para o marketplace está sendo preparada separadamente |
| Chatbot comum | Não recomendado | Sem sistema de arquivos e visualização no navegador, a geração completa de deck é difícil de estabilizar |

## Instalar

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

```bash
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

```bash
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`](./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:

```bash
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`](./references/image-prompts.md). O enquadramento de capturas de tela está em [`references/screenshot-framing.md`](./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:

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

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

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

```text
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

| Preview | Tema | Cores principais e melhor para |
|---------|------|-------------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-6.png" width="260" alt="Ink Classic theme preview"> | 🖋 **Tinta Clássica** | `#0a0a0b` / `#f1efea`. Padrão geral, lançamentos comerciais, em caso de dúvida. |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-6.png" width="260" alt="Indigo Porcelain theme preview"> | 🌊 **Porcelana Índigo** | `#0a1f3d` / `#f1f3f5`. Tecnologia, pesquisa, IA, keynotes técnicas. |
| <img src="https://github.com/user-attachments/assets/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657" width="260" alt="Forest Ink theme preview"> | 🌿 **Tinta Floresta** | `#1a2e1f` / `#f5f1e8`. Natureza, sustentabilidade, cultura, não-ficção. |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-6.png" width="260" alt="Kraft Paper theme preview"> | 🍂 **Papel Kraft** | `#2a1e13` / `#eedfc7`. Nostálgico, humanista, literário, zines independentes. |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-6.png" width="260" alt="Dune theme preview"> | 🌙 **Duna** | `#1f1a14` / `#f0e6d2`. Arte, design, criatividade, moda, decks tipo galeria. |

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.

| Preview | Tema | Cor âncora e melhor para |
|---------|------|---------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-6.png" width="260" alt="International Klein Blue Swiss theme preview"> | 🔵 **Azul Klein Internacional** | `#002FA7`. Padrão, lançamentos comerciais, produtos de IA, frameworks. |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-6.png" width="260" alt="Lemon Yellow Swiss theme preview"> | 🟡 **Amarelo Limão** | `#FFD500`. Juventude, esportes, varejo, bens de consumo, retrô Y2K. |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-6.png" width="260" alt="Lemon Green Swiss theme preview"> | 🟢 **Verde Limão** | `#C5E803`. Ecologia, sustentabilidade, saúde, marcas Gen Z. |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-6.png" width="260" alt="Safety Orange Swiss theme preview"> | 🟠 **Laranja de Segurança** | `#FF6B35`. Alertas, notícias, tópicos industriais, esportes, temas energéticos. |

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*](https://monocle.com)
- 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](https://github.com/op7418)

## FAQ

### O que é o Guizang HTML PPT Agent Skill?

O Guizang HTML PPT Skill é uma ferramenta compatível com AI Agent, projetada para gerar apresentações HTML em arquivo único, imagens complementares e capas multiplataforma. Oferece dois estilos visuais distintos: Revista Eletrônica e Internacionalismo Suíço.

### Como instalo o Guizang HTML PPT Agent Skill?

Você pode instalá-lo executando \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` no seu terminal, ou instruindo um AI Agent com acesso ao shell para clonar o repositório no seu diretório de skills.

### Posso personalizar as cores do meu HTML PPT?

Não, valores HEX personalizados não são permitidos. A skill oferece uma seleção de temas predefinidos tanto para o Estilo A (Revista Eletrônica) quanto para o Estilo B (Internacionalismo Suíço) para garantir consistência estética e qualidade na saída.

### Quais são os dois estilos visuais oferecidos?

O Estilo A, 'Revista Eletrônica × E-ink,' é ideal para contar histórias, opiniões e expressão pessoal. O Estilo B, 'Internacionalismo Suíço,' é mais adequado para apresentar fatos, análises de produtos e metodologias com um design minimalista baseado em grade.

### É possível exportar o HTML PPT para o formato PPTX?

A entrega principal é HTML, que pode ser demonstrada diretamente em um navegador, capturada como screenshot ou gravada. Embora a exportação direta para PPTX não seja uma funcionalidade primária, você pode usar as páginas HTML como rascunhos visuais para conversão, se necessário.

### A skill suporta geração de imagens para o meu HTML PPT?

Sim, quando usada em um ambiente Codex, a skill pode aproveitar o GPT-Image 2.0 / GPT-M 2.0 para gerar vários tipos de imagens, infográficos e cenários de interface, que são então inseridos na sua apresentação de acordo com as proporções do template.
