Creación de páginas web con cuadrícula Bento usando IA.

Diseña una página web con cuadrícula Bento al estilo Apple usando IA

Esta plantilla de prompt ofrece una guía completa para aprovechar la inteligencia artificial en el diseño de páginas de lanzamiento de productos o servicios modernas, minimalistas y de alta gama. Inspirándose en la icónica filosofía de diseño de Apple, el enfoque es crear una experiencia compacta de una sola pantalla utilizando el atractivo diseño de cuadrícula Bento. Este enfoque asegura que toda la información crítica se presente de forma sucinta y atractiva, ideal para mostrar nuevos productos o servicios.

Principios clave de diseño para tu prompt de IA:

1. Diseño de cuadrícula Bento:

Indica a la IA que cree una cuadrícula compuesta por tarjetas de varios tamaños. Cada tarjeta debe contener una categoría específica de información, asegurando que el diseño general sea compacto pero despejado. Esto maximiza la densidad de información sin sacrificar la legibilidad.

2. Especificaciones de diseño de tarjetas:

• Esquinas redondeadas: Todas las tarjetas deben tener esquinas prominentemente redondeadas (por ejemplo, un radio de borde de 20px) para una estética suave y moderna.
• Fondo: Utiliza un fondo blanco limpio o gris claro para mantener el minimalismo.
• Sombras: Aplica sutiles efectos de sombra para dar a las tarjetas una ligera profundidad.
• Efecto al pasar el ratón: Implementa un suave efecto de "flotar hacia arriba" al pasar el ratón para mejorar la interactividad.

3. Esquema de colores:

Opta por una paleta de colores minimalista, utilizando principalmente fondos blancos/gris claro. Integra colores degradados como tonos de acento, por ejemplo, una transición suave de un púrpura claro (#C084FC) a un púrpura oscuro (#7E22CE) para resaltar elementos clave.

4. Tipografía y jerarquía:

• Números/Títulos grandes y en negrita: Utiliza colores degradados para enfatizar los puntos de datos clave y los títulos principales, atrayendo la atención de inmediato.
• Títulos de tamaño mediano: Para los títulos de las tarjetas, asegúrate de que sean claros e indiquen de forma concisa la categoría del contenido.
• Texto pequeño: Usa gris para el texto descriptivo de apoyo, asegurando que complemente el contenido principal sin abrumarlo.

5. Organización del contenido dentro de la cuadrícula:

Estructura el contenido de forma lógica en las filas de la cuadrícula:

• Fila superior: Para anuncios importantes, características del producto, métricas de rendimiento o puntos de venta principales.
• Fila central: Dedicada a especificaciones del producto, detalles técnicos y funcionalidades principales.
• Fila inferior: Incluye pautas de uso y una conclusión clara o llamada a la acción.

6. Elementos visuales:

Mejora el atractivo visual y la entrega de información con:

• Iconos sencillos: Representan claramente varias características.
• Barras de progreso/gráficos: Muestran datos comparativos de forma efectiva.
• Ritmo visual: Utiliza la cuadrícula y el diseño de las tarjetas para crear un flujo visual atractivo.
• Etiquetas (Tags): Presenta la información de categorización en pequeñas etiquetas con forma de cápsula.

7. Diseño responsivo:

Crucialmente, la página generada debe adaptarse sin problemas a diferentes tamaños de pantalla, manteniendo una excelente legibilidad e integridad visual en dispositivos móviles.

Puntos de referencia al estilo Apple:

• El diseño general debe imitar las páginas oficiales de especificaciones de productos de Apple.
• Enfatiza el amplio espacio en blanco y los elementos visuales limpios.
• Prioriza los números y las características clave, minimizando el texto verboso.
• Utiliza colores degradados para resaltar datos importantes.
• Mantén un espaciado apropiado entre las tarjetas para una clara separación visual.

Este prompt detallado permite a los modelos de IA generar interfaces web sofisticadas y fáciles de usar, fusionando el atractivo estético con la claridad funcional, perfecto para lanzamientos de productos impactantes.