1. El Flujo de Trabajo Perfecto con Cursor AI [0]

thumbnail Este flujo de trabajo utiliza prompts guardados para planificar, implementar y revisar código, agilizando el desarrollo y mejorando la calidad.

1.1. Preparación del Proyecto [16]

  1. Crear un brief del producto [18]
    • Este brief proporciona el contexto necesario para que Cursor entienda el proyecto al crear nuevas funciones.
    • Se guarda en un archivo para ser referenciado fácilmente.
  2. Definir las reglas de Cursor [19]
    • El archivo de reglas de Cursor contiene instrucciones que la IA sigue en cada chat.
    • Se incluyen las tecnologías a utilizar para asegurar la consistencia en el desarrollo.
    • Se especifica el estilo de programación deseado, como la programación funcional.
  3. Utilizar un kit de inicio [26]
    • Herramientas como create-next-app o create-volo-app configuran un proyecto completo desde el principio.
    • Esto evita la pérdida de tiempo en la configuración inicial y la resolución de problemas de versiones de paquetes.
    • Se recomienda iniciar con algo preconfigurado para un proyecto más consistente.

2. El Flujo de Trabajo de Desarrollo de Funciones [33]

thumbnail Este flujo de trabajo se centra en la planificación, implementación y revisión de funciones utilizando IA.

2.1. Planificación de la Función [34]

  1. Planificar la función [34]
    • Se utiliza un comando específico, como "plan feature", para iniciar el proceso.
    • Se describe la función deseada, incluyendo detalles técnicos como el uso de APIs o modelos específicos (ej. OpenAI API para generar nombres e imágenes de NPCs).
  2. Revisar el plan generado por la IA [36]
    • Cursor analiza el código existente y genera un documento detallado con los pasos técnicos necesarios para implementar la función.
    • Es crucial dedicar tiempo a esta revisión para asegurar que todo esté alineado y corregir cualquier discrepancia.
    • El plan se enfoca en aspectos técnicos, evitando detalles de negocio o gestión de producto para mantener a la IA enfocada en la codificación.
    • Se evita incluir código directamente en el plan para facilitar la lectura y la concentración de la IA en la implementación.
  3. Iterar sobre el plan [41]
    • Se realizan ajustes al plan según sea necesario, pidiendo a Cursor que corrija los puntos identificados.

2.2. Implementación de la Función [43]

  1. Solicitar la implementación del plan [43]
    • Una vez que el plan es satisfactorio, se le pide a Cursor que implemente la totalidad de la función.
    • Para funciones complejas, se pueden definir fases separadas de implementación.
  2. Generación de código por la IA [46]
    • Cursor genera el código necesario y crea los archivos correspondientes para la nueva función.

2.3. Revisión y Corrección de Código [47]

  1. Realizar una revisión de código automatizada [47]
    • Se utiliza un comando de "code review" para identificar problemas comunes que la IA podría introducir.
    • Cursor genera un documento de revisión que resume lo implementado, lo faltante y posibles errores.
    • Es recomendable iniciar una nueva conversación para la revisión, ya que una IA que acaba de implementar una función podría ser menos objetiva.
    • La revisión ayuda a detectar problemas antes de las pruebas manuales.
  2. Corregir los problemas identificados [53]
    • Se pide a la IA que corrija los problemas señalados en la revisión.
    • Cursor puede seguir enlaces a documentación para corregir errores complejos o integrar nuevas especificaciones de modelos (ej. usar GPT image 1 en lugar de Dolly 3).
    • Se pueden pegar errores del log de la consola o del servidor directamente en Cursor para que los corrija.
  3. Prueba manual y revisión final [54]
    • Se realiza una prueba manual de la función para asegurar que todo funcione correctamente.
    • Se revisa el código generado, utilizando el documento de revisión como guía y navegando por los archivos.
    • Se buscan problemas de seguridad, rendimiento o calidad del código.
    • Herramientas como VibeScan pueden escanear el código en busca de problemas adicionales antes del lanzamiento.

3. Demostración Práctica con Cursor AI [62]

thumbnail Esta sección muestra el flujo de trabajo en acción, construyendo un asistente para Dungeon Masters.

3.1. Configuración Inicial del Proyecto [69]

  1. Inicializar el proyecto [71]
    • Se utiliza npx create-volo-app . para configurar un proyecto full-stack con autenticación y base de datos.
    • El proyecto ya incluye un archivo de reglas de Cursor preconfigurado.
  2. Crear el brief del producto [80]
    • Se crea un archivo commands dentro de la carpeta docs.
    • Se usa un prompt guardado para generar el brief, describiendo la aplicación como un asistente para planificar campañas de D&D llamado "Dragon Roll", con herramientas como generador de mapas, NPCs y loot.
    • El brief resultante incluye audiencia, beneficios y una descripción general del proyecto.

3.2. Desarrollo de la Función de Generador de NPCs [97]

  1. Planificar la función del generador de NPCs [98]
    • Se utiliza el comando "plan feature" y se describe la necesidad de una nueva página para generar NPCs usando la API de OpenAI para nombre, descripción e imagen.
    • Cursor analiza los archivos existentes y crea un plan técnico detallado.
    • Se revisa el plan, identificando y corrigiendo la especificación del modelo de generación de imágenes (GPT image 1 en lugar de Dolly 3).
  2. Implementar la función [121]
    • Se le pide a Cursor que implemente el plan.
    • Cursor gestiona una lista de tareas para completar la implementación.
    • Se configuran las claves de la API de OpenAI y se actualiza la base de datos.
  3. Verificar la implementación [136]
    • Al refrescar la aplicación, aparece la nueva función de generador de NPCs.

3.3. Revisión de Código y Corrección de Errores [142]

  1. Realizar revisión de código automatizada [142]
    • Se inicia una nueva conversación y se usa el comando "code review" junto con la referencia al plan de la función.
    • La revisión detecta que se usó Dolly 3 en lugar del modelo GPT image 1 especificado, además de otros problemas menores.
  2. Implementar correcciones [154]
    • Se solicita a Cursor que corrija los problemas encontrados, priorizando el uso del modelo de imagen correcto.
    • Se corrigen errores de integración con la API de imágenes y se ajustan parámetros incorrectos basándose en la documentación de OpenAI.
  3. Probar la función corregida [168]
    • Se vuelve a probar el generador de NPCs, que ahora produce imágenes y descripciones correctas.
    • Se menciona la flexibilidad del flujo de trabajo para iterar y construir fuera del plan original si surgen errores.

3.4. Revisión Final y Escaneo de Código [183]

  1. Revisar el código manualmente [188]
    • Se revisan los cambios realizados, a menudo utilizando el historial de commits de GitHub.
    • Se escanea todo el código con VibeScan para detectar problemas de seguridad, calidad y rendimiento.
  2. Utilizar VibeScan para análisis y corrección [195]
    • Se crea un nuevo proyecto en VibeScan, seleccionando el repositorio.
    • El escaneo identifica varios problemas, incluyendo una URL de Postgress por defecto.
    • Se utiliza la función "autofix" de VibeScan, que crea un pull request para corregir los problemas detectados.
    • Se destaca la importancia de VibeScan para obtener tranquilidad antes de lanzar a producción.

3.5. Conclusión del Flujo de Trabajo [212]

  1. Resumen del flujo de trabajo [212]
    • El flujo de trabajo es directo y efectivo, ofreciendo flexibilidad para modificaciones rápidas o adición de nuevas funciones.
    • Se considera un punto óptimo entre la improvisación y la planificación excesiva.
  2. Recomendación [215]
    • Se anima a probar el flujo de trabajo y compartir opiniones.