Skip to main content

Command Palette

Search for a command to run...

Agentes de código

Desarrollo de funcionalidades

Ahora que entiendes la base de código, es hora de crear algo nuevo.

La clave para lanzar funcionalidades con agentes de programación es dividir el trabajo en pasos que el agente pueda verificar por sí solo. Empieza cada funcionalidad importante con un plan y configura las medidas de protección adecuadas para que el agente pueda detectar y corregir sus propios errores.

Empieza con un plan

Los agentes de programación pueden ayudarte a decidir qué crear antes de empezar a escribir código.

Hay muchas decisiones que debes tomar antes de escribir código. Si tienes una idea para una funcionalidad, quizá quieras crear primero una versión sencilla e iterar sobre ella más adelante. O puede que haya decisiones de diseño específicas que debas tener en cuenta.

Puedes usar agentes de programación para analizar estas decisiones antes de escribir código. Con el modo Plan de Cursor, el agente de programación investigará tu base de código, te hará preguntas aclaratorias y elaborará un plan paso a paso que podrás editar y modificar.

Cuando envías una instrucción al modo Plan, el agente de programación te hace preguntas para definir primero los requisitos:

Questions
¿Dónde se deben almacenar las preferencias de notificaciones?

Una vez que respondes, el agente de programación genera un plan estructurado con hitos que puede revisar y verificar mientras crea la funcionalidad. Este plan es editable, por lo que puedes hacer cambios si algo no parece correcto:

Plansnotification-preferences.md

Preferencias de notificaciones

Descripción general

Añade una página de preferencias de notificaciones a los ajustes de usuario. Los usuarios pueden activar o desactivar las notificaciones por correo electrónico, push y de la app por categoría (marketing, actualizaciones de producto, alertas de seguridad). Las preferencias se almacenan en la base de datos con actualizaciones optimistas de la UI.

Enfoque

Sigue el diseño actual de la página de ajustes en src/pages/Settings.tsx
Usa la tabla UserPreferences con una columna JSONB para la configuración de notificaciones
Reutiliza el componente Toggle existente de nuestra biblioteca de UI

Tareas

Añade la columna notification_preferences a la tabla UserPreferences
Crea el componente NotificationPreferences siguiendo los patrones de Settings.tsx
Añade una ruta de API en app/api/user/notifications/route.ts
Implementa actualizaciones optimistas con el hook useOptimistic existente
Añade pruebas para activar y desactivar preferencias y validar la API

Cursor hace que los planes sean útiles al dividir solicitudes más grandes en pasos más pequeños y verificables de forma independiente. En cada paso, el agente de programación puede medir su progreso, confirmar que se ha completado correctamente y continuar.

Cuándo empezar de nuevo

A veces el agente crea algo que no cumple con lo esperado. En lugar de intentar solucionarlo con instrucciones de seguimiento, vuelve al plan. Revierte los cambios y haz que el plan sea más específico antes de ejecutarlo de nuevo.

Por ejemplo, si pasaste por alto una nota clave sobre la arquitectura o el diseño del sistema, el plan podría crear algo equivocado. Empezar de nuevo desde el plan puede parecer contraintuitivo, pero a menudo es más rápido que parchear un enfoque que partió de una dirección equivocada.

Desarrollo guiado por pruebas con agentes de programación

Los agentes de programación trabajan mejor cuando pueden determinar si su código es correcto. Cuando una prueba falla, el agente de programación puede ver qué salió mal y volver a intentarlo.

Los ingenieros llevan mucho tiempo usando el desarrollo guiado por pruebas, pero no siempre ha sido la forma más popular de escribir código. Con los agentes de programación, es mucho más fácil escribir primero las pruebas, y estas dan sus frutos a medida que crece tu base de código.

  1. Escribe primero las pruebas. Pide al agente de programación que escriba pruebas basadas en las entradas y salidas esperadas. Deja claro que estás haciendo TDD para que no cree funciones simuladas para código que aún no existe.
  2. Confirma que las pruebas fallan. Dile al agente de programación que ejecute las pruebas y verifique que fallen. En este punto no intentas escribir código para la funcionalidad.
  3. Confirma las pruebas. Cuando estés conforme con la cobertura y la calidad de las pruebas, confírmalas. Esto fija los requisitos que el agente de programación deberá implementar.
  4. Pide al agente de programación que escriba código. Dile que haga que todas las pruebas pasen sin modificarlas. Sigue iterando hasta que todo pase.
  5. Confirma el código. Revisa la salida, confirma que se comporte como se espera y confírmalo.
Agent example: TDD: escribir primero las pruebas
Escribe pruebas para una función discountCode() que:
•Devuelva el precio con descuento cuando se le proporcione un código válido
•Lance InvalidCodeError para códigos vencidos
•Aplique correctamente descuentos de importe fijo (p. ej., "10OFF" = $10 de descuento)
•Nunca devuelva un precio negativo (mínimo de $0)
Sigue los patrones de prueba de src/__tests__/pricing.test.ts. NO escribas la función todavía.

Una vez confirmadas las pruebas, dile al agente de programación que escriba el código. Deja claro que debe hacer que todas las pruebas pasen sin modificarlas.

Agent example: TDD: hacer que pasen las pruebas
Haz que pasen todas las pruebas de src/__tests__/discountCode.test.ts. Sigue los patrones de servicio de src/services/PricingService.ts. NO modifiques las pruebas.

¿Por qué funciona tan bien? Porque el agente de programación puede ejecutar pruebas, ver los fallos, ajustar su código y volver a intentarlo. Cada ejecución de pruebas proporciona al agente de programación información concreta. Sin pruebas, no tiene forma de saber si los cambios de código que realizó funcionan.

Este enfoque es especialmente valioso para el código de backend, donde no puedes verificar la corrección mirando una pantalla. Describes el comportamiento esperado en tus pruebas y el agente de programación escribe el código para que se ajuste a él.

En un flujo de trabajo de TDD con agentes de programación, ¿por qué debes confirmar las pruebas antes de pedirle al agente de programación que escriba el código?

Del diseño al código

Los agentes de programación pueden procesar y comprender imágenes. Puedes pegar una captura de pantalla o una maqueta directamente en la instrucción, y el agente puede replicar el diseño a partir de la imagen.

Esto sirve para:

  • Maquetas: Pega un wireframe o una exportación de Figma y pide al agente que cree el componente.
  • Depuración visual: Captura un estado inesperado de la UI y pide al agente que lo investigue.
  • Iteración: Haz una captura de pantalla del resultado actual y describe qué debe cambiar.

También puedes conectar el servidor MCP de Figma para que el agente pueda obtener tokens de diseño, variables y especificaciones de componentes directamente de tus archivos de Figma.

El navegador integrado te permite previsualizar los cambios a medida que el agente los realiza. Con este navegador, el agente puede navegar por páginas, tomar capturas de pantalla y verificar su propio resultado visual. Así, no tienes que enviar manualmente capturas de pantalla al agente.

Patrón de fallo común: desarrollar sin verificar

El mayor riesgo al desarrollar funcionalidades rápidamente es omitir la verificación. Los agentes de programación pueden generar mucho código rápido, pero la velocidad sin corrección puede generar más trabajo a largo plazo.

Aquí tienes una lista concreta de formas de ayudar al agente de programación a verificar su trabajo:

  • Pruebas de lógica y comportamiento
  • Comprobación de tipos para garantizar la corrección estructural
  • Linters para aplicar el estilo y los patrones de código
  • Herramientas del navegador o servidores MCP para obtener comentarios sobre cambios en la UI

Si el agente de programación no puede verificar su salida, acabarás dedicando más tiempo a corregirla.

Qué sigue

Has lanzado una funcionalidad. Pero el software tiene errores, y algunos son difíciles de detectar. En el próximo capítulo, aprenderás métodos sistemáticos para detectar y corregir errores con agentes de programación.

Has completado este capítulo

Sigue aprendiendo