guizang-social-card-skill: generar tarjetas sociales con 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 secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Encaje del proyecto: ?deber?as usarlo?

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Dimensi?n	Notas
Skill	Claude Code / Codex workflow for social cards
Output	HTML de un solo archivo -> PNG local con Playwright
Platform	Xiaohongshu 1080x1440, WeChat 2100x900 and 1080x1080
Good fit	Operaciones de contenido, desarrolladores independientes, blogueros t?cnicos
Poor fit	Retoque fotogr?fico, aprobaci?n estricta de marca, redistribuci?n closed-source
License	AGPL-3.0
Not promised	Publicaci?n en lote, publicaci?n autom?tica, adaptaci?n a revisi?n de plataforma

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Dos sistemas visuales y tres lienzos

Editorial vs Swiss: diferencias de estilo

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Visual system	Uso	Layout skeletons	Theme presets
Editorial	Tarjetas narrativas, notas de viaje, lecturas compartidas	16	6
Swiss	Rese?as de producto, tarjetas comparativas, datos	12	4

Tres tama?os de lienzo

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Canvas marker	Size	Use
.poster.xhs	1080x1440 (3:4)	Xiaohongshu / Rednote carousel
.poster.wide	2100x900 (21:9)	Portada ancha de WeChat
.poster.square	1080x1080 (1:1)	Portada cuadrada de WeChat

Instalaci?n: CLI o clon local

Opci?n 1: instalaci?n por CLI (recomendada)

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

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

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Opci?n 2: clonar en local

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

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/

Renderizado y validaci?n: de HTML a PNG

C?mo usar el script de renderizado

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

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

C?mo usar el script de validaci?n

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

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

Fuentes de recursos y riesgo de licencias

Flujo de fuentes de imagen

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

• 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

C?mo leer la licencia AGPL-3.0

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

Escenario	Requisito
Personal use	Uso y modificaci?n libres
Redistribution	Mantener AGPL-3.0 y entregar el c?digo fuente
Network service	Publish server-side source if offered as SaaS or a network service
Commercial use	Permitido solo respetando las obligaciones open source

Notas de riesgo

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

• El proyecto genera PNG, no publicaciones
• Los tama?os de lienzo vienen del README, no de reglas oficiales de revisi?n
• Las stars y forks cambian con el tiempo y no deber?an ser la se?al principal
• Las licencias de recursos requieren revisi?n humana; el agente no puede cerrarla autom?ticamente

Lecturas relacionadas

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

• 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

Conclusi?n

Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. Claude Code o Codex pueden ocuparse del lienzo, el esqueleto de dise?o, la generaci?n HTML, la exportaci?n PNG y el validator. La revisi?n humana sigue cubriendo densidad de t?tulos, derechos de imagen, tono de marca y aprobaci?n final antes de publicar.

guizang-social-card-skill is best treated as a small production line. Let it fix canvas, layout, color, rendering, and validation. Esta secci?n conserva los hechos y el criterio del original chino, pero los presenta en espa?ol pr?ctico. El Skill estabiliza lienzo, layout, tema, renderizado y validaci?n. La revisi?n humana sigue siendo necesaria para licencias, marca, reglas de plataforma y decisi?n final de publicaci?n.