Lab 2: Planificar con Specs
El vibe coding es rápido pero impredecible. El desarrollo guiado por especificaciones (Spec-Driven Development) invierte un poco de tiempo al principio para que después la ejecución salga bien.
- Dificultad: Media 🔔
- Tiempo estimado: 15-20 minutos
Vibe vs. Spec
| Vibe coding | Spec-driven |
|---|---|
| Prompt → Código → 🤔 | Requisitos → Diseño → Tareas → Código ✓ |
| Rápido, ideal para explorar | Estructurado, ideal para funciones importantes y trabajo en equipo |
Objetivo
Crear una Spec para agregarle al juego un sistema de vidas y dificultad progresiva:
- El jugador empieza con 3 vidas y pierde una al chocar.
- La velocidad aumenta cada 100 puntos.
- Se guarda el high score en
localStorage. - Pantalla de Game Over con opción de reiniciar.
Paso 1: Abrir una sesión de Spec
En el chat de Kiro, abrí una sesión nueva, seleccioná el modo Spec y pegá:
Creá un Spec para agregar un sistema de vidas y dificultad progresiva al juego.
El jugador empieza con 3 vidas, pierde una al chocar, y la velocidad aumenta cada
100 puntos. Guardá el high score en localStorage. Mostrá una pantalla de game over
con opción de reiniciar. Ejecutá solo las tareas obligatorias.
Paso 2: Seguir el asistente
Kiro te guía por un wizard. Algunos pasos son botones en la interfaz y otros se escriben en el chat:
| Kiro pregunta | Vos elegís |
|---|---|
| ¿Qué tipo de spec? | Feature (función) ✓ |
| ¿Cómo empezar? | Requirements-First ✓ |
| Genera requirements | Revisá → escribí yes |
| Genera design | Revisá → escribí yes |
| Genera tasks | Revisá → escribí yes |
| ¿Qué ejecutar? | Solo las requeridas ✓ |
Pedí cambios en el chat (por ejemplo: "agregá un requisito para que la velocidad tenga un tope máximo") y Kiro regenera ese paso. Recién aprobás cuando estés conforme.
Paso 3: Revisar cada etapa
Esta es la clave del spec-driven: revisás como si fueras parte del equipo.
- Requisitos: qué tiene que hacer (vidas, dificultad, high score, game over).
- Diseño: cómo se va a construir (variables de estado, lógica de colisión, guardado).
- Tareas: los pasos concretos de implementación.
Para ver mejor los diagramas, usá el botón Open Preview.
Paso 4: Probar el resultado
Kiro crea los archivos del spec (.md) con requisitos, diseño y tareas, y luego implementa el código. Volvé a abrir el juego en el navegador y probá:
- Empezás con 3 vidas y perdés una al chocar.
- Al llegar a Game Over, aparece la pantalla con el puntaje y el botón de reiniciar.
- El high score se mantiene aunque recargues la página.
- La velocidad sube a medida que avanzás.
Podés crear specs desde el panel Specs → "+". Documentación: kiro.dev/docs/specs
¿Qué acabás de ver?
La diferencia entre Vibe (rápido, conversacional) y Spec (estructurado, revisable): en Spec, Kiro planifica primero y vos aprobás cada etapa. Ideal para funciones importantes y para trabajar en equipo.
En el próximo laboratorio vas a automatizar revisiones con Hooks.