PrimerosPasosenVibeCoding
Para Disenadores y Product Managers · 2–4 horas · Grabado
Describe en lenguaje natural que quieres construir, y un modelo de IA genera el codigo. Tu diriges; la IA ejecuta. Sin experiencia en programacion necesaria.
El termino fue acunado por Andrej Karpathy en 2025.
Tu
Director de cine
IA
Actor / Ejecutor
Mentalidad
5 ideas que cambian todo
Antes de tocar una herramienta, necesitas entender como funciona esta nueva forma de construir.
Tu eres el director
Decides que se construye, como se ve y cuando esta listo. La IA no toma decisiones creativas por ti.
La IA no piensa, predice
Genera el texto mas probable segun tu instruccion. No entiende tu negocio — tu si.
Iterar es el proceso
3 a 10 rondas de refinamiento es completamente normal. Cada iteracion mejora el resultado.
El contexto lo es todo
Mas contexto = mejores resultados. Un buen prompt con contexto supera a un prompt "perfecto" sin el.
Tu validas, siempre
Nunca asumir que el codigo funciona. Probar, revisar, validar. Tu eres la ultima linea de defensa.
Precauciones
Lo que debes saber antes de empezar
Vibe coding es poderoso, pero tiene riesgos reales. Conocerlos te hace mejor.
El codigo puede parecer correcto pero tener errores sutiles. Siempre revisa la logica, no solo si "compila".
- Leer el codigo generado antes de usarlo
- Pedir a la IA que explique que hace cada parte
- Probar con datos reales, no solo el "happy path"
Nunca incluyas credenciales, passwords, datos de clientes o informacion sensible en tus prompts.
- Usar datos ficticios en tus prompts
- Revisar que el codigo no exponga secretos
- No subir .env a repositorios publicos
Si solo la IA sabe como funciona tu proyecto, tienes un problema. Documenta decisiones y arquitectura.
- Mantener un README actualizado
- Documentar decisiones de diseno
- Guardar tus prompts efectivos
Vibe coding es una habilidad que mejora con practica. Los primeros resultados seran imperfectos — eso es normal.
- Empezar con proyectos pequenos
- Celebrar el progreso incremental
- No comparar con desarrolladores senior
Programa
5 modulos, un camino claro
De cero a tu primer proyecto construido con IA. Cada modulo se construye sobre el anterior.
Introduccion
Que es Vibe Coding y por que importa ahora
La metafora: Tu = Director de Cine, IA = Actor
Expectativas realistas del curso
Setup: cuentas y herramientas necesarias
Ecosistema de herramientas
Claude, OpenAI Codex, Cursor, Windsurf — cuando usar cada uno
Arbol de decision segun tu perfil
Interfaces conversacionales vs. editores de codigo
Demo: primera interaccion con cada herramienta
Como hablarle a la IA
Anatomia de un prompt efectivo (5 partes)
ROL + CONTEXTO + TAREA + FORMATO + RESTRICCION
Antes vs. despues: prompts malos y buenos
Patrones de iteracion: como refinar sin frustarte
Proyectos practicos
Opcion A: Dashboard de metricas (perfil PM)
Opcion B: Landing page de producto (perfil Disenador)
Opcion C: Flujo de onboarding (ambos perfiles)
Construccion guiada paso a paso con prompts reales
Revision y siguientes pasos
Revision de lo construido — que salio bien, que no
Checklist de calidad post-generacion
Recursos para seguir aprendiendo
Preview: Curso 2 — Agentes de IA
Herramientas
El ecosistema Vibe Coding
No necesitas todas. Necesitas la correcta para ti. Aqui te ayudamos a elegir.
Claude
Modelo conversacional
Mejor para
Explorar ideas, generar codigo inicial, preguntar, debuggear en lenguaje natural
Perfil ideal
Cualquiera que empiece
OpenAI Codex
Modelo especializado en codigo
Mejor para
Generacion tecnica y precisa, tareas de programacion especificas
Perfil ideal
PM con algo de contexto tecnico
Cursor
Editor con IA integrada
Mejor para
Editar, refinar y navegar un proyecto con contexto completo del codigo
Perfil ideal
Quien ya tiene un proyecto y quiere iterar
Windsurf
Agente autonomo
Mejor para
Construir proyectos desde cero con menos intervencion manual
Perfil ideal
Quien quiere delegar mas y supervisar
Arbol de decision
Responde estas preguntas para encontrar tu herramienta ideal
«Quieres escribir/editar archivos de codigo directamente?»
Usa un editor con IA
Usa un chat IA directo
Prompts
Anatomia de un prompt efectivo
Un prompt tiene 5 partes. Dominarlas es la diferencia entre resultados mediocres y resultados excelentes.
Define quien es la IA en esta conversacion
"Eres un desarrollador frontend senior especializado en React..."
Informacion de fondo que la IA necesita
"Estoy construyendo un dashboard para un equipo de ventas de 15 personas..."
Que quieres que haga, especificamente
"Crea un componente de tabla que muestre metricas mensuales con filtros..."
Como quieres la respuesta
"Responde solo con el codigo TypeScript, sin explicaciones, con comentarios inline..."
Que NO debe hacer o limites
"No uses librerias externas. Maximo 100 lineas. Compatible con React 19..."
Comparacion
Antes vs. Despues
3 ejemplos reales de como transformar un prompt vago en uno que genera resultados.
"Hazme una pagina web bonita"
"Crea una landing page en HTML/CSS para una app de meditacion llamada 'Calma'. Hero con imagen de fondo oscura, titulo en blanco, subtitulo en gris claro, y boton CTA azul que diga 'Empieza gratis'. Sin frameworks."
"Arreglalo"
"El boton CTA no se ve en mobile porque el texto se corta. Agrega un min-width de 200px y centra el texto. Muestrame solo el CSS modificado."
"Agregale cosas"
"Al hero actual, agrega debajo una seccion de 3 features en columnas. Cada feature: icono emoji + titulo + descripcion de 2 lineas. Contenido: 1) Sin estres 2) 5 min al dia 3) Para todos los niveles."
Contexto
Como dar contexto
4 formas de darle a la IA la informacion que necesita para generar exactamente lo que quieres.
Wireframe o sketch
"Adjunto wireframe. Respeta la jerarquia visual: logo arriba izquierda, nav derecha, hero centrado."
User story
"El usuario es un PM que quiere ver sus KPIs de un vistazo en menos de 5 segundos."
Referencia visual
"Inspiracion: stripe.com en terminos de limpieza y uso de whitespace."
Design tokens
"Paleta: primario #6B21A8, texto #111827, fondo #F9FAFB. Tipografia: Inter."
Iteracion
El flujo correcto de iteracion
Prompt 1: [Genera el codigo base]
"Sobre lo anterior, cambia SOLO el color del boton a verde #10B981"
"Ahora agrega una seccion de testimonios debajo del hero. Manten todo lo demas."
EVITAR
"Mejoralo" o "Hazlo mejor" — la IA puede cambiar todo sin avisar
Recuperacion
Errores comunes y como recuperarse
Error 01
La IA cambio cosas que no pedi
Solucion
"Tengo la version anterior. Quiero que apliques SOLO este cambio: [X]. No modifiques nada mas."
Error 02
El codigo tiene un error y no se donde
Solucion
"Este codigo da el siguiente error: [pegar error]. Explicame que lo causa y corrigelo."
Error 03
El resultado no se parece a lo que queria
Solucion
Volver a describir con mas detalle. Agregar referencia visual o ejemplo especifico.
Error 04
La IA entro en loop o se contradice
Solucion
Empezar una conversacion nueva. La memoria de contexto se satura.
Error 05
No entiendo el codigo generado
Solucion
"Explica este bloque como si yo no supiera programar. Usa analogias simples."
Proyectos
Elige tu aventura
Tres proyectos reales, tres perfiles distintos. Todos construidos desde cero con prompts durante el curso.
Dashboard de metricas
Construye un dashboard interactivo que muestra KPIs de negocio con graficos, filtros y datos en tiempo real.
Estructura del proyecto
Crea un dashboard HTML/CSS con datos ficticios para un PM. Incluye: 3 KPI cards (usuarios activos: 12,400 / conversion: 3.2% / revenue: $48,200), una seccion de grafica placeholder en azul, y una tabla con 5 filas de eventos ficticios. Diseno limpio, fondo gris claro, cards blancas con sombra. Todo en un solo archivo HTML.
Agrega un filtro de periodo (Hoy / Esta semana / Este mes) como botones en la parte superior. Al hacer click, que cambien los numeros de los KPIs por valores distintos (hardcodeados esta bien).
Cambia los colores a esta paleta: primario #1D4ED8, accent #10B981. Haz que los KPI cards tengan un indicador de tendencia (+12% ↑) en verde si es positivo, rojo si es negativo.
Landing page de producto
Crea una landing page de conversion con hero, features, testimonios y CTA. Diseno dark premium.
Estructura del proyecto
Crea una landing page en HTML/CSS para una app llamada 'Aura'. Es una app de bienestar mental para jovenes profesionales. Hero: fondo degradado de #4F46E5 a #7C3AED, titulo blanco grande 'Encuentra tu calma en 5 minutos', subtitulo gris claro, boton CTA blanco con texto morado que diga 'Empieza gratis'. Navbar transparente con logo y 3 links.
Debajo del hero agrega una seccion de 3 features en grid. Fondo blanco. Cada feature: emoji grande + titulo bold + descripcion de 2 lineas. Contenido: 🧘 Meditaciones guiadas | ✍️ Diario de gratitud | 📊 Tu progreso
Haz la pagina responsive para mobile. En pantallas menores a 768px: features en columna, hero con texto mas pequeno, nav con menu hamburguesa.
Flujo de onboarding
Disena un flujo multi-paso de onboarding con validacion, progreso visual y experiencia guiada.
Estructura del proyecto
Crea un onboarding de 3 pasos en HTML/CSS/JS. Cada paso es un div que se muestra u oculta con JavaScript. Paso 1: Bienvenida con emoji 🎉, titulo 'Hola, [nombre]', subtitulo y boton 'Empezar'. Fondo degradado morado. Barra de progreso en la parte superior que avanza cada paso.
El paso 2 debe mostrar '¿Cual es tu rol?' con 3 cards clickeables: Disenador / Product Manager / Otro. Al seleccionar una, que se marque visualmente (borde de color + checkmark). Boton 'Siguiente' que solo se activa si hay una opcion seleccionada.
El paso 3 muestra '¿Cual es tu objetivo principal?' con 3 opciones. Al terminar, muestra una pantalla de confirmacion con confeti (CSS animation) y un boton 'Ir al dashboard' que muestra una alerta con el resumen.
Ejercicio en vivo
Ejercicio comparativo
10 minutos para entender como cada herramienta responde al mismo prompt.
El prompt
"Crea una tabla HTML con 3 columnas: nombre, rol, email"
Dar el MISMO prompt a Claude y a Codex
Observar como cada herramienta interpreta la misma instruccion
Comparar los outputs
Formato, comentarios, legibilidad — cada modelo tiene su estilo
Abrir el output de Claude en Cursor
Pedir que agregue estilos CSS basicos — ver el poder del editor con IA
Probar Windsurf con un prompt mas largo
Mostrar como genera el archivo completo con menos intervencion
Recursos
Para seguir aprendiendo
Las herramientas evolucionan rapido. Estos son los recursos oficiales para mantenerte actualizado.
Claude — Documentacion oficial
Documentacion oficial de Claude. Guias, API reference, y mejores practicas.
Cursor — Docs
Documentacion de Cursor. Setup, shortcuts, y flujos de trabajo.
Windsurf
El editor con agente autonomo. Descarga y documentacion.
OpenAI Codex — Guia de codigo
Guia oficial de OpenAI para generacion de codigo.
Fireship — Vibe Coding
Tutorial en video: "Fireship vibe coding" — explicacion visual y rapida.
Siguiente nivel
Listo para construir?
Este es solo el comienzo. Despues de dominar Vibe Coding, el Curso 2 te ensenara a construir Agentes de IA que trabajan para ti automaticamente.