Há algum tempo, eu abri o código do guizang-ppt-skill e, mais tarde, descobri algo enquanto o usava para criar conteúdo por conta própria.
As páginas web geradas por ele, quando capturadas de tela e postadas em plataformas de imagem e texto, recebiam feedback e dados muito melhores do que meus layouts manuais.
Acredito que você já encontrou alguns prompts ou Skills antes que geram essas imagens de cartão 3:4.
Elas quase todas têm o mesmo sabor: Tailwind + grandes blocos de cor + empilhamento de emojis + hierarquia de fontes medíocre.
Depois de olhar para elas, posso entender aproximadamente por que os cartões de imagem e texto gerados por IA são tão fáceis de identificar de relance — eles estão fazendo páginas web, não revistas.
Cartões de imagem e texto são uma fera completamente diferente comparados aos PPTs: telas verticais, uma decisão de 1 segundo no fluxo de informações se deve parar ou não, e dependem de imagens, não de palavras.
Layouts diferentes, ritmos diferentes, leitores diferentes.
Então eu separei isso do PPT Skill e transformei em um guizang-social-card-skill independente (https://github.com/op7418/guizang-social-card-skill).
Abaixo, vou falar sobre por que ele é bom e por que estou disposto a gastar tanto tempo com ele.
2. Afinal, por que ele é tão bom?
Imagens verticais 3:4 são o campo de batalha principal para cartões de imagem e texto. A maior parte da energia de design deste Skill foi gasta no 3:4 — hierarquia de fontes, proporções de layout e regras de quebra de linha.
Tudo foi calibrado de acordo com o cenário real de ser deslizado em um fluxo de informações móvel. Também são suportados cabeçalhos de imagens 21:9 e 1:1 para o WeChat Official Account.
Vamos começar com o que mais importa para os criadores de conteúdo de imagem e texto.
2.1 Ele distingue o que você está escrevendo e combina com o estilo certo
O conteúdo em plataformas de imagem e texto é categorizado. Uma crítica de filme e uma resenha de produto exigem linguagens visuais completamente diferentes;
Um diário de viagem e dicas de trabalho devem usar layouts diferentes.
Mas a maioria das ferramentas de IA não se importa com isso; elas usam o mesmo template para tudo o que você escreve.
O resultado é que os cartões de todos parecem ter saído de uma linha de montagem de capas do WeChat Official Account.
Este Skill tem regras de adaptação embutidas para 11 categorias comuns de imagem e texto:
- Viagem / Estilo de Vida: Estilo revista, paleta de cores quentes, imagens em tela cheia, títulos grandes com serifa;
- Trabalho / Dicas / Insights de Negócios: Estilo grade, fundos escuros, layouts de pôster com muitos dados;
- Filme / Cultura: Estilo revista com tons frios, layouts de pôster de cinema, close-ups de personagens priorizados;
- Resenhas de Produtos / Digital: Estilo grade, matrizes de comparação, capturas de tela emolduradas por dispositivos;
- Leitura / Notas: Estilo revista, fontes com serifa, layouts de citação centralizada, máximo espaço em branco;
- Comida / Visitas a Restaurantes: Estilo revista de alta saturação, fotos de cima para baixo priorizadas, texto movido para os cantos;
Eu até fiz um componente de mapa especificamente para blogueiros de viagem. Você pode marcar locais de lojas e rotas de viagem nele, e a IA gerará anotações automaticamente para você.
Alimente-o com o mesmo texto: diga a ele que é uma crítica de filme, e ele te dá um cartão no estilo pôster de cinema; diga a ele que é uma resenha de produto, e ele te dá um gráfico de comparação com molduras de dispositivos.
Mais importante ainda, ele tem "zonas de exclusão" claras:
- Conteúdo voltado para fãs: a linguagem visual necessária é completamente diferente;
- Anúncios puramente promocionais: contradiz sua filosofia de design que enfatiza o conteúdo;
- Tutoriais longos com mais de 12 telas: o formato de imagem e texto não é o melhor veículo para tutoriais longos.
Nesses cenários, o Skill te dirá logo no início: "Você pode querer usar outra ferramenta."
Deixei isso intencionalmente. Limites definem um produto mais do que as próprias capacidades; um Skill que tenta fazer tudo geralmente acaba não fazendo nada bem.
2.2 Como sobrepor texto em imagens
Sobrepor texto em imagens é a parte mais difícil dos cartões de imagem e texto e o lugar onde o "jeitão de IA" é mais facilmente exposto.
Se não for bem feito, três tipos de falhas ocorrem:
- O texto cobre rostos ou o centro do produto.
- Texto branco em fundos claros ou texto preto em fundos escuros fica ilegível.
- O texto se estende por toda a imagem, estragando uma composição que seria bonita.
O Skill lida com isso em três etapas:
- Identifica os sujeitos na imagem: rostos, produtos, áreas densas em texto, e automaticamente os evita no layout;
- Calcula a cor e o brilho da área de aterrissagem: decide a cor do texto, se deve adicionar uma máscara e quão profunda a sombra deve ser;
- Tamanho de fonte adaptativo e quebra de linha: ajusta dinamicamente o tamanho da fonte e as posições de quebra de linha com base no tamanho da área de aterrissagem, em vez de codificar um tamanho de fonte fixo que transborda.
Com essas regras, a "sensação premium" do cartão é estabelecida. Os leitores não conseguem distinguir entre "texto pressionado" e "texto que estava originalmente lá."
2.3 De onde vêm as imagens: Esta é a maior diferença de outras ferramentas de cartão de IA
A maioria das ferramentas de IA para gerar cartões de imagem e texto ou pede para você enviar suas próprias imagens, usar emojis em vez disso, ou gerar ilustrações que parecem de IA à primeira vista.
O resultado é que caçar imagens manualmente é exaustivo, ou empilhar emojis parece falso.
Este Skill está conectado a três bibliotecas de imagens gratuitas para uso comercial por padrão:
- Pexels: suporta pesquisa em chinês, bom para cenários gerais;
- Unsplash: textura fotográfica mais forte, a primeira escolha para conteúdo sobre pessoas, vida e espaço;
- Wallhaven: jogos, fotografia e wallpapers estão todos aqui, embora os direitos autorais sejam confusos.
Ele automaticamente despacha termos de busca com base na semântica dos parágrafos de texto, recupera imagens, as corta para se ajustar ao layout e evita cortar rostos ou sujeitos.
Você obtém um cartão com fotografia real, não um cartão de bloco de cores.
E ele não é rígido em encontrar imagens absolutamente livres de problemas de direitos autorais. Ele te dirá quais imagens encontrou, e você decide se quer usar imagens com direitos autorais incertos.
Além disso, as plataformas estão atualmente muito rigorosas com marcas d'água de IA. A maioria das imagens geradas por IA que você usa agora tem marcas d'água, que são sinalizadas pelas plataformas e podem levar a shadowbanning. Este é um grande ponto de dor.
2.4 Capturas de tela também são imagens: O Embelezamento de Quatro Peças
Grande parte do nosso conteúdo não pode usar fotografia; precisa ser capturas de tela de software, registros de chat ou interfaces de produto.
O Skill tem um embelezador de captura de tela embutido:
Adiciona molduras de dispositivo estilo macOS/iOS (cromo do navegador ou bordas de telefone), usa diferentes texturas de fundo para segurar a captura de tela — papel quadriculado, matriz de pontos, branco quente ou escuro — para que a captura de tela não flutue mais com um fundo branco sobre um fundo branco;
Ao mesmo tempo, ele automaticamente combina camadas de sombra e parâmetros de raio de canto com base no estilo visual. Cada estilo tem uma receita de captura de tela, garantindo consistência sem ajuste manual.
Simplificando, uma captura de tela aleatória que você tira parecerá uma imagem promocional oficial de produto depois de passar por ele.
2.5 Geração de Imagem por IA: Use com Moderação
O Skill só solicita geração de imagem por IA quando todas as fontes de imagem anteriores falham em encontrar material adequado.
Ao gerar imagens, ele força palavras de restrição de estilo para evitar o visual medíocre de "ilustrações de IA óbvias."
Prefiro que ele use IA menos do que a use de uma forma que faça todos os cartões de imagem e texto parecerem irmãos. Isso também evita que a exposição do conteúdo seja afetada pelo uso de imagens de IA.
2.6 Sistema Visual: Dois Estilos + 28 Esqueletos de Layout
Aqueles familiarizados com meu PPT Skill anterior acharão isso familiar. Esses dois sistemas visuais e esqueletos de layout foram adaptados e recalibrados do PPT Skill.
Não vou repetir os detalhes, mas aqui está como eles se parecem no contexto do cartão de imagem e texto.
Dois sistemas visuais:
- Estilo Revista: O tipo de tipografia que você vê nas capas da The New Yorker ou da Shanghai Translation Publishing House. Grande espaço em branco, títulos grandes com serifa, layouts assimétricos e texto com espaço para respirar.
- Estilo Grade: Na linha do design gráfico suíço de Massimo Vignelli e Helmut Schmid. Grades fortes, fontes sem serifa, sensação geométrica, uso de cor contido mas preciso.
28 esqueletos de layout, que selecionei de revistas, pôsteres, capas de álbuns e pôsteres de filmes que vi na última década — aqueles que resistem ao escrutínio.
A IA ainda é medíocre em "design de layout livre." Ao dar a ela um esqueleto comprovado, sua tarefa é rebaixada de "projetar" para "preencher", e a estabilidade do produto final melhora imediatamente.
10 conjuntos de paletas de cores temáticas, pares de fontes fixos e bibliotecas de ícones limitadas — não vou listar esses detalhes um por um.
A lógica é a mesma: restrições não são obstáculos; elas são a linha de base.
Dê a um criador de conteúdo escolhas de cores infinitas, e é mais provável que ele faça algo feio; dê a ele 10 conjuntos de paletas comprovadas, e a probabilidade de ele fazer algo decente se aproxima de 100%.
3. Por que fazer isso?
3.1 Perspectiva de Design: A sensação de revista é muito eficaz
Por que escolher estilos de revista e grade em vez de designs de cartão mais "modernos"?
A essência de um cartão de imagem e texto é a mesma de um pôster impresso, pictorial ou capa de álbum. Usar uma imagem estática para convencer um estranho a parar em 1 segundo. Revistas e pôsteres estudaram isso exaustivamente nos últimos cem anos.
A linguagem de design web é feita para cenários roláveis e interativos. Movê-la para uma imagem estática faz com que pareça forçada e a informação, plana.
Então, todos os "porquês" das decisões visuais deste Skill:
- Por que grande espaço em branco? Espaço em branco é a maneira da revista te dizer "o foco está aqui."
- Por que priorizar fontes com serifa? Fontes com serifa têm o peso de material impresso em tamanhos grandes.
- Por que layouts assimétricos? Assimetria cria ritmo visual, deixando o olho saber para onde olhar primeiro.
- Por que cores contidas? Em feeds de redes sociais, uma paleta contida é na verdade mais atraente do que alta saturação; ela se destaca de todos os cartões "gritando alto" ao redor.
Essas decisões soam "abstratas", mas são todas constantes específicas no código. Proporções de tamanho de fonte, proporções de espaço em branco, números de colunas de grade, limites de contraste, regras de quebra de linha. Essas constantes são o verdadeiro fosso deste Skill.
3.2 Perspectiva de Produto: É um produto, não apenas um Prompt
Depois de fazer tantos Skills, formei um julgamento sobre "o que um Skill realmente é":
Um Skill é essencialmente um pequeno produto.
Aplicado a este projeto:
Eu escrevi um PRODUCT.md para ele, explicando claramente que problema ele resolve, para quem é e o que ele não faz. É para me forçar a pensar claramente sobre "o que estou realmente fazendo." Se não consigo explicar, o Skill não deveria ser lançado.
Eu dou a ele números de versão (v0.5 / v0.9 / v0.10 / v0.12), e toda versão tem um CHANGELOG. Posso te dizer por que a v0.10 foi uma tentativa fracassada e como a v0.12 corrigiu isso.
Eu escrevi um HANDOVER.md para ele, explicando como são as entregas, onde estão os limites e quando usar outras ferramentas. Espero que qualquer um que o assuma possa ter uma compreensão completa dele em 30 minutos.
Eu listo no que ele não é bom antecipadamente para poupar os usuários de tentativa e erro.
Por que todo esse trabalho?
Porque o maior problema com o ecossistema de Skills é que a maioria dos Skills se satisfaz com "eu consigo fazer um", e poucas pessoas buscam "fazer até o extremo."
Um Skill deve ser um pequeno produto que possa se sustentar sozinho. Um Prompt pode ser copiado por um concorrente em dez minutos; um produto não pode.
O outro lado é, se eu não consigo nem explicar os limites do meu próprio Skill, não tenho o direito de pedir aos outros que entreguem seu fluxo de trabalho a ele.
Palavras Finais
Este Skill me ajudou a entender o que meu PPT Skill realmente acertou.
O que ele acertou foi que foi tratado como um produto desde o início. Muitos templates, regras detalhadas e cores bonitas são todos subprodutos disso.
Se alguém me perguntar o que é um Skill no futuro, responderei com duas frases:
Um Skill é um produto. Para julgar se um Skill é bom, veja se ele foi favorecido por seu autor.
Se você também está criando conteúdo de imagem e texto, espero que ele ajude você a salvar aqueles bons tópicos arruinados por um layout ruim.
Se você também está fazendo Skills, espero que isso te faça repensar se a coisa que você fez merece ter um PRODUCT.md.
GitHub: https://github.com/op7418/guizang-social-card-skill
Diga ao seu Codex, Xiaolongxia, ClaudeCode ou Workbuddy: Ajude-me a instalar este Skill: https://github.com/op7418/guizang-social-card-skill
