00:00:00Bienvenidos a Vibe Coding 101. Si no sabes programar pero aun así quieres
00:00:04hacer realidad una idea, ya sea un portafolio, un proyecto personal o algo que siempre
00:00:10has querido construir, este video es para ti. Al terminar, podrás crear una plataforma real
00:00:15sin escribir ni una sola línea de código. Y si eres desarrollador, este video también te servirá
00:00:21porque a veces solo quieres terminar algo rápido sin complicarte demasiado. Así que en este
00:00:26video, te guiaré por todo el proceso de Vibe Coding, las mejores prácticas de cada paso,
00:00:32y construiremos un proyecto real juntos. Para crear nuestra app, usaremos Abacus AI
00:00:37Deep Agent. Es mi plataforma favorita para cualquier tarea de IA porque con una sola suscripción,
00:00:43puedes crear apps, webs, presentaciones y casi cualquier cosa. La uso sobre todo para Vibe
00:00:50Coding porque he notado que comete menos errores y es muy asequible comparada con otras
00:00:54que he probado. He dejado el enlace en la descripción, así que asegúrate de echarle un vistazo.
00:00:59Hay cinco pasos para hacer Vibe Coding correctamente. Mucha gente ya conoce estos pasos,
00:01:05pero el problema es que no conocen las mejores prácticas de cada uno, y por eso
00:01:09obtienen resultados mediocres e inconsistentes de la IA. Vamos a solucionarlo. El primer paso es la
00:01:14fase de ideación. Aquí es donde decides qué quieres construir. Puede ser tu portafolio o
00:01:19cualquier otra cosa. Si aún no tienes una idea, puedes usar la IA para obtener sugerencias. La que
00:01:25yo uso es Abacus Chat LLM, y funciona de maravilla para esto. Selecciona automáticamente el mejor
00:01:31modelo de IA según la tarea, así obtienes mejores resultados sin tener que pensar qué
00:01:36modelo utilizar. Una vez tengas la idea, lo siguiente es escribirla. Abre
00:01:42Google Docs o Word y describe tu idea en lenguaje sencillo. Lo que estás creando se llama
00:01:47documento de requisitos del producto. Que el nombre no te asuste. Para el Vibe Coding, un PRD es solo
00:01:53un documento de una o dos páginas que explica qué quieres construir. Este documento será luego tu
00:01:59prompt inicial. Estoy usando una plantilla sencilla de este artículo. Gracias al autor, y échale
00:02:05un vistazo al artículo si quieres saber más. Si quieres la plantilla para rellenar,
00:02:09el enlace de descarga está en la descripción. Repasemos las secciones rápidamente. En la
00:02:14descripción de una frase, solo describe tu app en una línea. Vamos a crear una web para dividir
00:02:20gastos en este video. Nuestra descripción podría ser algo así. La siguiente sección es para
00:02:25describir para quién es el producto y qué problema resuelve. Después, incluirás las
00:02:31funciones principales de tu aplicación. No hace falta ser técnico, escribe lo que quieres en lenguaje
00:02:36natural y menciona solo lo principal. El siguiente apartado es para indicar qué NO construir,
00:02:41así el proyecto no se descontrola. Si no estás seguro, puedes saltarte esto por ahora.
00:02:47Luego está el flujo de usuario, que explica el recorrido principal en la aplicación. Esto también es
00:02:52opcional. Y lo último es la sección de criterios de éxito. Aquí mencionas los criterios de éxito
00:02:58de tus funciones. También es opcional. Y ya está. Si esto te parece demasiado,
00:03:03un atajo es rellenar solo la descripción de una frase,
00:03:07pegar la plantilla en Chat LLM y pedirle que complete el PRD por ti. Hecho esto,
00:03:13estás listo para el paso dos. En esta fase, elegirás una plataforma de vibe coding y pegarás tu PRD
00:03:19como prompt inicial. Es muy importante elegir una buena plataforma porque, obviamente,
00:03:25si quieres grandes resultados, necesitas una gran plataforma. Yo usaré Abacus AI
00:03:30Deep Agent. Solo tienes que copiar tu PRD y pegarlo en el cuadro del prompt. Si quieres tu app
00:03:36con un diseño específico, puedes subir el archivo de diseño y pedirle que lo use de referencia. Pero
00:03:41recuerda que no puedes subir archivos de Figma directamente. Otra forma es describir tu diseño
00:03:47con palabras. Ahora dale a enviar y espera. Tras enviar la solicitud, el agente puede hacer preguntas
00:03:53de seguimiento. Suelen ser no técnicas, así que responde según tu preferencia. Si no entiendes
00:03:59algo, simplemente pide a la IA que te lo aclare. Cuando envíes tus preferencias, el agente
00:04:05empezará a programar tu aplicación. Es mi parte favorita porque puedo ver unos
00:04:10reels mientras veo cómo genera el código para mí. Unos momentos después. Vale, creo que nuestra app
00:04:17está lista. Ahora vamos al siguiente paso. Esta fase trata de probar la app, corregir errores,
00:04:23mejorar el diseño o añadir funciones. Aquí es donde la mayoría falla. Antes de hablar de
00:04:28eso, echemos un vistazo a nuestra plataforma. La app funciona bien. Hablemos ahora de
00:04:58lo que no hay que hacer en esta etapa de prueba y refinamiento. Un error común es
00:05:04hacer una lista de todo lo que hay que arreglar y soltarlo en un solo prompt gigante. La IA no
00:05:09funciona bien así. Lo mejor es arreglar una cosa a la vez y ser muy específico en el prompt.
00:05:15Si un botón no funciona, no escribas prompts así. En su lugar, usa esta
00:05:20plantilla de prompt para solucionar problemas. Veamos ahora el proceso para añadir una función extra.
00:05:25Ya describiste las funciones en tu PRD. Reutiliza ese mismo formato. Por ejemplo, en nuestra web,
00:05:32vamos a añadir la división de gastos desigual. Ahora, al crear un gasto, el coste se reparte
00:05:38a partes iguales. Con la distribución desigual, puedo controlar el coste por persona. Siguiendo nuestra
00:05:44plantilla, he creado una descripción para la nueva función. Volvamos al agente y peguémosla.
00:05:50Pero antes, asegúrate de añadir esta línea, y luego pega tu descripción. Dale a enviar y
00:05:56esperemos. La nueva función está lista. Vamos a probarla. Todo parece correcto. Pues eso es
00:06:17todo en este paso. Añade una función, pruébala y repite. Aún quiero añadir un par de cosas
00:06:23antes de pasar al siguiente paso. Primero, no dudes en revertir cambios. Revertir
00:06:29cambios significa volver a una versión anterior de tu código. Puede haber casos en los que
00:06:33añadir una función o arreglar un error rompa otra cosa. En ese caso, dile al prompt
00:06:39de la IA que los nuevos cambios rompieron el código y que lo arregle. Funcionará casi siempre.
00:06:44Pero si no funciona, lo mejor es volver a la versión anterior. Lo siguiente
00:06:49que quiero decir es que sientas libertad para modificar las plantillas de prompts que os he dado.
00:06:54Eso nos lleva al siguiente paso: la validación final. Tras añadir todas las funciones,
00:06:59tendrás que hacer una prueba final de tu aplicación. Nada complejo. Simplemente recorre
00:07:04tu plataforma y prueba cada función. Asegúrate de que los resultados y el comportamiento
00:07:09sean los esperados. Si ves fallos, vuelve a la fase de prueba y refinamiento. Y eso es
00:07:14básicamente todo: asegurarse de que todo funcione antes de publicarlo. El último paso es
00:07:20el despliegue. Con Abacus AI Deep Agent, desplegar son solo unos clics. Para publicar tu app,
00:07:27busca el botón “Deploy” arriba. Haz clic y verás tres opciones. Usar un dominio de Abacus AI,
00:07:33un dominio propio o un subdominio personalizado. Con el dominio de Abacus, la URL de tu sitio
00:07:40seguirá este patrón. Si eliges un dominio propio, tendrás que comprarlo y
00:07:45apuntarlo a Abacus vía DNS. Un subdominio es más sencillo. Si ya tienes un dominio, puedes usar
00:07:51algo así como subdominio sin comprar nada nuevo. Por ahora, usemos el dominio de Abacus.
00:07:57Ponle el nombre que quieras y esa será la URL de tu web tras el despliegue.
00:08:03¡Y felicidades! Nuestra primera app hecha con Vibe Coding ya está online. Puedes compartir la URL
00:08:09para que otros empiecen a usarla. Antes de que vayas a crear tu propia app, hay algo
00:08:14final que quiero añadir. Estas apps no son ideales para productos comerciales a gran escala.
00:08:20Son mejores para proyectos personales, herramientas pequeñas, prototipos y pocos usuarios. Porque
00:08:26puede haber problemas de seguridad, rendimiento y limitaciones de escalabilidad. Si quieres crecer,
00:08:32acabarás necesitando desarrolladores. Y ya está. Los cinco pasos del Vibe Coding con prácticas
00:08:38que de verdad funcionan. No olvides probar Abacus AI Deep Agent. El link está en la descripción.
00:08:44Si este video te ha ayudado, dale a me gusta, comparte, suscríbete y cuéntame qué opinas
00:08:49abajo. ¡Nos vemos en el próximo!