Curso gratuito · Actualizado en septiembre de 2026
Nivel: Principiante · Duración: 6 lecciones · 4-5 horas con las prácticas · Requisitos: un ordenador y una cuenta de email
Al terminar sabrás:
- Qué es el vibe coding y qué puedes construir sin programar
- Elegir entre Lovable, Bolt, Claude, ChatGPT, Cursor o Claude Code
- Crear, probar y publicar tu primera app paso a paso
- Guardar datos y publicar con seguridad y cumpliendo el RGPD
Este curso te lleva de cero a tener una web o app publicada, creada con IA y sin escribir código. Cada lección incluye instrucciones paso a paso, enlaces a las herramientas y una práctica. Al final tendrás un proyecto real funcionando.
📑 Índice del curso
- Qué es el vibe coding y qué puedes construir
- Elige tu herramienta (comparativa y enlaces)
- Antes de escribir el primer prompt: la ficha de producto
- Tu primera app en Lovable, paso a paso
- Alternativa sin registro: crea una app dentro de Claude o ChatGPT
- Datos, formularios y seguridad antes de publicar
- Test de repaso
- Recursos y enlaces
Lección 1. Qué es el vibe coding y qué puedes construir
El término vibe coding se popularizó en 2025 para describir una forma nueva de crear software: tú describes lo que quieres en lenguaje natural y una IA escribe, ejecuta y corrige el código. Tu papel pasa a ser el de director de producto: decides qué se construye, pruebas el resultado y pides cambios.
Cómo funciona por dentro (sin tecnicismos)
Cuando escribes «crea una web para mi cafetería con carta y horario», la herramienta hace varias cosas seguidas:
- Interpreta tu petición y decide la estructura (páginas, secciones, estilos).
- Genera el código (normalmente HTML, CSS y JavaScript, o un framework como React).
- Lo ejecuta en una vista previa para que veas el resultado al momento.
- Corrige errores automáticamente cuando algo falla.
- Guarda cada versión para que puedas volver atrás.
Qué puedes construir sin saber programar
- Webs sencillas: página de un negocio, portfolio, página de un evento, landing page de un producto.
- Calculadoras: presupuestos de reformas, precio de un seguro orientativo, calorías de un menú, comisiones.
- Formularios avanzados: reservas, encuestas, inscripciones con varias pasos.
- Herramientas internas: un panel para ver las ventas de una hoja de cálculo, un control de turnos, un inventario.
- Prototipos: la primera versión de una app para enseñársela a socios o inversores.
- Juegos y material educativo: cuestionarios, fichas interactivas, juegos para clase.
Qué conviene dejar a profesionales (o revisar con ellos)
- Apps que cobran dinero o guardan datos de tarjetas.
- Apps con datos de salud, menores o información muy sensible.
- Sistemas que deben soportar miles de usuarios o funcionar 24/7 sin fallos.
💡 Consejo: el vibe coding no elimina la necesidad de pensar. Las mejores apps salen de personas que tienen muy claro el problema que resuelven, no de quien mejor escribe prompts.
Lección 2. Elige tu herramienta (comparativa y enlaces)
Hay dos familias de herramientas. Constructores en el navegador, pensados para quien no programa, y editores y agentes de código, pensados para quien quiere más control. Empieza por la primera familia.
Constructores en el navegador (recomendado para empezar)
- Lovable: el más popular entre personas sin perfil técnico. Genera webs y apps completas, con vista previa en directo y publicación en un clic. El plan gratuito incluye 5 créditos al día (hasta 30 al mes), suficiente para aprender. Registro en lovable.dev/signup.
- Bolt: muy rápido para prototipos. Tiene un plan gratuito con una cantidad limitada de tokens.
- Claude y ChatGPT: ambos pueden crear páginas y pequeñas aplicaciones interactivas dentro de la propia conversación. Es la forma más fácil de probar sin registrarte en nada nuevo.
Editores y agentes (cuando quieras más control)
- Cursor: editor de código con agente integrado. Plan gratuito «Hobby» sin tarjeta y plan individual de 20 dólares al mes.
- Windsurf: alternativa a Cursor con plan gratuito.
- Claude Code: agente de Anthropic para terminal, escritorio y web. Requiere un plan Pro, Max, Team o Enterprise, o cuenta de API.
- Codex: agente de OpenAI incluido en los planes Plus, Pro, Business, Edu y Enterprise de ChatGPT.
- Google Antigravity: entorno de desarrollo con agentes y modelos Gemini.
¿Cuál elijo?
| Si quieres… | Usa |
|---|---|
| Probar en 5 minutos sin registrarte en nada nuevo | Claude o ChatGPT |
| Publicar una web o app real sin programar | Lovable o Bolt |
| Aprender a programar mientras construyes | Cursor o Windsurf |
| Proyectos grandes y tareas largas | Claude Code o Codex |
Precios y límites consultados en septiembre de 2026. Cambian a menudo: revisa la web de cada herramienta.
Lección 3. Antes de escribir el primer prompt: la ficha de producto
El error número uno es empezar con «hazme una app de reservas». La IA rellenará los huecos con supuestos y tendrás que rehacer mucho. Dedica 15 minutos a una ficha de producto. Te ahorrará horas.
Plantilla de ficha (cópiala)
NOMBRE: PARA QUIÉN ES: (quién la usa, en qué dispositivo, qué sabe de tecnología) PROBLEMA QUE RESUELVE: (en una frase) FUNCIONES IMPRESCINDIBLES (máximo 5): 1. 2. 3. LO QUE NO HACE (para no complicarla): PANTALLAS: (lista de páginas o pantallas) DATOS QUE GUARDA: (qué información y dónde) ESTILO: (colores, tipografía, 2-3 webs de referencia) IDIOMA Y TONO DE LOS TEXTOS:
Ejemplo rellenado
NOMBRE: Presupuestador Reformas Ruiz PARA QUIÉN ES: particulares que quieren reformar su casa, desde el móvil, sin conocimientos técnicos PROBLEMA: saber un precio orientativo antes de llamar FUNCIONES: 1. Elegir tipo de obra (baño, cocina, pintura, suelo) 2. Indicar metros cuadrados y calidad (básica, media, alta) 3. Ver precio orientativo al momento 4. Formulario para pedir presupuesto (nombre, teléfono, email, comentario) LO QUE NO HACE: no cobra, no tiene área de clientes PANTALLAS: una sola página con calculadora y formulario DATOS: los envíos del formulario llegan por email ESTILO: azul marino y blanco, moderno, botones grandes IDIOMA: español de España, tono cercano, de tú
✍️ Práctica: tu ficha
Elige un problema real de tu trabajo o de tu negocio y rellena la plantilla. No pases a la siguiente lección hasta tenerla: la usarás como primer prompt.
Lección 4. Tu primera app en Lovable, paso a paso
Vamos a construir el presupuestador de reformas de la lección anterior. Sigue los pasos con tu propia ficha si lo prefieres.
Paso 1. Crea tu cuenta
Entra en lovable.dev/signup y regístrate con tu email, Google, GitHub o Apple. No necesitas tarjeta para el plan gratuito.
Paso 2. Escribe el primer prompt
En la caja principal, pega tu ficha precedida de esta instrucción:
Crea una web de una sola página según esta ficha de producto. Diseño adaptado primero a móvil. Usa estos precios por m² (básica / media / alta): - Baño: 450 / 650 / 900 € - Cocina: 500 / 750 / 1.100 € - Pintura: 8 / 12 / 18 € - Suelo: 35 / 55 / 90 € Muestra el total con el texto "Precio orientativo, IVA no incluido". [pega aquí tu ficha]
Paso 3. Revisa la vista previa
En uno o dos minutos verás dos paneles: el chat a la izquierda y la vista previa a la derecha. Prueba la calculadora con varios valores y comprueba que los cálculos son correctos (por ejemplo, 5 m² de baño calidad media = 3.250 €).
Paso 4. Itera con cambios pequeños
Pide un cambio cada vez y revisa el resultado antes del siguiente. Ejemplos:
Haz el botón "Calcular" más grande y de color naranja. Añade debajo del precio un texto: "¿Quieres un presupuesto exacto? Rellena el formulario". En móvil, el formulario aparece cortado por la derecha. Corrígelo. Añade una casilla obligatoria "He leído y acepto la política de privacidad" con enlace a /privacidad.
💡 Consejo: para cambios de texto o de color, Lovable permite seleccionar un elemento en la vista previa y editarlo directamente, sin gastar un prompt.
Paso 5. Si algo se rompe
- Describe el error con precisión: qué hiciste, qué esperabas y qué pasó.
- Adjunta una captura de pantalla del problema.
- Si después de dos intentos sigue roto, vuelve a la versión anterior (Lovable guarda todas) y pide el cambio de otra forma.
Paso 6. Prueba antes de publicar
- Prueba todos los botones y enlaces.
- Cambia la vista previa a móvil y tableta.
- Rellena el formulario con datos de prueba y comprueba que llega.
- Lee todos los textos buscando erratas.
Paso 7. Publica
Pulsa Publish (arriba a la derecha), personaliza la dirección tunombre.lovable.app y confirma. Ten en cuenta que la web publicada es una «foto»: cada vez que hagas cambios tendrás que volver a publicar. En los planes de pago puedes conectar tu propio dominio.
✍️ Práctica: publica tu primera versión
Construye tu app a partir de tu ficha, haz al menos 5 iteraciones y publícala. Apunta cuántos créditos has gastado: te ayudará a planificar los siguientes proyectos.
Lección 5. Alternativa sin registro: crea una app dentro de Claude o ChatGPT
Si prefieres no abrir otra cuenta, los asistentes que ya usas pueden crear aplicaciones sencillas.
Con Claude
- Entra en claude.ai e inicia una conversación.
- Pide: «Crea una aplicación web interactiva de una sola página: [tu ficha]. Quiero verla funcionando aquí.»
- Claude generará la app y la mostrará en un panel junto al chat, donde puedes usarla.
- Pide cambios en el mismo chat. Cuando esté lista, puedes publicarla o compartirla desde ese panel, o descargar el código.
Con ChatGPT
- Entra en chatgpt.com y pide lo mismo.
- ChatGPT generará el código y te permitirá previsualizarlo o descargarlo.
Cómo publicar el archivo que te dan
Si obtienes un archivo index.html, puedes publicarlo gratis arrastrándolo a servicios como Netlify Drop o subiéndolo a GitHub Pages.
⚠️ Atención: este método es ideal para herramientas sencillas que funcionan en el navegador. Si tu app necesita guardar datos de usuarios o tener cuentas con contraseña, usa Lovable u otra plataforma con base de datos.
Lección 6. Datos, formularios y seguridad antes de publicar
Dónde se guardan los datos
Una web «estática» (calculadora, página informativa) no guarda nada. En cuanto necesitas guardar reservas, usuarios o pedidos, necesitas una base de datos. Lovable se integra con servicios como Supabase para ello: la propia herramienta te guiará cuando lo pidas («guarda cada envío del formulario en una base de datos y crea una página privada para verlos»).
Lista de seguridad (imprescindible)
- Nunca pegues contraseñas ni claves de API en el chat. Si la herramienta necesita una clave, usa su gestor de «secretos» o variables de entorno.
- Protege las páginas privadas con inicio de sesión. Pide explícitamente: «Asegúrate de que solo los usuarios autenticados pueden ver los datos y de que cada usuario solo ve los suyos.»
- Pide una auditoría: «Revisa esta aplicación como un experto en seguridad. Enumera los riesgos por orden de gravedad y corrige los críticos.»
- Cumple el RGPD: si recoges datos personales, añade política de privacidad, casilla de aceptación y no pidas más datos de los necesarios.
- Haz copias: conecta el proyecto a GitHub si la herramienta lo permite, para tener el código a salvo.
Cuándo pedir ayuda profesional
Si tu app gestiona pagos, datos de salud o datos de menores, o si empieza a tener muchos usuarios, encarga una revisión a un desarrollador. Es barato comparado con el coste de una fuga de datos.
Siguiente nivel
Cuando tu proyecto crezca, puedes descargar el código y seguir en un editor como Cursor o con un agente como Claude Code. Lo explicamos en el curso de IA para programadores.
✍️ Práctica: proyecto final
- Añade a tu app un formulario que guarde los envíos.
- Pide la auditoría de seguridad y aplica las correcciones.
- Publica la versión 2 y compártela con tres personas.
- Recoge sus comentarios y haz la versión 3.
Test de repaso
Comprueba lo que has aprendido. Pulsa en cada pregunta para ver la respuesta.
1. ¿Qué es lo primero que deberías preparar antes de escribir el primer prompt?
Una ficha de producto: para quién es, qué problema resuelve, 3-5 funciones imprescindibles, pantallas, datos y estilo.
2. ¿Por qué conviene pedir un cambio cada vez?
Porque así puedes comprobar cada cambio y, si algo se rompe, sabes qué lo provocó y puedes volver a la versión anterior.
3. Has publicado tu web en Lovable y luego cambias un texto. ¿Se actualiza sola la web publicada?
No. La web publicada es una instantánea: tienes que volver a pulsar Publish.
4. ¿Qué harías si la herramienta te pide una clave de API?
No pegarla en el chat; usar el gestor de secretos o variables de entorno de la herramienta.
5. ¿Qué tipo de apps conviene revisar con un profesional?
Las que manejan pagos, datos de salud o de menores, o que tienen muchos usuarios.
Recursos y enlaces
- Lovable — constructor de apps sin programar (plan gratuito)
- Documentación de Lovable — guías oficiales
- Bolt — prototipos en el navegador
- Cursor — editor con agente
- Claude Code – guía de inicio — instalación y primeros pasos
- Codex CLI — agente de código de OpenAI
- Netlify Drop — publica un HTML arrastrándolo
- Supabase — base de datos para tus apps
- Comparativa de herramientas (Appwrite) — análisis independiente
🎓 ¡Enhorabuena! Si has seguido las prácticas, ya tienes una app publicada. Sigue aprendiendo con el curso de IA para programadores o el de automatización con IA.