Saltar al contenido principal

Lab 1: Crear el juego con Vibe Coding

Un prompt. Treinta segundos. Juego funcionando. Así arranca el vibe coding: le decís qué querés y aparece.

  • Dificultad: Fácil 🟢
  • Tiempo estimado: 15-20 minutos

¿Qué vas a construir?​

Un juego tipo runner en el navegador, solo con HTML, CSS y JavaScript:

  • El fantasma de Kiro corre automáticamente.
  • Salta con la barra espaciadora para esquivar obstáculos.
  • Suma puntaje mientras sobrevive.

Nada de instalar dependencias ni bases de datos: liviano y directo. 👻

Paso 1: ¡A vibear!​

En el panel de chat de Kiro, asegurate de estar en modo Vibe (no Spec) y enviá:

Creá un juego tipo runner: el fantasma de Kiro corre, esquiva obstáculos saltando
con la barra espaciadora y acumula puntaje. Usá solo HTML, CSS y JavaScript.

Resultado: un juego funcional en el navegador. Kiro puede crear un solo archivo o varios (HTML, CSS y JS por separado) — las dos opciones son válidas.

💡 Cuanto más claro, mejor

Si querés, sumale detalles al prompt: colores, velocidad, que el obstáculo aparezca cada cierto tiempo, un mensaje de "Game Over". Recordá lo que aprendiste sobre prompt engineering en el Paso 3.

Paso 2: Ver el juego en el navegador​

Para abrir el juego tenés dos opciones:

Opción A — Live Server (recomendada)

  1. Instalá la extensión Live Server: Cmd/Ctrl+Shift+X → buscá "Live Server" → Instalar.
  2. Clic derecho en index.html → "Open with Live Server".

Opción B — Abrir el archivo directo

  • Abrí index.html en el navegador (Cmd/Ctrl+O y elegí el archivo).

Paso 3: Jugá y pedí cambios​

Probá el juego: ¿salta bien? ¿el puntaje sube? ¿aparecen los obstáculos?

Si algo no te gusta, pedíselo a Kiro en lenguaje natural:

El salto se siente muy lento. Hacelo más rápido y que el fantasma caiga más rápido.
Agregá una pantalla de "Game Over" con el puntaje final y un botón para reiniciar.
Que la velocidad del juego aumente de a poco a medida que sube el puntaje.

Probá, observá y pedí cambios. Repetí hasta que quede como querés.

Verdades del vibe coding 🧠​

Construir hablándole a la IA es potente, pero hay un par de verdades que conviene tener presentes (sacadas del tutorial oficial de Kiro):

📂 Abrí los archivos como contexto

Kiro usa los archivos que tenés abiertos como contexto. Antes de pedir un cambio, abrí los archivos relacionados para que entienda mejor.

🧹 El "vibe refactor"

La IA tiende a duplicar código. Cada tanto pedile que limpie y unifique (DRY): "¿hay código repetido que se pueda refactorizar?".

🔍 Confiá, pero verificá

La IA hace un gran trabajo, pero puede romper algo sin querer. Jugá de nuevo después de cada cambio grande.

🗣️ Pedile que te critique

La IA casi nunca te contradice. Para mejorar de verdad, pedíselo explícito: "¿qué ves mal o que se pueda mejorar en este código?".

¡Listo!​

Creaste un juego funcional hablándole a la IA. En el próximo laboratorio vas a planificar antes de codear con las Specs, para sumarle vidas y dificultad progresiva.