La que te cuento hoy es buena ya verás, tenía 5 proyectos en local que no se hablaban entre ellos y los ensamblé haciendo vibe coding con Cursor en una hora y media.
Un perfil de usuario, una biblioteca de recursos para estudiantes y profesionales UX, un blog, una app de hilos al estilo de X donde la gente posteaba y otros respondían y un template genérico que terminé usando como base para todo.
Como te lo digo: 5 repos, 5 carpetas, 5 proyectos independientes.
Pero ojo, que independientes no significa desconectados. Los monté por separado a propósito, sabiendo que en algún momento iban a funcionar juntos. Como cuando construyes un design system: primero los átomos, luego los componentes, luego los patrones… Poco a poco, directo a directo con la comunidad, en YouTube.
El momento de ensamblarlos llegó en el directo nº 227, y lo hice con Cursor.
En este post te cuento cómo lo hice, qué decisiones tomé antes de escribir el primer prompt y qué salió al final.
Por qué construí los repos por separado antes de unirlos
Cuando estás montando un producto digital desde cero sin un equipo detrás, trabajar en piezas independientes tiene mucho sentido.
Cada repo tenía su propio foco, podía avanzar en el blog sin que los cambios afectaran al perfil de usuario. Podía iterar el template genérico sin romper nada. Podía probar cosas en la app de hilos sin romper el resto.
Si lo piensas… es la misma lógica que aplicamos en diseño UX cuando trabajamos con componentes. Primero los defines bien por separado, luego los ensamblas en un sistema.
El problema es que llega un momento en que tienes que unirlo todo.
Y ahí es donde Cursor en modo agente hace su magia.
Qué hice antes de escribir el primer prompt en Cursor
Ojito que esto es lo más importante del post…
Antes de pedirle nada a Cursor preparé el contexto. Sin eso, la máquina toma decisiones por defecto y luego tienes que corregirle cosas que podrías haber evitado desde el principio.
El contexto lo organicé en tres cosas.
Los repos, le pasé los nombres de las cinco carpetas y le expliqué para qué servía cada una. Cursor necesita saber qué hay antes de tocar nada.
Las reglas, creé una carpeta llamada agent dentro del proyecto nuevo y metí un archivo markdown con las reglas del proyecto. Ese archivo define cosas como la pila tecnológica que quiero usar, React, Tailwind y Radix, cómo tienen que llamarse las carpetas, qué patrones tiene que seguir y qué decisiones ya están tomadas. Las reglas venían de proyectos anteriores. Las copié, las ajusté un poco y palante…
Los límites de la fase uno. Le dije explícitamente qué no quería todavía. Sin autenticación real, sin backend, sin conexión a base de datos. Todo funcionando con localStorage por el momento, pero preparado estructuralmente para conectar con Supabase cuando llegue el momento.
Esa última parte es clave, si no le dices a Cursor qué tiene que dejar fuera, a veces lo mete igualmente porque encaja en el contexto. Ser explícito con los límites de cada fase ahorra muchos dolores de cabeza.
Cómo estructuré el prompt inicial para montar la V1
El prompt tenía tres partes.
- Primero le expliqué el objetivo: montar la V1 del sitio web de la comunidad UX fomo uniendo los cuatro repos en un proyecto React nuevo, el quinto repo se lo pasé en el prompt siguiente
- Después le dije lo que quería en las 2 primeras fases: montar el template genérico y portar el blog, que tenía en Astro, a React
- Y por último le pedí que leyera el archivo de reglas de la carpeta
agentantes de hacer cualquier otra cosa
Te lo dejo aquí:
Quiero crear un nuevo proyecto con 4 repos que tengo en local. te paso el nombre de las carpetas que tienes que analizar:
\generic-template-uxfomo
\hilos-app
\hub-uxfomo
\profile-uxfomo
El proyecto que quiero montar tiene que funcionar con tecnologías react, tailwind css, componentes radix, y en principio guardar información en localstorage, pero debe quedar preparado para que funcione con tablas de Supabase.Nada más, sin instrucciones paso a paso, sin decirle cómo tiene que hacer cada cosa, con el contexto bien preparado Cursor trabajó solo.
Qué decisiones tomé en mitad de la sesión
Durante el directo alguien del chat me recomendó cambiar Radix por Base UI, de los mismos creadores, y también cambiar Supabase por Convex para el backend.
Las dos recomendaciones tenían sentido, y las descarté en ese momento.
No porque fueran malas herramientas, sino porque cambiar la pila tecnológica a mitad de una sesión de vibe coding, sin haberlas probado antes en un proyecto real, es el tipo de decisión que generalmente te rompe el plan.
La misma noche, después de terminar el directo, monté un proyecto con Base UI y Convex y tiene muyyyy buena pinta, pero de eso ya hablaré en otro vídeo y otro post.
El foco Juan, el foco!
Qué salió al final: la V1 del sitio web de UX fomo
Después de una hora y media el proyecto tenía esto funcionando.
La home, el perfil de usuario con edición de datos y preferencias y un CMS propio dentro del proyecto para que el Admin pueda gestionar el blog público sin salir de la app.
Y también el blog público con listado y detalle de posts, con SEO aplicado en todas las rutas desde el principio.
Era perfecto?
No…
El buscador no funcionaba, algunas páginas estaban vacías, el diseño era un frankenstein. Pero la estructura estaba bien y la lógica funcionaba, que es lo que importa en la fase uno.
Lo que tenía ahora era algo que antes no podía tener con los 5 repos sueltos: una base sólida desde la que lanzar y escalar el sitio web de la comunidad: una V1 real, no un prototipo.
Y lo sigo montando, porque aún no terminé, semana a semana lo seguimos completando.
Y lo tenemos a punto de caramelo…
Lo que aprendí de esta sesión de vibe coding con Cursor
Aprendí algo que que no me esperaba…
En otro proyecto que estaba trabajando ese mismo día, Cursor me sugirió crear reglas persistentes para unos paneles de la interfaz que había dejado listos y no quería que tocara.
La idea vino de la máquina, ella me la ofreció y yo se la compré, desde entonces la aplico en todos los proyectos.
Por lo pronto te dejo el vídeo donde hice el mix de los repos…
Seguimos.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
