Terminer un side project avec des LLM et Cursor

• Depuis environ 5 ans, l’auteur occupe un rôle d’Engineering Manager et écrit donc moins directement de code dans son activité principale
• En parallèle du travail, il poursuit régulièrement des projets personnels pour entretenir ses réflexes de programmation et consolider ses compétences techniques
• Par le passé, les contraintes de temps faisaient souvent avancer les projets lentement, avec de nombreux abandons avant la finalisation
• Mais en 2024, il a pris l’habitude de créer et déployer plus rapidement les outils dont il a besoin, jusqu’à réellement « terminer » une première version

Exemples récents de side projects terminés

• jsonplayground.com : un formateur JSON qui propose aussi des fonctionnalités JQ exécutées dans le navigateur (via WebAssembly), sans envoyer les données à l’extérieur
• webtomarkdown.com : convertit des fichiers en Markdown ou extrait une partie d’un site web en Markdown afin de la transmettre comme contexte à un LLM
• Une maquette d’amélioration du design de la page du club aéronautique Evergreen Soaring
• Une extension Chrome pour automatiser les réponses aux messages envoyés au club aéronautique
• fitinterval.com : fournit une fonction de minuteur à intervalles pour l’entraînement

Pourquoi utiliser des LLM et Cursor IDE

• Les LLM augmentent fortement la productivité sur les side projects
• En particulier, Cursor IDE rend très pratique l’utilisation d’un LLM pour le travail de développement
• Cet article partage le flux global de création d’un nouveau projet afin d’aider les lecteurs à l’appliquer eux-mêmes
• Les LLM ne sont pas utiles dans tous les cas ; il faut les essayer soi-même pour décider où les utiliser

Projet d’exemple : un site web de suivi d’habitudes

• L’auteur souhaite reproduire sous forme de site web l’application de suivi d’habitudes qu’il utilise actuellement
• Toutes les données sont stockées sur l’appareil local, dans une logique de respect de la vie privée

Commencer par définir les spécifications

• Il commence par donner une brève description à ChatGPT, puis précise les spécifications de l’application au fil des questions complémentaires
• Une fois le projet suffisamment détaillé, il demande une version structurée « assez claire pour qu’une autre personne puisse construire l’application complète à partir de cette seule spec »
• Il indique aussi son intention d’utiliser TypeScript, React et Tailwind CSS afin de générer une spec alignée sur cette stack technique
• La spécification finale est conservée dans SPEC.md pour servir de référence pendant le développement

Bootstrap du projet

• Il utilise Vite pour mettre rapidement en place l’ossature du projet
• Il lance la configuration initiale avec la commande npm create vite@latest ., puis place SPEC.md dans le dossier du projet
• Dans Composer de Cursor IDE, il s’appuie sur la fonction d’agent pour automatiser la configuration de Tailwind et la modification des fichiers de base
• Cela permet d’implémenter rapidement une première version avec la disposition UX prévue, l’usage de localStorage, l’export Markdown, etc.

Itérer par petites unités

• Plutôt que de demander trop de fonctionnalités d’un seul coup, il découpe les améliorations nécessaires et demande au LLM des mises à jour successives
• Par exemple, les changements UX ou les corrections de bugs sont séparés en petites tâches à traiter via les modes Chat ou Composer
• Il joint aussi des images dans Chat pour décrire le design souhaité et demande au LLM de l’implémenter en code

Mettre en place le déploiement continu

• En s’appuyant sur GitHub Actions, il configure un déploiement automatique vers GitHub Pages après build dès qu’un commit arrive sur la branche main
• Dans Cursor, il fournit au LLM en référence le lien d’un fichier .yml d’un autre dépôt afin qu’il s’en inspire pour construire le pipeline de déploiement

Conseils généraux

• Commencer par formaliser avec un LLM la vue d’ensemble du projet et ses détails, puis conserver cela comme contexte pour la suite
• Utiliser des outils ou des templates open source pour le bootstrap et la structuration du projet
  • Préparer d’un coup les outils de développement essentiels et l’arborescence, en suivant un modèle de projet maintenable
• Utiliser Cursor Composer (mode agent) pour démarrer rapidement le projet
• Combiner Claude-3.5-Sonnet et o1
  • Utiliser o1 pour les brouillons larges et la première ébauche
  • Réaliser environ 80 % des modifications et améliorations détaillées avec Claude-3.5-Sonnet
• Choisir le mode adapté (Chat, Composer normal, Composer agent)
  • Chat : quand une modification doit être faite à un emplacement précis et que le résultat doit être vérifié à chaque fois
  • Composer (normal) : quand il faut ajouter une fonctionnalité impliquant plusieurs fichiers ou effectuer des changements multifichiers
  • Composer (agent) : encore peu utilisé, mais utile quand il faut automatiser l’exécution de commandes, le lint ou des corrections répétées (de préférence en gardant des tâches petites et bien séparées)
• Lorsqu’on fournit du contexte, joindre des fichiers, documents ou liens précis
  • Si nécessaire, configurer le mode Chat pour parcourir toute la base de code afin que le LLM puisse rechercher du code adapté au contexte et proposer des modifications pertinentes
• Conserver la documentation du projet au format Markdown (SPEC.md, etc.) afin de pouvoir l’inclure dans le contexte
• Utiliser un fichier .cursorrules dans le dossier du projet
  • Pour interdire l’usage de certaines bibliothèques ou imposer l’utilisation de Tailwind, de la bibliothèque de composants shadcn, etc.
  • En définissant à l’avance les règles à refléter dans les prompts, on obtient plus souvent des résultats alignés avec la direction souhaitée
• Travailler en gardant une compréhension globale du code
  • Maintenir la qualité et la structure du code pour éviter les situations où le LLM n’arrive pas à déboguer
  • Continuer à découper le travail en petites unités et, si besoin, utiliser le LLM pour le refactoring ou la séparation en modules

Conclusion

• En terminant rapidement les projets de cette manière pour produire une version déployée, il devient beaucoup plus facile de les reprendre même après une pause
• L’habitude de terminer de petites choses aide à garder de l’élan, tout en apportant rapidement de petites réussites motivantes

[fbtmdxor]

Merci pour ces bonnes informations !

[ragingwind]

Les démarches qu’on voit sont assez similaires.

[netcleaner]

J’ai récemment essayé de créer un petit projet avec Cursor et un LLM en utilisant une méthode similaire à celle décrite ci-dessus, et j’ai trouvé cela extrêmement productif.
En créant un SPEC ou un PRD avec un LLM, en l’incluant comme contexte dans Cursor, puis en définissant avec cursorrules les règles sur les technologies à utiliser, j’ai pu confier les tâches une par une via Composer, et le code produit était cohérent de bout en bout.