Le guide du vibe coder

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

Commencer

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

• Grok 3 Thinking

• Cursor avec Claude Sonnet 3.7 Thinking

Il est crucial de tout configurer correctement dès le début. Si vous souhaitez vraiment créer un jeu 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

Transformez votre idée de jeu en demandant à Grok 3 Thinking de créer un simple Document de Game Design au format Markdown (.md). 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.

Prompt :

Take my game idea and create a simple Game Design Document in Markdown format (.md).

2. Stack technique

Demandez à Grok 3 Thinking de recommander la meilleure stack technique pour votre 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 game, 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 à Grok de rédiger un ensemble de 6 à 10 règles pour Cursor comme s’il s’agissait d’un développeur senior de jeux 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 game developer specialized in the chosen stack, emphasizing modularity and best practices.

4. Plan d’implémentation

Fournissez à Grok 3 Thinking :

• Le Document de Game Design

• Les recommandations de stack technique

• Les règles pour Cursor

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 jeu de base, et non sur toutes les fonctionnalités (qui viendront plus tard).

Prompt :

Here is the Game Design Document, 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 game.

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 :

• game-design-document.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 Grok 3 à l’étape 3.

Vibe Coding du Jeu de Base

C’est maintenant que le plaisir commence !

S’assurer que tout est clair

Sélectionnez Claude Sonnet 3.7 Thinking 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 Claude Sonnet 3.7 Thinking 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 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 à Grok 3).

• 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 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 :
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 à Grok 3 Thinking.

Autres conseils

Petites modifications : utilisez Claude Sonnet 3.5.
Excellente rédaction : utilisez GPT-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é 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.