Hace un tiempo, publiqué como código abierto guizang-ppt-skill, y después descubrí algo mientras lo usaba para crear contenido yo mismo.
Las páginas web que genera, cuando se capturan como 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 tarjeta en formato 3:4.
Casi todas tienen el mismo sabor: Tailwind + grandes bloques de color + apilamiento de emojis + jerarquía tipográfica mediocre.
Después de verlas, entiendo 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 comparadas con las presentaciones: pantallas verticales, una decisión de 1 segundo en el flujo de información sobre si detenerse o no, y dependen de imágenes en lugar de palabras.
Diferentes diseños, diferentes ritmos, diferentes lectores.
Así que lo separé del Skill de PPT y lo convertí en un Skill independiente: guizang-social-card-skill (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ó al formato 3:4: jerarquía tipográfica, proporciones de diseño y reglas de salto de línea.
Todo ha sido calibrado según el escenario real de ser deslizado en un flujo de información móvil. También se admiten formatos 21:9 y 1:1 para imágenes de cabecera de cuentas oficiales de WeChat.
Comencemos con lo que más les importa a los creadores de contenido de imagen y texto.
2.1 Distingue lo que estás escribiendo y lo empareja con el estilo adecuado
El contenido en las plataformas de imagen y texto está categorizado. Una reseña de una película y una reseña de un producto requieren lenguajes visuales completamente diferentes;
Un diario de viaje y consejos laborales deberían usar diseños diferentes.
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 ensamblaje de portadas de cuentas oficiales de WeChat.
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 serifa;
- Trabajo / Consejos / Perspectivas de negocio: Estilo cuadrícula, fondos oscuros, diseños de carteles con muchos datos;
- Cine / Cultura: Estilo revista de tonos fríos, diseños de carteles de películas, primeros planos de personajes priorizados;
- Reseñas de productos / Tecnología: Estilo cuadrícula, matrices de comparación, capturas de pantalla enmarcadas en dispositivos;
- Lectura / Notas: Estilo revista, fuentes serifa, diseños de citas centradas, máximo espacio en blanco;
- Comida / Visitas a locales: Estilo revista de alta saturación, tomas desde arriba priorizadas, texto movido a las esquinas;
Incluso hice un componente de mapa específicamente para blogueros de viajes. Puedes marcar ubicaciones de tiendas y rutas de viaje en él, y la IA generará anotaciones automáticamente.
Dale el mismo texto: dile que es una reseña de cine, y te dará una tarjeta estilo póster de película; dile que es una reseña de producto, y te dará un gráfico de comparación con marcos de dispositivos.
Más importante aún, tiene claras "zonas prohibidas":
- Contenido orientado a seguidores: el lenguaje visual requerido es completamente diferente;
- Anuncios puramente promocionales: contradice su filosofía de diseño que enfatiza el contenido;
- Tutoriales largos de más de 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".
Dejé esto intencionalmente. Los límites definen un producto más que las capacidades mismas; un Skill que intenta hacerlo todo generalmente termina 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 expone más fácilmente.
Si no se hace bien, ocurren tres tipos de fallos:
- El texto cubre rostros o el centro del producto.
- Texto blanco sobre fondos claros o texto negro sobre fondos oscuros se vuelve 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 con mucho 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 agregar una máscara y qué tan profunda debe ser la sombra;
- Tamaño de fuente adaptativo y salto de línea: ajusta dinámicamente el tamaño de la 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, se establece la "sensación premium" de la tarjeta. Los lectores no pueden distinguir entre "texto presionado sobre" y "texto que estaba originalmente allí".
2.3 ¿De dónde vienen las imágenes? Esta es la mayor diferencia con otras herramientas de tarjetas con IA
La mayoría de las herramientas de IA para generar tarjetas de imagen y texto te piden que subas tus propias imágenes, que uses emojis en su lugar, o generan ilustraciones que se ven como IA a simple vista.
El resultado es que la búsqueda manual de imágenes es agotadora, 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 de personas, vida y espacios;
- Wallhaven: juegos, fotografía y fondos de pantalla están aquí, aunque los derechos de autor son complicados.
Dispacha automáticamente términos de búsqueda según la semántica de los párrafos de texto, recupera imágenes, las recorta para ajustarse 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 se empeña en encontrar imágenes absolutamente libres de problemas de derechos de autor. Te dirá qué imágenes encontró, y tú decides si usar imágenes con derechos de autor poco claros.
Además, las plataformas actualmente son 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 las plataformas detectan y pueden llevar a una reducción de visibilidad. Este es un gran punto débil.
2.4 Las capturas de pantalla también son imágenes: El embellecimiento 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 productos.
El Skill tiene un embellecedor de capturas de pantalla incorporado:
Agrega marcos de dispositivo estilo macOS/iOS (chrome del navegador o bordes de teléfono), usa diferentes texturas de fondo para sostener la captura de pantalla (papel cuadriculado, matriz de puntos, blanco cálido u oscuro), para que la captura de pantalla 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 esto.
2.5 Generación de imágenes con IA: Úsalo con moderación
El Skill solo recurre a la generación de imágenes con 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 de IA obvias".
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 de IA.
2.6 Sistema visual: Dos estilos + 28 esqueletos de diseño
Aquellos familiarizados con mi Skill de PPT anterior encontrarán esto familiar. Estos dos sistemas visuales y esqueletos de diseño fueron adaptados y recalibrados a partir del Skill de PPT.
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. Grandes espacios en blanco, títulos grandes con serifa, diseños asimétricos y texto con espacio para respirar.
- Estilo cuadrícula: En la línea del diseño gráfico suizo de Massimo Vignelli y Helmut Schmid. Cuadrículas fuertes, fuentes sans-serif, sensación geométrica, uso contenido pero preciso del color.
28 esqueletos de diseño, que seleccioné de revistas, carteles, portadas de álbumes y pósteres 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 conjuntos de paletas de colores temáticos, combinaciones de fuentes fijas y bibliotecas de iconos limitadas: no enumeraré estos detalles uno por uno.
La lógica es la misma: las restricciones no son obstáculos, son la línea base.
Dale a un creador de contenido opciones de color infinitas, y es más probable que haga algo feo; dale 10 conjuntos 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 tarjeta más "modernos"?
La esencia de una tarjeta de imagen y texto es la misma que un póster impreso, una revista ilustrada 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 carteles han estudiado esto a fondo durante los últimos cien años.
El lenguaje de 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é grandes espacios en blanco? El espacio en blanco es la forma que tiene la revista de decirte "el foco está aquí".
- ¿Por qué priorizar fuentes serifa? Las fuentes serifa tienen el peso de los impresos 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 que "gritan fuerte" a su alrededor.
Estas decisiones suenan "abstractas", pero todas son constantes específicas en el código. Proporciones de tamaño de fuente, proporciones 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 obligarme a pensar claramente sobre "lo que realmente estoy haciendo". 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 cualquier persona que lo tome pueda tener una comprensión completa en 30 minutos.
Enumero para qué no es bueno de antemano 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 pocos 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.
El otro lado es, si ni siquiera puedo explicar los límites de mi propio Skill, no tengo derecho a pedirle a otros que entreguen su flujo de trabajo a él.
Palabras finales
Este Skill me ayudó a entender qué fue lo que mi Skill de PPT hizo bien.
Lo que hizo bien fue que fue tratado como un producto desde el principio. Muchas plantillas, reglas detalladas y colores hermosos son subproductos de esto.
Si alguien me pregunta qué es un Skill en el futuro, 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
