Fantasma de Kiro, mascota del tutorial

Tutorial interactivo para Kiro

De vibe coding
a software real

3 fases · 9 misiones · 45 minutos

¿Necesitas ayuda?
Fase 1 · Vibe Coding

Crea la app con un solo prompt

Un prompt. Treinta segundos. App funcionando. Asi arranca el vibe coding: le dices que quieres y aparece.

En Kiro Abre el chat y asegurate de estar en modo Vibe (no Spec)
Kiro Chat
Crea un juego tipo runner: el fantasma de Kiro corre, esquiva obstaculos saltando con la barra espaciadora y acumula puntaje. HTML, CSS y JS.

Resultado: un juego funcional en el browser. Puede crear un solo archivo o varios — ambas opciones son validas.

Para ver la app: instala la extension Live Server (Cmd+Shift+X → buscar "Live Server"). Click derecho en index.html → "Open with Live Server". Alternativa: abre el archivo directo en el browser (Cmd+O).

Guia del presentador

"Un prompt. Treinta segundos. Tenemos un juego. Pero... ¿que pasa cuando otro dev toca este codigo?"

Es probable que Kiro cree carpetas, tests, package.json, etc. Dejalo — eso es justamente el problema que M2 (steering) viene a resolver. Si alguien pregunta, decir: "Exacto, eso es vibe coding sin reglas."

Para ver la app: Live Server (extension) o abrir index.html directo en el browser (Cmd+O / Ctrl+O).

Pregunta a la audiencia: "¿Quienes ya conocen Kiro? ¿Quienes usan otra herramienta tipo Cursor?"

~3 min

Fase 1 · Steering

Haz que Kiro siga TUS reglas

Sin convenciones, cada prompt produce codigo distinto. El steering es el "que quiero": reglas que Kiro lee automaticamente en cada interaccion.

Kiro Chat
Crea un steering file con las convenciones de nuestro proyecto:
- Proyecto simple: maximo 3 archivos (html, css, js). No crear carpetas src/, tests/, ni package.json
- No crear unit tests ni archivos de configuracion
- Mensajes de error en espanol
- camelCase para variables y funciones
- Comentarios JSDoc en todas las funciones
- try/catch en todo
- Separar html, css y js en archivos distintos
- Color principal #7540b0 y #c2a9df
- Tipografia Roboto

Ahora pruebalo:

Kiro Chat
Si no lo hiciste automaticamente, refactoriza el juego siguiendo las convenciones. Hazme un resumen de los cambios.

Resultado: JSDoc, try/catch, errores en espanol, 3 archivos (html, css, js). Sin carpetas extra, sin tests, sin repetir las reglas.

El steering se activa con "always" (por defecto), "fileMatch" (por tipo de archivo) o "manual". Para convenciones generales, usa always.

Guia del presentador

"No le repeti las reglas. Las leyo solo. Para siempre, para todo el equipo."

Mostrar que el steering aparece en .kiro/steering/ y en el panel lateral. Destacar el contraste con M1: "¿Recuerdan las carpetas, los tests, el package.json? Ahora el steering dice 'maximo 3 archivos, sin tests'. Kiro lo reorganiza solo."

Pregunta: "¿Que convenciones pondrian ustedes? ¿Arquitectura? ¿Seguridad? ¿Patrones de diseno?"

~5 min

Fase 1 · Specs

Planifica antes de codear

El vibe coding es rapido pero impredecible. El spec-driven development invierte tiempo al principio para que despues la ejecucion salga bien.

Vibe coding
Prompt Codigo ?
Spec-driven
Requirements Design Tasks Codigo ✓
Kiro Chat
Crea un Spec para agregar 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. Guardar el high score en localStorage. Mostrar pantalla de game over con opcion de reiniciar. Solo ejecuta las tareas obligatorias.

Kiro te guia por un wizard. Algunos pasos son botones en la UI, otros se escriben en el chat:

Kiro ¿Que tipo de spec?
Feature ✓ Bugfix
Kiro ¿Como empezar?
Requirements-First ✓ Design-First
Kiro Genera requirements
Escribe en el chat Revisa → yes
Kiro Genera design
Escribe en el chat Revisa → yes
Kiro Genera tasks
Escribe en el chat ¿Que ejecutar?
Solo requeridas ✓ Todas
Kiro Ejecuta las tasks

Si algo no te convence, no escribas "yes". Podes pedir cambios en el chat y Kiro regenera ese paso.

Resultado: Kiro crea los archivos del spec (.md) con requirements, design y tasks. Aprueba cada paso, implementa el codigo y veras las mejoras en el juego.

Tambien puedes crear specs desde el panel lateral (Specs → "+"). Documentacion: kiro.dev/docs/specs

Guia del presentador

"No es un prompt que espero que funcione. Es un plan que yo revise y aprobe."

Explicar el flujo de 3 pasos: requirements → design → tasks. Mostrar que el design valida contra los requirements. Destacar que no se ha escrito codigo todavia — estamos refinando.

Recomendar no editar los archivos .md directamente sino por el chat, para mantener coherencia entre las 3 piezas.

Pregunta: "¿Cuantas lineas de codigo nueva hemos escrito? Cero. Estamos refinando."

~15-20 min (la mas larga)

Fase 2 · Hooks

El IDE que vigila por ti

Guardas un archivo con error y te enteras en produccion. Los hooks son acciones automaticas que se disparan ante eventos del IDE: al guardar, al crear, al hacer commit.

Kiro Chat
Cuando guarde un archivo JavaScript, revisa si hay errores o funciones sin documentacion JSDoc y avisame en el chat.

Pruebalo:

Kiro Chat
Crea un archivo ejemplo.js con una funcion simple sin JSDoc y guardalo.

Resultado: al guardar, Kiro detecta el error automaticamente y sugiere correcciones.

Si el hook no se activa, deshabilitalo y vuelvelo a habilitar desde el panel de Agent Hooks. A veces tarda unos segundos en dispararse.

Guia del presentador

"No corri ningun comando. El IDE reacciono solo."

Crear un archivo ejemplo.js en vivo. Usar Cmd+I / Ctrl+I para generar una funcion basica. Guardar y mostrar como se activa el hook. Explicar los tipos de eventos: fileEdited, fileCreated, promptSubmit, etc.

Pregunta: "¿Que hooks les serian utiles? ¿Validar permisos antes de un commit? ¿Revisar que el README este actualizado?"

~5 min

Fase 2 · Agents

Tu senior dev personal

La IA generica aprueba cualquier cosa. Un agente es un "quien": una personalidad con criterio propio que actua segun las reglas que le definas.

Kiro Chat
Crea un agente llamado "revisor" que actue como un senior developer estricto. Solo aprueba codigo con manejo de errores explicito y funciones documentadas con JSDoc.

Invocalo:

Kiro Chat
@revisor revisa game.js y dime si lo aprobarias para produccion.

Resultado: APROBADO o RECHAZADO con detalles. El agente aplica su criterio, no solo ejecuta.

Puedes tener multiples agentes (seguridad, UI, arquitectura) y ejecutarlos en paralelo con una sola instruccion.

Guia del presentador

"Tiene el criterio de tu equipo. No es una IA generica, es TU senior dev."

Mostrar el archivo .kiro/agents/revisor.md. Explicar que es lenguaje natural pero hay que cuidar coherencia (no decir "solo revisa" y despues "aplica cambios").

Pregunta: "¿Que agentes crearian? ¿Seguridad? ¿Arquitectura? ¿Un agente que revise contra la documentacion de una API interna?"

~5 min

Fase 2 · Web Search

Busca sin salir del IDE

Necesitas un dato, sales al browser, abres 5 pestanas, pierdes el flow. Kiro busca en internet directo desde el chat.

Kiro Chat
¿Cuales son las mejores practicas para hacer un juego runner en el browser con buen game feel? Busca en internet.

Resultado: dato real con fuente, directo en el chat. Sin abrir ninguna pestana.

Puedes ser intencional: "busca en internet" o "investiga en la documentacion oficial". Util para validar buenas practicas o datos actualizados.

Guia del presentador

"No abri ninguna pestana. El dato llego al chat."

Mostrar que en Tools aparece "web_search". Esto es util para documentacion, buenas practicas, datos actualizados que el modelo no tiene en su entrenamiento.

~2 min

Fase 3 · Skills

Dale expertise a Kiro

El steering dice "que quiero". La skill dice "como se hace algo especifico": conocimiento de dominio que Kiro activa cuando lo necesita.

Kiro Chat
Investiga en internet como se crean skills en Kiro. Luego crea una skill llamada "game-physics" que sepa sobre gravedad en juegos 2D, curvas de dificultad, hitboxes y game feel.

Pruebalo:

Kiro Chat
El salto del personaje se siente flotante. ¿Como hago que se sienta mas responsivo y satisfactorio?

Resultado: Kiro activa la skill y recomienda gravedad variable (mas fuerte al caer), coyote time y input buffering.

Si la skill no aparece en el panel, dile a Kiro: "revisa que la skill cumpla con la documentacion oficial de Kiro, investiga en internet".

Guia del presentador

"Kiro supo cuando necesitaba ese conocimiento. No se lo tuve que decir."

Mostrar que la skill aparece en .kiro/skills/. Explicar la diferencia: steering = convenciones (el que), skills = conocimiento de dominio (el como), agents = personalidad (el quien).

Probar un salto en el juego para mostrar que ahora se siente mejor fisicamente.

Pregunta: "¿Que conocimiento de dominio tiene su negocio que podria ser una skill? ¿KPIs? ¿Modelos de datos? ¿APIs internas?"

~5 min

Fase 3 · MCP

Conecta con AWS en tiempo real

La IA generica no sabe que servicios existen hoy. Los MCP son conectores que le dan a Kiro acceso a fuentes de informacion externas en tiempo real.

Kiro Chat
Instala el MCP de AWS Documentation a nivel workspace. Crea el archivo .kiro/settings/mcp.json con esta configuracion:

{
  "mcpServers": {
    "aws-docs": {
      "command": "uvx",
      "args": ["awslabs.aws-documentation-mcp-server@latest"],
      "env": { "FASTMCP_LOG_LEVEL": "ERROR" },
      "autoApprove": []
    }
  }
}

Luego busca en la documentacion oficial cual es la mejor forma de hacer deploy de esta app a hosting estatico en AWS.

Workspace = se guarda en el proyecto y se comparte con el equipo via Git. Global = solo en tu maquina. Mas info: awslabs/aws-documentation-mcp-server

¿Prefieres instalar manual? Copia este JSON en .kiro/settings/mcp.json
mcp.json
{
  "mcpServers": {
    "aws-docs": {
      "command": "uvx",
      "args": ["awslabs.aws-documentation-mcp-server@latest"],
      "env": { "FASTMCP_LOG_LEVEL": "ERROR" },
      "autoApprove": []
    }
  }
}

Resultado: respuesta basada en docs oficiales de AWS, con fuentes y opciones comparadas.

Este es solo un ejemplo. Hay cientos de MCPs: AWS tiene mas de 10 (CDK, CloudFormation, Core...) y hay de GitHub, Atlassian, bases de datos, Figma, Slack y mas. Son conectores universales.

Guia del presentador

"Un clic en GitHub. Documentacion oficial, leida en tiempo real, aplicada a tu proyecto."

Abrir github.com/awslabs/mcp y mostrar el boton "Install in Kiro". Recomendar AWS Documentation como primer MCP. Mostrar la alternativa manual con el JSON para quienes prefieran copiar.

Si alguien tiene error 3000: falta uvx. Solucion rapida: pedirle a Kiro que lo instale.

Pregunta: "¿Los MCP son solo de AWS? No. Hay de Atlassian, GitHub, bases de datos... Son conectores universales."

~5 min

Fase 3 · Powers

Empaqueta todo en un clic

Todo funciona pero vive disperso en .kiro/. Un Power empaqueta steerings, skills, agents, hooks y MCPs en un paquete instalable que cualquier dev puede usar.

En Kiro Panel lateral → Powers → busca "Build a Power" → instalar
Kiro Chat
Quiero crear un Power que empaquete todo lo que hicimos: el steering de convenciones, la skill de game physics, el hook de revision al guardar, y el agente revisor. Usa el Power "Build a Power" para crearlo.

Resultado: un paquete instalable en un repo aparte (POWER.md, steering/, mcp.json). Otro dev lo instala desde Powers → "Add power from GitHub" y tiene todo el contexto listo.

Prueba instalando este Power que creamos en el workshop: kiro-game-dev-toolkit. Documentacion: kiro.dev/docs/powers/installation

Guia del presentador

"Con MCP conectaste la IA a una herramienta. Con Powers le diste el manual completo."

Instalar el Power "Build a Power" primero. Mostrar que crea una carpeta con la estructura del power. Explicar que esto se sube a un repo y cualquiera lo instala.

Si hay tiempo: crear una carpeta nueva, instalar el power desde URL y mostrar como la experiencia cambia completamente.

Pregunta: "¿Que powers crearian para su equipo? ¿Uno de seguridad? ¿De arquitectura? ¿De onboarding para devs nuevos?"

~5 min

Fantasma de Kiro celebrando

Mision cumplida

9 features desbloqueadas · 3 fases completadas

“Eso no es vibe coding. Eso es software.”

Lo que aprendiste

Construye
Vibe Coding Steering Specs
Automatiza
Hooks Agents Web Search
Conecta
Skills MCP Powers
Compartir:

Ayuda

Como funciona este tutorial
  1. Abre un proyecto vacio en Kiro con Autopilot activado
  2. Haz clic en "Ask Kiro" para copiar el prompt y pegalo en el chat
  3. Usa las flechas ← → o los botones para navegar entre misiones
Como instalar Kiro

Descargalo gratis desde kiro.dev.

Kiro Chat
Ayudame a instalar Kiro en mi computadora
Como ver la app en el browser

Busca "Live Server" en el panel de extensiones de Kiro (Cmd+Shift+X) e instalala. Click derecho en index.html → "Open with Live Server".

Kiro Chat
Ayudame a instalar Live Server y abrir mi proyecto en el browser
Como descargar el proyecto

git clone https://github.com/deltamacuro/askkiro.git o descarga ZIP.

Que es modo Autopilot

Kiro ejecuta acciones automaticamente. Abajo a la derecha en la barra de estado.

Kiro Chat
Explicame como funciona el modo Autopilot en Kiro

Como funciona

Abre un proyecto vacio

Crea una carpeta vacia y abrela en Kiro. Activa Autopilot (barra inferior) para una experiencia fluida.

Copia y pega en Kiro

Haz clic en "Ask Kiro" para copiar el prompt al clipboard. Pegalo en el chat de Kiro.

Avanza con las flechas

Usa los botones o las teclas ← → para navegar entre misiones.

Necesitas Kiro abierto con un proyecto vacio. Busca "Live Server" en extensiones (Cmd+Shift+X) para ver la app en el browser.

Modo presentador

Notas del presentador

Cada mision tiene una guia con que decir, preguntas para la audiencia y tiempo estimado.

~50 minutos en total

La mision 3 (Specs) es la mas larga (~15-20 min). Las demas van de 2 a 5 minutos. Con preguntas, calcula 1 hora.

Preguntas a la audiencia

Las notas incluyen preguntas sugeridas en lila. Usalas para generar conversacion.

Prepara un proyecto vacio en Kiro con Autopilot activado antes de empezar. Haz las misiones en vivo.

¿Reiniciar progreso?

Tu avance en las 9 misiones se borrara. Vas a empezar desde cero.