Vibe Coding Tutorial and Best Practices (Cursor / Windsurf)

Introducción al Vibe Coding

¿Qué es el Vibe Coding?

• El "Vibe coding" se refiere a utilizar un agente de IA para realizar la codificación, minimizando la escritura manual de código.

• Este enfoque implica que el agente complete automáticamente fragmentos de código en lugar de solo ayudar con partes específicas.

Configuración y Modelos

• Se utilizan modelos CLA 3.7, especialmente la versión "thinking", en plataformas como Cursor o Wind Surf.

• Los usuarios pueden seleccionar entre una lista predefinida de modelos o agregar modelos personalizados utilizando una clave API de OpenAI.

Uso Efectivo del Agente

Comportamiento Agente y Especificaciones

• Es crucial que el modelo elegido soporte comportamientos "agentes" y llamadas a funciones adecuadamente.

• Se recomienda redactar especificaciones detalladas para las aplicaciones, lo que incluye esquemas de base de datos y puntos finales API.

Integración en Cursor

• Una vez redactada la especificación, se puede pegar en un nuevo proyecto dentro de Cursor.

• Utilizar reglas dentro del IDE ayuda a guiar al agente sobre qué tecnologías usar y cómo estructurar el flujo de trabajo.

Desafíos Encontrados

Problemas con Tecnologías Incompatibles

• A menudo, el agente intentaba resolver problemas cambiando tecnologías (por ejemplo, pasando de SQL a almacenamiento JSON), lo cual generaba confusión.

Implementación de Reglas

• En Cursor, se pueden establecer reglas específicas del usuario o del proyecto para evitar errores comunes durante la codificación.

Preferencias y Estrategias Codificadoras

Formato y Descripción Natural

• Las preferencias codificadoras deben estar bien definidas; esto incluye descripciones naturales que faciliten la comprensión por parte del agente.

Evitar Duplicación

Mejores Prácticas en Entornos de Desarrollo

Separación de Entornos

• La falta de claridad sobre la separación entre entornos de desarrollo, prueba y producción fue un gran aprendizaje. Es crucial mantener estos entornos separados para evitar conflictos.

Cambios Controlados

• Se debe tener cuidado al realizar cambios; solo se deben hacer modificaciones solicitadas o bien entendidas. Cambios menores pueden causar fallos inesperados en otras partes del código.

Enfoque en Tareas Específicas

• Al abordar problemas, es importante centrarse únicamente en la tarea solicitada y no introducir nuevos patrones o tecnologías sin una evaluación previa.

Limpieza del Código

• Mantener el código limpio y organizado es esencial. Evitar reescribir completamente una funcionalidad que ya existe a menos que sea necesario, para prevenir lógica duplicada.

Manejo de Scripts Temporales

• Evitar dejar scripts temporales en el código base. Si un script solo se ejecuta una vez, debe eliminarse después de su uso para evitar desorden.

Refactorización Oportuna

• Archivos grandes (más de 200-300 líneas) deben ser refactorizados antes de alcanzar ese tamaño para evitar complicaciones futuras con pruebas rotas.

Uso Adecuado de Datos Falsos

• No utilizar datos falsos (mock data) en entornos de desarrollo o producción; esto puede llevar a errores ocultos si las pruebas dependen demasiado de datos simulados.

Restricciones Técnicas Claras

• Definir claramente la pila técnica utilizada: Python para backend, HTML/JS para frontend y SQL como base de datos. Esto evita cambios indeseados a soluciones alternativas como almacenamiento JSON.

Preferencias del Flujo de Trabajo

• Seguir un flujo de trabajo claro: enfocarse solo en áreas relevantes al problema actual y escribir pruebas exhaustivas para todas las funcionalidades importantes desde el inicio.

Mantenimiento del Patrón Original

Mejores Prácticas para el Uso de Agentes AI

Contexto y Manejo de Conversaciones

• Es crucial ser consciente de la cantidad de contexto que se proporciona al agente, ya que un exceso puede afectar su rendimiento.

• Iniciar una nueva conversación puede ayudar a mejorar los resultados, pero se pierde el contexto anterior. Es recomendable experimentar con esto.

• Al comenzar una nueva conversación, es importante insertar manualmente las reglas necesarias para mantener el contexto deseado.

Estrategias de Pruebas

• Se sugiere realizar pruebas específicas y enfocadas en pequeñas características o correcciones en lugar de cambios grandes.

• Las pruebas end-to-end son más efectivas que las pruebas unitarias, ya que simulan la experiencia del usuario real.

• Es fundamental supervisar cómo el agente corrige las pruebas, ya que podría afectar negativamente la producción si no se maneja adecuadamente.

Elección de Tecnologías

• Utilizar pilas tecnológicas populares (como Python, HTML y JavaScript) mejora la eficacia del agente debido a la mayor documentación disponible.

• La elección de tecnologías comunes permite un mejor rendimiento del AI al tener más exposición a esos lenguajes.

Ejemplo Práctico

• Se presenta un ejemplo donde se establece una longitud máxima para etiquetas y se realizan pruebas después de implementar cambios.

• El agente tiene acceso a herramientas como lectura y búsqueda de archivos, lo cual facilita su interacción con el código base.

Modos de Ejecución

• Existen diferentes modos para ejecutar cambios: manual (requiere aprobación constante), YOLO (ejecuta automáticamente todo), y uno intermedio que decide qué ejecutar automáticamente.

• Para proyectos en producción, no se recomienda usar el modo YOLO debido a los riesgos asociados con cambios automáticos sin supervisión.

Resumen Final

• A medida que continúas trabajando con el agente, es importante gestionar el contexto para evitar sobrecargas.

¿Cómo optimizar el proceso de codificación con herramientas avanzadas?

Proceso de Iteración y Eficiencia

• El proceso de codificación es lento, pero genera más código en menos tiempo. Cada comando puede tardar entre 2 a 15 minutos en completarse, lo que incluye pruebas y correcciones.

• Una solución potencial es abrir múltiples ventanas de cursor para operar en diferentes ramas simultáneamente, permitiendo trabajar en varias tareas al mismo tiempo.

• Se pueden dar instrucciones específicas como "refactorizar el código" para mejorar la organización sin romper patrones existentes, evitando cambios arriesgados.

• Alcanzar un punto donde hacer cambios se vuelve difícil; muchas iteraciones son necesarias para corregir errores. Conocer estos aspectos previamente podría haber facilitado el progreso.

• La posibilidad de trabajar de manera asíncrona permite realizar otras actividades mientras se espera que las herramientas completen las tareas asignadas.

Herramientas Móviles y Mejores Prácticas

• Se desea una versión completamente alojada que funcione en dispositivos móviles, ya que facilita la codificación legítima desde cualquier lugar.

• Es crucial realizar commits frecuentes para poder revertir cambios si se llega a un estado inestable del código. Esto ayuda a mantener un historial claro del trabajo realizado.

• La función de restaurar puntos de control permite volver a versiones anteriores del código fácilmente, mejorando la gestión del proyecto.