Qué es el Banner Generator
El Banner Generator es una herramienta local construida en un solo archivo HTML que permite crear cabeceras visuales para publicaciones de newsletter. Sin dependencias externas, sin backend, sin cuenta. Un archivo que abres en el navegador y funciona.
Cómo funciona
La herramienta ofrece un flujo simple:
- Elige un color de fondo entre los seis colores de la paleta de Con Criterio: Coral, Electric Blue, Lime, Violet, Sun y Mint, más tres neutros (blanco, ink y crema).
- Busca y selecciona iconos de Lucide, una librería SVG con cientos de iconos lineales. Puedes colocar hasta cinco iconos en el banner.
- Ajusta tamaño y separación de los iconos con sliders.
- Elige el formato del banner: 16:9, 16:10 o 1:1.
- Descarga el resultado como PNG en resolución normal o 2x.
Cada publicación de la newsletter tiene un banner con un color de fondo distinto y uno o más iconos que representan el tema. Si se habla de Lovable y Supabase, el banner lleva un corazón y un rayo. Si se habla de arquitectura, lleva un icono de capas o de base de datos. El resultado es visualmente consistente pero nunca repetitivo.
Cómo se construyó
Todo se construyó en una sola conversación con Claude. Sin Figma, sin Photoshop, sin Canva. La clave fue tener claro el briefing antes de empezar:
- De qué huir: la estética tech-oscura, de terminal, asociada al hype.
- Hacia dónde ir: una paleta multicolor tipo revista, estilo editorial limpio, con iconos SVG lineales.
- Restricciones: debe funcionar como archivo local, sin instalación, sin backend.
Primero se definió la identidad visual completa (paleta, tipografías, componentes) en un moodboard interactivo en HTML. Después, con esas restricciones claras, se construyó el generador como herramienta práctica para producir las cabeceras semanales.
Qué incluye la descarga
- banner-generator.html — La herramienta completa. Ábrelo en cualquier navegador y empieza a crear banners.
- mejoras-y-prompts.md — Guía con prompts listos para usar con cualquier IA (Claude, ChatGPT, Gemini) para extender el generador: añadir texto personalizado, exportar a otros formatos, guardar presets, añadir patrones geométricos, y desplegar en Vercel con dominio propio.
Stack técnico
- HTML + CSS + JavaScript vanilla
- Canvas API para renderizado
- Lucide Icons (cargados vía CDN)
- Google Fonts (Outfit, Space Mono)
- Sin frameworks, sin build, sin dependencias de instalación