Ingeniería Asistida por IA: Desarrollando un Web Runner en HTML5 con el Ecosistema de Kiro
Descubre la implementación paso a paso de Kiro's Ghost Runner para el Kiro University Challenge. Un caso práctico sobre cómo construir software web robusto en HTML5 utilizando el ecosistema y las automatizaciones de Kiro
Sin duda alguna el desarrollo de software asistido por inteligencia artificial ha evolucionado. Hemos pasado del simple autocompletado de código a la era de los IDEs agénticos, donde la IA opera con un contexto profundo del proyecto, respeta reglas de negocio y ejecuta pipelines de validación. Como Full Stack Engineer, busco herramientas que no solo escriban líneas de código, sino que mantengan la integridad de la arquitectura.
Para poner a prueba este nuevo paradigma en un escenario real, decidí participar en el Kiro University Challenge construyendo desde cero Kiro's Ghost Runner. Este juego de acción, desarrollado puramente en HTML5 y Vanilla JavaScript, fue construido implementando un flujo de trabajo avanzado en Kiro.
A continuación, te detallo paso a paso la implementación técnica de esta arquitectura.
Fase 1: Spec-Driven Development (Definiendo el "Qué")
En lugar de interactuar mediante prompts aislados, el proyecto se inicializó con especificaciones formales dentro de la carpeta
.kiro/specs/. Esto garantiza que los agentes tengan un mapa de dependencias claro antes de generar el primer archivo JavaScript.Dentro del archivo
requirements.md, definí las restricciones técnicas del motor:1
2
3
4
5
6
7
8
## Game Loop & Rendering
- El juego debe ejecutarse en un `<canvas>` HTML5 con resolución de 800x400.
- Motor de renderizado: Contexto 2D nativo (estrictamente sin librerías externas como Phaser o Three.js).
- El bucle principal debe utilizar `requestAnimationFrame` para garantizar una sincronización a 60 FPS.
## Entidades y Colisiones
- Implementar detección de colisiones mediante Axis-Aligned Bounding Box (AABB).
- La gravedad (eje Y) debe aplicar un vector de aceleración constante sobre la entidad `Ghost`.
Al procesar este archivo, el agente de Kiro comprende las fronteras técnicas del proyecto, evitando sugerir dependencias externas de npm o lógicas asíncronas innecesarias que afectarían el rendimiento del game loop.
Fase 2: Gobernanza Arquitectónica con Steering Documents
Uno de los mayores retos al programar con IA es evitar la "deriva arquitectónica" (cuando la IA mezcla paradigmas funcionales y orientados a objetos en distintas sesiones). Para solucionarlo, implementé documentos de dirección en
.kiro/steering/.El archivo
architecture.md actuó como un system prompt inyectado dinámicamente en el contexto de Kiro:1
2
3
4
# Reglas de Arquitectura
1. **Encapsulamiento:** Todas las entidades del juego (`Ghost`, `Obstacle`) deben ser instanciadas como clases de ES6.
2. **Desacoplamiento:** La lógica de físicas (`update()`) debe estar estrictamente separada de la lógica de renderizado (`draw(ctx)`).
3. **Manejo de Estado:** Utilizar una máquina de estados finitos (FSM) simple para los flujos principales: `START_SCREEN`, `PLAYING`, `GAME_OVER`.
Gracias a este documento, cada vez que le solicitaba a Kiro refactorizar una mecánica, el código generado mantenía una estructura de clases limpia y separaba rigurosamente la lógica visual de la matemática.
Fase 3: Agent Hooks para Integración Continua Local
Un desafío natural del código generado por IA es la posible introducción de regresiones. Para mitigarlo de forma automatizada, configuré Agent Hooks en
.kiro/hooks/validate-on-save.json. Estos actúan como triggers invisibles en segundo plano:1
2
3
4
5
6
7
8
9
{
"hook": "post-action",
"trigger": "on-file-save",
"pattern": "**/*.js",
"execute": {
"command": "npm run lint && npm test",
"on_failure": "halt-agent-action"
}
}
Si el agente intentaba guardar una actualización en la física del jugador que rompía las pruebas unitarias, el hook bloqueaba la confirmación del archivo y obligaba a la IA a corregir el error basándose de forma autónoma en el stack trace.
Fase 4: Confiabilidad mediante Property-Based Testing (PBT)
En un juego estilo runner, un fallo en la detección de colisiones arruina por completo la experiencia del usuario. Para validar la lógica matemática más allá de pruebas unitarias estáticas, implementé Property-Based Testing en
tests/pbt.test.js.Este enfoque evalúa miles de vectores generados dinámicamente para asegurar que la hitbox del fantasma nunca falle en límites numéricos extraños:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
describe('AABB Collision Property Tests', () => {
it('should always detect overlap when boundaries intersect', () => {
// Generación de miles de pares de rectángulos aleatorios
fc.assert(
fc.property(
fc.record({ x: fc.integer(0, 800), y: fc.integer(0, 400), w: fc.integer(10, 50), h: fc.integer(10, 50) }),
fc.record({ x: fc.integer(0, 800), y: fc.integer(0, 400), w: fc.integer(10, 50), h: fc.integer(10, 50) })
),
(rect1, rect2) => {
const isOverlapping = checkCollision(rect1, rect2);
const mathCheck = (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y);
return isOverlapping === mathCheck; // La propiedad matemática debe cumplirse siempre
}
);
});
});
Fase 5: Empaquetando la Inteligencia con un Kiro Power (Bonus)
Como fase final, consolidé las herramientas específicas del entorno en un power personalizado llamado
ghost-runner-dev. El archivo powers/plugin.json vincula habilidades y agentes especializados del proyecto bajo un mismo manifiesto:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "ghost-runner-dev",
"version": "1.0.0",
"description": "Development power for Kiro's Ghost Runner. Provides canvas tools, game design context, and automation.",
"author": {
"name": "Vicente Guzman",
"handle": "@LucioD3v"
},
"keywords": ["canvas", "game", "physics", "collision", "runner"],
"skills": [
".kiro/skills/game-developer/SKILL.md"
],
"agents": [
".kiro/agents/canvas-reviewer.json",
".kiro/agents/game-designer.md"
]
}
Este manifiesto centraliza el contexto, permitiendo invocar al
canvas-reviewer para auditar fugas de memoria en el lienzo, o consultar al game-designer para ajustar la curva de aceleración y gravedad del juego con comandos sencillos.El Cambio de Paradigma: De Programador a Arquitecto
El verdadero valor de integrar un IDE agéntico como Kiro en tu flujo de trabajo no radica simplemente en "escribir código más rápido", sino en elevar tu rol dentro del proyecto.
Durante el desarrollo de Kiro's Ghost Runner, pasé mucho menos tiempo peleando con la sintaxis del API de Canvas o depurando errores tipográficos en el game loop, y mucho más tiempo iterando sobre el diseño, balanceando la dificultad y refinando la arquitectura global del sistema. Al delegar la ejecución táctica (escribir el código) a los agentes de IA y retener el control estratégico (arquitectura, validaciones, PBT y steering), la productividad se vuelve verdaderamente exponencial.
Este es el futuro del desarrollo de software: entornos donde la IA es un participante activo regido por un manifiesto de reglas que tú, como ingeniero, defines y controlas.
Tu Turno de Construir
Este proyecto para el Kiro University Challenge fue el pretexto perfecto para llevar las capacidades de los agentes al límite. Ahora que las bases están sentadas, el proyecto es de código abierto.
Si estás buscando adentrarte en el desarrollo asistido por IA, entender cómo estructurar tus propios Agent Hooks o simplemente quieres ver cómo interactúan las físicas en un lienzo HTML5 de alto rendimiento, te invito a explorar el código.
- 🌐 Juega y pon a prueba tus reflejos: Kiro's Ghost Runner - Live Demo
- 📂 Haz un fork y crea tus propios agentes: GitHub - LucioD3v/kiro-ghost-runner
¿Qué características le agregarías al juego usando tu propio Kiro Power?
Me encantaría leer tus ideas y discutir sobre arquitectura de agentes de IA en los comentarios.
¡Hasta luego!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article