Le guide du vibe coder (Version Cursor)

Voici le guide du vibe coder, directement traduit depuis le guide écrit en anglais par Nicolas Zullo, https://x.com/NicolasZu et disponible sur Github : https://github.com/EnzeD/vibe-coding/tree/1.1.1

Commencer

Pour démarrer le Vibe Coding, vous n'avez besoin que de deux outils :

• Gemini 3 pro / Opus 4.5 Thinking Ou tout autre modèle de raisonnement complexe

• Cursor avec GPT Codex, Gemini 3 Flash ou Opus 4.5 (si vous voulez aller vite mais cramer du fric)

Il est crucial de tout configurer correctement dès le début. Si vous souhaitez vraiment créer un site fonctionnel et visuellement attrayant, prenez le temps d'établir des bases solides.

Principe clé : La planification est essentielle. Ne laissez PAS l'IA planifier de manière autonome, sous peine de rendre votre base de code ingérable.

Configuration Initiale

1. Document de Game Design / Document PRD (pour un SaaS)

Transformez votre idée de jeu/site en demandant à Opus 4.5 Thinking ou Gemini 3 pro de créer un simple document de Product Requirement Document au format markdown aussi. Révisez-le pour vous assurer qu'il corresponde à votre vision. Même basique, il donnera à l’IA le contexte nécessaire sur la structure et l’intention du jeu/site.

Prompt :

Take my product idea and create a simple Product Requirement Document in Markdown format (.md).

2. Stack technique

Demandez à Opus 4.5 Thinking ou Gemini 3 pro de recommander la meilleure stack technique pour votre site/jeu (par exemple, ThreeJS et WebSocket pour un jeu multijoueur en 3D). Défiez-le de proposer la stack la plus simple mais robuste possible.

Prompt :

Recommend the best tech stack for my product, focusing on simplicity and robustness.

3. Règles .cursor/rules

Téléchargez la version PDF de https://docs.cursor.com/context/rules-for-ai, chargez-la, et demandez à Gemini ou GPT/Opus Thinking de rédiger un ensemble de 6 à 10 règles pour Cursor comme s’il s’agissait d’un développeur web senior spécialisé dans votre stack choisie. Assurez-vous qu’au moins une règle souligne la modularité (fichiers multiples) et évite un monolithe (un gros fichier unique).

Prompt :

Write 6-10 Cursor rules as if you are a senior web developer specialized in the chosen stack, emphasizing modularity and best practices.

4. Plan d’implémentation

Fournissez à Opus 4.5 Thinking ou Gemini 3 pro :

• Le PRD (Product Requirements Document)

• Les recommandations de stack technique (tech-stack.md)

• Les règles pour Cursor (cursor rules)

Demandez-lui de créer un Plan d’implémentation détaillé au format Markdown (.md), contenant des instructions étape par étape pour vos développeurs IA. Les étapes doivent être petites et précises. Chaque étape doit inclure un test pour valider la bonne implémentation. Aucun code, juste des instructions claires et concrètes. Concentrez-vous sur le produit/site de base, et non sur toutes les fonctionnalités (qui viendront plus tard).

Prompt :

Here is the PRD, tech stack recommendations, and Cursor rules. Create a detailed Implementation Plan in Markdown (.md) with small, specific steps and tests for validating each step. Focus only on the base site/product.

5. Banque de mémoire (Memory Bank)

Créez un nouveau dossier, ouvrez-le dans Cursor, créez un autre dossier nommé memory-bank. Ajoutez les fichiers suivants :

• prd.md

• tech-stack.md

• implementation-plan.md

• progress.md (pour suivre les étapes réalisées)

• architecture.md (pour documenter l'objectif de chaque fichier)

6. Configurer .cursor/rules

Dans Cursor, pressez Cmd + Shift + P, tapez "rules", puis Entrée. Entrez les règles générées par Opus 4.5 Thinking ou Gemini 3 pro à l’étape 3.

Vibe Coding du produit/site de Base

C’est maintenant qu'on s’amuse !

S’assurer que tout est clair

Sélectionnez Gemini 3 Flash, GPT Codex ou Opus 4.5 Thinking (pour les riches, je rappelle) dans Cursor.

Prompt :

Read all the documents in /memory-bank, is implementation-plan.md clear? What are your questions to make it 100% clear for you?

Généralement, il posera 9 à 10 questions. Répondez-y, puis demandez-lui d’éditer le fichier implementation-plan.md en conséquence pour l’améliorer encore davantage.

Votre premier prompt d’implémentation

Sélectionnez Gemini 3 Flash, GPT Codex ou Opus 4.5 Thinking (pour les riches, je rappelle) dans Cursor.

Prompt :

Read all the documents in /memory-bank and proceed with Step 1 of the implementation plan. I will run the tests. Do not start Step 2 until I validate the tests. Once validated, open progress.md and document what you did for future developers. Add architectural insights in architecture.md to explain each file's purpose.

Vibe extrême : Installez Superwhisper/VoiceInk pour parler naturellement avec Claude plutôt que de taper.

Workflow

Après avoir terminé l’étape 1 :

• Effectuez un commit Git de vos changements (si besoin, demandez de l’aide à Opus 4.5 Thinking ou Gemini 3 pro).

• Ouvrez un nouveau composeur (Cmd + N, Cmd + I).

• Prompt :

Now go through all files in the memory-bank, read progress.md to understand prior work, and proceed with Step 2. Do not start Step 3 until I validate the tests.

Répétez ce processus jusqu’à ce que l’ensemble du fichier implementation-plan.md soit réalisé.

Ajouter des détails

Félicitations, vous avez construit le jeu/site de base ! Il peut sembler rudimentaire et manquer de fonctionnalités, mais vous pouvez désormais expérimenter et l'améliorer.

Vous souhaitez ajouter du brouillard, du post-processing, des effets, des sons ? Un meilleur avion, voiture ou château ? Un ciel magnifique ? Pour chaque fonctionnalité majeure, créez un nouveau fichier feature-implementation.md contenant de courtes étapes et des tests. Implémentez et testez progressivement.

Corriger les bugs et blocages

Si un prompt échoue ou casse le jeu/site/produit :
Cliquez sur “restore” dans Cursor et affinez votre prompt jusqu’à ce qu’il fonctionne.

Pour les erreurs :
Si JavaScript : Ouvrez la console (F12), copiez l’erreur, et collez-la dans Cursor—ou fournissez une capture d'écran en cas de glitch visuel.
Option Paresseuse : Installez BrowserTools pour éviter la copie ou la capture manuelle.

Si bloqué :
Revenez à votre dernier commit Git (git reset) et réessayez avec de nouveaux prompts.

Si vraiment bloqué :
Utilisez RepoPrompt et demandez de l’aide à Opus 4.5 Thinking.

Autres conseils

Petites modifications : utilisez Claude Sonnet 4.5.
Pour de meilleurs résultats de prompts : Ajoutez “think as long as needed to get this right, I am not in a hurry. What matters is that you follow precisely what I ask you and execute it perfectly. Ask me questions if I am not precise enough."

FAQ (Tirée directement du github)

Q : Your plane is amazing, but I can’t replicate it in one prompt!
R : It’s not one prompt—it’s ~30 prompts, guided by a plane-implementation.md file. Use sharp, specific prompts like “cut out space in the wings for ailerons,” not vague ones like “make a plane.”

Q : I don't know how to setup a server for my multiplayer game
R : Ask Grok 3.