Gemini 3.1 para Diseño Web y de UI

Páginas de aterrizaje

Quería algo que no se viera como cualquier otra página de inicio generada por IA. Así que, en lugar de pedir una "página de aterrizaje moderna y limpia", me centré en el estilo y la sensación en el mensaje.

El resultado fue realmente bueno. Aquí puedes verlo:

El diseño tenía una jerarquía real, los estados de desplazamiento funcionaban y la animación de degradado era fluida. No por defecto al habitual fondo blanco con un botón CTA azul. He ajustado un poco la combinación de fuentes, pero como punto de partida, me ahorró al menos una hora de configuración.

Aquí está un mensaje que escribí:

Página de aterrizaje para un estudio de arquitectura moderno. Use el mismo fondo blanco roto en todas las secciones de la página. Use titulares editoriales, concéntrese primero en imágenes y contenido. La sensación general es de moderación fría: un estudio que no necesita explicarse.

Diseños SaaS

Para este caso, quería ver cómo manejaba una interfaz más compleja con datos, navegación y múltiples estados. ¡Aquí es donde Gemini 3.1 Pro realmente mostró de lo que es capaz!

La estructura de los componentes es limpia, las tarjetas tienen el espaciado adecuado y las insignias de estado usan realmente diferentes colores para diferentes estados. El gráfico de líneas se renderizó correctamente y los datos parecían realistas.

Aquí está mi mensaje para esta prueba:

Panel de análisis SaaS para una aplicación web de marketing de contenido. Use un tema claro con un verde neón como acento. Haz que se sienta como Linear o Notion. El diseño debe ser denso, pero no sobrepoblado con contenido.

Debe tener una navegación lateral, una barra superior con un campo de búsqueda + avatar. Área de contenido principal con tres tarjetas métricas en la parte superior (mostrando el total de publicaciones, promedio de compromiso y alcance mensual), debajo de ellas un gráfico de barras apiladas que muestre el tráfico durante 30 días, y una tabla de publicaciones recientes con insignias de estado como sección separada debajo.

Las referencias de Linear o Notion aterrizaron bastante bien. Gemini evitó los bordes gruesos y las sombras pesadas que generalmente hacen que los paneles de IA se vean anticuados.

Diseños móviles

Además de probar diseños de escritorio, quería comprobar cómo Gemini 3.1 puede diseñar para móviles y aplicaciones.

Para hacerlo, volví a usar referencias en mi mensaje, mencionando a Uber, y esta vez sin entrar en detalles, para ver cuánto puede avanzar con poco contexto adicional.

El mensaje utilizado:

Pantalla de inicio de una aplicación de pedidos de viajes en modo claro pero con una paleta de colores negro mono inspirada en Uber.

Como puedes ver, tiene un diseño limpio, con zonas de toque muy claras y audaces. Cada elemento interactivo es de tamaño generoso y fácil de alcanzar. Nada compite por la atención, la jerarquía hace el trabajo.

Diseños de diapositivas de presentación

Además de las pruebas de IU, quería saber cómo Gemini 3.1 podría manejar las diapositivas de presentación.

La salida es bastante limpia. Gran titular, espacio apropiado, el dato estaba estilizado con un número grande y una etiqueta tenue debajo. Parecía algo que realmente pondrías frente a partes interesadas o compañeros de equipo.

Mensaje utilizado:

Diseña una única diapositiva de presentación para un lanzamiento de producto SaaS. Diseño minimalista, mucho espacio de respiración. Piensa en Pitch.com, no en PowerPoint.

La diapositiva debe titularse "¿Por qué ahora?" y argumentar el momento del mercado. Fondo oscuro, titular en negrita sobredimensionado a la izquierda, un dato clave a la derecha, algo como "el 73% de los equipos aún usan hojas de cálculo para esto".

Cómo usar Gemini 3.1 Pro

Si bien puedes usarlo en Google AI Studio o a través de la API, la mejor manera de aprovecharlo para el diseño de IU es a través de herramientas dedicadas que han integrado el modelo.

Banani

Banani es una herramienta de generación de IU basada en lienzo que integró recientemente Gemini 3.1 Pro como uno de los modelos que puedes usar. Te permite generar diseños de IU a partir de mensajes de texto simples y organizarlos.

La mayoría de los ejemplos que viste en este artículo se hicieron directamente allí usando Gemini.

Es una gran opción si deseas una IU similar a Figma y la capacidad de interactuar con modelos de IA como Gemini, GPT, Claude.

Además, mantiene tu flujo de trabajo regular al permitirte copiar y pegar diseños en Figma, exportarlos como código o conectar otros agentes de codificación a través de MCP.

Gemini Canvas

La forma más directa de acceder a Gemini 3.1 Pro es a través de la propia aplicación de Gemini. La aplicación tiene una función de lienzo que te permite previsualizar lo que generó el modelo.

Es un buen punto de partida si deseas explorar lo que el modelo puede hacer por el diseño antes de comprometerte con una herramienta más especializada.

Tenga en cuenta que puede estar bloqueado regionalmente (al momento de escribir este artículo), por lo que si estás fuera de los EE. UU., existe la posibilidad de que aún no puedas usar esta función de previsualización/lienzo.

Stitch

Stitch es una herramienta de diseño experimental impulsada por IA de Google Labs. Toma mensajes de texto o imágenes cargadas y genera diseños de IU completos con código exportable. Puedes usar tanto el Pensamiento 3.0 como el 3.1 desde allí.

He escrito una reseña en profundidad de Stitch así como una revisión de alternativas que puedes usar para la generación de IU.

Mejores mensajes para Gemini 3.1 Pro

Para obtener los mejores resultados de diseño de IU de Gemini 3.1 Pro, necesitas cambiar cómo envías tus mensajes. Concéntrate en la vibra, los detalles del diseño y las referencias.

Agrega muchos detalles

La calidad del diseño final generado por Gemini depende en gran medida de cuántos detalles proporciones.

Sé muy específico si ya tienes algunos elementos que deseas que se diseñen y estén en la pantalla. Escribe esos detalles. El modelo no puede leer tu mente.

Describe la sensación

No solo pidas un "encabezado azul". Gemini es un modelo multimodal que puede entender cosas visuales y de código.

Puedes describir un tema abstracto o estado de ánimo que deseas explorar para el diseño. Por ejemplo: "Construye una página de aterrizaje para un portafolio personal. La vibra debe ser melancólica, victoriana, pero moderna: usa fuentes serif, una paleta de colores carbón profundo."

Da contexto extra

Similar al primer punto, mientras más des, mejores resultados obtendrás. Adjunta referencias de imágenes, IU que te gusten de Mobbin, capturas de pantalla de tu IU actual o incluso bocetos en servilletas.

Puedes decirle a Gemini: "Replica estas pantallas lo más aproximadamente posible. Coincide con el diseño, los elementos y los estilos." Trata las anotaciones visuales como instrucciones de alta prioridad.

Usa el pensamiento

Si estás usando la aplicación Gemini, puedes establecer el nivel de pensamiento en alto para disposiciones complejas. Tomará más tiempo generar, pero el modelo pasa más tiempo razonando a través de los aspectos visuales y la estructura del diseño.

Esto resulta en mejores diseños y visuales en el diseño.

Qué dice Reddit

Las comunidades de codificación de vibra y diseño en Reddit han estado probando el modelo a fondo desde su reciente pre-lanzamiento, y el consenso es mixto.

Lo bueno

Muchos usuarios informan que Gemini 3.1 Pro puntúa más alto que todos los otros modelos de frontera, específicamente para frontend y diseño.

• Un usuario generó 50 sitios diferentes en 10 categorías y notó que "la lógica SVG y la consistencia del espaciado son mucho mejores ahora", y "finalmente entiende las instrucciones 'estéticas' sin necesitar 10 revisiones del mensaje."

• Otro usuario lo comparó directamente con Claude Opus 4.6 para diseño web, notando que el resultado de Gemini parecía "un nivel menos diseñado por IA" y tenía mejor contraste y equilibrio.

Lo malo

Sin embargo, no es perfecto.

• La principal queja es el "bucle interminable de pensamiento". En tareas complejas, puede quedarse estancado planeando indefinidamente, escribiendo razonamientos largos y repetitivos antes de producir el código real.

• Algunos usuarios también señalaron que, aunque es sorprendente para el razonamiento de un solo golpe, tiene dificultades cuando se usa como un agente de codificación autónomo para aplicaciones complejas, donde Claude Opus 4.6 sigue siendo preferido por su fiabilidad y falta de "planificación innecesaria".

Conclusiones

Lo he usado como mi herramienta diaria para la mayoría de las tareas relacionadas con el diseño, y generalmente comienzo con él al generar IU usando IA.

Gemini 3.1 Pro definitivamente merece tu tiempo si te has sentido frustrado por las generaciones de IU genéricas y con gradientes morados de otros modelos.

Tiene una fuerte "comprensión espacial", lo que lo convierte en un modelo de diseño de IA poderoso para prototipado e ideación rápida de disposiciones.