Todo 2024 y 2025 hemos estado oyendo maravillas sobre la inteligencia artificial y lo rápido que podemos realizar nuestro trabajo con su ayuda. Por mi parte, estaba probando distintas herramientas pero no viendo resultados muy potentes. Me refiero a la parte de mi trabajo relacionada con la experiencia de usuario, en concreto con el diseño de alto nivel de interfaces. No encontraba nada muy efectivo.
Con lo cual ha sido un alivio ver que uno de los representantes más potentes del sector confirmaba lo que estaba viendo por mi lado.
Su resumen: a pesar del enorme hype en el sector, la evaluación realizada con escenarios de diseño reales reveló que estas herramientas pueden seguir instrucciones para alcanzar un objetivo general, pero carecen de la sofisticación necesaria para sopesar las ventajas y desventajas del diseño y producir diseños bien pensados y de alta calidad sin una amplia orientación por parte de los seres humanos.
El estudio buscaba comprender si las herramientas de prototipado con IA pueden crear diseños bien pensados y sensibles al contexto comparables a los creados por diseñadores humanos. Por ello realizaron una evaluación utilizando un proyecto real: el rediseño de la página de perfil de las personas inscritas en la formación en línea en directo de Nielsen Norman Group (NN/g).
Esta evaluación se centró en 3 categorías de herramientas de IA:
- Herramientas de diseño asistidas por IA que se centran en la generación de esquemas estáticos o maquetas de diseño.
- Herramientas de codificación asistidas por IA (vibe) que generan prototipos interactivos basados en código.
- Chatbots de IA de uso general capaces de generar prototipos.
Para reflejar las diferentes etapas del proceso de diseño en el mundo real, probaron distintos tipos de prompts y de artefactos que proporcionaban varios niveles de contexto:
- Prompt 1: indicaciones de texto generales, con contexto general y objetivos de la página, con un mínimo de detalles.
- Prompt 2: indicaciones de texto detalladas: contexto general, objetivos de la página y descripción explícita de los componentes, el lenguaje de diseño y los estados de interacción.
- Prompt 3: texto sumado a artefactos de diseño, imágenes de apoyo con distintos niveles de fidelidad, incluida una foto de un boceto a mano, la imagen de la maqueta de diseño y un enlace a un marco de diseño de Figma.
Para saber más te recomiendo que te leas estos 2 posts: metodología de evaluación y indicaciones de la prueba de IA , las conclusiones de lo aprendido y aquí te dejo los ejemplos de los prototipos y diseños obtenidos con las distintas herramientas de inteligencia artificial empleadas. Y si sigues leyendo este post puedes leer un resumen en español de sus conclusiones.
Calidad del prompt, ¿buscas inspiración o resultados precisos?
Como ya hemos oído, la calidad del prompt es muy importante a la hora de obtener buenos resultados. Pues el caso del diseño no es distinto a los demás. Prompts más largos con requisitos de diseño claros y detallados producen mejores resultados, especialmente con herramientas de IA que generan prototipos basados en código.
Por el contrario, cuando se les proporcionó un prompt del tipo 1, es decir, con contexto y objetivo pero con pocos detalles, los resultados generados por la IA variaron ampliamente. Esto se debe a que los prompts con poco detalle dejan margen para que las herramientas de IA hagan suposiciones sobre los requisitos de diseño.
Esto no tiene por qué ser una desventaja. Dependiendo de la fase del proceso de diseño en la que te encuentres, puede que te interese.
Por ejemplo, si estas en una primera fase de exploración o tienes un bloqueo creativo, este tipo de resultados más amplios puede ser muy valiosos para obtener inspiración. Cuando necesitas explorar diferentes enfoques de diseño o superar bloqueos creativos, las indicaciones poco precisas pueden revelar resultados inesperados que quizá no habías considerado.
Sin embargo, si ya tienes una visión clara del diseño, las indicaciones vagas pueden dar lugar a resultados menos deseables. Sin una orientación específica, las suposiciones que hace la inteligencia artificial para rellenar los huecos que no sabe, pueden producir resultados que no se ajusten a tus requisitos de diseño o a las necesidades de los usuarios.
Si tienes una imagen, adjúntala
La mayoría de las herramientas de prototipado con IA permiten que les añadas una imagen como esquemas dibujados, maquetas de diseño o tableros de inspiración; algunas también aceptan enlaces a Figma para interpretar su estructura de diseño.
En las pruebas que realizaron, los prompts que incluían artefactos de diseño adjuntos dieron lugar a resultados más optimizados.
A mayor era la fidelidad del archivo adjunto, más preciso era el diseño resultante.
Cuando la IA puede examinar los patrones existentes, las relaciones espaciales, la jerarquía y la estética de los componentes produce diseños más coherentes y precisos. El punto negativo es que al proporcionar estas referencias, previamente ya se ha hecho gran parte del trabajo de diseño.
He alucinado con la interpretación de ChatGPT, Claude o Lovable, vs Figma Make a la hora de subir un prototipo. Los primeros lo interpretaron bastante bien:
Pero Figma Make, se quedo bastante lejos de lo pedido:
Nota: imágenes obtenidas del Figma Jam de NN/g con los ejemplos de los prototipos y diseños obtenidos con las distintas herramientas de inteligencia artificial empleadas. Todo derecho de reproducción es suyo.
Casi si, pero no
Como había visto yo en mis pruebas, la investigación de NN/g comenta que incluso cuando las herramientas de IA se acercaban al objetivo seguían careciendo del matiz humano y la atención al detalle.
Puede que el diseño general y los componentes clave se ajustasen pero si te fijabas en los detalles se veían cosas como:
- Falta de jerarquía visual o agrupación entre elementos relacionados.
- Uso excesivo de colores que creaba tensión visual.
- Contraste de colores deficiente.
- Espaciado de márgenes inconsistente.
Estas sutilezas pueden parecer menores (sobre todo si las observa alguien no experto), pero marcan la diferencia entre un diseño que parece bien pensado y uno que parece «casi perfecto».
Esta es la principal diferencia a los diseñadores humanos y las herramientas de inteligencia artificial: la capacidad de equilibrar los matices, crear soluciones sofisticadas y respaldar cada decisión con una lógica clara.
Las herramientas de prototipado de IA producen diseños de alta fidelidad rápidamente, pero carecen de la intuición necesaria para adaptarlos a contextos matizados, incluso cuando se les proporcionan instrucciones detalladas. Su tendencia a buscar patrones les lleva a optar por las soluciones más comunes, y no por las más significativas en cada contexto. Como resultado, el resultado suele parecer bueno a los ojos de alguien inexperto, pero está lejos de serlo.
¿Cómo funcionan las herramientas de diseño de inteligencia artificial?
La IA no es más que una herramienta más que tenemos que añadir a nuestra mochila. Y como tal, debemos entenderla para aprovechar todo su potencial y saber sus limitaciones.
La mayoría de las herramientas de prototipado de IA se entrenan con vastos conjuntos de datos que comprenden millones de sitios web existentes, bibliotecas de código abierto y patrones de interfaz de usuario. La IA aprende a identificar y reflejar los patrones más comunes dentro de estos datos. Como resultado, los resultados están sesgados hacia las convenciones de diseño convencionales.
Ese sesgo podría ser bueno para la experiencia del usuario y que sabemos que es más fácil para las personas utilizar interfaces cuando son coherentes con los estándares externos. Pero los investigadores de NN/g opinan que las herramientas de prototipado de IA han llevado esto demasiado lejos. Tendían a producir estilos visuales poco pulidos y poco distintivos.
La IA es ta buena como los datos con los que se ha entrenado.
Sin especificaciones detalladas sobre el diseño visual, tienden a generar diseños que comparten un aspecto similar y genérico, utilizando tipografías sans-serif y un estilo minimalista. Esta homogeneidad se debe en gran medida a que los sistemas de IA favorecen los patrones comunes de sus datos de entrenamiento y, a menudo, recurren por defecto a bibliotecas de componentes como Shadcn y marcos front-end como Tailwind CSS para generar sus diseños.
Por eso, muchas pantallas generadas por IA parecen planas e intercambiables y aunque sean interactivos y tengan colores, los prototipos generados por IA suelen parecerse a wireframes sin pulir.
Otro tema es como interpretan las palabras. En los ejemplos, utilizaban la frase «página de perfil» en el prompt, y dependiendo del contexto, esa frase puede apuntar a diferentes patrones de diseño, ya que ellos se referían a una página personal para un asistente al curso, y no a un perfil público en redes sociales.
Seguir los patrones de diseño de forma rígida puede dar lugar a diseños que funcionan técnicamente, pero que no encajan. Además, no siempre hay una única forma de describir el diseño deseado, aparte de que los modelos deben interpretar los matices del lenguaje. Por eso, cuando trabajen con IA, los diseñadores deben aclarar al máximo el lenguaje en los prompts, de modo que puedan comunicar con precisión el contexto exacto para el que necesitan el diseño.
Cuándo utilizar el prototipado con IA
La comprensión limitada de la IA de los matices del diseño y la inconsistencia de sus resultados hacen que sea más adecuada para la ideación, la exploración de conceptos y las pruebas de prototipos en fases tempranas, en lugar de en fases posteriores.
Seguramente no vas a obtener un prototipo generado por IA para enseñar directamente a un cliente o al equipo pero estas herramientas pueden ayudarnos a superar bloqueos creativos y explorar rápidamente nuevas direcciones, o a generarnos la base sobre la que comenzar el diseño.
Asegúrate que las pruebas de concepto tengan la fidelidad suficiente para facilitar las conversaciones sobre la dirección y viabilidad de las ideas. Por ello valida, itera y refina antes de enseñar nada a nadie, ya que aunque los resultados de la IA pueden parecer definitivos a simple vista, a menudo carecen de la estructura subyacente, la lógica y las consideraciones de usabilidad necesarias para el desarrollo real de un producto. Mostrar prototipos de IA pulidos y de alta fidelidad que no están ni mucho menos finalizados sin un marco adecuado puede ser contraproducente (por ejemplo, puede provocar un debate sobre el color de los botones cuando la jerarquía visual ni siquiera está cerca de estar terminada).
Otra opción donde la inteligencia artificial nos puede ayudar es a convertir los diseños estáticos de Figma en prototipos funcionales con una configuración mínima. Utilizando tu diseño como referencia, solicita interacciones y estados específicos, y obtén rápidamente algo que los usuarios puedan probar. La IA acelera el ciclo de retroalimentación y ayuda a los equipos a iterar de forma más eficaz.
Conclusión final
He aquí la ironía que sucede en todo lo relacionado con la inteligencia artificial, la IA promete cerrar las brechas de habilidades, pero funciona mejor en manos de personas que entienden el oficio. Se necesita una base sólida de conocimientos técnicos y de diseño para producir resultados significativos.
Los diseñadores deben comprender el diseño, la tipografía, la nomenclatura de los componentes y los flujos de usuarios para saber qué vocabulario utilizar al dirigir a la IA. A menudo, para obtener un resultado preciso, es necesario detallar mucho las especificaciones de diseño o adjuntar referencias visuales, lo que significa que gran parte del trabajo de diseño ya se ha realizado antes de que la IA entre en escena.
Esta realidad pone de relieve una paradoja: la IA reduce las barreras a la creación, pero también magnifica la diferencia entre los resultados aceptables y los excepcionales.
Se necesita un gran sentido del diseño, la capacidad de refinar con determinación y elegir los elementos que hacen que un diseño sea funcional para su público lo que distingue el trabajo verdaderamente excelente de los diseños superficialmente pulidos pero menos matizados.
Como en otros sectors, NN/g comenta que debemos usar las herramientas de prototipado de IA como si fueran un becario. Pueden esbozar diseños, ensamblar componentes y reproducir patrones familiares, pero sigue siendo necesario el juicio humano para equilibrar las ventajas y desventajas y crear significado.
Esto nos recuerda lo que realmente implica el diseño: no solo organizar píxeles o perseguir la fidelidad, sino interpretar el contexto, establecer prioridades y crear matices. El verdadero trabajo del diseño sigue estando en el juicio, la empatía y la intención que solo los diseñadores humanos pueden aportar.
Espero que os guste y como he comentado previamente, si podéis leeros los 2 artículos originales y mirar todos los ejemplos en el FigmaJam Board:
- Metodología de evaluación y indicaciones de la prueba de IA
- Conclusiones de lo aprendido
- Ejemplos de los prototipos y diseños obtenidos con las distintas herramientas de inteligencia artificial empleadas