Completar side projects con LLM y Cursor

• Desde hace unos 5 años asumió el rol de Engineering Manager, por lo que en su trabajo principal disminuyó la necesidad de escribir código directamente
• Además del trabajo, ha seguido desarrollando proyectos personales para mantener el ritmo de programación y fortalecer sus habilidades técnicas
• En el pasado, por limitaciones de tiempo, el avance de los proyectos solía ser lento y a menudo se detenían antes de completarse
• Sin embargo, en 2024 logró crear y desplegar con relativa rapidez las herramientas que necesitaba, formando por primera vez el hábito de “terminar” una primera versión

Ejemplos de side projects completados recientemente

• jsonplayground.com: un formateador de JSON que además ofrece funciones de JQ ejecutadas dentro del navegador (usando WebAssembly), por lo que no envía datos al exterior
• webtomarkdown.com: convierte archivos a Markdown o extrae partes de un sitio web en formato Markdown para poder pasarlas como contexto a un LLM
• Un borrador de mejora de diseño para la página del club de aviación Evergreen Soaring
• Creó una extensión de Chrome para automatizar la respuesta a los mensajes que llegan al club de aviación
• fitinterval.com: ofrece una función de temporizador por intervalos para hacer ejercicio

Contexto de uso de LLM y Cursor IDE

• Los LLM aumentan mucho la productividad en side projects
• En particular, Cursor IDE hace más cómodo el proceso de usar un LLM para tareas de programación
• En este artículo quiere compartir el flujo general para crear un proyecto nuevo, con la idea de ayudar a que los lectores lo apliquen por su cuenta
• Como los LLM no son útiles en todas las áreas, conviene probarlos directamente y decidir dónde aplicarlos

Proyecto de ejemplo: sitio web para seguimiento de hábitos

• Quiere recrear en formato de sitio web la app de seguimiento de hábitos que usa actualmente
• Todos los datos se almacenan en el dispositivo local, pensando en la privacidad del usuario

Empezar a definir la especificación

• Primero le dio una explicación breve a ChatGPT y, a medida que recibía preguntas adicionales, fue concretando la especificación de la aplicación
• Una vez que el nivel de detalle fue suficiente, pidió que la organizara “de forma que otra persona pudiera construir toda la app solo con esta especificación”
• Indicó que pensaba usar TypeScript, React y Tailwind CSS para generar una especificación basada en ese stack
• Guardó la especificación final en SPEC.md para consultarla durante el desarrollo posterior

Bootstrap del proyecto

• Usó Vite para preparar rápidamente la estructura base del proyecto
• Hizo la configuración inicial con el comando npm create vite@latest . y dejó SPEC.md dentro de la carpeta del proyecto
• En el Composer de Cursor IDE usó la función de agente para automatizar la configuración de Tailwind y la modificación de archivos base
• De esta forma implementó en poco tiempo una primera tanda de funciones, como el layout esperado de UX, uso de localStorage y exportación a Markdown

Trabajo iterativo en unidades pequeñas

• En lugar de pedir demasiadas funciones a la vez, dividió las mejoras necesarias y fue solicitando actualizaciones al LLM de manera secuencial
• Por ejemplo, separó cambios de UX y correcciones de bugs en tareas pequeñas y las indicó mediante los modos Chat o Composer
• También adjuntó imágenes en Chat para explicar el diseño deseado y pidió al LLM que lo implementara en código

Configuración de despliegue continuo

• Tomando como referencia GitHub Actions, configuró el proyecto para que al llegar un commit a la rama main se construya automáticamente y luego se despliegue en GitHub Pages
• En Cursor proporcionó como enlace un archivo .yml de ejemplo de otro repositorio para que el LLM lo usara como referencia al construir el pipeline de despliegue

Consejos generales

• Con un LLM, organiza primero la visión general del proyecto y sus detalles, y guárdalos después como contexto
• Usa herramientas o plantillas open source para hacer el bootstrap del proyecto y definir su estructura
  • Prepara de una vez las herramientas de desarrollo esenciales y la estructura de directorios, siguiendo un patrón de proyecto fácil de mantener
• Usa Cursor Composer (modo agente), entre otros, para iniciar el proyecto rápidamente
• Usa una combinación de Claude-3.5-Sonnet y o1 (modelo)
  • Aprovecha o1 para trabajo amplio de borrador inicial
  • Aproximadamente el 80% de las correcciones y mejoras concretas las hace con Claude-3.5-Sonnet
• Elige el modo adecuado (Chat, Composer normal, Composer agente)
  • Chat: cuando hace falta modificar una ubicación concreta y revisar el resultado de cada cambio
  • Composer (normal): cuando se necesita agregar funciones que abarcan varios archivos o hacer cambios multifile
  • Composer (agente): aunque todavía lo usa poco, sirve cuando hacen falta tareas automatizadas como ejecutar comandos, lint o correcciones repetitivas (aunque prefiere gestionarlas en partes pequeñas)
• Al dar contexto, incluye archivos, documentos y enlaces concretos
  • Si hace falta, configura el modo Chat para que consulte toda la base de código, de modo que el LLM pueda buscar y proponer código acorde al contexto
• Guarda documentos relacionados con el proyecto en formato Markdown (SPEC.md, etc.) para poder incluirlos como contexto
• Usa el archivo .cursorrules dentro de la carpeta del proyecto
  • Para indicar que no se use cierta librería, o para forzar el uso de Tailwind o de la librería de componentes shadcn, por ejemplo
  • Si defines de antemano las reglas que quieres reflejar en los prompts, en la mayoría de las solicitudes podrás guiar el resultado en la dirección deseada
• Trabaja entendiendo el código de forma integral
  • Mantén la calidad y la estructura del código para evitar situaciones en las que el LLM no pueda depurar
  • Sigue dividiendo el trabajo en unidades pequeñas y, si hace falta, usa el LLM para refactorizar o separar módulos

Cierre

• Si terminas y despliegas rápidamente una versión publicable del proyecto con este enfoque, incluso después de una pausa será mucho más fácil retomarlo
• El hábito de completar cosas en pequeño ayuda a mantener el impulso, y permite ver logros pequeños con rapidez para sostener la motivación

[fbtmdxor]

¡Gracias por la buena información!

[ragingwind]

Parece que las formas en que lo intentan son bastante parecidas.

[netcleaner]

Hace poco probé crear un proyecto pequeño con Cursor y un LLM usando un método parecido al descrito arriba, y la productividad fue excelente.
Creé un SPEC o PRD con el LLM, lo incluí como contexto en Cursor, definí con cursorrules las reglas sobre las tecnologías a usar y luego, al ir asignando las tareas una por una mediante Composer, el código salía bien y con consistencia.