Habilidade do Agente de Cartões Sociais

Uma habilidade de agente para ambientes como Claude Code, Codex e codificação similar. Gera imagens de carrossel para Xiaohongshu / Rednote e pares de capa WeChat 21:9 + 1:1 a partir de artigos, textos, capturas de tela, notas de produtos, legendas ou fotos.

Dois sistemas visuais compartilham um fluxo de trabalho:

• Editorial. Layouts contidos no espírito de Monocle / Kinfolk / Cereal. Ideal para storytelling, estilo de vida, viagens, leitura, cinema e observações pessoais.
• Internacional Suíço. Baseado em grid, com uma única cor âncora, linhas finas e contraste tipográfico extremo. Ideal para análises de produtos, dados, frameworks, tutoriais e ferramentas de IA.

Projeto irmão do guizang-ppt-skill. Linguagem visual compartilhada, manutenção separada. O PPT resolve "apresentações de deslize horizontal"; este resolve "imagens estáticas para feed."

Início em 30 segundos

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Ou cole isso em um agente de IA com acesso ao shell:

Instale o guizang-social-card-skill para mim. Clone https://github.com/op7418/guizang-social-card-skill em ~/.claude/skills/guizang-social-card-skill e verifique se SKILL.md, assets/ e references/ existem.

Se você já o instalou, atualize com:

Atualize o guizang-social-card-skill para mim. Vá para ~/.claude/skills/guizang-social-card-skill, execute git pull e me diga o commit mais recente.

Depois peça ao seu agente:

Faça um carrossel do Xiaohongshu no estilo Suíço a partir deste artigo, 5 cartões, azul IKB.

Outros prompts úteis:

Faça um conjunto 3:4 para Xiaohongshu a partir desta análise de produto, com títulos no estilo editorial.
Transforme este artigo em um par de capas do WeChat: herói 21:9 + cartão de compartilhamento 1:1, visualmente consistente.
Tenho 3 fotos de acampamento — faça um carrossel para Xiaohongshu liderado por imagens.
Transforme este texto de guia de jogo em um conjunto para Xiaohongshu; extraia algumas artes do jogo do Wallhaven.

O que você obtém

• 🖋 Dois sistemas visuais: Editorial para atmosfera e narrativa, Suíço para fatos e estrutura, compartilhando um fluxo de trabalho
• 📐 3 tamanhos de tela: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 esqueletos de layout: 16 Editorial (M01-M16, incluindo Capa Liderada por Imagem, Pipeline, Antes/Depois) + 12 Suíço (S01-S12, incluindo Torre KPI, Gráfico de Barras H, Matriz + Herói)
• 🎨 10 predefinições de tema: 6 Editorial (Clássico Tinta, Porcelana Índigo, Tinta Floresta, Papel Kraft, Duna, Tinta da Meia-Noite escuro) + 4 cores âncora Suíças (Azul Klein IKB, Limão, Verde Limão, Laranja de Segurança)
• 🖼 Fluxo de trabalho de obtenção de imagens: imagens do usuário primeiro; caso contrário, cascata através de Unsplash → Pexels → Flickr CC → Wallhaven → busca direta, baixadas localmente com SOURCES.md gerado automaticamente
• 🌫 Fundo de fluxo de tinta WebGL: páginas herói editoriais podem incluir uma animação de tinta ao vivo; pode ser desativado para dispositivos de baixa potência ou modo de captura de tela
• 🪧 Sobreposição de imagem + segurança facial: imagens em sangria total devem ter uma máscara; zonas de queda de texto devem evitar o sujeito. Regras rígidas em references/image-overlay.md
• 🧰 Ativos de embelezamento de captura de tela: 9 fundos WebP com textura real (5 Editorial / 4 Suíço), combinados com utilidades .frame-shot / .device-browser / .device-phone
• 🗺 Componente de mapa: MapLibre + OSM com tiles reais, múltiplos pins + conectores, feito para guias de viagem
• ✅ Validador: validate-social-deck.mjs detecta automaticamente transbordamento, violações de limite de tipo, lacunas de densidade de 4 bandas e colisões de rodapé
• 📄 Renderização HTML de arquivo único + Playwright: sem pipeline de build frontend; node render.mjs gera PNG diretamente

Ajusta / Não ajusta

✅ Ajusta: carrosséis Xiaohongshu / pares de capa WeChat / capas Moments / capas Channels / visuais de artigo / páginas de tutorial / recapitulações de dados / guias de viagem / análises de produto / explicadores de captura de tela

❌ Não ajusta: Apresentações de deslize horizontal (use guizang-ppt-skill) / geração de vídeo de formato longo / retoque puro de fotos / edição de texto simples sem layout

11 categorias do Xiaohongshu

Classificadas por "círculo de competência" — veja references/category-cookbook.md:

Fortes de ponta a ponta (cópia / estrutura / imagens todos cobertos):

• Viagem, carreira, recomendações (após especificar um subgênero)

Cópia e estrutura fortes, imagens dependem do usuário ou arte obtida:

• Jogos, cinema, culinária (orientado a receitas), maquiagem (orientado a tutoriais), fitness, casa, moda (seleções curadas)

Fora do escopo, declarado antecipadamente (não forçaremos):

• Fotos ao vivo OOTD / dreamcore / classificação de emulação de filme / maquiagem com teste real de pele — qualquer coisa fortemente dependente de fotografia ou pós-produção

Cenários comuns

Por que HTML de arquivo único para PNG

• Amigável para agentes: HTML + CSS é texto — agentes podem escrever, ler, editar e validar diretamente
• Precisão de layout: CSS Grid + regras rígidas de tipo / margem / grid excedem em muito o alcance de layout do Markdown
• Obtenção aberta de imagens: conecte-se ao Unsplash / Pexels / Wallhaven / Mapbox / OSM / qualquer recurso da web
• Qualidade verificável: validate-social-deck.mjs executa medição DOM do Playwright, não suposições
• Entrega simples: output/*.png é entregue diretamente — sem implantações, sem ferramentas de exportação

Suporte de plataforma

Instalar

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

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Opção 2: Cole isso em uma IA

Instale a habilidade guizang-social-card-skill do Claude Code para mim. Etapas:

1. Certifique-se de que ~/.claude/skills/ existe (crie se não)
2. Execute git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. Verifique: ls ~/.claude/skills/guizang-social-card-skill/ deve mostrar SKILL.md, assets/, references/
4. Avise-me quando terminar. Mais tarde, dizer coisas como "faça um carrossel Xiaohongshu" acionará essa habilidade.

Cole o bloco acima no Claude Code / Cursor / qualquer agente de IA com acesso ao shell.

Opção 3: CLI manual

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Como acioná-lo

Uma vez instalado, o Claude Code detecta automaticamente a habilidade. Frases de acionamento:

• "Faça um carrossel Xiaohongshu / Rednote"
• "Faça cartões Rednote"
• "Faça um herói WeChat 21:9 + cartão de compartilhamento 1:1"
• "Gere cartões sociais / cartões sociais estilo revista"
• "Transforme este artigo em um carrossel tutorial"
• "Faça uma análise no estilo Suíço para Xiaohongshu / cartões estilo IKB"

Fluxo de trabalho

A habilidade é um fluxo de trabalho estruturado. O agente percorre 7 etapas:

1. Entrada — capture 4 coisas: plataforma alvo / estilo / conteúdo de origem / imagens do usuário. Quando não houver imagens disponíveis, apresente A/B/C uma vez (tire as suas / gere com IA / obtenha online); não ofereça novamente
2. Estilo e Tema — escolha Editorial ou Suíço, depois escolha uma das 10 predefinições de tema. Valores hex personalizados não são permitidos
3. Seleção de Layout — escolha / cole / adapte a cópia dos 28 esqueletos de layout. 16 Editorial / 12 Suíço
4. Preparação de Ativos — obtenha imagens (Unsplash / Pexels / Flickr CC / Wallhaven / busca direta), baixe localmente + escreva SOURCES.md; pergunte se deseja creditar as fontes
5. Compor e Renderizar — copie o modelo base → substitua <!-- POSTERS_HERE --> → node render.mjs
6. Entregar e Revisar — mostre os PNGs primeiro, pergunte "olhe você mesmo ou quer que eu execute o validador?" — não valida automaticamente
7. Iterar — aplique o feedback do usuário, ajuste estilos inline ou troque layouts / imagens, re-renderize

Especificação completa em SKILL.md. Detalhes profundos nos arquivos references/*.md correspondentes.

Validador

node validate-social-deck.mjs caminho/para/diretório-da-tarefa

6 regras, baseadas na medição de renderização real do Playwright, não em varredura estática:

• R1 Transbordamento — qualquer seção que transborde .poster falha imediatamente
• R2 Limites de Tipo — combinações de tamanho + peso .h-xl / .h-display que excedem as definições do modelo
• R3 Colisão de Rodapé — conteúdo pressionando o rodapé inferior / número de página
• R4 Densidade de 4 Bandas — tela de 1440 de altura dividida em 4 bandas horizontais; cada uma deve ter conteúdo ou uma razão declarada para o espaço em branco
• R5 Transbordamento de Moldura — filhos .frame-img / .frame-shot transbordando a moldura
• R6 Identidade Suíça — modelos Suíços com font-weight >= 700 inline avisam (viola "maior significa mais fino")

O passo 7 do SKILL.md declara explicitamente que o validador não é executado automaticamente — espere o usuário olhar as imagens primeiro, economizando dezenas de segundos por rodada.

Predefinições de tema

Escolha em references/theme-presets.md. Valores hex personalizados não são permitidos — proteger a estética importa mais do que a liberdade de escolha.

Editorial (6)

Suíço (4)

Para trocar de tema, basta substituir o atributo <section class="poster" data-theme="..."> no modelo base; todo o CSS resolve através de var(--...).

Diretório

guizang-social-card-skill/
├── SKILL.md                              ← Arquivo principal da habilidade: fluxo de trabalho de 7 etapas
├── README.md                             ← README em chinês
├── README.en.md                          ← Este arquivo
├── HANDOFF.md                            ← Documento de transferência: fatos + histórico de versões
├── PRODUCT.md                            ← Documento do produto: pensamento + decisões + roteiro
├── validate-social-deck.mjs              ← Validador de layout Playwright
├── assets/
│   ├── template-editorial-card.html      ← Modelo Editorial (6 temas / 3 telas)
│   ├── template-swiss-card.html          ← Modelo Suíço (4 acentos / 3 telas)
│   ├── magazine-bg-webgl.js              ← Fundo de fluxo de tinta WebGL
│   └── screenshot-backgrounds/           ← 9 fundos de palco para captura de tela (WebP)
│       ├── style-a/                      ←   5 Editorial
│       └── style-b/                      ←   4 Suíço
└── references/
    ├── platform-specs.md                 ← Plataforma × resolução × nomenclatura
    ├── style-system.md                   ← Regras rígidas e antipadrões para ambos os estilos
    ├── theme-presets.md                  ← Todas as 10 paletas em detalhes
    ├── layout-recipes.md                 ← 28 esqueletos de layout (M01-M16 + S01-S12)
    ├── components.md                     ← Tipo / cartões / espaçamento / ícones
    ├── background-systems.md             ← Fluxo de tinta / grid / camadas de papel
    ├── portrait-fill.md                  ← Estratégia de espaço em branco para a placa 3:4
    ├── content-planning.md               ← Ganchos / divisões de página / compressão de cópia
    ├── category-cookbook.md              ← Tabela de roteamento das 11 categorias do Xiaohongshu
    ├── image-overlay.md                  ← Imagem em sangria total: máscara + regras de segurança facial
    ├── screenshot-treatment.md           ← Utilitários `.frame-shot` + embelezamento de captura de tela
    ├── map-component.md                  ← Mapa `.map-block` MapLibre
    ├── title-shortener.md                ← Estratégia de título curto para a capa 1:1
    ├── production-workflow.md            ← Pipeline de renderização Playwright
    └── qa-checklist.md                   ← Lista de verificação de qualidade

Princípios fundamentais de design

1. Contenção sobre barulho — paletas contidas se destacam em um feed saturado
2. Estrutura sobre decoração — tipo / contraste / grid carregam a hierarquia, não sombras ou cartões
3. Layouts sobre liberdade — escolha primeiro, adapte depois; não invente páginas fora dos 28 esqueletos
4. Imagens do usuário primeiro — na entrada, apresente A/B/C uma vez; não ofereça novamente para tirar as suas
5. Máscara + evitar — imagens em sangria total sempre têm uma máscara; zonas de queda de texto devem limpar o sujeito (rostos / produtos / regiões densas em texto)
6. Maior significa mais fino — Suíço .h-xl tamanho aumenta → peso deve diminuir. Editorial segue a mesma regra
7. Sem validação automática — deixe o usuário olhar primeiro, depois pergunte antes de validar; economiza dezenas de segundos por rodada
8. Uma habilidade é um produto, não um prompt — possui PRODUCT.md, números de versão, CHANGELOG, limites de capacidade
9. Testes locais ficam fora do git — todas as demos / testes de fumaça residem em local-tests/, ignorados pelo git

Referências visuais

• Layouts e espaçamento de letras das revistas Monocle / Kinfolk / Cereal
• Sistemas de grid de Massimo Vignelli / Helvetica Forever / Estilo Tipográfico Internacional Suíço
• Proporções imagem-texto e retratos humanos de Apartamento / The Gentlewoman
• Amostras de "contenção-ganha-o-feed" do Xiaohongshu / Rednote
• Prática de cartões sociais de Guizang

Roteiro

• Mais testes de fumaça para casos-limite de limite de tipo em conteúdo Editorial longo
• Mais layouts de dados Suíços (esqueletos de gráficos adicionais)
• Pós-geração de imagem: perguntar ativamente se deve fazer correções locais / regenerar a imagem inteira
• Mais pacotes de layout recomendados específicos por categoria (atualmente 7 de 11 são fortes de ponta a ponta)
• Versão WorkBuddy pronta para marketplace

Contribuindo

Bugs, problemas de layout, novas solicitações de layout — Issues e PRs são bem-vindos. Prioridades para mudanças:

• Ao editar modelos base, atualize também a tabela de correspondência em references/components.md (tamanhos / espaçamento / pesos)
• Ao adicionar layouts, adicione a receita completa em references/layout-recipes.md (limites de cópia + densidade mínima)
• Ao adicionar cores de tema, atualize também o bloco [data-theme="..."] do modelo base + references/theme-presets.md
• Ao adicionar regras Suíças, atualize também a regra correspondente em validate-social-deck.mjs
• Erros que você encontrou vão para references/qa-checklist.md
• Testes e demos residem em local-tests/ — não polua a raiz da habilidade

Licença

AGPL-3.0 © 2026 op7418

Este projeto está licenciado sob GNU AGPL-3.0. Pontos principais:

1. Atribuição exigida — Mantenha o aviso de direitos autorais
2. Derivados devem ser de código aberto — Qualquer versão modificada, fork ou redistribuição deve ser lançada sob AGPL-3.0 (ou uma licença compatível), com o código-fonte completo disponibilizado
3. Uso em rede é distribuição — Mesmo que você execute uma versão modificada apenas como SaaS / serviço web sem distribuir o código, você ainda deve publicar a fonte (é isso que torna a AGPL mais rigorosa que a GPL)
4. Sem distribuição de código fechado, proprietária ou apenas paga

Termos completos em LICENSE.