Na semana passada, fui convidado pelo Professor Li Jigang para participar de uma entrevista particular sobre IA e organizações.
Após a sessão, descobri que a pergunta mais frequente era: "Com o que foi feito esse PPT? Você pode abrir o código?"
Não esperava que o subproduto se tornasse o produto principal.
Então, decidi abrir o código, chamando-o de guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
O artigo de hoje vai falar sobre como é essa Skill e por que, como designer há dez anos, acho que ela tem uma boa aparência.
Como é
Quando você abre um PPT gerado pela Skill, a primeira impressão provavelmente é: isso não parece ter sido feito por IA.
Algumas características intuitivas:
- Capa: Fundo cor de tinta + título principal com serifa, com um fluido WebGL sutil fluindo lentamente ao fundo.
- Corpo: A cor de fundo volta ao branco papel com texto cor de tinta impresso sobre ele, como uma revista impressa aberta.
- Virar página: Deslizamento horizontal da esquerda para a direita, suportando teclado, roda do mouse e gestos de toque—não o padrão "próximo slide" do PowerPoint.
- Metadados: Cada página tem pequenos textos monoespaçados nos quatro cantos, mostrando coisas como "Ato II · 15 / 25", semelhante aos números de página de um jornal.
Dei a esse tom visual um nome: "Revista Eletrônica × E-Ink."
A inspiração vem das tradições de layout de revistas impressas como Monocle, The Guardian e NYT, sobrepostas à estética de leitura do papel eletrônico Kindle, todas unidas com a sintaxe de interação web contemporânea.
O que ela pode fazer
A Skill atualmente oferece 10 layouts de página, 5 predefinições de cores de tema e um conjunto completo de interações de virar página.
10 Layouts cobrem quase todos os tipos de página usados em uma sessão de compartilhamento de 15 a 30 páginas:
Capa de abertura, quebras de capítulo, pôster de dados, texto à esquerda-imagem à direita, grades de imagens, processos de pipeline, perguntas de suspense, citações grandes, comparações Antes/Depois e layouts mistos de texto e imagem.
Cada um é um esqueleto HTML que pode ser colado diretamente; basta alterar o texto e as imagens para usar.
5 Temas correspondem a diferentes cenários:
- Ink Classic — Lançamentos de negócios, padrão geral
- Indigo Porcelain — Tecnologia, pesquisa, conferências de IA
- Forest Ink — Natureza, sustentabilidade, humanidades
- Kraft Paper — Nostalgia, literatura, revistas independentes
- Dune — Arte, design, criatividade
Cada tema é apenas um conjunto diferente de valores para 6 variáveis CSS. Mudar de tema requer apenas substituir essas 6 linhas de código no :root.
Os usuários não podem personalizar códigos hexadecimais; explicarei o porquê mais tarde.
As interações de virar página suportam as setas esquerda/direita do teclado, roda do mouse, deslizamento por toque, saltos por pontos na parte inferior e a tecla ESC para abrir um índice de miniaturas.
O objetivo é chegar o mais próximo possível da experiência de folhear uma revista real no navegador.
A saída é um HTML de arquivo único. Clique duas vezes para visualizar no navegador. Enviar para outras pessoas é apenas um arquivo, então você não precisa se preocupar com fontes ou animações quebrando no computador de outra pessoa.
Como usar
Na verdade, o verdadeiro valor desta Skill não está no modelo em si, mas no fato de que ela define uma interface para a colaboração Humano × IA em PPTs.
Aqui estão três coisas que acho mais valiosas para compartilhar depois de usar por uma semana.
Esclareça estas 6 coisas com a IA primeiro
Uma vez que a Skill está instalada, você só precisa dizer "Me ajude a fazer um PPT no estilo revista", e o Claude vai perguntar proativamente 6 coisas:
- Quem é o público e qual é o cenário? (Interno da indústria / Lançamento de negócios / Compartilhamento privado)
- Quanto tempo dura a apresentação? (15 min ≈ 10 páginas, 30 min ≈ 20 páginas)
- Há material original? (Documentos, dados, PPTs antigos, links de artigos)
- Há imagens e onde estão localizadas?
- Qual cor de tema você quer? (Escolha entre 5 predefinições)
- Há restrições rígidas? (Deve incluir dados XX / Não pode mostrar YY)
Você não precisa dizer tudo de uma vez; ele vai perguntar uma por uma. Depois de responder, ele primeiro dará um esboço e uma tabela de ritmo de tema. Alinhe primeiro, depois comece a escrever o código—esse passo evita 80% do meu retrabalho.
O maior ponto de dor de usar IA para PPTs antes era que ela começava a escrever imediatamente, e você só percebia que a direção estava errada na página 10. Esse processo de esclarecimento move o "alinhamento" para o início.
Como inserir imagens
As imagens são colocadas em uma pasta images/ no mesmo nível do index.html, com regras de nomenclatura específicas:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- Números de página com zero à esquerda + semântica em inglês—01 em vez de 1, cover em vez de fengmian. Isso facilita a classificação e a referência clara da IA.
- Use JPG para fotos, PNG para capturas de tela—Capturas de tela contêm texto; PNG as mantém nítidas.
- Largura da imagem única ≥ 1600px—Para não ficar borrada em projeções de tela grande.
Você só precisa dizer ao Claude "A página 3 é uma captura de tela da interface do Figma", e ele escreverá automaticamente como images/03-figma.png. Você só coloca o arquivo com o mesmo nome na pasta.
O segredo para substituição de imagem sem perdas: Sobrescreva com o mesmo nome
Esta é a maior armadilha que encontrei—querer mudar uma imagem depois que a cópia está pronta, e então ter que pesquisar e substituir caminhos globalmente, o que muitas vezes quebra o HTML.
A maneira correta é apenas uma frase: Sobrescreva a imagem antiga com a nova usando o mesmo nome e não mude um único caractere no HTML.
Por que é assim
Depois de falar sobre como usar, vamos falar sobre por que é do jeito que é.
Bom design não é mistério; é um conjunto de decisões decomponíveis. O que fiz essencialmente foi mover a linguagem de layout acumulada pela indústria de revistas ao longo de cem anos para o HTML.
Divisão tipográfica em três níveis
- Serifa → "Opiniões". Use serifa para títulos principais; os leitores imediatamente sentem "esta é uma frase que deve ser levada a sério."
- Sem serifa → "Informação". Alta densidade para o corpo do texto, fácil de ler.
- Monoespaçada → "Metadados". Números de capítulo, datas e números de página em cabeçalhos e rodapés, como rodapés de revista ou código em um terminal.
Os leitores não precisam pensar muito; seus olhos automaticamente sabem se uma frase é o texto principal ou uma nota de rodapé.
Disciplina de cor
Branco papel, cor de tinta, mais uma cor de destaque é suficiente.
Branco puro é ofuscante, e preto puro é agressivo; a indústria gráfica nunca faz isso, e o Kindle também não.
Nos 5 temas da Skill, nenhuma das cores de fundo é #FFFFFF, e nenhuma das cores de texto é #000000.
Cada conjunto expõe apenas 6 variáveis CSS, e o SKILL.md afirma explicitamente: Os usuários não podem personalizar códigos hexadecimais; devem escolher um dos cinco.
Quanto mais rígidas as restrições, mais estável o estilo. Proteger a estética é mais importante que dar liberdade ao usuário.
Grade e Ritmo
Grades fixas como 7:5, 6:6 e 8:4 garantem ordem em uma única página.
Páginas heróis e páginas não heróis devem alternar para garantir o ritmo de toda a apresentação.
Uma página densa, uma página esparsa—essa é a sensação de "respiração" que você tem ao folhear uma revista.
Uma regra rígida está escrita na Skill: mais de três páginas consecutivas com o mesmo tema é considerado um erro P0.
Um PPT sem ritmo é apenas uma pilha de slides jogados em um PDF.
Palavras Finais
Nenhuma das regras acima foi inventada por mim.
Sou designer há dez anos, fazendo UI, interação e efeitos de IA; estas são, na verdade, senso comum da indústria.
Eu apenas as escrevi uma por uma no SKILL.md e no checklist.md para que a IA possa executá-las para mim.
Em outras palavras, esta Skill é um pacote comprimido dos meus dez anos de estética.
Anteriormente, para fazer um PPT decente, eu tinha que passar dois dias ajustando grades manualmente, escolhendo tamanhos de fonte e selecionando valores de cor.
Agora, eu apenas jogo os materiais para a IA, ela os monta de acordo com essas regras, e eu só preciso verificar.
Por causa disso, ouso abrir o código.
As regras não eram propriedade exclusiva minha; designers da Monocle as usaram décadas antes de mim. Eu apenas as copiei para o HTML de 2026.
A Skill já está no GitHub: github.com/op7418/guizang-ppt-skill
O README contém um "prompt de instalação para IA." Copie e cole no seu Claude Code ou outro Agente de IA, e a instalação será concluída automaticamente. Uma vez instalado, diga "Me ajude a fazer um PPT no estilo revista" para ativá-lo.
Você também pode usá-lo dentro do Bloome Agent, que atualmente é gratuito:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Se você achou este conteúdo útil, por favor, dê um like ou compartilhe com amigos que precisam.
Você também pode compartilhar os PPTs que fez com esta Skill na seção de comentários.
