Hace un tiempo, publiqué como código abierto guizang-ppt-skill, y luego descubrí algo mientras lo usaba para crear contenido yo mismo.
Las páginas web que genera, cuando se capturan en pantalla y se publican en plataformas de imagen y texto, recibieron comentarios y datos mucho mejores que mis diseños manuales.
Creo que antes has encontrado algunos prompts o Skills que generan estas imágenes de tarjetas 3:4.
Casi todas tienen el mismo estilo: Tailwind + grandes bloques de color + apilamiento de emojis + jerarquía de fuentes mediocre.
Después de verlas, puedo entender aproximadamente por qué las tarjetas de imagen y texto generadas por IA son tan fáciles de identificar de un vistazo: están haciendo páginas web, no revistas.
Las tarjetas de imagen y texto son una bestia completamente diferente en comparación con los PPTs: pantallas verticales, una decisión de un segundo en el flujo de información sobre si detenerse o no, y confiar en imágenes en lugar de palabras.
Diferentes diseños, diferentes ritmos, diferentes lectores.
Así que lo separé del PPT Skill y lo convertí en un guizang-social-card-skill independiente (https://github.com/op7418/guizang-social-card-skill).
A continuación, hablaré sobre por qué es bueno y por qué estoy dispuesto a dedicarle tanto tiempo.
2. ¿Por qué exactamente es bueno?
Las imágenes verticales 3:4 son el campo de batalla principal de las tarjetas de imagen y texto. La mayor parte de la energía de diseño de este Skill se dedicó a 3:4 — jerarquía de fuentes, proporciones de diseño y reglas de salto de línea.
Todo se ha calibrado según el escenario real de ser deslizado en un flujo de información móvil. También se admiten imágenes de cabecera para WeChat Official Account en formato 21:9 y 1:1.
Empecemos por lo que más les importa a los creadores de contenido de imagen y texto.
2.1 Distingue lo que escribes y lo combina con el estilo adecuado
El contenido en las plataformas de imagen y texto se clasifica. Una reseña de película y una reseña de producto requieren lenguajes visuales completamente diferentes;
Un diario de viaje y consejos laborales deberían usar diseños distintos.
Pero la mayoría de las herramientas de IA no se preocupan por esto; usan la misma plantilla para todo lo que escribes.
El resultado es que las tarjetas de todos parecen salidas de una línea de montaje de portadas de WeChat Official Account.
Este Skill tiene reglas de adaptación integradas para 11 categorías comunes de imagen y texto:
- Viajes / Estilo de vida: Estilo revista, paleta de colores cálidos, imágenes a pantalla completa, títulos grandes con serif;
- Trabajo / Consejos / Perspectivas empresariales: Estilo cuadrícula, fondos oscuros, diseños de póster con muchos datos;
- Cine / Cultura: Estilo revista de tonos fríos, diseños de póster de película, primeros planos de personajes priorizados;
- Reseñas de productos / Tecnología: Estilo cuadrícula, matrices comparativas, capturas de pantalla con marcos de dispositivos;
- Lectura / Notas: Estilo revista, fuentes serif, diseños de citas centrados, máximo espacio en blanco;
- Comida / Visitas a restaurantes: Estilo revista de alta saturación, priorizar tomas cenitales, texto movido a las esquinas;
Incluso hice específicamente un componente de mapa para blogueros de viajes. Puedes marcar ubicaciones de tiendas y rutas de viaje en él, y la IA generará automáticamente anotaciones para ti.
Dale el mismo texto: dile que es una reseña de película, y te da una tarjeta estilo póster de película; dile que es una reseña de producto, y te da una tabla comparativa con marcos de dispositivos.
Más importante aún, tiene zonas «prohibidas» claras:
- Contenido orientado a fans: el lenguaje visual requerido es completamente diferente;
- Anuncios puramente promocionales: contradice su filosofía de diseño de enfatizar el contenido;
- Tutoriales largos que exceden 12 pantallas: el formato de imagen y texto no es el portador óptimo para tutoriales largos.
En estos escenarios, el Skill te dirá al principio: «Quizás quieras usar otra herramienta».
Lo dejé a propósito. Los límites definen un producto más que las capacidades mismas; un Skill que intenta hacerlo todo suele terminar sin hacer nada bien.
2.2 Cómo superponer texto en imágenes
Superponer texto en imágenes es la parte más difícil de las tarjetas de imagen y texto y el lugar donde el «toque IA» se nota más fácilmente.
Si no se hace bien, se producen tres tipos de fallos:
- El texto cubre rostros o el centro del producto.
- Texto blanco sobre fondos claros o texto negro sobre fondos oscuros resulta ilegible.
- El texto abarca toda la imagen, arruinando una composición que de otro modo sería hermosa.
El Skill maneja esto en tres pasos:
- Identifica sujetos en la imagen: rostros, productos, áreas densas en texto, y los evita automáticamente en el diseño;
- Calcula el color y el brillo del área de colocación: decide el color del texto, si añadir una máscara y qué tan profunda debe ser la sombra;
- Tamaño de fuente adaptativo y saltos de línea: ajusta dinámicamente el tamaño de fuente y las posiciones de salto de línea según el tamaño del área de colocación, en lugar de codificar un tamaño de fuente que se desborda.
Con estas reglas, la «sensación premium» de la tarjeta queda establecida. Los lectores no pueden distinguir entre «texto presionado encima» y «texto que ya estaba allí».
2.3 De dónde vienen las imágenes: Esta es la mayor diferencia con otras herramientas de tarjetas de IA
La mayoría de las herramientas de IA para generar tarjetas de imagen y texto te piden que subas tus propias imágenes, usen emojis en su lugar o generen ilustraciones que parecen IA a simple vista.
El resultado es que buscar imágenes manualmente es agotador, o apilar emojis se ve falso.
Este Skill está conectado de forma predeterminada a tres bibliotecas de imágenes gratuitas para uso comercial:
- Pexels: admite búsqueda en chino, buena para escenarios generales;
- Unsplash: la textura fotográfica más fuerte, la primera opción para contenido sobre personas, vida y espacios;
- Wallhaven: juegos, fotografía y fondos de pantalla están aquí, aunque los derechos de autor son confusos.
Dispone automáticamente términos de búsqueda según la semántica de los párrafos de texto, recupera imágenes, las recorta para ajustarlas al diseño y evita cortar rostros o sujetos.
Obtienes una tarjeta con fotografía real, no una tarjeta de bloques de color.
Y no es rígido en cuanto a encontrar imágenes absolutamente libres de derechos de autor. Te dirá qué imágenes encontró, y tú decides si usar imágenes con derechos de autor dudosos.
Además, las plataformas son actualmente muy estrictas con las marcas de agua de IA. La mayoría de las imágenes generadas por IA que usas ahora tienen marcas de agua, que son detectadas por las plataformas y pueden llevar a una sombra de penalización. Este es un gran punto débil.
2.4 Las capturas de pantalla también son imágenes: La beautificación en cuatro piezas
Gran parte de nuestro contenido no puede usar fotografía; necesita ser capturas de pantalla de software, registros de chat o interfaces de producto.
El Skill tiene un beautificador de capturas de pantalla integrado:
Añade marcos de dispositivo estilo macOS/iOS (cromo del navegador o bordes de teléfono), usa diferentes texturas de fondo para sostener la captura — papel cuadriculado, matriz de puntos, blanco cálido u oscuro — para que la captura ya no flote con un fondo blanco sobre un fondo blanco;
Al mismo tiempo, combina automáticamente capas de sombra y parámetros de radio de esquina según el estilo visual. Cada estilo tiene una receta de captura de pantalla, asegurando consistencia sin ajuste manual.
En pocas palabras, una captura de pantalla aleatoria que tomes se verá como una imagen promocional oficial de producto después de pasar por él.
2.5 Generación de imágenes IA: Usar con moderación
El Skill solo solicita generación de imágenes IA cuando todas las fuentes de imágenes anteriores no logran encontrar material adecuado.
Al generar imágenes, fuerza palabras de restricción de estilo para evitar los visuales mediocres de «ilustraciones IA evidentes».
Prefiero que use IA menos a que la use de una manera que haga que todas las tarjetas de imagen y texto parezcan hermanas. Esto también evita que la exposición del contenido se vea afectada por el uso de imágenes IA.
2.6 Sistema visual: Dos estilos + 28 esqueletos de diseño
Quienes estén familiarizados con mi anterior PPT Skill encontrarán esto conocido. Estos dos sistemas visuales y esqueletos de diseño fueron adaptados y recalibrados a partir del PPT Skill.
No repetiré los detalles, pero así es como se ven en el contexto de las tarjetas de imagen y texto.
Dos sistemas visuales:
- Estilo Revista: El tipo de tipografía que ves en las portadas de The New Yorker o de la Editorial de Traducción de Shanghái. Mucho espacio en blanco, grandes títulos con serif, diseños asimétricos y texto con espacio para respirar.
- Estilo Cuadrícula: En la línea de Massimo Vignelli y Helmut Schmid del diseño gráfico suizo. Cuadrículas fuertes, fuentes sans-serif, sensación geométrica, uso del color contenido pero preciso.
28 esqueletos de diseño, que seleccioné de revistas, pósters, portadas de álbumes y carteles de películas que he visto en la última década — aquellos que resisten el escrutinio.
La IA sigue siendo mediocre en el «diseño de diseño libre». Al darle un esqueleto probado, su tarea se reduce de «diseñar» a «rellenar», y la estabilidad del producto final mejora de inmediato.
10 juegos de paletas de colores temáticas, combinaciones de fuentes fijas y bibliotecas de iconos limitadas — no enumeraré estos detalles uno por uno.
La lógica es la misma: las limitaciones no son obstáculos; son la línea de base.
Dale a un creador de contenido infinitas opciones de color, y es más probable que haga algo feo; dale 10 juegos de paletas probadas, y la probabilidad de que haga algo decente se acerca al 100%.
3. ¿Por qué hacer esto?
3.1 Perspectiva de diseño: La sensación de revista es muy efectiva
¿Por qué optar por estilos de revista y cuadrícula en lugar de diseños de tarjetas más «modernos»?
La esencia de una tarjeta de imagen y texto es la misma que la de un póster impreso, un pictorial o una portada de álbum. Usar una imagen estática para convencer a un extraño de que se detenga en 1 segundo. Las revistas y los pósters han estudiado esto a fondo durante los últimos cien años.
El lenguaje del diseño web está hecho para escenarios interactivos y desplazables. Moverlo a una imagen estática lo hace ver forzado y la información plana.
Por lo tanto, todos los «porqués» de las decisiones visuales de este Skill:
- ¿Por qué tanto espacio en blanco? El espacio en blanco es la forma que tiene la revista de decirte «el foco está aquí».
- ¿Por qué priorizar fuentes serif? Las fuentes serif tienen el peso del material impreso en tamaños grandes.
- ¿Por qué diseños asimétricos? La asimetría crea ritmo visual, permitiendo que el ojo sepa dónde mirar primero.
- ¿Por qué colores contenidos? En los feeds de redes sociales, una paleta contenida es en realidad más llamativa que la alta saturación; se destaca de todas las tarjetas «gritando fuerte» a su alrededor.
Estas decisiones suenan «abstractas», pero son todas constantes específicas en el código. Ratios de tamaño de fuente, ratios de espacio en blanco, número de columnas de la cuadrícula, umbrales de contraste, reglas de salto de línea. Estas constantes son el verdadero foso de este Skill.
3.2 Perspectiva de producto: Es un producto, no solo un Prompt
Después de hacer tantos Skills, he formado un juicio sobre «lo que realmente es un Skill»:
Un Skill es esencialmente un pequeño producto.
Aplicado a este proyecto:
Escribí un PRODUCT.md para él, explicando claramente qué problema resuelve, para quién es y qué no hace. Es para forzarme a pensar claramente «qué estoy haciendo realmente». Si no puedo explicarlo, el Skill no debería publicarse.
Le doy números de versión (v0.5 / v0.9 / v0.10 / v0.12), y cada versión tiene un CHANGELOG. Puedo decirte por qué v0.10 fue un intento fallido y cómo v0.12 lo solucionó.
Escribí un HANDOVER.md para él, explicando cómo son los entregables, dónde están los límites y cuándo usar otras herramientas. Espero que cualquiera que lo tome pueda tener una comprensión completa en 30 minutos.
Enumero de antemano en qué no es bueno para ahorrar a los usuarios la prueba y error.
¿Por qué todo este esfuerzo?
Porque el mayor problema con el ecosistema de Skills es que la mayoría de los Skills se conforman con «puedo hacer uno», y pocas personas persiguen «hacerlo al extremo».
Un Skill debería ser un pequeño producto que pueda valerse por sí mismo. Un Prompt puede ser copiado por un competidor en diez minutos; un producto no puede.
La otra cara es que, si no puedo explicar ni siquiera los límites de mi propio Skill, no tengo derecho a pedir a otros que entreguen su flujo de trabajo a él.
Palabras finales
Este Skill me ayudó a entender qué hizo bien mi PPT Skill.
Lo que hizo bien fue que fue tratado como un producto desde el principio. Muchas plantillas, reglas detalladas y colores hermosos son todos subproductos de esto.
Si alguien me pregunta en el futuro qué es un Skill, responderé con dos frases:
Un Skill es un producto. Para juzgar si un Skill es bueno, mira si ha sido favorecido por su autor.
Si también estás creando contenido de imagen y texto, espero que te ayude a salvar esos buenos temas arruinados por un mal diseño.
Si también estás haciendo Skills, espero que te haga reconsiderar si lo que hiciste merece tener un PRODUCT.md.
GitHub: https://github.com/op7418/guizang-social-card-skill
Dile a tu Codex, Xiaolongxia, ClaudeCode o Workbuddy: Ayúdame a instalar este Skill: https://github.com/op7418/guizang-social-card-skill
