En el último directo de YouTube estuve una hora y media haciendo vibe coding con Cursor, construyendo el gestor de categorías del blog del sitio web de la Comunidad UX fomo.
Aquí te cuento cómo fue…
Si eres diseñador UX y ya sabes describir flujos y comportamientos, tienes lo que hace falta para empezar.
Cómo funciona el vibe coding con Cursor paso a paso
Empecé con una captura de pantalla de otro proyecto donde tenía algo parecido a lo que quería construir, se la pasé a Cursor junto con el prompt.
Le pedí una pantalla de gestión de categorías con un formulario de título, descripción, slug e imagen para la SERP de Google, y dos checkboxes para controlar la indexación en Google y la inclusión en el sitemap XML.
Cursor lo interpretó, generó el código y en unos minutos tenía la pantalla funcionando en el navegador.
Hasta aquí suena sencillo… pero aquí empieza lo interesante.
Qué errores aparecen y cómo resolverlos con prompts
Las categorías que creabas desde un post y las que gestionabas desde el panel nuevo no estaban sincronizadas. Si renombrabas una, el cambio no se reflejaba en los posts que la usaban.
La solución fue describir el problema con un ejemplo concreto en el prompt, me explico:
No le dije «sincroniza las categorías», le dije: si renombro la categoría Figma a Figmas, no pueden quedar dos categorías distintas, el nombre viejo tiene que desaparecer.
Ya sabemos que los prompts para Cursor vagos dan resultados vagos.
En cambio con un ejemplo real, el resultado cambia.
Después fueron apareciendo más casos: slugs duplicados, posts que se quedaban sin categoría al borrar una, categoría por defecto que no se asignaba… cada uno, un prompt nuevo.
Así funciona iterar con IA, no es lineal, es un loop de describir, probar y corregir.
Por qué el vibe coding encaja bien con diseñadores UX
Como diseñador UX ya sabes detectar cuándo algo no funciona… sabes anticipar casos de uso y sabes describir comportamientos.
Eso es exactamente lo que necesitas para construir productos digitales funcionales sin programar.
El proceso se parece más al diseño de lo que parece; defines qué tiene que pasar, pruebas si pasa, ajustas y vuelves a probar.
La diferencia es que el resultado no es un prototipo en Figma. Es algo que funciona de verdad.
Hacer vibe coding en directo: por qué la comunidad cambia el resultado
Aunque yo llevo el peso de la sesión, la comunidad siempre aporta algo que yo solo no veo.
Tomás lo vio antes que yo. Identificó desde el chat que al renombrar una categoría el sistema creaba una nueva en lugar de modificar la existente. Escribió el ejemplo en el chat, lo metí en el prompt casi literal y funcionó.
Antonio propuso una solución mejor que la mía para los nombres duplicados.
Eso no pasa cuando trabajas solo.
Cómo empezar con vibe coding si eres diseñador
Quédate con esto que te digo…
No necesitas un proyecto grande para hacer vibe coding, empieza con algo concreto: una pantalla, un formulario, un listado.
Describe qué tiene que hacer, no cómo tiene que hacerlo, eso es trabajo del agente.
Si algo no funciona, no descartes el resultado… describe el problema con un ejemplo real y vuelve a intentarlo.
El gestor de categorías que construimos empezó con un prompt de diez líneas, y terminó siendo un producto digital funcional después de 5 o 6 iteraciones.
Así funciona esto.
En el vídeo incrustado en este post lo puedes ver todo.
Si quieres probarlo con tu propio proyecto empieza ahora, recuerda que estamos todos los días en Discord.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
