Na semana passada, fui convidado pelo Professor Li Jigang para participar de uma entrevista exclusiva em formato de compartilhamento privado sobre IA e organizações.
Depois da 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 a aparência dessa Skill e por que, como alguém que foi designer por dez anos, acho que ela tem boa aparência.
Como Ela É
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 na cor tinta + título principal em serifa, com um fluido WebGL sutil fluindo lentamente atrás.
- Corpo: A cor de fundo volta ao branco-papel com texto na cor tinta pressionado sobre ele, como uma revista impressa aberta.
- Virar Página: Deslizamento horizontal da esquerda para a direita, com suporte a teclado, roda do mouse e gestos de toque—não o padrão "próximo slide" do PowerPoint.
- Metadados: Cada página**: Cada página tem texto monoespaçado pequeno nos quatro cantos, exibindo coisas como "Ato II · 15 / 25", semelhante aos números de página de jornais.
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, tudo amarrado com sintaxe de interação web contemporânea.
O Que Ela Pode Fazer
A Skill atualmente oferece atualmente 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, divisões de capítulo, pôsteres de dados, texto à esquerda com imagem à direita, grades de imagens, processos em 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 empresariais, 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 motivo mais tarde.
As interações de virar página suportam as setas esquerda/direita do teclado, roda do mouse, deslizamento por toque, saltos pelos pontos inferiores 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 quebrarem 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 contar a outras pessoas depois de usá-la por uma semana.
Esclareça estas 6 coisas com a IA primeiro
Uma vez que a Skill esteja instalada, você só precisa dizer "Me ajude a fazer um PPT no estilo revista," e o Claude vai te perguntar proativamente 6 questões:
- Quem é o público e qual é o cenário? (Interno da indústria / Lançamento empresarial / Compartilhamento privado)
- Quanto tempo dura o compartilhamento? (15 min ≈ 10 páginas, 30 min ≈ 20 páginas) 1 páginas)
- Existe material original? (Documentos, dados, PPTs antigos, links de artigos)
- Há imagens, e onde elas estão localizadas?
- Qual cor de tema você quer? (Escolha entre 5 predefinições)
- Existem restrições rígidas? (Deve incluir XX dados / Não pode mostrar YY)
Você não precisa dizer tudo de uma vez; ele vai perguntar uma por uma. Após responder, ele primeiro vai te 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. Este 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 de 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 em vez de 1, cover em vez de fengmian. Isso facilita a ordenação e a referência clara pela IA.
- Use JPG para fotos, PNG para capturas de tela—Capturas de tela contêm texto; o 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 automaticamente escreverá 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 o texto está pronto, 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 Ela Tem Esta Aparência
Depois de falar sobre como usar, vamos falar sobre por que ela é do jeito que é.
Bom design não é mistério; é um conjunto de decisões decomponíveis. O que fiz é essencialmente 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 serifas 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 Cores
Branco-papel, cor tinta, mais uma cor de destaque é suficiente.
O branco puro é ofuscante, e o 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 de destaque e páginas sem destaque 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.
Fui designer por dez anos, fazendo UI, interação e efeitos de IA; essas são, na verdade, senso comum da indústria.
Eu apenas as escrevi uma por uma em SKILL.md e checklist.md para que a IA possa executá-las para mim.
Em outras palavras, esta Skill é um pacote compactado 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 simplesmente jogo os materiais para a IA, ela os monta de acordo com essas regras, e eu só preciso verificar.
Por causa disso, ousei abrir o código.
As regras não eram propriedade 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 ele completará a instalação automaticamente. Uma vez instalada, diga "Me ajude a fazer um PPT no estilo revista" para ativá-la.
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 dele.
Você também pode compartilhar os PPTs que fez com esta Skill na seção de comentários.
