# Habilidade do Agente de Cartões Sociais > Gere cartões sociais visualmente impressionantes para carrosséis do Pequeno Livro Vermelho e pares de capa do Conversa em Rede a partir de várias fontes de conteúdo. Aproveite os sistemas de design editorial ou suíço para criar visuais envolventes para seus artigos e publicações. - Canonical: https://nanoskill.ai/pt/skills/social-card-generation - Markdown: https://nanoskill.ai/pt/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: pt - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About A Habilidade do Agente de Cartões Sociais Guizang é uma capacidade avançada de agente projetada para simplificar a geração de cartões sociais para plataformas como Xiaohongshu e WeChat. Ela capacita os usuários a transformar conteúdo diverso – de artigos e notas de produto a capturas de tela e fotos – em visuais polidos e otimizados para a plataforma. Ao oferecer sistemas de design Editorial e Suíço Internacional distintos, a habilidade garante que, seja seu objetivo narrativa de histórias ou explicação orientada por dados, seus cartões sociais serão envolventes e esteticamente consistentes, prontos para capturar a atenção do público. Esta habilidade se destaca por seu fluxo de trabalho estruturado, fornecendo 28 esqueletos de layout e 10 predefinições de tema para orientar a apresentação do conteúdo. Ela automatiza a busca de imagens de plataformas populares e inclui um validador robusto baseado no Playwright para manter a qualidade visual detectando problemas comuns de layout. A saída é entregue como HTML de arquivo único, renderizado diretamente em PNG, tornando-a altamente compatível com ambientes de agente de codificação como Claude Code e Codex. Os usuários podem aproveitar a Habilidade de Cartões Sociais Guizang para uma variedade de casos de uso, como criar carrosséis multi-card do Xiaohongshu a partir de artigos longos, projetar pares de cartão hero 21:9 e cartão de compartilhamento 1:1 do WeChat visualmente harmoniosos ou produzir visuais de tutorial claros a partir de capturas de tela. Seus princípios de design priorizam contenção, estrutura e manipulação de imagens centrada no usuário, garantindo conteúdo de mídia social profissional e impactante sem exigir ampla experiência em design. ## Key features - **Sistemas Visuais Duplos**: Escolha entre um estilo Editorial para narrativas (Monocle, Kinfolk) ou um estilo Internacional Suíço para dados e estruturas (grade primeiro, linhas finas nítidas) para combinar com o tom do seu conteúdo. - **Vários Tamanhos de Tela**: Suporta Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) e WeChat 1:1 (1080x1080) para presença versátil nas redes sociais. - **Esqueletos de Layout Extensos**: Acesse 28 esqueletos de layout pré-desenhados (16 Editoriais, 12 Suíços) incluindo capas com foco em imagem, torres de KPI e gráficos de barras horizontais para estruturação rápida de conteúdo. - **Obtenção Automatizada de Imagens**: Obtém automaticamente imagens do Unsplash, Pexels, Flickr CC, Wallhaven ou pesquisa direta, baixando-as localmente com um arquivo SOURCES.md gerado automaticamente. - **Validador de Layout**: Inclui um validador baseado em Playwright para detectar estouro, violações de limite de tipo, lacunas de densidade e colisões de rodapé, garantindo geração de cartões sociais de alta qualidade. ## Use cases - **Criar Carrosséis do Xiaohongshu**: Transforme artigos longos, avaliações de produtos ou guias de viagem em carrosséis de vários cartões envolventes para o Xiaohongshu, usando design Editorial ou Suíço. - **Projetar Pares de Capa do WeChat**: Gere imagens de herói 21:9 visualmente consistentes e cartões de compartilhamento 1:1 para WeChat Moments e Channels a partir de qualquer fonte de conteúdo. - **Produzir Recursos Visuais de Tutoriais**: Converta tutoriais de captura de tela, guias de jogos ou orientações de ferramentas em cartões sociais estruturados com capturas de tela embelezadas e layouts claros. - **Resumir Dados e Avaliações**: Apresente avaliações de produtos, recapitulações de dados ou conteúdo anual usando layouts estilo Suíço com gráficos e matrizes para comunicação clara. ## Result preview Explore um carrossel profissional de mídia social alimentado por esta Habilidade. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Instalar Adicione a Habilidade de Geração de Cartões Sociais ao seu agente de IA. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Descrever Conteúdo Forneça o conteúdo, tópico ou mensagem-chave que você deseja transformar em cartões de mídia social. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Gerar Cartões Sociais Crie designs de cartão visualmente envolventes, otimizados para a plataforma, com hierarquia de informações clara, fluxo narrativo forte e layouts prontos para publicação. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 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](https://github.com/op7418/guizang-ppt-skill). Linguagem visual compartilhada, manutenção separada. O PPT resolve "apresentações de deslize horizontal"; este resolve "imagens estáticas para feed." ![Prévia do Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Início em 30 segundos ```bash 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: ```text 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: ```text 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: ```text Faça um carrossel do Xiaohongshu no estilo Suíço a partir deste artigo, 5 cartões, azul IKB. ``` Outros prompts úteis: ```text 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](https://github.com/op7418/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`](./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 | Tarefa | Fluxo recomendado | |------|------------------| | Artigo longo → carrossel Xiaohongshu | Extraia as ideias principais; Editorial para ritmo narrativo, Suíço para decomposições de dados | | Análise de produto / resumo de ferramenta | Suíço + azul IKB, prefira `S09 Torre KPI` / `S10 Gráfico de Barras H` | | Viagem / estilo de vida | Editorial + Tinta da Meia-Noite ou Duna, `M16 Capa Liderada por Imagem` para herói em sangria total | | Par de capa WeChat | Renderize o mesmo conteúdo duas vezes: `.poster.wide` 21:9 + `.poster.square` 1:1, visualmente consistente | | Tutorial com captura de tela / passo a passo de ferramenta | `.frame-shot` + `.device-browser`, prefira base de grid Suíço | | Guia de jogo / recapitulação de filme | Editorial + Tinta da Meia-Noite, extraia arte do jogo do Wallhaven para herói em sangria total | | Recapitulação de dados / retrospectiva do ano | Suíço + Limão ou Laranja de Segurança, combinação de matriz + razão | ## 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 | Plataforma | Status | Notas | |----------|--------|-------| | Claude Code | Suportado | Fluxo de trabalho nativo de Skill, ideal para gerar e iterar cartões | | Codex | Suportado | Bom para geração de cartões de formato longo, obtenção de imagens, controle visual | | Cursor / outros agentes locais | Funciona | Requer leitura/escrita no sistema de arquivos + execução de shell | | Chatbot simples | Não recomendado | Sem sistema de arquivos e pipeline de renderização, não é possível entregar imagens de forma confiável | ## Instalar ### Opção 1: Instalação em uma linha (recomendado) ```bash 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 ```bash 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 `` → `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`](./SKILL.md). Detalhes profundos nos arquivos `references/*.md` correspondentes. ## Validador ```bash 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`](./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) | Tema | Tons | Melhor para | |-------|-------|----------| | 🖋 **Clássico Tinta** | `#0a0a0b` / `#f1efea` | Padrão geral, tópicos comerciais, na dúvida | | 🌊 **Porcelana Índigo** | `#0a1f3d` / `#f1f3f5` | Tecnologia, pesquisa, IA, redação técnica | | 🌿 **Tinta Floresta** | `#1a2e1f` / `#f5f1e8` | Natureza, sustentabilidade, ar livre, não-ficção | | 🍂 **Papel Kraft** | `#2a1e13` / `#eedfc7` | Nostalgia, humanidades, leitura, literatura | | 🌙 **Duna** | `#1f1a14` / `#f0e6d2` | Arte, design, criativo, moda | | ⚫ **Tinta da Meia-Noite** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Arte-chave de jogos / cenas noturnas / capas cinematográficas / temas escuros estilo Black Myth · Elden Ring | ### Suíço (4) | Tema | Âncora | Melhor para | |-------|--------|----------| | 🔵 **Azul Klein IKB** | `#002FA7` | Padrão geral, lançamentos comerciais, produtos de IA, frameworks | | 🟡 **Limão** | `#FFD500` | Juventude, esportes, varejo, consumo, Y2K | | 🟢 **Verde Limão** | `#C5E803` | Ecologia, saúde, Geração Z, marcas verdes | | 🟠 **Laranja de Segurança** | `#FF6B35` | Alertas, notícias, industrial, temas energéticos | Para trocar de tema, basta substituir o atributo `
` 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](https://github.com/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`](./LICENSE). ## FAQ ### O que é a Habilidade de Cartão Social Guizang? A Habilidade de Cartão Social Guizang é uma habilidade de agente para Claude Code, Codex e ambientes de agente de codificação semelhantes que gera carrosséis do Xiaohongshu e pares de capa do WeChat a partir de várias entradas de conteúdo, como artigos, notas ou fotos, usando sistemas de design visual distintos. ### Que tipo de conteúdo posso usar para gerar cartões sociais? Você pode usar artigos, texto, capturas de tela, notas de produtos, legendas ou fotos como conteúdo de origem para gerar cartões sociais. A habilidade se adapta a várias entradas para criar resultados visualmente atraentes. ### Quais são os dois sistemas visuais disponíveis para geração de cartões sociais? A habilidade oferece dois sistemas visuais: 'Editorial' para narrativas, estilo de vida e conteúdo narrativo, e 'Swiss International' para avaliações de produtos, dados, frameworks e tutoriais, caracterizado por uma abordagem de grade primeiro. ### Posso usar cores personalizadas para meus cartões sociais? Não, valores hex personalizados não são permitidos. A habilidade fornece 10 predefinições de tema (6 Editoriais, 4 Suíças) para manter a coesão visual e a qualidade. Você pode alternar temas atualizando o atributo data-theme no modelo de semente. ### Como instalo a Habilidade de Cartão Social Guizang? Você pode instalá-la usando \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` ou clonando o repositório no diretório de habilidades do seu agente. ### A habilidade suporta conteúdo em inglês? Sim, a habilidade suporta conteúdo em inglês. Ambas as fontes Editorial (Playfair Display + Noto Serif) e Swiss (Inter + Helvetica) cobrem chinês e inglês, e os esqueletos de layout são independentes de idioma.