Este viaje me ha proporcionado conocimientos muy valiosos como diseñador y creador, conocimientos que ampliaré en futuras publicaciones.
TL;DR — ¿Ir al final?
Soy diseñador de productos con algunos conocimientos de programación, pero estoy lejos de ser un desarrollador profesional. Hasta el viernes pasado, nunca había probado el vibe coding. El viernes instalé Cursor y di mis primeros pasos; el domingo, mi primer servicio SaaS funcional estaba listo, y todo sin tocar una herramienta de diseño.
Así fue mi fin de semana:
Viernes: Aprendí los conceptos básicos del vibe coding, redacté mi PRD y creé un primer prototipo con Google AI Studio.
Sábado: Instalé Cursor, conecté Supabase para la base de datos, integré Google Login, conecté Gemini API y configuré Vercel para la implementación.
- Rápidamente alcancé los límites de la versión de prueba de Cursor Pro, así que pagué 200 dólares para actualizarla.
- La implementación de Vercel también alcanzó su cuota, así que pagué 20 dólares más.
Domingo: Pulí los detalles y añadí funciones adicionales, como una página de bienvenida.
- Cuando mi portátil se bloqueó debido a las intensas funciones en segundo plano de Cursor, compré impulsivamente un nuevo MacBook (!).
El servicio se llama LinkStash, un repositorio personal e inteligente.
Introduce la URL de un artículo y la IA le asigna automáticamente categorías y etiquetas. Puedes filtrar, realizar un seguimiento de lo que has guardado o leído con una vista de calendario y obtener resúmenes diarios. Todos los datos se almacenan por usuario.
Solo tienes que iniciar sesión con Google (solo te pedimos tu correo electrónico y tu nombre, y los datos se eliminarán si el servicio se cierra). Por ahora, ¡utilízalo en tu ordenador!
¿Cómo lanzó un servicio operativo en tres días alguien que no era desarrollador? ¿En qué punto se encuentra la IA?
¿Qué es la programación Vibe?
Si trabajas en el sector tecnológico, probablemente hayas oído hablar de la «programación Vibe». Para mí, era como el «bitcoin» hace unos años: todo el mundo habla de ello, pero pocos tienen experiencia real.
Vibe coding significa programar de forma intuitiva, impulsado por tus ideas e intenciones, con la ayuda de la IA.
En lugar de escribir código línea por línea, utilizas lenguaje natural (coreano, inglés) para decirle a la IA «crea una función como esta» o «cambia el color a azul».
Puedes crear resultados reales y funcionales sin saber programar.
Por supuesto, para productos muy robustos y escalables, la programación manual y el mantenimiento siguen siendo necesarios, pero el listón para la creación de productos nunca ha estado tan bajo.
Había oído hablar mucho de ello, pero nunca lo había probado. Así que el fin de semana pasado decidí dedicar mis días de vacaciones sin usar a crear un producto, solo por diversión.
Aprendizaje rápido y creación de prototipos
Empecé por marcar varios artículos sobre programación en el mundo real. Gracias a las innumerables personas que han compartido sus fracasos y consejos, evité muchos errores iniciales.
A medida que aprendía, utilicé Dia, el navegador de IA, que me permitía preguntar cualquier término al instante, lo que aceleró mi proceso.
Redactar un PRD para IA
«PRD» = Documento de requisitos del producto. Algo habitual para cualquiera que desarrolle funciones o productos: objetivos, funciones, flujos de usuarios, restricciones, etc.
Algo que aprendí de otros: para una codificación eficaz, redacta un PRD y diseña el esquema de la base de datos de forma que la IA lo entienda fácilmente. Utilicé un generador de PRD que encontré en el artículo de alguien para crear indicaciones.
Google AI Studio para el primer prototipo
Pegué mi PRD en la herramienta «Build» de Google AI Studio, le pedí que creara la página principal y, en un santiamén, apareció una vista previa funcional.
Poder pasar directamente del texto al software funcional fue alucinante.
Probando «Lovable»
Me registré brevemente en Lovable, otra herramienta, pero no la utilicé mucho (el plan gratuito es muy limitado). La calidad del diseño era aceptable.
Dicen que es mejor si subes tus propias imágenes y sugerencias, pero no llegué a hacerlo.
Instalación de Cursor
Volviendo al desarrollo propiamente dicho, descargué el PRD y lo cargué en Cursor, un IDE con IA para desarrolladores.
El editor parecía intimidante —fondo negro y texto blanco por todas partes—, pero en realidad solo escribí unas pocas frases.
Esa es la magia del vibe coding.
Al principio, generó una página que se parecía al resultado de Lovable.
Se mostrará una imagen ampliada.
Luego repetí el proceso: cada vez que quería cambiar o mejorar algo, simplemente lo describía en lenguaje sencillo y dejaba que la IA revisara el código, una y otra vez, hasta que el resultado coincidía con lo que yo quería.
Integración del inicio de sesión, la base de datos y la API de Gemini
Con la ayuda del chat de Cursor y GPT, integré tres elementos: el inicio de sesión, la base de datos y la API de Gemini.
Muchos de estos servicios eran nuevos para mí, por lo que me llevó tiempo encontrar la API y las claves secretas adecuadas.
Pero esto era importante, ya que vincular el inicio de sesión y la base de datos significaba que los datos de todos los usuarios se conservarían.
También presté mucha atención al diseño del esquema de la base de datos, asegurándome de dividir las tablas para cada tipo de datos.
La API de Gemini permite a la IA leer cualquier URL y generar automáticamente categorías y etiquetas.
Mejora del estilo
Una vez que los enlaces se almacenaron y se pudieron filtrar, supe que aún quedaba mucho por hacer.
Entonces, le pedí a la IA que cambiara a un diseño de estilo lineal, haciéndolo un poco más minimalista... pero aún así no quedé satisfecho.
Hice capturas de pantalla de las interfaces de usuario de Apple, las utilicé como ejemplos y le pedí a la IA que implementara un tema oscuro con glassmorphism. Normalmente, para un diseñador, cambiar todos los componentes y temas supone un gran esfuerzo, pero la IA realizó estos cambios rápidamente. Con las instrucciones adecuadas, clonó (o transformó creativamente) los sistemas de diseño de GitHub con facilidad.
Infinitos ajustes visuales
La siguiente fase se centró en los detalles: realizar innumerables pequeños ajustes de diseño.
Podía especificar cada matiz visual: nombres de componentes, proporciones, radios, estilos de botones... todo en un inglés sencillo.
A veces, las instrucciones no eran precisas, por lo que tenía que repetir o reformular algunas cosas, lo cual a veces resultaba frustrante, pero era parte del proceso.
Si lo hubiera hecho todo en Figma, quizá habría sido más rápido. Pero hay un inconveniente: Figma no produce componentes vivos.
Mi objetivo era evitar depender de una herramienta de diseño, maximizar el potencial de la IA y conectarme a bibliotecas de CSS/sistemas de diseño de código abierto siempre que fuera posible.
Suscripción a Cursor Ultra y conexión de la implementación
Usé tanto Cursor que enseguida alcancé el límite de la versión gratuita, así que me pasé a Ultra por 200 $ al mes.
Es caro, pero si lo piensas como si estuvieras contratando a un desarrollador, es una ganga. Para alguien que no sabe programar, esto abre un mundo nuevo.
La implementación fue otro paso: el alojamiento local era tedioso, así que conecté Vercel y, con la ayuda de la IA, lo implementé al instante.
Al implementar con tanta frecuencia, alcancé el límite de Vercel y me suscribí por otros 20 $.
Pulido y adición de funciones
Ahora era el momento de los interminables ajustes y micro lanzamientos.
A veces, la IA rechazaba ciertas solicitudes o un cambio en una página afectaba a otra, por lo que las instrucciones debían ser lo más claras posible.
Incluso establecí un límite de cinco categorizaciones automáticas por usuario y día para evitar que se dispararan los costes si se registraban muchas personas y saturaban la IA.
No se pasó ningún error crítico: la IA gestionó todo de forma fiable.
El límite de RAM
Entonces mi MacBook Pro empezó a bloquearse, algo que nunca había pasado, ni siquiera con la edición de vídeo. No era un problema de almacenamiento (el SSD externo tampoco ayudaba). Parece que los agentes en segundo plano de Cursor Ultra consumían toda la RAM.
Quería desactivarlos, pero seguían funcionando de todos modos, lo que me obligaba a reiniciar el ordenador después de cada bloqueo.
Al final, ya era suficiente: ¡me compré un MacBook nuevo!
Incorporación real, no solo imágenes
Una cosa que me encantó: pude utilizar componentes reales y funcionales para la página de incorporación. La incorporación guía a los nuevos usuarios hacia las funciones principales de un servicio. Al incorporar una interfaz de usuario interactiva y en tiempo real, en lugar de imágenes estáticas, pude probar los flujos de forma real.
Pega un enlace, haz clic en el botón y los datos se guardarán realmente en la base de datos del usuario.
Producto final: LinkStash
Así es como, sin ser desarrollador, lancé mi primer SaaS de productividad en tres días.
Pruébal: https://linkstash.vercel.app/
Pega un enlace y una nota, pulsa «AutoStash» y la IA asignará categorías y etiquetas, en las que se puede hacer clic para filtrar y que son fáciles de editar.
Un panel de control muestra cuántos artículos has guardado/leído cada día, el recuento total y tu ritmo de lectura, lo que te ayuda a crear buenos hábitos.
Una vez superado el límite de cinco usos, solo se almacena el enlace y puedes actualizar manualmente las categorías y las etiquetas.