Una habilidad de agente para Claude Code, Codex y entornos similares de agentes de codificación. Genera imágenes de carrusel de Xiaohongshu / Rednote y pares de portada de WeChat 21:9 + 1:1 a partir de artículos, textos, capturas de pantalla, notas de producto, subtítulos o fotos.
Dos sistemas visuales comparten un flujo de trabajo:
- Editorial. Diseños contenidos con el espíritu de Monocle / Kinfolk / Cereal. Ideal para narrativa, estilo de vida, viajes, lectura, cine y observación personal.
- Suizo internacional. Prioridad a la retícula, un solo color ancla, líneas finas y contraste tipográfico extremo. Ideal para reseñas de productos, datos, frameworks, tutoriales y herramientas de IA.
Proyecto hermano de guizang-ppt-skill. Lenguaje visual compartido, mantenimiento separado. PPT resuelve las "charlas de deslizamiento horizontal"; este resuelve las "imágenes estáticas para feeds."
Inicio en 30 segundos
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
O pega esto a un agente de IA con acceso a shell:
Instala guizang-social-card-skill para mí. Clona https://github.com/op7418/guizang-social-card-skill en ~/.claude/skills/guizang-social-card-skill, luego verifica que SKILL.md, assets/ y references/ existan.
Si ya lo tienes instalado, actualiza con:
Actualiza guizang-social-card-skill para mí. Ve a ~/.claude/skills/guizang-social-card-skill, ejecuta git pull y dime el último commit.
Luego pídele a tu agente:
Hazme un carrusel de Xiaohongshu estilo suizo a partir de este artículo, 5 tarjetas, azul IKB.
Otros mensajes útiles:
Hazme un conjunto de Xiaohongshu 3:4 a partir de esta reseña de producto, con títulos de estilo editorial.
Convierte este artículo en un par de portada de WeChat: hero 21:9 + tarjeta de compartir 1:1, visualmente consistente.
Tengo 3 fotos de camping — hazme un carrusel de Xiaohongshu basado en imágenes.
Convierte este texto de guía de juego en un conjunto de Xiaohongshu; obtén algunas ilustraciones del juego de Wallhaven.
Lo que obtienes
- 🖋 Dos sistemas visuales: Editorial para atmósfera y narrativa, Suizo para hechos y estructura, compartiendo un flujo de trabajo
- 📐 3 tamaños de lienzo:
.poster.xhs1080×1440 (Xiaohongshu 3:4),.poster.wide2100×900 (WeChat 21:9),.poster.square1080×1080 (WeChat 1:1) - 🧩 28 esqueletos de diseño: 16 Editorial (
M01-M16, incluyendo Portada basada en imagen, Pipeline, Antes/Después) + 12 Suizo (S01-S12, incluyendo Torre de KPI, Gráfico de barras H, Matriz + Hero) - 🎨 10 ajustes preestablecidos de tema: 6 Editorial (Tinta clásica, Porcelana índigo, Tinta bosque, Papel kraft, Duna, Tinta medianoche oscuro) + 4 colores ancla suizos (Azul Klein IKB, Limón, Verde limón, Naranja de seguridad)
- 🖼 Flujo de obtención de imágenes: primero imágenes del usuario; si no, en cascada a través de Unsplash → Pexels → Flickr CC → Wallhaven → búsqueda directa, descargadas localmente con
SOURCES.mdgenerado automáticamente - 🌫 Fondo de flujo de tinta WebGL: las páginas hero editoriales pueden incluir una animación de tinta en vivo; se puede desactivar para dispositivos de bajo consumo o modo captura de pantalla
- 🪧 Superposición de imagen + seguridad facial: las imágenes a sangre completa deben llevar una máscara; las zonas de texto deben evitar al sujeto. Reglas estrictas en
references/image-overlay.md - 🧰 Recursos de embellecimiento de capturas de pantalla: 9 fondos WebP con texturas reales (5 Editorial / 4 Suizo), combinados con utilidades
.frame-shot/.device-browser/.device-phone - 🗺 Componente de mapa: MapLibre + mosaicos reales OSM, múltiples pines + conectores, hecho para guías de viaje
- ✅ Validador:
validate-social-deck.mjsdetecta automáticamente desbordamientos, violaciones de límites tipográficos, brechas de densidad de 4 bandas y colisiones de pie de página - 📄 Renderizado con un solo archivo HTML + Playwright: sin pipeline de construcción de frontend;
node render.mjsgenera PNG directamente
Encaja / No encaja
✅ Encaja: Carruseles de Xiaohongshu / Pares de portada de WeChat / Portadas de Moments / Portadas de Channels / Visuales de artículos / Páginas de tutoriales / Resúmenes de datos / Guías de viaje / Reseñas de productos / Explicaciones de capturas de pantalla
❌ No encaja: Barajas de deslizamiento horizontal (usa guizang-ppt-skill) / generación de video de formato largo / retoque fotográfico puro / edición de texto plano sin diseño
11 categorías de Xiaohongshu
Jerarquizadas por "círculo de competencia" — consulta references/category-cookbook.md:
Fuertes de extremo a extremo (texto / estructura / imágenes todo dentro del alcance):
- Viajes, carrera, recomendaciones (después de especificar un subgénero)
Fuertes en texto y estructura, imágenes dependen del usuario o arte obtenido:
- Juegos, cine, comida (orientada a recetas), maquillaje (orientado a tutoriales), fitness, hogar, moda (selecciones curadas)
Fuera de alcance, declarado de antemano (no se forzará el ajuste):
- Fotos en vivo de OOTD / dreamcore / gradación de emulación de película / maquillaje de prueba de piel real — cualquier cosa que dependa en gran medida de la fotografía o la posproducción
Escenarios comunes
| Tarea | Flujo recomendado |
|---|---|
| Artículo largo → Carrusel de Xiaohongshu | Extraer las ideas clave; Editorial para ritmo narrativo, Suizo para desgloses de datos |
| Reseña de producto / Resumen de herramienta | Suizo + Azul IKB, preferir S09 Torre de KPI / S10 Gráfico de barras H |
| Viajes / Estilo de vida | Editorial + Tinta medianoche o Duna, M16 Portada basada en imagen para hero a sangre completa |
| Par de portada de WeChat | Renderizar el mismo contenido dos veces: .poster.wide 21:9 + .poster.square 1:1, visualmente consistente |
| Tutorial de captura de pantalla / Recorrido de herramienta | .frame-shot + .device-browser, preferir base de retícula Suiza |
| Guía de juego / Resumen de película | Editorial + Tinta medianoche, obtener arte del juego de Wallhaven para hero a sangre completa |
| Resumen de datos / Año en revisión | Suizo + Limón o Naranja de seguridad, combinación de matriz + libro mayor |
Por qué un solo archivo HTML a PNG
- Amigable con agentes: HTML + CSS es texto: los agentes pueden escribir, leer, editar y validar directamente
- Precisión de diseño: CSS Grid + reglas estrictas de tipografía / márgenes / retícula superan con creces el alcance de diseño de Markdown
- Obtención abierta de imágenes: conectar con Unsplash / Pexels / Wallhaven / Mapbox / OSM / cualquier recurso web
- Calidad verificable:
validate-social-deck.mjsejecuta medición DOM con Playwright, no suposiciones - Entrega simple:
output/*.pngse entrega directamente: sin despliegues, sin herramientas de exportación
Soporte de plataformas
| Plataforma | Estado | Notas |
|---|---|---|
| Claude Code | Soportado | Flujo de trabajo nativo de Skills, ideal para generar e iterar tarjetas |
| Codex | Soportado | Bueno para generación de tarjetas de formato largo, obtención de imágenes, control de calidad visual |
| Cursor / otros agentes locales | Funciona | Requiere lectura/escritura del sistema de archivos + ejecución de shell |
| Chatbot simple | No recomendado | Sin sistema de archivos y pipeline de renderizado, no puede entregar imágenes de forma fiable |
Instalación
Opción 1: Instalación en una línea (recomendada)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Opción 2: Pega esto a una IA
Instala la skill de Claude Code
guizang-social-card-skillpara mí. Pasos:
- Asegúrate de que
~/.claude/skills/exista (crea si no)- Ejecuta
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill- Verifica:
ls ~/.claude/skills/guizang-social-card-skill/debería mostrarSKILL.md,assets/,references/- Avísame cuando termines. Luego, decir cosas como "hazme un carrusel de Xiaohongshu" activará esta skill.
Pega el bloque anterior en Claude Code / Cursor / cualquier agente de IA con acceso a shell.
Opción 3: CLI manual
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
Cómo activarlo
Una vez instalado, Claude Code detecta automáticamente la skill. Frases de activación:
- "Hazme un carrusel de Xiaohongshu / Rednote"
- "Hazme tarjetas de Rednote"
- "Haz una portada hero 21:9 de WeChat + tarjeta de compartir 1:1"
- "Genera tarjetas sociales / tarjetas sociales estilo revista"
- "Convierte este artículo en un carrusel tutorial"
- "Haz una reseña de Xiaohongshu estilo suizo / tarjetas estilo IKB"
Flujo de trabajo
La skill es un flujo de trabajo estructurado. El agente recorre 7 pasos:
- Recepción — captura 4 cosas: plataforma objetivo / estilo / contenido fuente / imágenes del usuario. Cuando no haya imágenes disponibles, presenta las opciones A/B/C una vez (toma las tuyas / genera con IA / obtén en línea); no lo vuelvas a proponer.
- Estilo y tema — elige Editorial o Suizo, luego elige uno de los 10 ajustes preestablecidos de tema. No se permiten valores hexadecimales personalizados.
- Selección de diseño — elige / pega / adapta el texto de los 28 esqueletos de diseño. 16 Editorial / 12 Suizo.
- Preparación de recursos — obtén imágenes (Unsplash / Pexels / Flickr CC / Wallhaven / búsqueda directa), descarga localmente + escribe
SOURCES.md; pregunta si se deben dar créditos a las fuentes. - Componer y renderizar — copia la plantilla semilla → reemplaza
<!-- POSTERS_HERE -->→node render.mjs - Entregar y revisar — muestra los PNG primero, pregunta "¿quieres verlas tú mismo, o prefieres que ejecute el validador?" — no se hace la validación automática.
- Iterar — aplica la retroalimentación del usuario, ajusta estilos en línea o intercambia diseños / imágenes, vuelve a renderizar.
Especificación completa en SKILL.md. Detalles profundos en los archivos references/*.md correspondientes.
Validador
node validate-social-deck.mjs path/to/task-dir
6 reglas, basadas en mediciones de renderizado real con Playwright, no en escaneo estático:
- R1 Desbordamiento — cualquier sección que se desborde de
.posterfalla inmediatamente - R2 Límites tipográficos — combinaciones de tamaño + peso de
.h-xl/.h-displayque excedan las definiciones semilla - R3 Colisión de pie de página — contenido que presiona el pie de página inferior / número de página
- R4 Densidad de 4 bandas — lienzo de 1440 de alto dividido en 4 bandas horizontales; cada una debe contener contenido o tener una razón explícita para el espacio en blanco
- R5 Desbordamiento de marco — elementos hijos de
.frame-img/.frame-shotque se desbordan del marco - R6 Identidad Suiza — las plantillas suizas con
font-weight >= 700en línea advierten (viola "más grande significa más fino")
El Paso 7 de SKILL.md establece explícitamente que el validador no se ejecuta automáticamente — espera a que el usuario vea las imágenes primero, ahorrando decenas de segundos por ronda.
Ajustes preestablecidos de tema
Elige de references/theme-presets.md. No se permiten valores hexadecimales personalizados — proteger la estética importa más que la libertad de elección.
Editorial (6)
| Tema | Tonos | Ideal para |
|---|---|---|
| 🖋 Tinta clásica | #0a0a0b / #f1efea | Predeterminado general, temas comerciales, en caso de duda |
| 🌊 Porcelana índigo | #0a1f3d / #f1f3f5 | Tecnología, investigación, IA, escritura técnica |
| 🌿 Tinta bosque | #1a2e1f / #f5f1e8 | Naturaleza, sostenibilidad, aire libre, no ficción |
| 🍂 Papel kraft | #2a1e13 / #eedfc7 | Nostalgia, humanidades, lectura, literatura |
| 🌙 Duna | #1f1a14 / #f0e6d2 | Arte, diseño, creatividad, moda |
| ⚫ Tinta medianoche | #0e0d0c / #ece2cf / #d4a04a | Arte clave de juegos / escenas nocturnas / portadas cinematográficas / temas oscuros estilo Black Myth · Elden Ring |
Suizo (4)
| Tema | Ancla | Ideal para |
|---|---|---|
| 🔵 Azul Klein IKB | #002FA7 | Predeterminado general, lanzamientos comerciales, productos de IA, frameworks |
| 🟡 Limón | #FFD500 | Juventud, deportes, venta al por menor, consumidor, Y2K |
| 🟢 Verde limón | #C5E803 | Eco, salud, Generación Z, marcas verdes |
| 🟠 Naranja de seguridad | #FF6B35 | Alertas, noticias, industrial, temas enérgicos |
Para cambiar de tema, simplemente reemplaza el atributo <section class="poster" data-theme="..."> en la plantilla semilla; todo el CSS se resuelve a través de var(--...).
Directorio
guizang-social-card-skill/
├── SKILL.md ← Archivo principal de la skill: flujo de trabajo de 7 pasos
├── README.md ← README en chino
├── README.en.md ← Este archivo
├── HANDOFF.md ← Documento de traspaso: hechos + historial de versiones
├── PRODUCT.md ← Documento del producto: razonamiento + decisiones + hoja de ruta
├── validate-social-deck.mjs ← Validador de diseño con Playwright
├── assets/
│ ├── template-editorial-card.html ← Plantilla semilla Editorial (6 temas / 3 lienzos)
│ ├── template-swiss-card.html ← Plantilla semilla Suiza (4 acentos / 3 lienzos)
│ ├── magazine-bg-webgl.js ← Fondo de flujo de tinta WebGL
│ └── screenshot-backgrounds/ ← 9 fondos de escenario para capturas de pantalla (WebP)
│ ├── style-a/ ← 5 Editorial
│ └── style-b/ ← 4 Suizo
└── references/
├── platform-specs.md ← Especificaciones de plataforma × resolución × nomenclatura
├── style-system.md ← Reglas estrictas y antipatrones para ambos estilos
├── theme-presets.md ← Las 10 paletas en detalle
├── layout-recipes.md ← 28 esqueletos de diseño (M01-M16 + S01-S12)
├── components.md ← Tipografía / tarjetas / espaciado / iconos
├── background-systems.md ← Flujo de tinta / retícula / capas de papel
├── portrait-fill.md ← Estrategia de espacio en blanco para el tablero 3:4
├── content-planning.md ← Ganchos / divisiones de página / compresión de texto
├── category-cookbook.md ← Tabla de enrutamiento de 11 categorías de Xiaohongshu
├── image-overlay.md ← Máscara de imagen a sangre completa + reglas de seguridad facial
├── screenshot-treatment.md ← Utilidades `.frame-shot` + embellecimiento de capturas de pantalla
├── map-component.md ← Mapa MapLibre `.map-block`
├── title-shortener.md ← Estrategia de título corto para la portada 1:1
├── production-workflow.md ← Pipeline de renderizado con Playwright
└── qa-checklist.md ← Lista de verificación de calidad
Principios de diseño fundamentales
- Moderación sobre estridencia — las paletas moderadas destacan en un feed saturado.
- Estructura sobre decoración — la tipografía / contraste / retícula llevan la jerarquía, no las sombras o tarjetas.
- Diseños sobre libertad — elige primero, adapta después; no inventes páginas fuera de los 28 esqueletos.
- Primero las imágenes del usuario — en la recepción, presenta A/B/C una vez; no vuelvas a proponer que tomen las suyas.
- Máscara + evitar — las imágenes a sangre completa siempre llevan máscara; las zonas de texto deben evitar al sujeto (caras / productos / regiones con mucho texto).
- Más grande significa más fino — en Suizo, el tamaño
.h-xlsube → el peso debe bajar. Editorial sigue la misma regla. - Sin validación automática — deja que el usuario vea primero, luego pregunta antes de validar; ahorra decenas de segundos por ronda.
- Una skill es un producto, no un prompt — tiene PRODUCT.md, números de versión, CHANGELOG, límites de capacidad.
- Las pruebas locales se quedan fuera de git — todas las demostraciones / pruebas de humo viven en
local-tests/, ignoradas por git.
Referencias visuales
- Monocle / Kinfolk / Cereal maquetación y espaciado de letras de las revistas
- Sistemas de retícula de Massimo Vignelli / Helvetica Forever / Estilo Tipográfico Internacional Suizo
- Proporciones imagen-texto y retratos humanos de Apartamento / The Gentlewoman
- Muestras de "lo moderado gana el feed" de Xiaohongshu / Rednote
- Práctica de tarjetas sociales de Guizang
Hoja de ruta
- Más pruebas de humo para casos límite de límites tipográficos en contenido Editorial largo
- Más diseños de datos suizos (esqueletos de gráficos adicionales)
- Después de la generación de imágenes: preguntar activamente si se deben hacer correcciones locales / regenerar toda la imagen
- Más paquetes de diseño recomendados por categoría (actualmente 7 de 11 son fuertes de extremo a extremo)
- Versión de WorkBuddy lista para el mercado
Contribuciones
Errores, problemas de diseño, solicitudes de nuevos diseños — Issues y PRs bienvenidos. Prioridades para los cambios:
- Al editar plantillas semilla, actualiza también la tabla de correspondencia en
references/components.md(tamaños / espaciado / pesos) - Al añadir diseños, añade la receta completa a
references/layout-recipes.md(límites de texto + densidad mínima) - Al añadir colores de tema, actualiza también el bloque
[data-theme="..."]en la plantilla semilla +references/theme-presets.md - Al añadir reglas suizas, actualiza también la regla correspondiente en
validate-social-deck.mjs - Los errores que hayas encontrado van en
references/qa-checklist.md - Las pruebas y demostraciones viven en
local-tests/— no contamines la raíz de la skill
Licencia
AGPL-3.0 © 2026 op7418
Este proyecto está licenciado bajo GNU AGPL-3.0. Puntos clave:
- Atribución requerida — Conserva el aviso de copyright
- Los derivados deben ser de código abierto — Cualquier versión modificada, fork o redistribución debe publicarse bajo AGPL-3.0 (o una licencia compatible), con el código fuente completo disponible
- El uso en red es distribución — Incluso si solo ejecutas una versión modificada como SaaS / servicio web sin distribuir el código, debes publicar el código fuente (esto es lo que hace que AGPL sea más estricta que GPL)
- Sin distribución de código cerrado, propietario o solo de pago
Términos completos en LICENSE.