Habilidad Generadora de Portadas de Blog
Esta habilidad permite a los agentes de IA generar imágenes de portada de blog impresionantes, minimalistas y técnicas utilizando la CLI blog-cover-image-cli. La CLI aprovecha Gemini 3.1 Flash Image Preview, obtiene automáticamente logotipos de marcas desde los dominios, utiliza imágenes de referencia estéticas locales y emplea fundamentos de búsqueda de Google para inyectar contexto en tiempo real.
Configuración
Requisitos previos del agente:
Antes de usar esta herramienta, verifica que esté instalada. Si blog-cover-cli --help falla, instálala globalmente:
npm install -g blog-cover-image-cli
Si el usuario desea que generes una imagen y aún no has configurado la clave de API, primero debes configurar la CLI usando una clave API de Gemini. La CLI almacena esta clave de forma segura mediante el paquete conf.
# 1. Establece tu clave API de Gemini (Requerida para la generación de imágenes)
npx -p blog-cover-image-cli blog-cover-cli config set-key <TU_CLAVE_API_GEMINI>
# 2. Establece tu ID de cliente Brandfetch (Requerido para obtener logotipos en alta resolución)
npx -p blog-cover-image-cli blog-cover-cli config set-brandfetch-id <TU_ID_CLIENTE_BRANDFETCH>
# Verifica tus claves (enmascaradas)
npx -p blog-cover-image-cli blog-cover-cli config get-key
npx -p blog-cover-image-cli blog-cover-cli config get-brandfetch-id
Uso: Generar una Imagen
Cuando un usuario solicite una imagen de portada (por ejemplo, "Crea una imagen de portada para mi blog sobre Vercel v0"), debes usar el comando generate.
npx -p blog-cover-image-cli blog-cover-cli generate -t "El Título de la Entrada del Blog" -l "ejemplo.com"
Argumentos
-t, --title <texto>: (Requerido) El texto del título que se mostrará en la imagen de portada. No uses títulos excesivamente largos (que ocupen más de 3 líneas visualmente).-l, --logo <dominio>: (Opcional pero recomendado) El dominio del cual obtener el logotipo de la marca (por ejemplo,vercel.com,google.com,cursor.com). La CLI convierte automáticamente WebP/SVG/AVIF a PNG para compatibilidad.-o, --output <ruta>: (Opcional) La ruta del archivo donde se guardará la imagen generada. Si se omite, la CLI la guarda automáticamente en un directoriooutput/de la carpeta de trabajo actual (por ejemplo,./output/vercel-portada.png).
Ejemplos
Ejemplo 1: Cursor
npx -p blog-cover-image-cli blog-cover-cli generate -t "Por qué Cursor es el Editor de Código IA Definitivo" -l "cursor.com"
Ejemplo 2: Lovable
npx -p blog-cover-image-cli blog-cover-cli generate -t "Construyendo Aplicaciones en Minutos con Lovable" -l "lovable.dev"
Ejemplo 3: Ruta de salida personalizada
npx -p blog-cover-image-cli blog-cover-cli generate -t "Dominando React en 2026" -l "reactjs.org" -o "./assets/react-portada.png"
Cómo Funciona Internamente
Como agente, debes saber qué hace la CLI para poder informar al usuario:
- Obtención de Logotipos: Obtiene logotipos desde
Brandfetchy los procesa mediantesharp. - Referencias: Carga imágenes de referencia seleccionadas de su directorio
examples/para asegurar que el resultado sea siempre un fondo blanco limpio, minimalista, con tipografía en negrita. - Fundamentos: Tiene herramientas
googleSearchhabilitadas, lo que significa que si el título se relaciona con un evento reciente, Gemini puede buscarlo antes de generar la imagen. - Aplicación de Texto: Obliga a Gemini a generar exactamente la cadena de título indicada, utilizando reglas de colocación tipográfica.
Casos Especiales / Solución de Problemas
- Error de Clave API: Si ves un error de clave API, ejecuta el comando
config set-key. - Advertencia de Obtención de Logotipo: Si la CLI muestra
Advertencia: No se pudo obtener el logotipo, igualmente generará la imagen pero sin el logotipo. No es necesario detenerse ni fallar. - Límites Estrictos de Modalidad: Debido a que utiliza los modelos de imagen experimentales de Gemini, la generación puede fallar ocasionalmente debido a filtros de seguridad estrictos. Si esto ocurre, notifica al usuario.