Vibe Coding - Guía Iniciación a la programación IA

¿Quieres empezar a crear tus propias apps? hoy es más fácil que nunca incluso si no tienes conocimientos de programación. Esto es una guía para comenzar.

El mundo del desarrollo ha cambiado radicalmente. Lo que antes tomaba años de estudio intensivo, ahora puede aprenderse en meses.

Las herramientas de inteligencia artificial para programación como GitHub Copilot, ChatGPT (y el resto de LLM), Windsurf o Cursor están transformando la forma en que construimos software, permitiendo que incluso principiantes puedan crear aplicaciones completas desde el primer día.

🎯 Aquí tienes una lista de las mejores herramientas de programación con IA para Creadores

Este fenómeno, conocido como "vibe coding" o "programación por intuición", ha democratizado el acceso al desarrollo de software como nunca antes.

Pero existe una paradoja: aunque nunca ha sido más fácil escribir código, nunca ha sido más importante entender lo que estás haciendo.

La revolución silenciosa: del "Vibe Coding" a la programación profesional

Como alguien que ha visto ambos mundos—aprendiendo a programar en la era pre-IA y ahora navegando este nuevo paisaje tecnológico—quiero compartir una perspectiva única. He observado cómo muchos nuevos programadores pueden crear aplicaciones impresionantes simplemente "fluyendo" con las sugerencias de IA, pero luego se estancan cuando enfrentan problemas reales o necesitan escalar sus proyectos.

Esta guía es un puente entre esos dos mundos. Te mostraré cómo puedes aprovechar al máximo las nuevas herramientas de IA para moverte con velocidad extraordinaria, mientras adquieres los fundamentos técnicos críticos que separan a los programadores aficionados de los profesionales respetados.

No necesitas pasar años estudiando abstractos patrones de diseño—pero sí necesitas entender ciertos conceptos fundamentales que ninguna IA puede reemplazar.

Si estás comenzando tu viaje en la programación, o incluso si llevas un tiempo programando con herramientas IA, este artículo te dará las claves para transformar tu enfoque y convertirte en un desarrollador que puede construir soluciones robustas, mantenibles y escalables—todo mientras sigues aprovechando la velocidad y potencia de las herramientas modernas.

Escribo este artículo porque me encuentro en un momento de mi carrera como programador donde tengo una buena perspectiva sobre lo que significa ser un principiante y hacer la transición a un rol más senior a lo largo del tiempo, a base de autoaprendizaje y decena de proyectos. No escribo esto para presumir, sino porque podría perder esta perspectiva en el futuro, así que quiero aprovechar mientras tengo esta visión clara.

De Principiante a Senior: Una Guía para Desarrolladores Efectivos de Vibe Coding

Como alguien que aprendió a programar antes de que existieran las herramientas de inteligencia artificial actuales o las nuevas tendencias de Vibe Coding, creo que hay mucho conocimiento que algunos programadores novatos están pasando por alto.

No me refiero a la sintaxis o al entendimiento profundo de los lenguajes de programación, sino a los principios básicos de ingeniería de software y las prácticas de desarrollo que se adquieren con el tiempo.

Pero tranquilo, la buena noticia es que ahora mismo solo necesitas conocer los aspectos más fundamentales para tener el potencial de hacer cosas increíbles con una rapidez nunca imaginada.

La consistencia es clave

Programar se trata de consistencia. La diferencia entre un desarrollador junior y un buen programador senior generalmente se reduce a la "memoria muscular" con ciertos conjuntos de tecnologías (stacks), lenguajes, librerias y proveedores.

Muchas de estas habilidades no son tan transferibles como la gente afirma. Aunque es más rápido aprender algo nuevo una vez que tienes experiencia, aún necesitas aprender los detalles específicos nuevamente.

Por lo tanto, la clave para volverse bueno en programación y en la creación de productos es:

1. Elegir un conjunto de tecnologías específico

2. Encontrar proveedores que te gusten

3. Mantener consistencia con estos servicios

El poder de la repetición. Elige tu Stack. No lo cambies nunca.

El Stack es un conjunto de herramientas utilizadas para construir y ejecutar su aplicación web. Hay millones de combinaciones.

💊 Aquí está la píldora roja: El Stack no importa. Puedes hacer todo lo que necesitas como emprendedor con cualquier combinación de herramientas tecnológica.

Elige una. No la cambies nunca.

Siempre hay espacio para crecer y cambiar elementos en tu "stack" dependiendo de las necesidades específicas de un proyecto, pero generalmente encontrarás que gran parte de tu código puede reciclarse. Si tienes una buena plantilla inicial para un producto, siempre será muchísimo más fácil.

La realidad es que muy pocas personas son simplemente súper inteligentes y pueden aprender cosas nuevas sin esfuerzo.

Para la mayoría de nosotros, se trata de hacer las mismas cosas una y otra vez.

Cuanto más trabajes con ellas, mejor te volverás. Eventualmente, te volverás realmente bueno, como con cualquier cosa que practiques todos los días.

Este es un ejemplo de Stack típicamente recomendado para programar con IA:

• Frontend:

  • React (components)

  • NextJS (pages)

  • TailwindCSS + daisyUI (styling)

• Backend:

  • NextJS (API)

  • Superbase / MongoDB (database)

  • Vercel (hosting)

• Additional tools:

  • Stripe (payments)

  • Resend (emails)

  • AWS (image hosting)

• Programming language: JavaScript / TypeScript

Déjate llevar por el Vibe Coding… pero NO programes "a la ligera"

El "Vibe Coding" (programación intuitiva con IA) es maravilloso, pero no dejes que te engañe haciéndote creer que no necesitas entender nada.

Si bien puedes crear cosas asombrosas simplemente pidiendo a la IA que genere código, adquirir algunos conocimientos básicos te dará un control mucho mayor sobre tus proyectos.

Para proyectos sencillos como páginas web simples o formularios, probablemente puedas arreglártelas con solo la ayuda de la IA. Sin embargo, cuando quieras construir algo más complejo como una aplicación que genere ingresos o un servicio por suscripción, necesitarás algunos fundamentos.

🎯 Piénsalo así: usar la IA sin conocimientos básicos es como conducir un coche automático sin saber qué significan las señales de tráfico. Llegarás a algunos lugares, pero eventualmente te perderás o tendrás problemas.

¿Qué conocimientos básicos son importantes?

• Control de versiones: Programas como Git que te permiten guardar diferentes versiones de tu proyecto.

• Conceptos técnicos básicos: Documentación de arquitectura, especificaciones, DTT, implementación… Muchos de estos son remplazables con un buen prompt, si sabes que es lo que necesitas.

• Organización del código: Entender cómo estructurar y mantener tu código ordenado para poder encontrar y arreglar problemas fácilmente.

• Herramientas de verificación (linters): Programas que revisan automáticamente tu código buscando errores (como un corrector ortográfico, pero para código).

No te preocupes, no necesitas convertirte en un experto. Con la ayuda de la IA, puedes ir aprendiendo estos conceptos gradualmente mientras construyes tus proyectos. La clave es ser curioso y preguntar "¿por qué?" cuando la IA te sugiera algo.

Dedica un poco de tiempo a entender lo que hace tu código, en lugar de simplemente copiarlo y pegarlo. Esto te convertirá en un creador independiente y no en alguien que depende totalmente de las herramientas de IA. Recuerda: la próxima actualización de estas herramientas podría cambiar completamente, pero tus conocimientos fundamentales siempre serán valiosos.

¿Quieres aprender más? Suscríbete a la newsletter - La Mafia IA, porqué en las próximas ediciones iremos viendo cómo escribir prompts, evaluar y optimizar el uso de herramientas de vibe condig y depurar código generado por IA para maximizar productividad.

Guía práctica para mejorar como desarrollador IA

1. Instala Git

Git es un sistema de control de versiones esencial para cualquier desarrollador. Es increíblemente fácil de aprender. Solo necesitas conocer aproximadamente seis comandos de terminal, y estarás preparado para siempre.

Git te permite gestionar todo tu control de versiones, y aunque alguna herramienta como Cursor arruine tu código, siempre tendrás control sobre diferentes versiones y podrás revertir en cualquier momento. También es increíblemente útil para revisar tu código cuando encuentras problemas o cambias algo accidentalmente más tarde. Además, te permite descargar rápidamente proyectos o plantillas iniciales de otras personas y comenzar a trabajar en ellos inmediatamente.

Para principiantes: Guía sencilla de Git

2. Utiliza un kit/proyecto inicial

Recomiendo algo como el T3 Stack. Viene con todo incluido, con todo configurado para que comiences a construir un proyecto de alta calidad.

Para explicarlo en términos no técnicos:

• TypeScript: Una versión mejorada de JavaScript que te ayuda a evitar errores

• Tailwind: Un sistema que facilita el diseño visual de tu aplicación

• tRPC: Una herramienta para construir APIs (conexiones entre tu aplicación y servidores)

• Prisma o Drizzle: Herramientas que facilitan la interacción con bases de datos

• Next.js: Un marco de trabajo que simplifica la creación de sitios web

Todo esto viene configurado de manera limpia y organizada. Usa esto como base para aprender cómo hacer las cosas correctamente en el futuro.

Alternativa de pago: Otro kit inicial (este de pago) muy famoso y que yo uso en algún proyecto sería ShipF@st

3. Entiende por qué usamos TypeScript y linters

TypeScript añade tipado estático a JavaScript, lo que ayuda a detectar errores durante la compilación en lugar de durante la ejecución. En términos simples, te permite identificar problemas antes de que tu código se ejecute, ahorrándote horas de depuración.

Los linters, por otro lado, imponen estándares de codificación y mejores prácticas, asegurando que tu código sea limpio, consistente y menos propenso a errores.

Juntas, estas herramientas hacen que tu código sea más predecible y fácil de mantener. También juegan un papel crucial cuando trabajas con herramientas de IA como Cursor o GitHub Copilot. Cuando tu código está bien tipado y "lintado", las herramientas de IA pueden entender mejor su estructura y contexto, facilitándoles sugerir correcciones precisas, generar fragmentos de código relevantes y depurar problemas eficazmente.

Esencialmente, TypeScript y los linters actúan como una "capa de control de calidad" que no solo te ayuda a ti, sino que también mejora la capacidad de la IA para asistirte.

Control de Linting en Cursor

Puedes personalizar cómo funciona el linting en Cursor:

1. Activar/desactivar linting: Puedes desactivar el linter en la configuración de Cursor cuando prefieras enfocarte en otras tareas sin las correcciones automáticas.

2. Configuración de reglas: Especifica tu guía de estilo preferida y define reglas personalizadas o excepciones según tus necesidades.

3. Nivel de rigurosidad: Establece diferentes niveles de estrictez para distintos tipos de advertencias.

Recursos para aprender:

• TypeScript para principiantes

• ESLint - Herramienta de linting para JavaScript

4. Aprende a alojar y lanzar tu proyecto temprano en producción

Esto te dará una idea general de cómo funciona. Prueba algo como Vercel para empezar – es gratuito y un gran lugar para aprender mejores prácticas. (No estoy respaldando Vercel – uso diferentes opciones ahora – pero fue un gran punto de partida para mí para aprender cómo lanzar sitios con un esfuerzo mínimo).

5. Elige una Base de datos simple

Selecciona un servidor de base de datos simple como Supabase, MongoDB o Neon, o algo económico con un nivel gratuito para comenzar. Incluso puedes integrar esto desde tu panel de control de Vercel.

Una vez que hayas configurado tu base de datos, recibirás información de conexión como la URL de conexión, nombre de usuario, contraseña y nombre de la base de datos. Estas son credenciales sensibles que debes proteger. ⚠️

Añade estas credenciales de conexión a un archivo llamado ".env" en la raíz de tu proyecto, siguiendo este formato:

DATABASE_URL=postgresql://usuario:contraseña@host:puerto/nombre_base_datos 
DATABASE_USER=tu_usuario 
DATABASE_PASSWORD=tu_contraseña

El archivo .env es especial porque está configurado para ser ignorado por Git (a través del archivo .gitignore), lo que significa que estas credenciales confidenciales estarán a salvo de ser enviadas accidentalmente a un repositorio público. Tu aplicación podrá acceder a estos datos durante el desarrollo, pero nadie más podrá verlos si compartes tu código.

6. Aprende a tomar decisiones de ingeniería

Eres el conductor de alto nivel de una herramienta poderosa, no un programador "a la ligera". Una vez que tu SaaS (Software as a Service) esté en MVP (Producto Mínimo Viable) o tu sitio web esté listo para funcionar, piensa en dónde podrían surgir problemas potenciales.

Para mí, estos suelen estar relacionados con los costos. Encuentra un buen equilibrio entre soluciones que sean fáciles de implementar y aquellas que sean rentables. Así es como puedes comenzar a construir tus propios stacks personalizados con el tiempo.

Por ejemplo, un proyecto que podría costarte más de 1.000 € en Vercel, podría costar tan solo 5 EUR por mes en Cloudflare. Hay una curva de aprendizaje, pero a medida que mejores, podrás resolver problemas más complejos con el tiempo.

7. Busca siempre en GitHub proyectos de código abierto de otras personas

Esta es una de las mejores maneras de aprender y acelerar tu crecimiento como desarrollador. Los proyectos de código abierto son como libros de texto gratuitos: te dan ejemplos del mundo real de cómo los desarrolladores experimentados estructuran su código, resuelven problemas e implementan mejores prácticas.

Puedes aprender mucho leyendo el código, estudiando el historial de commits y incluso contribuyendo al proyecto si te sientes lo suficientemente seguro. Además, es una excelente manera de construir tu portafolio y conectarte con otros desarrolladores.

Dónde empezar: GitHub Explore te permite descubrir proyectos populares en diversos lenguajes y tecnologías.

8. Construye un sistema de revisión de código asistido por IA

Una de las estrategias más efectivas es establecer un flujo de trabajo de revisión de código con IA:

Implementa un ciclo de desarrollo-revisión-mejora

Después de escribir una función o componente:

1. Solicita una revisión de código: Pide a la IA que revise tu código usando un prompt como:

   Revisa el siguiente código, teniendo en cuenta: 
   - Posibles bugs o edge cases 
   - Optimizaciones de rendimiento 
   - Mejoras en legibilidad y mantenibilidad 
   - Adherencia a mejores prácticas [TU CÓDIGO AQUÍ]

2. Implementa mejoras iterativas: Incorpora las sugerencias relevantes y vuelve a solicitar revisión hasta que estés satisfecho.

3. Solicita explicaciones detalladas: Para sugerencias que no entiendas completamente, pide a la IA que explique el razonamiento con ejemplos.

Este enfoque te ayuda a desarrollar un "ojo crítico" para el código y acelera significativamente tu desarrollo como programador.

Automatiza esta revisión con Git Hooks

Para los más avanzados, puedes configurar Git pre-commit hooks que ejecuten automáticamente una revisión de IA de tu código antes de cada commit, asegurando que mantengas un alto estándar de calidad.

9. Desarrolla habilidades de arquitectura de software con IA

Una recomendación valiosa del repositorio Tips-Tricks-for-AI-Coder es usar la IA para aprender arquitectura de software:

Diseña antes de codificar

Antes de comenzar un nuevo proyecto o característica, utiliza la IA para explorar diferentes enfoques arquitectónicos:

Prompt efectivo: "Voy a desarrollar [descripción del proyecto]. Muéstrame 3 posibles arquitecturas para implementarlo, incluyendo sus ventajas, desventajas y casos de uso ideales. Para cada arquitectura, proporciona un diagrama de alto nivel y explica cómo manejaría: escalabilidad, mantenibilidad y seguridad."

Este ejercicio te ayuda a:

• Considerar múltiples soluciones antes de comenzar

• Entender los trade-offs de diferentes enfoques arquitectónicos

• Desarrollar el pensamiento de "varios pasos adelante" que caracteriza a los desarrolladores senior

Realiza análisis de compensaciones (trade-offs)

Para problemas complejos, pide a la IA que te ayude a evaluar diferentes soluciones:

Estoy considerando dos enfoques para [problema específico]: 
Opción A: [descripción] 
Opción B: [descripción] 
Ayúdame a realizar un análisis comparativo completo, considerando: 
- Rendimiento y escalabilidad 
- Mantenibilidad y legibilidad del código 
- Seguridad y robustez 
- Facilidad de implementación 
- Compatibilidad con mi stack actual: [tu stack]

Este tipo de análisis profundo es exactamente lo que hacen los desarrolladores senior antes de tomar decisiones arquitectónicas importantes.

Conclusión

Esta es una base sólida para comenzar. Una vez que domines estos conceptos básicos, puedes concentrarte en aprender principios de ingeniería de software más avanzados, como:

• Alojamiento en plataformas de nivel empresarial como AWS, Vercel o Cloudflare

• Configuración de tus propios servidores desde cero

• Construcción de tus propios stacks de desarrollo

Pero por ahora, quería compartir esta guía rápida para cualquiera que esté atrapado en el purgatorio de la programación "Vibe Coding". En lugar de dar vueltas tratando de arreglar código que rompiste inadvertidamente, tómate el tiempo para aprender cómo funcionan algunas de estas herramientas y prácticas. Adoptarlas será un cambio absoluto en tu forma de trabajar.

Recuerda: la programación no se trata solo de escribir código, sino de construir sistemas robustos, mantenibles y eficientes. Con práctica consistente y las herramientas adecuadas, puedes evolucionar de principiante a desarrollador senior en menos tiempo del que piensas.

---

❤️ Gracias por leer La Mafia IA.

Si te ha gustado esta edición, no te olvides de dar al ♡ y de compartirla por redes sociales o por email con otras personas a las que creas que les pueda gustar.

También nos gustaría escuchar tus opiniones y sugerencias, así que no dudes en responder a este correo. O dejar un comentario abajo.

Si quieres mantenerte al día en IA:

• 📺 Youtube: IA para emprendedores en Youtube

• 📢 Comunidad en Telegram: https://t.me/AImafiaClub. (+1,6k 💪🏾)

• 🐦 X: @alex_dc y @aimafiaclub

Nos vemos en la próxima edición de La Mafia IA… (ya somos +4.000 🧑‍💻)

🚫🤖 PD: Este correo electrónico fue escrito totalmente por un humano. En concreto por mi ☝️ @alex_dc 😉