Crear una página completa con un solo prompt es posible cuando tu agente IA conoce las reglas de tu proyecto. Con cursor rules bien definidas, el agente entiende la estructura, los componentes, los estilos y las pruebas unitarias que tu equipo usa, y replica ese estándar sin que tengas que repetirlo cada vez. Esto es útil para desarrolladores que quieren acelerar la construcción de vistas sin sacrificar consistencia.
Qué hace un agente IA cuando ya tiene reglas asignadas
Una vez que el agente comprende la guía de componentes, la guía de estilos y la guía de test, puedes pedirle tareas más ambiciosas en un solo prompt. En el ejercicio se construye una página de detalle de clase que aún no existía en el proyecto, mientras que la landing de cursos y la de detalle de curso ya estaban listas.
El prompt pide cosas concretas:
- Crear una página que responda a la URL
clases/:classID usando rutas dinámicas.
- Consumir el endpoint
GET que devuelve la información de la clase.
- Incluir un reproductor de video, un botón para regresar a la landing del curso, y mostrar título y descripción.
- Generar los test unitarios correspondientes.
¿Qué son las cursor rules? Son reglas que le indican a tu agente IA cómo está estructurado tu proyecto: cómo nombrar componentes, qué patrón de estilos seguir y cómo escribir pruebas. Funcionan como un manual interno que el agente lee antes de generar código.
Cómo construir una página de detalle de clase con un solo prompt
El agente recibe la instrucción y trabaja durante algunos minutos. Al terminar, entrega varios artefactos alineados con las reglas del proyecto.
Qué archivos genera el agente automáticamente
Estos fueron los entregables del proceso:
- Un componente
VideoPlayer con su lógica de reproducción.
- La página de detalle de clase usando rutas dinámicas.
- Los estilos CSS asociados a la página y al reproductor.
- Los test unitarios para la página y para el componente, ubicados dentro de la misma estructura de carpetas.
Aquí aparece un punto interesante: los test quedaron junto al código y no en una carpeta test separada. Esa es una señal clara de que las reglas se pueden iterar para que el agente coloque las pruebas donde tu equipo las quiere.
Cómo verificar que la página funciona
Al arrancar el servidor, la landing de cursos responde como siempre. Al navegar a la URL de clases con el ID 19, aparece el reproductor de video, el título, la descripción y el botón para volver al curso. El agente cumplió el contrato del prompt.
¿Por qué importa que el agente respete las cursor rules? Porque garantiza que el código generado se vea y se comporte como el resto del proyecto. Sin reglas, cada generación es una sorpresa; con reglas, es una extensión predecible de tu base de código.
Dónde puedes iterar tus reglas para mejorar el resultado
El resultado funciona, pero hay espacio para refinar. Estas son tres áreas claras de mejora:
- Ajustar la regla de test para que las pruebas vivan en una carpeta dedicada si tu equipo lo prefiere.
- Enriquecer la regla de CSS para que la página luzca con mejor jerarquía visual y espaciado.
- Definir convenciones adicionales para componentes nuevos como el
VideoPlayer, incluyendo props esperadas y estados de carga.
La idea es que cada iteración de las reglas eleva la calidad del próximo prompt. Tu agente no se vuelve más inteligente: tus instrucciones se vuelven más precisas.
Este flujo es tu desafío: toma el resultado, mejora las reglas y genera la siguiente página con un prompt aún más corto. ¿Qué regla mejorarías primero en tu proyecto? Cuéntalo en los comentarios.
