guizang-social-card-skill: una pipeline reutilizable para tarjetas de Xiaohongshu y portadas de WeChat

Convertir un artículo largo en tarjetas sociales rara vez es difícil por el titular. Lo lento es lograr que cada tarjeta respete a la vez el formato, los márgenes, la tipografía, los assets, la exportación y la revisión. Quien lleva el contenido saca cinco ideas en minutos, pero luego se atasca en formatos concretos: el lienzo 3:4 de Xiaohongshu, la cabecera 21:9 de WeChat, la tarjeta para compartir 1:1. Un prompt puntual sirve de apuro, pero en el siguiente contenido el estilo, los espaciados y la densidad de títulos vuelven a desviarse.

Aquí es donde aporta guizang-social-card-skill. Empaqueta la producción de tarjetas de Xiaohongshu y portadas de WeChat en un skill que Claude Code y Codex pueden invocar. En el repositorio no hay un prompt del tipo «hazlo más premium», sino todo un flujo con SKILL.md, plantillas HTML base, referencias visuales, reglas de assets, render con Playwright y scripts de validación. Su tarea natural es convertir artículos, notas de producto, tutoriales con capturas, subtítulos o fotos en un juego iterable de tarjetas PNG.

La conclusión primero

• guizang-social-card-skill apunta a entornos de agente como Claude Code y Codex, y produce carruseles de Xiaohongshu y pares de portadas de WeChat en 21:9 y 1:1.
• El README de GitHub indica dos sistemas visuales integrados, Editorial y Swiss, con 28 esqueletos de plantilla, 10 temas predefinidos y 3 tamaños de lienzo.
• La entrega es un HTML de un solo archivo renderizado a PNG con Playwright; el agente puede leer y escribir HTML / CSS directamente y luego ejecutar node render.mjs para exportar las imágenes.
• Sirve para producir de forma estable una «primera versión de tarjetas presentable», no para sustituir la aprobación de diseño de marca, el retoque fotográfico o la revisión de publicación de la plataforma.
• La licencia es AGPL-3.0. Antes de que un equipo modifique, redistribuya o lo convierta en un servicio en línea, debe confirmar las obligaciones de código abierto.

Lo que resuelve es la reutilización de plantillas

Muchas tarjetas generadas por IA fallan no porque el modelo no sepa escribir, sino porque no hay un límite de plantilla reutilizable. Hoy el modelo pone el título arriba a la izquierda, mañana lo extiende a pantalla completa; hoy un azul sobrio, mañana un degradado saturado; en cuanto el título se alarga, el footer, el número de página y el motivo principal chocan.

Este skill recoge los factores inestables en un flujo fijo. Los tres lienzos del README son claros: .poster.xhs es 1080x1440 para el 3:4 de Xiaohongshu, .poster.wide es 2100x900 para el 21:9 de WeChat, .poster.square es 1080x1080 para las tarjetas para compartir de WeChat. Una vez fijado el tamaño, la tarea del agente pasa de «diseñar libremente» a «dentro de un contenedor fijo, elegir plantilla, comprimir el texto, sustituir assets y ejecutar la exportación».

Los dos sistemas visuales también reducen la carga de decisión. Editorial se parece a una revista digital sobria, adecuada para viajes, lectura, lifestyle y contenido narrativo. Swiss enfatiza la retícula, los colores de anclaje y la jerarquía de información, lo que encaja con análisis de herramientas, repasos de datos, explicaciones de productos de IA y desgloses de tutoriales. Un equipo de contenido no suele necesitar inventar un estilo nuevo cada vez, sino que temas distintos caigan de forma estable en unos pocos sistemas controlables.

Instalación y primer prompt

La instalación recomendada por el README de GitHub cabe en una línea:

Alibaba Cloud - Opción preferida para desarrolladores, 15 % de descuento exclusivo en Lighthouse

Obtener 15% dto. →Anuncio

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

También puedes clonar el repositorio en el directorio de skills personal de Claude Code:

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

Tras instalarlo, no escribas solo «hazme un carrusel de Xiaohongshu». Es más fiable dejar claras cinco cosas: origen del contenido, formato de plataforma, número de tarjetas, sistema visual y estrategia de assets. Por ejemplo:

A partir de este análisis de una herramienta de IA, crea un juego de cinco tarjetas Xiaohongshu 3:4.
Usa el sistema visual Swiss y el tema azul IKB.
Prioriza las capturas de producto del artículo; si faltan imágenes adecuadas, dime primero qué assets faltan.
Mantén una idea principal por tarjeta y, antes de exportar los PNG, muéstrame la estructura HTML y el plan de compresión de títulos.

Lo importante no es acumular adjetivos, sino dar al agente entradas verificables. El formato de plataforma determina el lienzo, el número de tarjetas la densidad de información, el sistema visual el repertorio de plantillas, la estrategia de assets si se recurre a fuentes externas, y la vista previa antes de exportar detecta pronto los títulos demasiado largos y los motivos tapados.

Cómo se ejecuta el flujo

El README divide el flujo en Intake, Style & Theme, Layout Selection, Asset Prep, Compose & Render, Deliver & Review e Iterate. En la producción diaria se entiende en este orden.

Primero, recoger la necesidad. ¿La plataforma destino es Xiaohongshu o WeChat? ¿El usuario tiene imágenes propias? ¿El contenido es un tutorial, un análisis o una nota de viaje? Esa información influye en la plantilla y los assets.

Luego, elegir el sistema visual. Herramientas de IA, metodologías y repasos de datos van mejor con Swiss; historias de personas, viajes y notas de lectura encajan más con Editorial. No rellenes los colores de tema al azar: el repositorio fija los 10 ajustes como límite firme, para evitar una paleta nueva cada vez.

Después, elegir los esqueletos de plantilla. El proyecto incluye 16 plantillas Editorial y 12 Swiss. Para un equipo de contenido esto vale más que el «diseño libre», porque los esqueletos limitan la longitud del título, el número de bloques de información y la proporción de blanco.

El tratamiento de assets merece un paso aparte. El README fija una prioridad de fuentes: primero las imágenes del usuario, si no Unsplash, Pexels, Flickr CC, Wallhaven y la búsqueda directa, todo guardado en local y anotado en SOURCES.md. Antes de publicar hay que verificar igualmente licencia y origen, sobre todo en cuentas comerciales, material publicitario y contenido de colaboración de marca.

La composición y la exportación usan un HTML de un solo archivo. El skill coloca el contenido en plantillas base, genera el HTML y saca los PNG con node render.mjs. HTML y CSS son texto, lo que los hace cómodos para Claude Code y Codex; el interletraje, los márgenes y la posición de las imágenes se pueden ajustar luego con precisión.

Railway - Plataforma de despliegue moderna, sin ops complejas, en producción en minutos

Empezar ahora →Anuncio

Por último, revisión e iteración. El README escribe a propósito «sin verificación automática por defecto» en el flujo, porque cada pasada del validador añade espera. El mejor ritmo: mirar primero los PNG, confirmar la dirección y luego ejecutar validate-social-deck.mjs para detectar desbordes, colisiones del footer, elementos fuera del marco y problemas de grosor en Swiss.

Dónde encaja

Esta tabla ayuda a poner límites. guizang-social-card-skill no convierte a nadie en diseñador de un día para otro; más bien entrega al agente la producción de tarjetas repetible, estructurada y plantillable. Donde hace falta un juicio estético fino, una valoración del riesgo de marca y una decisión de publicación, sigue teniendo que intervenir una persona.

QA: que se exporte no significa que se pueda publicar

Las tarjetas sociales suelen fallar en detalles pequeños: unos caracteres de más en el título y la vista previa móvil se vuelve confusa; la fuente de abajo queda tapada y no se ve en la captura; una máscara cubre un rostro, la imagen sigue ahí pero la confianza se pierde.

Antes de publicar, revisa al menos estos puntos:

• Una sola idea principal por tarjeta; no metas párrafos enteros del artículo.
• Comprime los títulos primero, sobre todo en la tarjeta para compartir de WeChat 1:1, conservando el margen de seguridad.
• Con imagen a sangre y máscara, coloca el texto lejos de rostros, motivos de producto y zonas de texto denso de la imagen original.
• El footer, el número de página y la mención de fuente no deben chocar con el bloque de contenido.
• Para las imágenes externas, anota la fuente y revisa la licencia del banco antes de un uso comercial.
• En las plantillas Swiss, no combines un tamaño de fuente grande con un grosor demasiado fuerte, para no crear un muro de títulos en negrita.
• Tras validate-social-deck.mjs, no mires solo pass / fail, sino también si los avisos apuntan a problemas visuales reales.

La prueba más segura es generar primero de tres a cinco tarjetas a partir de un artículo antiguo. Cuando la plantilla, el tamaño de fuente y la ruta de exportación estén estables, procesa un lote de temas en serie. Echarle de golpe una semana de contenido concentra la presión de revisión en la última ronda y, al final, ralentiza.

Cómo repartir el trabajo con prompts y herramientas de diseño

La ventaja del prompt simple es la velocidad. En una ventana de chat, el modelo escribe titulares, separa ideas y sugiere colores en minutos. Pero sus debilidades son claras: las plantillas no se reproducen de forma estable, las fuentes de imágenes locales se integran mal, la exportación depende de capturas y el balance posterior es difícil.

Las herramientas de diseño como Figma y Canva encajan mejor en el acabado. Normas de marca, bibliotecas de componentes, revisión entre varios y gestión de assets están más maduras allí. El roce aparece cuando un equipo de contenido tiene que sacar cada semana muchos assets intermedios «suficientemente buenos y coherentes», y hacerlo todo a mano frena el ritmo.

guizang-social-card-skill se sitúa más bien en esa capa intermedia. El prompt sirve para divergir, las herramientas de diseño para pulir, y el skill consolida los gestos repetidos bajo una estética fija: elegir lienzo, tomar un esqueleto, comprimir el título, colocar assets, renderizar, validar. Plantillas, scripts, documentos de referencia y comandos de render viven en el directorio del skill, y Claude Code o Codex producen por ese camino HTML y PNG editables. Para blogueros técnicos, desarrolladores independientes y equipos pequeños, esta capa intermedia es muy útil.

Vultr - Servidor cloud NVMe de alto rendimiento, 32 ubicaciones globales, despliegue Docker con un clic

Ver precios →Anuncio

Conéctalo a tu propio proceso de contenido

Un flujo sólido puede ser así:

1. Comprime el artículo largo en cinco a siete ideas, cada una con solo un título principal y dos o tres líneas de apoyo.
2. Instala el skill con Claude Code o Codex y confirma que existen SKILL.md, assets/ y references/.
3. Genera tres tarjetas de prueba a partir de un artículo antiguo, sin bancos de imágenes externos, solo con capturas o maquetación pura.
4. Revisa la vista previa en móvil y anota los problemas de longitud de título, blanco, máscaras de imágenes y números de página.
5. Ejecuta el validador y corrige desbordes, colisiones del footer y elementos fuera del marco.
6. Amplía a un carrusel de cinco a nueve tarjetas o a pares de portadas de WeChat.

Este orden controla el riesgo. El skill consolida el flujo, y la persona juzga si la información merece publicarse, si el visual es adecuado y si las fuentes están limpias.

Un detalle fácil de pasar por alto: archiva el resultado de cada prueba. Por ejemplo, qué tema, qué plantillas, la diferencia del título antes y después de comprimir, qué imágenes se sustituyeron y qué avisos dio el validador. Tras tres o cuatro pasadas, tendrás una pequeña «guía gráfica» adecuada a tu cuenta. Después, basta con reutilizar esas notas para el contenido nuevo: la generación se acelera y la revisión se alinea con más facilidad.

Si participan varias personas, conviene poner el artículo original, el HTML de las tarjetas, los PNG exportados, SOURCES.md y las notas de feedback en la misma carpeta de tarea. Así el diseño ve por qué el agente eligió tal imagen, el equipo puede rastrear cada tarjeta hasta su idea de origen, y el responsable puede revisar licencia y riesgos de texto antes de publicar. El skill resuelve el flujo de producción, y la disciplina de carpetas el de colaboración; solo juntos quedan estables.

Para seguir leyendo

Si los Skills de Claude Code son nuevos para ti, empieza por la guía de inicio de los Skills de Claude Code para entender por qué SKILL.md es más estable que copiar prompts. Para que la herramienta siga las normas del proyecto a largo plazo, lee luego la guía para escribir CLAUDE.md. Si más adelante quieres repartir selección de temas, redacción, diseño y control de publicación entre distintos roles, lee la guía práctica de subagentes de Claude.

guizang-social-card-skill vale la pena probarlo, pero no lo trates como una máquina de contenido viral. Es más bien una pequeña línea de producción: fija formato, plantilla, color, render y validación, para que la persona vuelva a poner su energía en el juicio de contenido y la estética final. Empieza con un artículo antiguo, tres tarjetas y un color de tema; cuando funcione con soltura, conéctalo a tu flujo de contenido diario.