guizang-social-card-skill: gere cards sociais com Claude Code

When you turn a 5,000-character technical article into social cards, the hard part is not only extracting ideas. The repeated work is layout: where the title lands, which theme is used, whether the WeChat cover pair stays visually consistent, and whether every PNG can survive review. Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Encaixe do projeto: vale usar?

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Dimens?o	Notas
Skill	Claude Code / Codex workflow for social cards
Output	HTML de arquivo ?nico -> PNG local com Playwright
Platform	Xiaohongshu 1080x1440, WeChat 2100x900 and 1080x1080
Good fit	Opera??es de conte?do, devs independentes, blogueiros t?cnicos
Poor fit	Retoque de foto, aprova??o r?gida de marca, redistribui??o closed-source
License	AGPL-3.0
Not promised	Publica??o em lote, publica??o autom?tica, adapta??o a regras de plataforma

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Dois sistemas visuais e tr?s canvas

Editorial vs Swiss: diferen?as de estilo

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Visual system	Uso	Layout skeletons	Theme presets
Editorial	Cards narrativos, notas de viagem, leituras compartilhadas	16	6
Swiss	Reviews de produto, cards comparativos, dados	12	4

Tr?s tamanhos de canvas

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Canvas marker	Size	Use
.poster.xhs	1080x1440 (3:4)	Xiaohongshu / Rednote carousel
.poster.wide	2100x900 (21:9)	Capa larga do WeChat
.poster.square	1080x1080 (1:1)	Capa quadrada do WeChat

Instala??o: CLI ou clone local

Op??o 1: instala??o via CLI (recomendada)

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

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

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Op??o 2: clonar localmente

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

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

guizang-social-card-skill/
??? SKILL.md
??? templates/
??? scripts/
?   ??? render.mjs
?   ??? validate-social-deck.mjs
??? references/

Renderiza??o e valida??o: de HTML para PNG

Como usar o script de renderiza??o

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

node render.mjs

• Playwright is missing: run npx playwright install chromium first
• The HTML path is wrong: check the generated filename
• Fonts are missing: install suitable local fonts for Chinese text

Como usar o script de valida??o

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

node validate-social-deck.mjs path/to/task-dir

1. Overflow detection: text outside the canvas is flagged
2. Font-size ceiling: oversized titles are reported
3. Footer collision: overlap between footer and content is flagged
4. Horizontal band density: dense Swiss bands produce warnings
5. Frame overflow: frames outside the canvas are reported
6. Swiss font weight: invalid weight settings are reported

Fontes de assets e riscos de licen?a

Workflow de fontes de imagem

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

• Unsplash: high-quality free images, but still check commercial terms
• Pexels: free images, with license terms to review
• Flickr CC: Creative Commons images may need attribution
• Wallhaven: wallpaper-style images need commercial-rights checks
• Search results: licensing status is uncertain and needs manual review

Como entender a licen?a AGPL-3.0

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

Cen?rio	Requisito
Personal use	Livre para usar e modificar
Redistribution	Manter AGPL-3.0 e fornecer c?digo-fonte
Network service	Publish server-side source if offered as SaaS or a network service
Commercial use	Permitido apenas respeitando obriga??es open source

Notas de risco

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

• O projeto gera assets PNG, n?o posts publicados
• Os tamanhos de canvas v?m do README, n?o de regras oficiais da plataforma
• Stars e forks mudam com o tempo e n?o devem ser o principal sinal de valor
• Licenciamento de assets precisa de revis?o humana; o agente n?o conclui isso sozinho

Leituras relacionadas

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

• Claude Code Skill guide: why SKILL.md is more stable than copied prompts
• CLAUDE.md writing guide: how to constrain agent output with project rules
• Claude Subagent guide: how to split planning, writing, design, and QA across roles

Conclus?o

Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. Claude Code ou Codex podem cuidar do canvas, do esqueleto de layout, da gera??o HTML, da exporta??o PNG e do validator. A revis?o humana continua respons?vel por densidade de t?tulo, direitos de imagem, tom de marca e aprova??o final antes da publica??o.

guizang-social-card-skill is best treated as a small production line. Let it fix canvas, layout, color, rendering, and validation. Esta se??o preserva os fatos e o julgamento do texto em chin?s, mas em portugu?s do Brasil direto para uso pr?tico. O Skill estabiliza canvas, layout, tema, renderiza??o e valida??o. A revis?o humana continua necess?ria para licen?as, marca, regras de plataforma e decis?o final de publica??o.