Tutorial interactivo para Kiro
De vibe coding
a software real
3 fases · 9 misiones · 45 minutos
Tutorial interactivo para Kiro
3 fases · 9 misiones · 45 minutos
Un prompt. Treinta segundos. App funcionando. Asi arranca el vibe coding: le dices que quieres y aparece.
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).
"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
Sin convenciones, cada prompt produce codigo distinto. El steering es el "que quiero": reglas que Kiro lee automaticamente en cada interaccion.
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:
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.
"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
El vibe coding es rapido pero impredecible. El spec-driven development invierte tiempo al principio para que despues la ejecucion salga bien.
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:
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
"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)
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.
Cuando guarde un archivo JavaScript, revisa si hay errores o funciones sin documentacion JSDoc y avisame en el chat.
Pruebalo:
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.
"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
La IA generica aprueba cualquier cosa. Un agente es un "quien": una personalidad con criterio propio que actua segun las reglas que le definas.
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:
@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.
"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
Necesitas un dato, sales al browser, abres 5 pestanas, pierdes el flow. Kiro busca en internet directo desde el 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.
"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
El steering dice "que quiero". La skill dice "como se hace algo especifico": conocimiento de dominio que Kiro activa cuando lo necesita.
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:
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".
"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
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.
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
.kiro/settings/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.
"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
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.
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
"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
9 features desbloqueadas · 3 fases completadas
“Eso no es vibe coding. Eso es software.”
Lo que aprendiste