Vibe coding para principiantes: de cero a tu primera app
Vibe coding es describir con palabras normales lo que quieres y dejar que la IA escriba el código. Miras el resultado, dices qué corregir y vuelves a empezar el ciclo. El término lo acuñó el investigador de IA Andrej Karpathy en febrero de 2025. Piensa en ti como productor y en la IA como programador: el productor no toca cada instrumento, pero decide cómo será el tema. Tu trabajo es decidir qué se construye, comprobar que funciona y elegir el siguiente paso.
Curso gratis sobre este temaVibe coding: curso gratisEmpezar el curso →
Lección: vibe coding, qué es y cómo hacer webs con IA
Qué puedes crear y qué necesitas
Una landing (web de una sola página), un bot de Telegram, una calculadora, un minijuego, un tracker de hábitos o un portafolio. Para empezar basta un navegador y una cuenta gratuita en una herramienta de IA. Los planes gratis tienen límites, pero suelen alcanzar para los primeros proyectos.
Paso 0: elige el tipo de herramienta
Las herramientas de IA para programar son de tres tipos:
- Constructor: lo describes con palabras y obtienes una web funcionando en el navegador. Lovable, Bolt, v0, Replit. El inicio más rápido, sin instalar nada, pero con menos control. Ideal para un prototipo o una landing.
- Editor con IA: el proyecto está abierto como archivos y la IA te propone cambios al lado. Cursor, Windsurf, VS Code con Copilot. Ves cada cambio y decides si lo aceptas.
- Agente: recibe una tarea y cambia archivos y ejecuta comandos por su cuenta. Claude Code, Codex y Gemini CLI trabajan en la terminal. Máxima potencia, pero sin Git y sin revisar el resultado es fácil perder la versión que funcionaba.
Una ruta que funciona: haz el primer prototipo en un constructor, exporta el código a GitHub y sigue en un editor o con un agente. Error común: saltar cada día a la herramienta de moda. Mejor un proyecto terminado que cinco abandonados. Lección: constructor, editor o agente
Paso 1: un plan de una página
La IA no lee mentes. Pides «un tracker para el gimnasio» y puede que recibas pagos, chat y ranking cuando solo querías apuntar entrenamientos. Cinco líneas ahorran horas: el objetivo en una frase, para quién es, tres funciones principales, qué no haces ahora y cómo sabrás que está listo. Lección: primero el plan
Paso 2: describe el resultado, una función a la vez
No «haz una web», sino qué exactamente: «Web de una página para una cafetería: menú, dirección, botón de pedido por Telegram, tema oscuro, cómoda en el móvil». Luego pide una función cada vez: primero el esqueleto, después el menú, después el formulario. Un paso pequeño es fácil de revisar y de deshacer. Si algo falla, pega el error completo, no «no funciona». Lección: cómo darle una tarea a la IA
Paso 3: guarda, vuelve atrás, publica
Guarda cada versión que funcione (historial de versiones de la herramienta o Git) para poder volver atrás si un paso nuevo lo rompe todo. El despliegue, es decir, publicar el proyecto para que otros lo abran con un enlace, es el último paso, cuando todo está revisado. Hoy conectas una vez un repositorio de GitHub a un hosting y cada push a la rama principal publica la nueva versión solo. Lección: hosting y despliegue
Paso 4: compruébalo tú
«¡Listo, todo funciona!» de un agente no es una prueba. Puede que no haya ejecutado el código o que haya roto otra página. Abre la vista previa en el móvil y en el ordenador. Primero el camino normal, luego lo raro: un mes sin datos, un nombre larguísimo, doble toque en un botón. Lo que falla suele fallar en lo raro. Pide al agente que escriba tests automáticos para cada función nueva. Lección: no te fíes de su palabra
Por qué el vibe coding tiene mala fama: 4 errores
La IA escribe código que funciona, pero no siempre es seguro. Estos cuatro errores explican la mayoría de historias de terror:
1. Una clave en el código. Una clave de API en el código de la página o en un repositorio público la encuentran bots que escanean GitHub, y sus peticiones las pagas tú. Los secretos viven solo en el servidor. ¿Se filtró una clave? Revócala ya y crea otra. Lección: claves y secretos
2. Una base de datos sin reglas de acceso. Cualquiera puede descargar los datos de todos.
3. Un panel de administración escondido quitando el botón. La dirección /admin se puede escribir a mano. La comprobación «¿de verdad es admin?» debe hacerse en el servidor en cada petición.
4. Confiar en el navegador. Con las herramientas de desarrollador (F12) un usuario puede cambiar cualquier petición: el precio, su id, el rol «admin». El servidor debe comprobar quién pide qué y calcular los precios él mismo. Lección: seguridad de la app
Y el dinero: las API de IA de pago cobran por tokens, y si toda una clase hace cientos de preguntas la noche antes de un examen, la cifra se nota. Pon un límite de gasto y una alerta de facturación cuando el servicio lo permita. Lección: dinero y límites
Preguntas frecuentes
¿El vibe coding es malo?
No por sí mismo. Tiene mala fama por proyectos publicados sin revisar: claves en el código de la página, bases de datos sin reglas de acceso, comprobación de admin solo en la interfaz. Si pruebas cada función y guardas los secretos en el servidor, es una forma rápida y legítima de crear.
¿Necesito saber programar para empezar con vibe coding?
No. Para un primer proyecto bastan un navegador y una cuenta gratuita en una herramienta de IA. Entender lo que pasa te ayuda a ver antes dónde se equivocó la IA, por eso el curso explica Git, hosting y API con palabras sencillas.
¿Cuál es la mejor herramienta de vibe coding para principiantes?
Para la primera tarde, un constructor en el navegador como Lovable, Bolt, v0 o Replit: te da una página funcionando lo más rápido y sin instalar nada. Cuando el prototipo funcione, pasa el código a GitHub y sigue en un editor con IA o con un agente.
Curso gratis sobre este temaVibe coding: curso gratisEmpezar el curso →