Todo lo que necesitas saber ANTES de empezar a vibe codear

¿Qué tal? ¿Cómo has pasado la semana? Seguro que mucho mejor que yo. Llevo un estrés… Te voy a confesar algo: el post de hoy debía ser el primer post de la newsletter.

¿Por qué no lo fue? Pues porque antes de lanzar el primer capítulo se lo dejé leer a algunos amigos y uno de ellos me comentó que quizá debería hacer un post introductorio (el de la semana pasada), para informar a mis futuros lectores de qué iba el tema, qué podían esperar y qué podía ofrecer.

Entonces pensarás: "Si ya lo tenías escrito, ¿de dónde viene el estrés?"

Bueno, pues resulta que además de gustarme el vibe coding y escribir sobre mi experiencia con él, también soy una persona tremendamente perfeccionista e insegura, así que le he dado mil vueltas al post de hoy.

¿Creo que ya está perfecto? PARA NADA. Pero necesito soltarlo.

¿Qué veremos hoy?

Hoy aún no entraremos en materia. Lo sé, me hago esperar, pero pienso que hay una serie de pasos de preparación antes de lanzarnos a construir soluciones y aplicar herramientas y funcionalidades.

El post de hoy es como cuando el señor miyagi le enseña a Daniel lo de "poner cera, pulir cera".

Tal como te mencioné la semana pasada, cada newsletter estará basada en tres patas: concepto, práctica y reto.

Concepto: El concepto de hoy son los tres fundamentos que (bajo mi punto de vista) debe practicar un viber¹.

Práctica: Te explicaré mi experiencia con mi primer proyecto como viber, cómo lo desarrollé, mis limitaciones de entonces y cuáles fueron los siguientes pasos. Todo ello aplicando el concepto que te habré explicado antes.

Reto(s): En principio había dicho que te propondría un reto. Bueno, como el concepto se divide en tres fundamentos, te retaré a que pongas en práctica uno de los tres (o que hagas los tres, como veas).

Sin más, ¡vamos al lío!

---

El concepto

Después de crear varios productos digitales con IA, he destilado tres capacidades que separan un auténtico viber de quien solo copia y pega:

1. Pensar por pasos

Todo en la vida tiene su proceso. Tú ya eres un programador natural. Todo el mundo se despierta por las mañanas y hace una serie de pasos antes de salir a la calle. El principio del "programa" es "despertar" y el último es "salir", pero entre uno y otro, cada persona ejecuta su propia secuencia. Y todas son válidas, aunque siempre se pueden optimizar.

Algunos se despertarán automáticamente, otros necesitarán un despertador. Unos irán primero al baño, mientras que otros pondrán primero la radio y luego se tomarán un vaso de agua. El resultado final es el mismo, pero cada proceso es único.

Esta capacidad de pensar en pasos lógicos es exactamente la materia prima del vibe coding. No basta con decirle a la IA "quiero crear una app que haga esto". Para que entienda qué debe hacer exactamente, necesitas poder describir paso a paso cómo lo debe hacer. Aquí es donde muchas personas se quedan atascadas.

Esta es tu superpotencia secreta. Necesitas desarrollar la capacidad de ordenar los pasos lógicos en cualquier tarea cotidiana. ¿Por qué? Porque esto luego te ayudará a desmenuzar los pasos lógicos que debe seguir un usuario cuando interactúa con tu aplicación y cómo esta se debe comportar.

Si ya has trabajado con herramientas de automatización como Zapier o Make, tienes ventaja. Este proceso de desmenuzar funcionalidades y aplicarles pasos ya lo tendrás "en la sangre". Pero si nunca has hecho automatizaciones, no hay drama.

Puedes empezar practicando con actividades cotidianas. La próxima vez que hagas algo rutinario, como preparar café o planificar una salida, conviértete en tu propio observador. Identifica cada paso individual y el orden en que los realizas.

2. Comprender la arquitectura

Aquí viene la parte que asusta a muchos, pero no debería. Si estás pensando en construir páginas web o aplicaciones, necesitas entender cómo funcionan las tripas del sistema. No estoy hablando de convertirte en un experto, sino de entender el juego.

Piénsalo así: no necesitas saber reparar un coche para ser un buen conductor, pero sí ayuda saber que tiene motor, frenos y volante. Con las aplicaciones web pasa igual.

Necesitas comprender que en una página web intervienen distintos elementos:

• El frontend (lo que ve el usuario)

• El backend (las tripas de la aplicación)

• La base de datos (almacenaje, autenticación y otras movidas)

• Las APIs (servicios externos que pueden interactuar con tu aplicación)

Esta comprensión te da superpoderes. Cuando entiendes cómo interactúa cada parte —por ejemplo, cuando el usuario toca un botón— puedes explicar mucho mejor el funcionamiento que deseas para tu aplicación. Tienes más control sobre ella y sobre su desarrollo, aunque no sepas construir cada pieza desde cero.

3. Mentalidad de exploración y crecimiento

Aquí es donde se separa el trigo de la paja. Una vez que dominas los dos primeros conceptos, llega el momento de la clarificación.

Acude a tu modelo de IA favorito (ChatGPT, Claude, Gemini o el que prefieras) y explícale tu idea usando el pensamiento estructurado por pasos combinado con tu comprensión de la arquitectura web.

En este punto, el modelo te preguntará cómo lo quieres desarrollar y te propondrá distintos enfoques y herramientas.

Para cada opción, si no se lo has especificado concretamente, la IA te propondrá tanto caminos distintos como herramientas a utilizar. Aquí entra tu capacidad de autoaprendizaje y de "buscarte la vida".

Contrariamente a lo que nos dicta nuestra naturaleza de quererlo todo para ayer, si quieres evolucionar en el vibe coding y no quedarte únicamente en la superficie, necesitas desarrollar la curiosidad técnica. Cuando la IA te ofrezca una alternativa, aunque de primeras la veas muy compleja, dale una oportunidad.

Investiga, mira cómo otros lo han hecho. Normalmente siempre hay vídeos en YouTube o alguien de tu entorno ya ha pasado por lo mismo. Si no encuentras la respuesta, la propia IA puede ayudarte a ir del punto "A" al punto "B". El truco está en no rendirse al primer obstáculo.

---

La práctica

Ahora, quiero compartir contigo la historia de mi primera aplicación creada con vibe coding, porque creo que ilustra perfectamente cómo se desarrollan estas capacidades en la práctica.

La primera aplicación que creé se llamaba "yoleo" y era un recomendador de libros. Cada libro recomendado tenía un botón para comprarlo en Amazon, buscando el beneficio a través de las ventas de afiliados.

Vamos a ir por orden:

Lo primero que hice fue imaginar cómo debía ser la plataforma. Pensé "házlo fácil":

Simplemente quería un input (caja de texto) donde el usuario pudiera escribir el título de un libro que le hubiera gustado. La idea entonces era que la aplicación le devolviera cinco recomendaciones, es decir, cinco libros relacionados con el que había introducido.

Vale, lo tenemos. Pasemos a cómo funcionaban sus tripas:

Realmente, la primera versión era bastante escuálida. Piensa que "yoleo" lo hice hace casi tres años, justo cuando apareció ChatGPT y mis conocimientos eran básicamente HTML y CSS. Pero bueno, ¿cómo funcionaba?

1. El usuario escribe el título de un libro en el input (caja de texto)

2. Le da al botón "buscar recomendaciones"

3. Esto dispara una llamada a la API de OpenAI (ChatGPT para que nos entendamos)

4. El prompt solicita 5 libros relacionados con {libro} (lo que hay entre corchetes es una variable, en este caso, es el título que el usuario ha introducido en el input), el autor/a y una breve descripción.

5. La respuesta la recibimos en formato JSON donde cada elemento tiene:

   • Título

   • Autor

   • Sinopsis

6. Cogemos el título del libro y montamos el botón de compra en una url similar a esta: https://www.amazon.es/s?k={título+del+libro}, añadiendo el código de afiliado al final.

7. Con todo esto listo, se lo mostramos al usuario en pantalla.

8. Fin.

Todo este sistema, aunque sencillo, funcionaba. Pero tenía 2 grandes problemas:

1. Al no tener backend, la API KEY de OpenAI era visible para todo el que quisiera consultarla

2. ChatGPT a veces alucinaba y se inventaba títulos de libros

Entonces me puse a conversar con ChatGPT para investigar cómo podía solucionar esos problemas:

Para el problema con la API KEY, lo que necesitaba era almacenarla de forma segura en un backend, una parte no accesible por el usuario que visitaba la web. Para ello, necesitaba dejar de construir mi sitio con simple HTML y CSS y construirlo con algo que se llamaba framework, como Vue.js o React, de manera que pudiera separar la parte del cliente (el frontend, lo que el usuario ve) y la parte del servidor (la parte trasera que hace llamadas a una base de datos y/o a una API).

Respecto a que ChatGPT se inventara los libros, tenía dos opciones: verificar que los libros propuestos por ChatGPT existieran (opción 1) o que los libros ya estuvieran en mi base de datos y solo recomendar los que ya tuviera almacenados (opción 2). Al principio me decanté por la opción 1 y, por cada libro que me daba ChatGPT, comparaba el título con Google Books para ver si el título existía.

Poco a poco fui investigando cada uno de los puntos. NO TE AGOBIES. No se trata de abrumarse y querer solucionar todos los problemas y aprenderlo todo de golpe, sino de ir paso por paso aprendiendo algo nuevo cada día.

Cuantas más herramientas conozcas, más posibles soluciones tendrás a tus problemas.

---

Reto(s)

Y finalmente llegamos al último punto, ese en el que te hago trabajar un poco. Como con los deberes de verano, son opcionales, ¡pero muy recomendables!

Dado que hemos tocado tres fundamentos, es justo que plantee tres retos. Elige uno, dos o haz los tres, como tú veas.

Reto 1: "Arquitecto Mental"

Desafío: Durante esta semana, fíjate en algo que hagas de forma cotidiana e intenta traducir las acciones en "pseudocódigo mental". Esto significa anotar todos los pasos a seguir para realizar la tarea, tanto las acciones que realizas como las bifurcaciones que pueden suceder si no se cumple un requisito.

Por ejemplo:

Lavarse las manos

• SI hace frío → encender el agua caliente

• SI NO → encender el agua fría

• Mojarse las manos

• Aplicar jabón

• Limpiar la suciedad de las manos

• Aclarar el jabón de las manos

• Secarse las manos con la toalla

¡Sé preciso y no te dejes nada! No des nada por supuesto (mi ejemplo podría estar mucho mejor explicado). Cuantas menos cosas dejes en el aire, mucho más concreto será el resultado cuando estés hablando con una máquina.

Si quieres ver otros ejemplos, te recomiendo este vídeo: algoritmos en la vida diaria.

Reto 2: "Detective de Apps"

Desafío: Elegir una app que uses diariamente (Instagram, WhatsApp, Spotify...) y documentarla:

• Qué pasa cuando tocas cada botón

• Qué información se guarda

• Qué llamadas al servidor intuyes que se hacen

• Cómo crees que fluye la información

Al final, crea un "mapa mental" de cómo crees que funciona por dentro. Un poco como el reto 1. Lo puedes escribir, pero seguramente te será más fácil de representar en un diagrama de flujo.

No te compliques, puedes hacerlo con papel y boli. Si luego lo quieres compartir en LinkedIn, puedes usar Miro o Figma.

Reto 3: "Primera Conversación"

Desafío: Toma una idea de app simple que tengas en mente y mantén una conversación con una IA donde:

• Expliques la idea paso a paso

• Preguntes qué opciones técnicas hay

• Investigues al menos UNA opción que te parezca compleja

• Vuelvas a la IA con lo que aprendiste y reformules

---

¡Y hasta aquí la newsletter de hoy!

Espero que no se te haya hecho pesada, pero si lo ha sido, ¡házmelo saber!

Si te ha gustado, compártelo en tu red y si decides publicar la solución a alguno de los retos planteados, no olvides mencionarme :)

¡Nos vemos la próxima semana!

1. viber: término que estoy intentando inculcar en distintas publicaciones para referirme a las personas que practican el vibe coding.