Llevo muchos meses escribiendo sobre Vibe Coding de una manera o de otra. Lo hago en este blog, en redes sociales y en el blog de Torresburriel Estudio. He leído montones de publicaciones de profesionales que andan compartiendo sus avances (vídeo) y sus descubrimientos. Reconozco que sigo fascinado con esta capacidad que tenemos ahora, quienes no somos técnicos, para construir producto digital sin la barrera tradicional de la programación. Pero necesito plantear algo que me inquieta. Tenemos por delante un fabuloso reto en lo que tiene que ver con la parte visual dentro del ámbito de la IA generativa.
El problema que no estamos mirando
Tenemos a nuestra disposición montones de herramientas que, basándose en inteligencia artificial generativa, nos ayudan a construir producto digital. De hecho, tenemos novedades todas las semanas, diría que todos los días. Una nueva herramienta, una nueva funcionalidad. Estamos tan centrados en la herramienta que hemos dejado de atender cuestiones que, desde mi punto de vista, son fundamentales en el proceso de diseño de producto. Por ejemplo: la alineación con el mercado, la investigación con usuarios, el ajuste al modelo de negocio… todo eso queda en un segundo plano cuando nos deslumbramos (O nos dejamos deslumbrar) con la capacidad de construir una aplicación funcional en minutos. Fijaos que ya no digo en horas, que digo en minutos.
Y hay algo que es todavía más evidente: desde la perspectiva estética y visual, no estamos haciendo nada. O casi nada. Y aquí es donde yo quería llegar.
La mayoría de las aplicaciones generadas con IA son parecidas. Por no decir que son prácticamente la misma. Puede parecer un poco exagerado, pero es que se reconocen a distancia. Esa uniformidad visual delata a las primeras de cambio que han sido construidas con prompts genéricos y bibliotecas de componentes por defecto. Y yo de este burro no me bajo.
Una crítica que nos compete como diseñadores
Las cosas claras: esto es responsabilidad nuestra. Nos hemos quedado presos del proceso de construcción de producto, estamos encandilados con la magia de ver código que se genera ante nuestros ojos. Yo soy testigo de ello. Puedo dar cuenta de las expresiones, las caras, los comentarios y las miradas de mis estudiantes cuando les hago una demo con aplicaciones de este tipo. Pero de verdad, también tengo que decir que no he visto ni tan siquiera brotes verdes de un desarrollo significativo en cómo avanzar en los sistemas visuales generados con este tipo de herramientas.
Me preocupa. Pero también me ocupa.
Y digo que me ocupa porque todos los experimentos que vengo haciendo en segundo plano con este tipo de herramientas, por supuesto, también cuentan con la derivada de toda la parte visual. Estos experimentos trabajando esta dimensión son cuando menos prometedores. Diría incluso que estoy entusiasmado con algunos de los resultados que estoy obteniendo. Aunque si voy un poco más allá, mi preocupación se incrementa. Quizás soy yo que no sé mirar bien, o no estoy en los sitios correctos, pero es que no veo una correspondencia en la comunidad. No percibo que esta conversación esté ocurriendo con la intensidad que, desde mi punto de vista, debería.
Lo que necesitamos construir
Creo que tendríamos que preocuparnos y trabajar en establecer técnicas concretas, o una suerte de decálogo, o quizá una lista de principios o consejos específicos para que, desde la perspectiva visual y de interacción, las herramientas de IA nos devuelvan resultados diversos, diferenciales, con alma, que huyan de esa uniformidad que caracteriza hoy en día a la mayoría de las aplicaciones construidas de esta forma.
No se trata sólo de que funcionen, porque eso es algo que ya está ocurriendo. De lo que se trata es de que tengan personalidad, de que respondan a una estrategia visual consciente y de que reflejen una identidad de marca o un posicionamiento que sea diferencial.
Prompts para romper la uniformidad visual
He estado experimentando con diferentes aproximaciones para conseguir resultados estéticamente diferenciados. Aquí os comparto algunos patrones de prompting que están funcionando (pero cuidado, porque esto es sólo una aproximación para mostrar que está en nuestras manos generar un output diferencial):
Opción 1: referencia a estudios de diseño específicos
Diseña esta aplicación siguiendo los principios visuales de 37signals:
- Interfaces limpias con abundante espacio en blanco
- Tipografía clara y directa, sin ornamentación
- Paleta de colores limitada y funcional
- Jerarquía visual mediante tamaño y peso, no mediante color
- Componentes que priorizan la legibilidad sobre la novedad
Opción 2: inspiración en movimientos artísticos
Aplica los principios del Bauhaus a esta interfaz:
- Formas geométricas puras (círculos, cuadrados, triángulos)
- Paleta limitada a colores primarios más negro y blanco
- Tipografía sans-serif de alto contraste
- Composición basada en grillas asimétricas pero equilibradas
- Eliminación de todo elemento decorativo no funcional
Opción 3: estética de producto reconocible
Desarrolla esta aplicación con la estética visual de Linear:
- Paleta de grises con un único color de acento
- Microinteracciones sutiles y fluidas
- Iconografía minimalista y consistente
- Estados de hover y focus cuidadosamente diseñados
- Densidad de información alta pero organizada
Opción 4: movimiento de diseño contemporáneo
Sigue los principios del Brutalismo Digital para esta interfaz:
- Tipografía de sistema sin personalización
- Ausencia de sombras y degradados
- Contraste extremo entre elementos
- Bordes sólidos y definidos
- Layouts utilitarios sin preocupación por la elegancia convencional
Opción 5: referencia editorial
Diseña con la aproximación visual de Medium circa 2014:
- Tipografía serif para contenido largo
- Espaciado generoso entre líneas (1.5-1.8)
- Imágenes de sangrado completo
- Máximo 680px de ancho para el contenido principal
- Escala tipográfica clara y pronunciada
Opción 6: producto de consumo específico
Aplica la estética de Stripe a esta aplicación:
- Gradientes sutiles en fondos
- Animaciones suaves de transición
- Ilustraciones isométricas simplificadas
- Paleta de azules con toques de violeta
- Bordes redondeados consistentes (8px)
Combinar referencias
Lo que he descubierto (aunque tampoco me ha sorprendido, la verdad) es que las mejores soluciones no vienen de aplicar un único estilo, sino más bien de combinar elementos:
Crea una interfaz que combine:
- La limpieza de 37signals
- El uso del color del Bauhaus
- Las microinteracciones de Linear
Mantén la densidad de información alta pero la navegación simple.
El reto real del Vibe Coding
El verdadero reto del Vibe Coding no es técnico. Ya hemos demostrado que podemos construir funcionalidad, eso es un hecho. El reto es de criterio: cómo articular sistemas de diseño que sean coherentes, cómo establecer jerarquías visuales con intención y cómo generar interfaces que no parezcan hermanas clonadas de la misma plantilla de Tailwind.
Necesitamos evolucionar del mira lo que he construido en una hora al «mira cómo he conseguido que esta herramienta respete mi sistema visual y produzca algo diferenciado.
Porque al final, como siempre digo: las herramientas pasan y los criterios permanecen. Si los hay, claro. Ahora mismo tenemos herramientas super potentes pero parece que echamos en falta criterios suficientemente desarrollados para sacarles todo el partido desde la perspectiva del diseño visual.
Para seguir explorando
Estos prompts que he compartido son puntos de partida, no fórmulas mágicas. Requieren iteración, refinamiento y, sobre todo, criterio para evaluar los resultados. Pero al menos nos permiten romper en primera instancia con esa uniformidad visual que caracteriza la primera generación de aplicaciones creadas con IA.
Sigo experimentando en esta dirección y documentando los aprendizajes. Si estás trabajando en esto o tienes referencias de gente que lo esté haciendo bien, me encantaría conocerlas.
Este post forma parte de una serie de artículos en los que voy a documentar mis experiencias en la construcción de producto digital, con herramientas de inteligencia artificial generativa, conocida como Vibe Coding.
Qué buen post, Dani. Creo que muchas de las personas que han empezado con el Vibe Coding y ya lo están llevando a producción provienen del mundo del negocio o del tech. Es decir, saben evaluar si algo funciona, pero no si comunica bien, y suelen conformarse con soluciones “bonitas” o simplemente agradables.
El diseño va mucho más allá de eso.
Sabemos además que la IA tiende a detectar lo más probable en base a patrones estadísticos, pero no lo singular ni lo verdaderamente personalizado.
Creo que con un buen prompting podemos empezar a resolver este problema, y ahí es donde el rol del UI, en diálogo constante con el UX, se vuelve fundamental