Cómo construí una app para mantenerme enfocado en lo importante y gestionar mis tareas

Conoce el proceso completo para construir y lanzar Simple, la primera app del desafío: 10 apps en 30 días de vibe coding.

Jul 21, 2025

Hola, soy Oswaldo y estoy emocionado de que estés aquí.

Primero que nada, quiero agradecerte de manera personal. Gracias por unirte y confiar en este nuevo espacio de aprendizaje.

Esta semana, gracias a personas como tú, que leen y comparten este contenido, se sumaron 52 nuevos suscriptores. Ya somos 410 mentes curiosas en esta comunidad. Aún no me lo creo.

Ya alcanzamos el 41% de la meta de 1.000 suscriptores. Sé que con tu apoyo pronto llegaremos allí.

Gracias de nuevo por estar aquí.

Vamos por más.

Cuando lancé este desafío personal, hace apenas 3 días, no me imaginé que terminaría escribiendo este artículo en mi newsletter.

Sin embargo, aqui me tienes.

Lo estoy haciendo, porque siento que las lecciones aprendidas en el proceso para construir la primera app del desafío, quizá también sean valiosas para ti como vibe coder.

Así qué, aquí vamos. El primero de 10 artículos de la serie: “Cómo construí…”

El desafío de los 30 días

Si es primera vez que lees sobre este desafío, todo comenzó apenas hace tres días cuando publiqué un post en LinkedIn con mi intención de crear y lanzar 10 aplicaciones web 100% funcionales (no juguetes… apps reales) en 30 días. Es decir, cada 3 días tendría que sacar una del horno.

Lee aquí el post de LinkedIn.

La app seleccionada para arrancar el desafío es un gestor de tareas que nombré Simple.

Esta es la versión 1.0 de Simple con mis primeras 7 tareas prioritarias:

Soy un obsesionado de las listas de tareas. Todos los días, lo primero que hago al comenzar mi día de trabajo, es escribir mi “to-do list” en mi agenda (sí, leíste bien, me encanta escribirlas en un cuaderno físico).

He probado un montón de apps en el pasado y hasta ahora, la única que me ha impresionado por su simplicidad y elegancia es Workflowy. Inspirado en esa app, decidí construir mi versión personal.

Hasta hace poco tenía la versión pro de 6,99 dólares al mes ($84 al año).

Construir mi propia app tendrá ya la primera ganancia: 84 dólares ahorrados por año.

También quiero ahorrártelos a ti. Mi objetivo es hacer la app 100% funcional y gratuita para la comunidad.

Si quieres echarle una mirada (y empezar a usarla), ingresa aquí.

Definiendo la visión para construir Simple

Decidí llamar Simple a la app porque está basada en la filosofía Deep Work de Cal Newport.

Deep work es la capacidad de concentrarse sin distracciones en tareas cognitivamente exigentes durante períodos prolongados de tiempo.

Por nuestra naturaleza humana, tenemos cierta capacidad mental cada día para ejecutar tareas con alta demanda cognitiva.

Eso llevó a mi primera decisión de diseño: En un día se podrán asignar un máximo de 7 tareas.

Esto mantendrá el escritorio limpio y me permitirá enfocarme en las que son en realidad prioritarias.

¿Qué pasa si tengo más tareas (aunque no prioritarias) y quiero sacarlas de mi mente?

Las guardo en la bandeja de entrada. De allí, podré moverlas a las tareas prioritarias, siempre y cuando tenga menos de 7 por ejecutar.

Cuando programas con vibe coding, lo más importante es tener claridad de lo que quieres construir, como quieres que funcione y como quieres que se vea (aspecto visual).

Esto, no solo hará el proceso más rápido y eficiente, también te ahorrará dinero en créditos no consumidos.

La IA necesita dirección para funcionar bien.

Esa dirección se la tienes que entregar tú, de allí qué, tener clara la visión de lo que quieres lograr y saber como comunicarla de una forma que la IA comprenda bien, se transforma en una habilidad esencial en el vibe coding.

Esta primera actividad de pensamiento es el paso 1 de mi proceso de vibe coding y lo llamo: Clarifica tu visión.

Los 7 pasos del proceso son:

Paso 1: Clarifica tu visión

Paso 2: Crea tu PRD (Product Requirement Document)

Paso 3: Selecciona la herramienta de vibe coding

Paso 4: Itera y corrige errores (debugging)

Paso 5: Cambia la vibra de tu app

Paso 6: Agrega funcionalidades

Paso 7: Desplega tu app en un clic

Veamos cada uno de estos pasos en detalle.

Clarifica tu visión

Este paso es clave. No te lo saltes.

Sé que la emoción de sentarse y escribir un prompt que diga: “Quiero que diseñes una app para gestionar mi tareas” es tentador.

En segundos tendrías un producto frente a ti y con suerte, bastante decente. Es lo que estabas esperando? Probablemente no. Para procesos exploratorios de ideas, puede ser una buena estrategia, pero no para productos funcionales con un objetivo claro es mejor arrancar con una visión.

Mi recomendación es que te tomes unos minutos para pensar acerca del problema que quieres resolver, como lo has resuelto hasta este momento y cómo te gustaría resolverlo con tu nueva app.

Mientras más tiempo le dediques a esta fase, tu proceso de vibe coding irá mejor. Los modelos de IA necesitan dirección para entregar buenos resultados, esa dirección viene de tu claridad mental. Construyela primero y programa después.

Así sea una visión parcial, es mejor que “ninguna visión”.

Crea tu PRD (Product Requirement Document)

El documento de requerimiento de producto es una de las herramientas más útiles dentro de tu kit de vibe coder. Es la diferencia entre un resultado promedio y uno excepcional.

Si no habías escuchado el término, piensa en un documento que define el problema que un producto resuelve, cuáles son los objetivos de los potenciales usuarios (definidos a través de historias y cuáles son las características o funcionalidades que debería incluir.

Un PRD puede ser un documento tan breve como una sola página, o tan extenso como 10 páginas. La complejidad de lo que quieres construir determinará la extensión del PRD.

El valor que tiene el PRD en el vibe coding, va en sintonía con lo que hablamos en la sección anterior: darle dirección a la IA.

Un PRD es una hoja de ruta clara, concreta y precisa que le indica al modelo de IA el producto que debe construir.

Aquí puedes leer y copiar el PRD que usé para crear Simple.

En mi experiencia, un buen PRD debe llevarte más o menos a un 70% de la visión que quieres para el producto, a partir de allí, con prompts de refinamiento puedes lograr el otro 30%.

Cómo crear tu PRD

Aunque podemos generar un PRD a mano, nosotros no lo haremos así. En cambio, vamos a usar a nuestro nuevo mejor amigo: Gemini 2.5 Pro de Google.

Uso Gemini 2.5 Pro porque, de todos los modelos actuales, es el que mejor escribe PRDs.

Yo podría haberle dicho a Gemini: “Crea un PRD para generar un gestor de tareas minimalista”. Esa unica instrucción habría generado un PRD completo, el problema, es que no estaría alineado como mi visión de lo que quiero construir.

Cuando escribas ese prompt para generar el PRD decide que tanta libertad creativa quieres que tenga la IA en el resultado. Si quieres que sea mucha, no escribas todos los detalles. Si quieres que sea más preciso el resultado, escribe con detalle cada cosa que quieres ver.

En el caso del prompt que escribí para Simple, incluí un montón de detalles porque ya sabía de antemano que quería construir.

Este fue el prompt que usé con Gemini:

<rol> 

Eres un prompt engineer senior con experiencia trabajando en empresas como Google, Tesla y Anthropic.

Dominas todas las buenas prácticas de la creación de buenos prompts tal como “chain-of-thought”, multi-shot, asignación de roles y uso de etiquetas XML.

También eres un experto Product Manager (PM)  y conoces en profundidad cómo construir PRDs (Product Requirement Documents) que son detallados, claros y concisos.

</rol> 


<tarea>

Tu tarea es construir un PRD para diseñar una web app de gestión de tareas usando plataformas como v0, Replit, Bolt o Lovable.

El nombre de la aplicación será “Simple”.

</tarea>


<audiencia>

Personas que trabajan solas y quieren una aplicación de gestión de tareas (to-do app) simple y fácil de usar que les ayude a priorizar y pensar en profundidad (deep work)

</audiencia>


<Contexto>

Las personas tienen tareas, recordatorios y listas regadas por todas partes.
La mayoría de las aplicaciones de tareas que existen tienen tantas funciones y opciones, que manejarlas y mantenerlas al día se convierte en una tarea en sí misma.
A las personas les cuesta cada vez más mantenerse enfocados en una actividad por una mayor cantidad de tiempo.

</Contexto>


<funciones> 

Las tareas se deben mostrar en una lista.
Cada vez que agregue una tarea se ubicará al final de la lista.
Se pueden reordenar las tareas del día por prioridad, por ejemplo una tarea que está en la 5ta posición puedo arrastrarla y moverla a la segunda posición.
Debe existir un buscador de tareas para buscar por nombre.
Se puede agregar una tarea con un simple click.

</funciones> 


<diseño>

La app debe ser intuitiva, fácil de usar y con un diseño minimalista.

La aplicación se mostrará en dos columnas, la columna izquierda tendrá dos secciones:
Tareas: aquí se mostrarán 5 tareas prioritarias
Proyectos: se mostrarán los proyectos creados.

En la columna derecha se mostrará el listado de tareas del día

</layout>


<restricciones>

La aplicación será una web app, es decir, solo estará disponible desde un navegador.

Se podrán agregar tareas hasta un  máximo de días calendario hacia adelante.

</restricciones>


<inspiración>

Inspirate en el diseño de https://vercel.com/.

Los unicos colores permitidos son blanco, negro y escala de grises.

</inspiración>


<principios>

Menos es más. No agregues ninguna función no esencial para cumplir la tarea.

Minimalista. El diseño visual debe ser limpio, ordenado, simple y con un montón de espacio en blanco.

Sin marca. La única referencia a la marca será el nombre en el centro de la parte superior de la app.

Diseño. Debe ser hermoso por la simplicidad. 

</principios>

Esta parte es un poco técnica y no quiero extenderme demasiado aquí, si quieres que escriba un artículo explicando como crear buenos PRDs, déjame un comentario abajo.

Aquí puedes leer y descargar el PRD generado.

Con el PRD listo, me fui a probarlo en mis cuatro herramientas: Lovable, Bolt, Replit y v0.

Seleccionando la app de vibe coding para programar Simple

Para decidir con cuáles de las cuatro plataformas iba a construir mi app seleccioné dos parámetros:

1/ Velocidad para entregar el primer diseño.

2/ Calidad visual de ese diseño.

Usé el mismo prompt inicial para los 4:

Quiero que construyas un gestor de tareas siguiendo las especificaciones del PRD adjunto

Acompañé el prompt con el PRD generado en el punto anterior y esperé los resultados.

Este fue el tiempo cronometrado por mi Google Pixel Pro 6:

v0: 1 min 6 seg
Bolt: 3 min 15 seg
Lovable: 3 min 59 seg
Replit: 8 min 38 seg

Fue impresionante la velocidad que mostró v0. Casi un tercio del tiempo de Bolt, que para muchos, es considerado el más rápido del mercado.

Un aspecto a favor de Replit y su tiempo super extenso, es que fue la única de las cuatro apps que entregó configurada la base de datos. Era de esperar que su tiempo fuera mayor al resto.

Con un claro ganador para el primer desafío, pasé al segundo criterio.

¿Quién entregó un primer diseño con un mejor acabado visual?

Te dejo las cuatro imágenes para que tú mismo decidas.

v0

v0 demostró superioridad en dos aspectos: entregó el diseño más limpio y cuidado, y respetó las instrucciones entregadas en el PRD.

De los cuatro diseños, este fue el que más se alineó con la visión que tenía acerca del producto, esto es importante porque te ayudará a reducir el número de prompts de refinamiento necesarios para alcanzar el resultado deseado.

El secreto detrás del buen gusto que tiene v0 con sus diseños, es que usa una libraría de componentes llamada shadcn. Esta librería fue creada por Vercel, la empresa matriz de v0.

Lovable

Lovable hizo un buen intento y también entregó un diseño limpio y minimalista. Quizá, el detalle que no me gustó fue que agregó un icono en la sección de tareas y que ese icono no cumplía con la paleta de colores establecida en el PRD (solo estaban permitidos negro, blanco y escala de grises). De no ser por eso, habría estado muy bien.

Bolt

Bolt hizo lo que le dio la gana. No respectó la paleta de colores y más grave aún, lo que construyó estaba desde el principio excedido de funciones. En ninguna parte del PRD le indiqué que tenía que agregar todas esas funciones en la columna izquierda.

Sin duda, de los cuatro, fue el más alejado de mi visión.

Replit

Replit entregó un diseño decente, aunque nada destacable. Su apuesta siempre es jugar a lo seguro en cuanto al aspecto visual.

Sus diseños nunca van a estar entre los más bonitos o sobresalientes. La propuesta de valor de Replit va hacia ser la plataforma más robusta, confiable y segura para desarrollar apps, y esto, sí que es un atributo diferenciador valioso.

Otros criterios útiles para escoger la app de vibe coding para tus proyectos

Simple es una aplicación sencilla, por eso mis criterios para seleccionar la plataforma fueron básicos: rapidez y calidad de diseño.

Pero no siempre es así.

Quizá, la aplicación que quieres construir necesita más funciones o la capacidad para integrar bases de datos y autenticación de usuarios. O requieres un back-end (lógica de funcionamiento) más complejo.

Esto incluirá nuevos requerimientos para evaluar y seleccionar la plataforma de desarrollo. Estoy escribiendo un artículo completo para explicar las funciones y lo que hace a cada plataforma excepcional.

Mientras termino de cocinar ese artículo, te adelanto una tabla comparativa que incluye, además de estas cuatro aplicaciones, otras menos potentes (para hacer vibe coding) y también algunas más robustas.

Itera y corrige errores (debugging)

Algo que necesitas aceptar como parte del proceso de vibe coding, es que la mayor parte del tiempo no estarás programando funciones nuevas y divertidas, estarás corrigiendo errores y refinando tu diseño.

Esto por cierto, no es muy diferente de lo que hacen los programadores reales, la mayor parte de su tiempo no lo dedican a programar cosas nuevas, lo dedican al proceso de debbuging.

En el caso de Simple, este proceso de corrección de errores y refinamiento del diseño me tomó algo así como unas tres horas de trabajo y 37 prompts.

La mayoría fueron dedicados a mejorar el uso de la aplicación o agregar funcionalidades como la integración con la base de datos de Neon (ya te cuento más sobre esto en unos instantes).

Aunque, confieso que varios de esos prompts fueron dedicados a agregar la sección de citas de personajes relacionadasr con minimalismo, planificación, foco, conectración y otros temas.

Esa función, que no estaba contemplada en mi visión inicial, fue un divertido agregado al proyecto.

Eso fue, en palabras de Andrej Karpathy (creador del concepto de “vibe coding”), entregarme a las sensaciones del momento y dejar que el proceso creativo me guiara en direcciones no contempladas.

Cambia la vibra de tu app

En ocasiones el “look and feel” de tu aplicación no será el que quieres o, simplemente quieres experimentar con una nueva línea gráfica (algo que te recomiendo hagas con frecuencia).

Sin embargo, en esta oportunidad, lo tenía claro desde el mismo PRD.

Quería un diseño minimalista, limpio, libre de desorden, con muchos espacios en blanco y con una paleta muy bien definida. Como todo eso me lo dió v0 desde el principio, no necesité experimentar o probar nuevas lineas visuales.

Agrega funcionalidades

Esta parte fue muy interesante porque trabajé (con 50% de éxito) dos componentes claves de la app:

Capacidad para agregar y guardar las tareas
Posibilidad de crear una sesión de usuario

La primera función la logré sin problema, la segunda no.

Cuando creas una aplicación que requiere guardar datos (en este caso, las tareas del día o las quen están en la bandeja de entrada), necesitas una base de datos para almacenar esa información, eso es lo que se conoce como “datos persistentes”.

Sin una base de datos, cada vez que cierres el navegador, se perderá toda la información.

Como te comenté un par de secciones atrás, solo Replit habilitó la base de datos desde el principio.

En el caso de v0, tuve que pedirle que creara la base de datos.

Este proceso fue muy fácil, solo tuve que escribir el siguiente prompt y v0 hizo el trabajo:

Quiero agregar una base de datos para almacenar las tareas

La respuesta del modelo fue:

Te ayudo a agregar una base de datos para almacenar las tareas. Voy a implementar una solución usando Neon (PostgreSQL) que es una de las integraciones soportadas.

El proceso fue eficiente aunque durante la implementación surgieron varios errores que tuve que corregir. Como te comenté antes, es normal que surjan detalles que corregir. No tengas miedo, el modelo de IA hará el trabajo pesado, tu única tarea es entregarle feedback.

v0 te da la posibilidad de escoger entre multiples proveedores externos de bases de datos. Dos los más populares son Neon y Supabase. Para el caso de Simple, seleccioné Neon. Su plan gratuito es muy generoso y su rendimiento es excepcional.

Con 500 MB de capacidad y 10 proyectos, tengo más que capacidad para lanzar Simple y hacerla 100% funcional para la comunidad (por lo menos, por un buen tiempo).

Luego de que dejé la base de datos funcionando, me dediqué al segundo desafío: agregar una opción para autenticación.

A diferencia de la base de datos, este resultó ser mucho más complejo.

Este fue mi prompt inicial:

Quiero que mas personas usen la aplicación, que tengo que hacer para agregar autenticación con Gmail o Google?

Aunque el modelo de IA de v0 tuvo una gran disposición de ayuda con su respuesta, no logré el objetivo de habilitar la autenticación:

Para agregar autenticación con Google/Gmail y permitir que más personas usen la aplicación, vamos a implementar Stack Auth, que es una solución de autenticación moderna y fácil de usar.

El proceso de configurar esta función clave de la app requiere varios pasos, algunos ejecutados dentro de Stack Auth y otros dentro de Google.

v0 me entregó un paso a paso muy detallado y claro, sin embargo, despues de una hora batallando me dí por vencido (temporalmente).

Al final, le dije que eliminará por completo la autenticación y que eso lo haríamos luego.

El siguiente paso para mi fue investigar y conocer más sobre el proceso de autenticación y las opciones disponibles.

Vi que varios vibe coders que sigo y respeto por la calidad de lo que hacen, recomendaron una app que no conocía: clerk.dev.

Aunque no llegué a implementarla, está en mi backlog para ejecutar esta semana. En un post futuro les comentaré como me fue con esta implementación.

Desplega tu app en un clic

El último paso fue hacer el deployment (publicar el producto).

v0 tiene una ventaja importante en este último paso. v0 es un producto de Vercel, una empresa de infraestructura web con casi 10 de experiencia manejando los sitios y las aplicaciones detrás de muchas de las más grandes empresas del mundo, OpenAI es una de ellas.

v0 usa la infraestructura de Vercel, por lo tanto, su proceso de deployment es robusto y al mismo tiempo fácil de ejecutar.

Solo como anécdota, la semana pasada construí un blog conectado con Notion como CMS en Replit y no logré hacer el deployment de la aplicación, el proceso entró en un loop de errores y Replit no logró corregirlos. Aun tengo esta tarea pendiente.

Volviendo a Simple y v0, el proceso fue limpio y sin errores. En un par de minutos, ya la aplicación estaba publicada.

Luego de eso, le cambié el nombre al dominio y la republiqué.

El dominio final fue:

https://simppleapp.vercel.app/

Una nota importante. En este caso, Simple está publicada dentro del domonio de Vercel (.vercel.app). Sin embargo, mi intención es publicarla en un dominio propio. Quiero convertirla en un producto 100% funcional y gratuito para la comunidad.

Para el 99.99% de tus proyectos de vibe coding, no será necesario que compres un dominio, pero los que quieras enfocar en un uso más serio, por ejemplo, como un producto para clientes, allí si querrás usar un dominio propio.

Otro tema que debes tener en cuenta, es que cada vez que ejecutes cambios en la programación de tu app, tienes que republicar esos cambios, sino, no se mostrarán en la versión de producción.

El veredicto final

Me alegra haber seleccionado a v0 para este primer producto. Comprobé que la plataforma es robusta y tiene buenos fundamentos para seguir mi proceso de vibe coding.

Además, refuerza mi posición de que v0 y Replit, son las dos plataformas más solidas y las que creo que saldrán como ganadores en la dura competencia por este naciente mercado.

No es casualidad que las dos estén en la mejor posición para ganar.

v0 pertenece a Vercel, una empresa de infraestructura web de clase mundial y con casi 10 años de experiencia trabajando con clientes enormes como OpenIA, o tan pequeños como una startup.

Replit es otra empresa que está jugando en esta liga desde 2016. Antes de la IA ya habían construido un gran producto.

Por su parte, Lovable y Bolt son empresas que tienen apenas meses en el mercado. Si bien es notable el crecimiento que están obteniendo, les falta madurez y solidez a su infraestructura.

Para algunos casos de uso, son una buena opción. Para construir apps que quiera escalar o monetizar? Sin duda no serían mi opción preferida.

Crear Simple fue una experiencia genial. Aprendí un montón de cosas y me hizo enamorarme aun más del vibe coding.

Ahora te toca a ti.

¿Que vas a empezar a construir con lo que aprendiste hasta aquí?

Los siguientes pasos con Simple

Ok, ya lancé el primer producto de los 10 que me comprometí a construir con vibe coding en 30 días.

Simple, aunque funcional, no está en el punto donde me la imagino. Así que seguiré trabajando en ella en los siguientes días.

Hasta hace poco, yo pagaba 6,99 dólares al mes por Workflowy (84 dólares al año). Despues de probar muchas apps de este tipo, creo que esta es la mejor que existe.

Mi objetivo es que Simple sea una app por la que estaría dispuesto a pagar 6,99 dólares al mes.

Yo quiero ser el primer usuario de mi propia aplicación. Aunque, también quiero que tu lo seas.

En los proximos años veremos un crecimiento exponencial de aplicaciones que tendrán un solo usuario, su creador.

Esto es lo que Edmar Ferreira, fundador de Rock Content, llama el “Software egoista”.

En poco tiempo, habrá millones de personas, como tú y como yo, construyendo aplicaciones para resolver problemas personales. Habrá millones, quizá billones de estas pequeñas apps egoistas.

Mi objetivo es seguir mejorando Simple, tendrá su dominio y será gratis para cualquiera que quiera usarla.

Esto es lo que tengo en el backlog para los próximos días:

Agregar autenticación con clerk.dev
Agregar tareas anidadas
Mejorar el diseño para hacerlo más intuitivo
Publicarla en dominio propio

1 desafío listo, 9 por conquistar

En paralelo, continuaré el desafío con el resto de los productos que quiero construir en estos 30 días:

~~1/ App de tareas con un diseño minimalista construida para personas que trabajan solas y necesitan concentración profunda~~

2/ Temporizador Pomodoro con diseño minimalista integrado con Spotify

3/ Compresor de imagenes PNG, JPEG y WebP

4/ Convertidor de imagenes (por ejemplo convertir un PNG en Webp)

5/ Gestor de finanzas personales que clasifique mis gastos y me muestre a dónde va realmente mi dinero.

6/ Un generador de tuits virales a partir de mis articulos de la newsletter

7/ Newsletter diaria curada con las noticias relevantes en vibe coding y vibe marketing

8/ Librería en línea con mis magic prompts (una colección curada de buenos prompts)

9/ Generador Thumbnails para Youtube

10/ Juego

Suscribete a la newsletter para que recibas las ediciones de “Cómo construí…” para cada una de las 9 aplicaciones siguientes.

También puedes conectar conmigo Linkedin, todos los días comparto tips y hacks sobre lo que voy aprendiendo y lo más interesante que me encuentro de vibe coding y vibe marketing.