banner-designpor nextlevelbuilder

Banner Design Skill.

Un skill de Claude Code y Codex para trabajo con imágenes: banners para redes sociales, anuncios, héroes de sitios web e impresión.

Imágenes y arte generativo
Image

Descargar OpenDesign Ver guía de uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md

--- name: banner-design description: Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security

Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 7010 caracteres en total

01 Qué hace

Qué Hace la Skill banner-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Diseña banners para portadas de redes sociales, campañas publicitarias, heroes de sitios web e impresión generando múltiples opciones de dirección de arte en HTML/CSS. Recopila los requisitos mediante preguntas estructuradas (plataforma, contenido, marca, estilo, cantidad), consulta la guía de tamaños y zonas seguras incluida, y exporta PNG con precisión de píxel en las dimensiones exactas de la plataforma.

Admite 22 estilos de dirección de arte, incluidos minimalista, degradado, tipografía audaz, basado en fotos, geométrico, glassmorphism y neón. Gestiona Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display y formatos personalizados. Por defecto, 3 opciones por solicitud. Usa activos proporcionados por el usuario, visuales construidos con CSS o fondos generados opcionales—nunca inventa reglas de marca. No gestiona edición de video, diseño completo de sitios web ni producción de impresión.

Qué produce

Archivos de imagen PNG en las dimensiones exactas de la plataforma, exportados a assets/banners/{campaign}/ con nomenclatura kebab-case
Código fuente HTML/CSS para cada variante de banner cuando la captura de imagen no está disponible

Ver el ejemplo de prompt ↗

Cómo funciona

01
Recopilar Requisitos Mediante Preguntas Estructuradas
Recopila el propósito (portada social, anuncio, hero, impresión), la plataforma o dimensiones personalizadas, el contenido (titular, subtexto, CTA, logo), las directrices de marca, la preferencia de estilo y la cantidad (3 opciones por defecto).
02
Investigar la Dirección de Arte y las Zonas Seguras
Lee la referencia banner-sizes-and-styles.md incluida para conocer el formato objetivo, las zonas seguras y los estilos adecuados.
03
Diseñar Cada Opción en HTML/CSS
Crea banners en las dimensiones exactas de la plataforma con reglas de zona segura (contenido crítico en el 70–80% central), usando como máximo 2 tipografías, un único CTA y un contraste de texto de 4.5:1.
04
Elegir la Fuente Visual por Opción
Prefiere los activos proporcionados por el usuario, usa visuales construidos con CSS (degradados, formas geométricas) para obtener resultados sin dependencias, o genera opcionalmente fondos en la relación de aspecto objetivo si el runtime lo permite.
05
Exportar los Banners como Imágenes PNG
Previsualiza cada banner en el navegador en el viewport exacto, lo captura como PNG con la capacidad estándar de captura de pantalla, y verifica las dimensiones en píxeles, el recorte de la zona segura, la carga de fuentes y la calidad de la imagen.
06
Presentar las Opciones con su Justificación
Muestra todas las imágenes exportadas en paralelo con el nombre del estilo de dirección de arte, la vista previa, la justificación de diseño clave, la ruta del archivo y las dimensiones.

02 Encuentra tu caso de uso

Cuándo usar el skill banner-design

Usa el skill banner-design en Claude Code o Codex cuando el trabajo sea de este tipo de imagen. El alcance y los límites a continuación se toman del archivo propio del skill.

Buen caso de uso

Creación de portadas o encabezados para redes sociales en plataformas como Facebook, Twitter/X, LinkedIn, YouTube e Instagram
Diseño de banners publicitarios o anuncios gráficos para Google Ads y otras plataformas publicitarias
Diseño visual de la sección hero de un sitio web en dimensiones estándar o personalizadas
Diseño de banner para eventos o impresión con salida CMYK y especificaciones de sangrado
Generación de recursos creativos para campañas que requieren múltiples variaciones de dirección de arte

Conozca los límites

Edición de video o motion graphics para banners

Qué proporcionar

Plataforma o dimensiones personalizadasEspecifica la plataforma social de destino (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) o indica dimensiones exactas en píxeles para formatos personalizados.
Elementos de contenidoProporciona el titular, el texto de apoyo, el copy del llamado a la acción y los requisitos de ubicación del logo para la composición del banner.
Guías de marca y recursosAporta colores de marca existentes, especificaciones de tipografía, archivos de logo y cualquier otra guía de marca verificada que deba aplicarse.
Preferencia de dirección de arteIndica el estilo preferido entre 22 opciones (minimalista, degradado, tipografía audaz, geométrico, glassmorphism, neón, etc.) o solicita recomendaciones de estilo.

03 Dentro del skill

Reglas que el skill banner-design le da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Por Defecto, 3 Opciones de Dirección de Arte
Genera 3 opciones de diseño por solicitud, a menos que el usuario especifique una cantidad diferente durante la recopilación de requisitos.
Máximo 2 Tipografías y 1 CTA por Banner
Usa como máximo 2 tipografías e incluye un único llamado a la acción, ubicado en la esquina inferior derecha con una altura mínima de 44px y un verbo de acción.
Nunca Inventar Guías de Marca
Aplica únicamente reglas de marca, colores, logos y tipografía proporcionados por el usuario o verificados. No fabrica especificaciones de marca.
Mantener la Proporción de Texto por Debajo del 20% en Anuncios
Limita la cobertura de texto a menos del 20% del área del banner en formatos de anuncio, ya que Meta penaliza el exceso de texto en la publicidad display.
Especificaciones de Impresión: 300 DPI, CMYK, Sangrado de 3-5mm
Produce banners de impresión a una resolución de 300 DPI en espacio de color CMYK con márgenes de sangrado de 3–5mm para una salida profesional.
Usar la Convención de Nombres de Archivo en kebab-case
Nombra los archivos exportados como {style}-{width}x{height}.{ext} en kebab-case, prefijando opcionalmente las campañas sensibles al tiempo con {YYMMDD}-.

04 Ponlo a trabajar

Instalar banner-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir banner-design a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

Forma genérica de CLI de skills para .claude/skills/banner-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una primera tarea de trabajo con imágenes

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifica que las dimensiones del PNG exportado coincidan exactamente con las especificaciones de tamaño de la plataforma de referencia
Confirma que el tamaño del archivo no supere los límites de la plataforma, optimizando o reduciendo la calidad si es necesario

En OpenDesign importa banner-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Rama main
Archivo de skill: .claude/skills/banner-design/SKILL.md Checksum de contenido registrado en verificación; commit 7f69fed
License: MIT De LICENSE; SKILL.md indica "MIT".
Estrellas del repositorio: 127.450 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio nextlevelbuilder/ui-ux-pro-max-skill, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso de banner-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo activarloEnumera los disparadores: solicitudes de banner/portada/encabezado, redes sociales, anuncios, secciones hero, eventos, campañas creativas
Recursos disponiblesWorkflow autónomo que usa una referencia de tamaños incluida; la investigación en navegador y la generación de imágenes son opcionales
WorkflowProceso de cinco pasos desde la recopilación de requisitos hasta la investigación, el diseño, la exportación y la iteración
Paso 1: Recopilar requisitos (AskUserQuestion)Recoge el propósito, la plataforma, el contenido, la marca, la preferencia de estilo y la cantidad mediante preguntas estructuradas
Paso 2: Investigación y dirección de arteLee la referencia de tamaños, opcionalmente investiga ejemplos, selecciona 2–3 direcciones de arte complementarias
Paso 3: Diseñar y generar opcionesCrea banners en HTML/CSS con las dimensiones exactas y zonas seguras, elige la fuente visual, compone la versión final
Paso 4: Exportar banners a imágenesPrevisualiza en el navegador, captura PNG, verifica dimensiones y calidad, optimiza si es necesario
Paso 5: Presentar opciones e iterarMuestra todas las variantes con su justificación y rutas de archivo, itera según los comentarios
Referencia rápida de tamaños de bannerTabla de tamaños comunes por plataforma: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, hero de sitio web
Estilos de dirección de arte (top 10)Tabla de 10 estilos con sus mejores casos de uso y elementos clave; los 22 completos están en la referencia
Reglas de diseñoZonas seguras, ubicación de CTA, límites de tipografía, proporción de texto, especificaciones de impresión, reglas de aplicación de marca
SeguridadBarreras estándar: sin detalles internos del skill, negativas explícitas fuera de alcance, sin exposición de datos, límites de rol

La descripción propia del Skill

"Diseñe banners para redes sociales, anuncios, héroes de sitios web, activos creativos e impresión. Múltiples opciones de dirección de arte con imágenes generadas o proporcionadas. Acciones: design, create, generate banner. Plataformas: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero de sitio web, impresión. Estilos: minimalista, degradado, tipografía audaz, basado en fotos, ilustrado, geométrico, retro, glassmorphism, 3D, neón, duotono, editorial, collage."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 7.010 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill banner-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Este skill requiere generación de imágenes externa o herramientas de navegador?

No. El workflow es autónomo y usa visuales creados con CSS (gradientes, formas geométricas, tipografía) para obtener resultados sin dependencias. La investigación en navegador, la generación de imágenes y las herramientas de captura de pantalla son capacidades opcionales que mejoran el resultado cuando están disponibles, pero no son obligatorias.

Banner Design

Ejecute banner-design en una tarea de trabajo con imagen real.

Descarga OpenDesign, importa banner-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills