Frontend y UI
UI-UX Pro Max · Banner Design
Diseña banners con medidas exactas en HTML, y luego los exporta como PNG.
Qué es
Un flujo de banner en cinco pasos: recoge requisitos, investiga la dirección de arte, construye el banner en HTML y CSS con visuales generados, captura a los píxeles exactos de la plataforma y luego presenta opciones para iterar.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
Por qué importa para el diseño
- Cada banner se exporta a los píxeles exactos de la plataforma, así nada se recorta ni se reescala.
- Los visuales generados se renderizan sin texto, así los titulares se mantienen como HTML nítido.
- Tres direcciones de arte por petición, así la comparación ocurre antes de comprometerse.
Qué cubre
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
Cómo instalarlo
UI-UX Pro Max · Banner Design
-
Clona el repositorio.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Señálale a Codex el archivo de la skill.
cli/assets/skills/banner-design/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Responde las preguntas de propósito, plataforma, contenido, marca, estilo y cantidad.
-
Construye un banner HTML por cada dirección de arte con las zonas seguras aplicadas.
-
Captura cada uno al ancho y alto fijados, comprimiendo los archivos que superen el límite.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.