Bento Grid con Hover Interactivo: Prompt CSS/JS

Este prompt está diseñado para generar un componente de interfaz basado en el popular estilo «bento grid», donde celdas de diferentes tamaños se organizan en una cuadrícula irregular y reaccionan al pasar el cursor con animaciones fluidas. Es ideal para desarrolladores front-end que necesitan una sección de características, portafolios o paneles de inicio visualmente atractivos, sin partir desde cero en el diseño.

El caso de uso más común es construir páginas de presentación de productos o servicios donde cada celda destaca un beneficio clave que se expande al hacer hover, revelando más información con transiciones suaves. Para mejores resultados, conviene ejecutarlo en modelos con fuerte capacidad de generación de código como GPT-4o o Claude 3.5 Sonnet, y complementar el prompt especificando la paleta de colores, el número de celdas o el framework preferido (React, Vue o HTML puro). Una variación útil es pedir que las animaciones sean accesibles, respetando la preferencia de movimiento reducido del sistema operativo.