Stiven Martínez

name

¿Qué es el UI generativo o Generative UI?

¿Qué es el UI generativo o Generative UI?

Por Stiven Martínez

April 20, 2024


Si has escuchado este término recién, no te preocupes, no eres la única persona que se está enterando de este trend en cuanto a diseño de interfaces (UI) sumando fuerzas con inteligencia artificial (AI). ¿Cómo es esto posible? Pues a través de ui generativo, es decir, interfaces generadas a través de prompts en las herramientas de inteligencia artificial como ChatGPT.

¿Cómo funciona el UI generativo?

Imagina que cada página web que tu ves (Página, no sitio, sitio es todo completo, página es solo una URL) está escrita en un lenguaje que las computadoras interpretan y convierten en lo que tu ves en tu navegador como Google Chrome, este lenguaje es un pedazo de código, como una receta. Pues, ahora imagina que el AI entienda esta pieza de código y entienda patrones entre diferentes piezas de código de cada página que tiene un sitio web y aprenda a escribir sus propias piezas de código basado en alguna variante introducida por el prompt.

Es decir, escribes un prompt en la herramienta de inteligencia artificial como por ejemplo: “Sitio web de musica”, entonces el AI analizará en una base de datos las estructuras de multiples sitios web que tu le diste previamente para que entendiera como era cada una de estas estructuras y con el nuevo prompt entendiendo que es para un sitio web de musica, genere uno nuevo, pero basado en los patrones que le habías dado programáticamente.

De esta forma tendrás UIs ilimitados, en tiempo real, lo que nos dice que el futuro del UI será dinámico, es decir, que cada usuario pueda tener su propia interfaz personalizada según sus gustos, de cualquier app o sitio web.

¿Cómo puedo hacer UI generativo o generative UI?

A través de plugins de Figma ya podemos generar interfaces y design systems completos con prompts de AI, también con las herramientas de la suite de Adobe e incluso ya puedes encontrar herramientas que auto generan sitios web como Framer.