lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codecodexdiseno

Guizang: convierte contenido en tarjetas sociales

Transforma textos y capturas en carruseles de imágenes, con composición HTML que puedes revisar antes de exportar.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.


Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: prepara el entorno

Comprueba que el agente puede escribir archivos y ejecutar comandos, y que tienes Node.js ≥22.20.0 con npm/npx para instalar la skill, según el manifiesto del instalador. Para exportar las tarjetas, prepara un navegador controlado por Playwright o un flujo equivalente de capturas siguiendo Production Workflow. Esa referencia no fija versiones mínimas. Trabaja en una carpeta de tarea, por defecto local-tests/<slug>/, y reserva output/ para los PNG.

Paso 2: sigue la instalación oficial

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

Comprobación

Pide al agente una tarjeta estática a partir de un texto propio, indicando plataforma y proporción. Sigue SKILL.md para renderizar y validar; revisa los PNG exportados y comprueba que no haya recortes o texto ilegible.

Si algo falla

Si aparecen desbordamientos, revisa las mediciones del validador y reduce el contenido antes de bajar el tamaño de letra. Consulta README.en.md para la instalación y el flujo en inglés.

Fuente de los comandos y del procedimiento.

ver en .md ¿Prefieres el recurso entero?

Qué es

Guizang Social Card Skill guía a agentes como Claude Code y Codex al crear tarjetas visuales. Incluye sistemas gráficos editorial y suizo, con HTML como formato de trabajo y PNG como salida estática.

Para qué te sirve

  • Cuando un artículo debe convertirse en un carrusel breve.
  • Cuando necesitas portadas coordinadas para una publicación.
  • Cuando quieres reutilizar capturas en una explicación visual.

Cómo funciona

El agente selecciona una dirección visual, organiza el texto y escribe un HTML. La validación mide el DOM mediante Playwright para detectar problemas de composición. El repositorio también documenta una rama de tarjetas dinámicas, separada de la exportación estática.

Antes de empezar

Un agente con acceso a archivos y shell, más los requisitos de render del repositorio. Las imágenes pueden proceder de material tuyo o de fuentes externas; comprueba sus permisos. GitHub identifica la licencia del proyecto como AGPL-3.0.

Límites y alternativas

Los formatos están orientados especialmente a Xiaohongshu y WeChat: adapta el destino antes de generar. La plantilla no sustituye una revisión de legibilidad ni aporta derechos sobre imágenes ajenas. Para una pieza aislada puede bastar una plantilla manual.

Recursos