Wizeline Tech Talks · 2026
🎸 Vibe Coding

Cómo construir apps sin saber exactamente lo que estás haciendo
(y que funcionen de todos modos)

* Ningún ingeniero de software fue dañado durante esta presentación.

El concepto

¿Qué es Vibe Coding?

"El arte de describirle a una IA lo que quieres, aceptar el código que te da sin entenderlo del todo, y seguir pidiendo más hasta que funcione. Acuñado por Andrej Karpathy, 2025."
🧠
Tú pones la visión
Describes qué quieres, no cómo hacerlo. La IA resuelve los detalles técnicos complejos.
🤖
La IA escribe
Cursor, Claude Code, Copilot generan el código. Tú tomas el rol de director y revisor.
🚀
Velocidad x10
Lo que antes tomaba días, ahora toma horas. O minutos si el prompt está perfectamente diseñado.

El cambio de mentalidad

Cómo cambió nuestro trabajo

😤 Antes (2023)
  • Google + Stack Overflow cada 5 minutos
  • 30 min buscando cómo hacer un date format
  • Leyendo el README de 40 páginas de una librería
  • Escribiendo boilerplate tedioso a mano
  • El temido síndrome del cursor parpadeando
😎 Ahora (2026)
  • "Hazme un componente que haga X"
  • El formato de fecha llega en 3 segundos
  • "Explícame esta librería y úsala por mí"
  • Boilerplate generado al instante con contexto
  • Tú revisas, apruebas, iterar y sigues adelante

El trabajo no desapareció. Cambió a un nivel más alto de abstracción.

No es binario

El espectro del Vibe

¿Cuánto "vibe" le metes a cada tarea del proyecto?

Configuraciones
💯 Full vibe
UI / CSS / Estilos
🔥 Muy alto
CRUD / Integración API
👍 Alto
Lógica de negocio
⚠️ Revisar
Seguridad / Auth / Pagos
🛑 Ojo humano

La habilidad clave

Cómo hacer buenos prompts

1
Sé específico en el resultado, no en los pasos técnicos. ❌ "Usa un for loop para iterar el array..."    ✅ "Quiero un componente de tabla que sea paginado y muestre X"
2
Da contexto de la arquitectura antes de pedir. "Estoy haciendo una app de React con Vite y Tailwind. Tengo este componente actual. Agrégale [feature]."
3
Itera en lugar de reescribir y borrar todo. No borres y repromptees desde cero. Di: "El layout está bien, pero el color está mal, cambia X y agrega Y."
4
Cuando algo no funciona, alimenta a la IA con el error. Literalmente pega el stack trace de la consola y di "fix this". Funciona el 80% de las veces a la primera.

Ahora sí

Demo en vivo 🔥

💻
  • 1 Abrir Cursor con nuestro proyecto starter
  • 2 Prompt inicial: describir la visión general de la app
  • 3 Generar la UI completa usando un solo prompt de contexto
  • 4 Conectar el backend / API de Anthropic
  • ★ Pegar código voluntario del público y roastearlo
  • 5 Fix de bugs en vivo (porque seguro algo explota)

La receta secreta

Los prompts que usamos

Prompt 1 — Setup Base
Crea una app React con Vite y Tailwind CSS. La app se llama "Roast My Code". Tiene una pantalla con: un título divertido, un textarea grande para pegar código, un botón primario que diga "Roastear", y un área de respuesta estilo terminal. Usa un diseño oscuro, moderno y con toques neón.
Prompt 2 — Conexión API
Conecta el botón principal a la API de Anthropic. Cuando el usuario pegue código y presione el botón, manda ese código con este system prompt exacto: "Eres un senior dev súper sarcástico. Destruye este código con humor pero da feedback técnico real y útil al final. Sé gracioso, pero no cruel."
Prompt 3 — Toques Finales (Pulido)
Agrega un loading state con una animación de esqueleto mientras espera la respuesta. Muestra el texto del roast progresivamente con un efecto de máquina de escribir (typing). Agrega un pequeño botón funcional de "Copiar roast al portapapeles".

Honestidad brutal

Lo que nadie te dice del Vibe Coding

🐛
La IA también hace bugs (y son peores)
Genera código que se ve increíblemente correcto pero tiene bugs sutiles de lógica. Tienes que leer lo que apruebas.
🌀
El loop infinito del "Fix"
"Fix this" → "Fix this again" → "Arreglaste el bug 1 pero rompiste el 2". A veces es más rápido meter las manos al código.
📚
Los fundamentos importan MÁS
Entre más sabes de arquitectura y programación, mejores prompts escribes. La IA no es un reemplazo, es un multiplicador de tus habilidades.
✅
La responsabilidad es tuya
La IA puede escribir los tests, pero tú eres quien debe validar que están probando los casos límite correctos.

Guía práctica

¿Cuándo vibear y cuándo no?

✅ Dale sin miedo (Alta Velocidad)
  • Setup inicial de proyectos y boilerplate
  • Componentes visuales de UI y maquetación CSS
  • Integraciones de APIs estandarizadas conocidas
  • Escribir la estructura base de tests unitarios
  • Documentación, JSDoc y comentarios de código
  • Scripts repetitivos de automatización (bash, python)
⚠️ Revisa con cuidado (Pisa el Freno)
  • Lógica de negocio core de la aplicación
  • Flujos de autenticación, tokens y permisos de usuario
  • Queries complejas a base de datos en producción
  • Pasarelas de pago y cálculos financieros
  • Cualquier código que manipule PII (datos sensibles)
  • Implementaciones personalizadas de criptografía

¿Preguntas? 🙋

O mejor aún: ¿alguien en el público tiene código que quiera roastear?


🔥
Repositorio del Demo
github.com/FabricioZAGA/
roast-my-code
📖
Lecturas Recomendadas
• "Vibe Coding" — Andrej Karpathy (2025)
• Documentación oficial de Cursor AI

Tech Stack: Cursor · React + Vite · Tailwind CSS · Anthropic API

DevZAGA | Wizeline Tech Talks 2026