Há algum tempo, eu open-sourcei o guizang-ppt-skill, e depois descobri algo enquanto o usava para criar conteúdo.
As páginas web geradas por ele, quando capturadas de tela e postadas em plataformas de imagem-texto, recebiam feedback e dados muito melhores do que meus layouts manuais.
Acredito que você já encontrou alguns prompts ou Skills 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 mediana.
Depois de olhar para elas, consigo entender por que os cartões de imagem-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-texto são uma fera completamente diferente em comparação com PPTs: telas verticais, uma decisão de 1 segundo no fluxo de informações para parar ou não, e dependendo de imagens em vez de palavras.
Layouts diferentes, ritmos diferentes, leitores diferentes.
Então eu o separei do PPT Skill e o 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 nele.
2. Por que exatamente ele é bom?
Imagens verticais 3:4 são o campo de batalha principal para cartões de imagem-texto. A maior parte da energia de design deste Skill foi gasta em 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. 21:9 e 1:1 para imagens de cabeçalho do WeChat Official Account também são suportados.
Vamos começar com o que os criadores de imagem-texto mais se importam.
2.1 Ele distingue o que você está escrevendo e combina com o estilo certo
O conteúdo em plataformas de imagem-texto é categorizado. Uma resenha 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 o que você escreve.
O resultado é que os cartões de todos parecem que saíram 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-texto:
- Viagem / Estilo de vida: Estilo revista, paleta de cores quentes, imagens em tela cheia, títulos serifados grandes;
- 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 filme, 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 serifadas, layouts de citação centralizados, máximo de espaço em branco;
- Comida / Visitas a lugares: 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 vai gerar anotações automaticamente para você.
Alimente-o com o mesmo texto: diga que é uma resenha de filme, e ele te dá um cartão no estilo pôster de filme; diga que é uma resenha de produto, e ele te dá um gráfico de comparação com molduras de dispositivos.
Mais importante, ele tem "zonas proibidas" claras:
- Conteúdo voltado para fãs: a linguagem visual necessária é completamente diferente;
- Anúncios puramente promocionais: contradiz sua filosofia de design de enfatizar conteúdo;
- Tutoriais longos com mais de 12 telas: o formato imagem-texto não é o melhor veículo para tutoriais longos.
Nesses cenários, o Skill vai te dizer no começo: "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-texto e o lugar onde o "sentimento 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, arruinando uma composição que seria bonita.
O Skill lida com isso em três etapas:
- Identificar sujeitos na imagem: rostos, produtos, áreas densas em texto, e automaticamente evitá-los no layout;
- Calcular a cor e o brilho da área de aterrissagem: decidir a cor do texto, se deve adicionar uma máscara e quão profunda deve ser a sombra;
- Tamanho de fonte adaptativo e quebra de linha: ajustar 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 que transborda.
Com essas regras, o "toque premium" do cartão é estabelecido. 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-texto ou pede para você enviar suas próprias imagens, usar emojis como substitutos, ou gerar ilustrações que parecem 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 papéis de parede estão todos aqui, embora os direitos autorais sejam confusos.
Ele despacha automaticamente termos de pesquisa 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 cor.
E não é rígido em encontrar imagens absolutamente livres de problemas de direitos autorais. Ele vai te dizer 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: A Embelezamento em 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 no estilo macOS/iOS (cromada de 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, combina automaticamente camadas de sombra e parâmetros de raio de canto com base no estilo visual. Dois estilos têm cada um uma receita de captura de tela, garantindo consistência sem ajuste manual.
Simplificando, uma captura de tela aleatória que você tira vai 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ó chama a 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 os visuais medíocres de "ilustrações de IA óbvias."
Prefiro que ele use IA menos do que use IA de uma forma que faça todos os cartões de imagem-texto parecerem irmãs. 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-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. Grandes espaços em branco, títulos serifados grandes, 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.
IA ainda é medíocre em "design de layout livre." Ao dar a ela um esqueleto comprovado, sua tarefa é reduzida 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 infinitas opções de cores, e ele é mais propenso a fazer 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 ir com estilos de revista e grade em vez de designs de cartão mais "modernos"?
A essência de um cartão de imagem-texto é a mesma de um pôster impresso, pictorial ou capa de álbum. Use 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 a faz parecer forçada e a informação, plana.
Então, todos os "porquês" das decisões visuais deste Skill:
- Por que grandes espaços em branco? Espaço em branco é a maneira da revista de te dizer "o foco está aqui."
- Por que priorizar fontes serifadas? Fontes serifadas têm o peso do material impresso em tamanhos grandes.
- Por que layouts assimétricos? Assimetria cria ritmo visual, deixando o olho saber onde olhar primeiro.
- Por que cores contidas? Em feeds de mídia social, 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, contagens 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:
Escrevi um PRODUCT.md para ele, explicando claramente qual problema ele resolve, para quem é e o que 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 deve ser lançado.
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 v0.10 foi uma tentativa fracassada e como v0.12 a corrigiu.
Escrevi um HANDOVER.md para ele, explicando como são os entregáveis, 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.
Listo no que ele não é bom de antemão 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 está satisfeita com "eu consigo fazer um", e poucas pessoas buscam "fazer ao 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.
O outro lado é, se 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-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 ele faça você 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: Me ajude a instalar este Skill: https://github.com/op7418/guizang-social-card-skill
