Guide du Vibe Coding v1.0 : Manuel complet pour le développement assisté par IA

Ce document est un guide conçu pour aider non seulement les codeurs expérimentés, mais aussi les non-codeurs à développer des applications/services en utilisant le « Vibe Coding ». Les développeurs juniors ayant peu d'expérience en codage et les planificateurs peuvent également produire des résultats stables en suivant ces étapes.

Principe fondamental : au lieu de demander à l'IA d'écrire du code immédiatement, il est préférable de lui faire créer des documents (Design.md, ToDo.md) avant de commencer le développement.

0. Résumé du flux général

[1] Demander la création de Concept.md

↓

[2] Créer Design.md (document de référence UI/UX)

↓

[3] Déterminer la pile technique (se référer à l'arbre de décision ci-dessous)

↓

[4] Créer ToDo.md (spécifications techniques par module + plan de développement)

↓

[5] Créer un dépôt GitHub et faire le commit initial

↓

[6] Transmettre la description de l'application + Design.md + ToDo.md à Claude Code ou Grok Build pour commencer le développement

↓

[7] Répéter : Implémenter par module → Tester → commit/push

1. Concept.md — Prompt pour démarrer avec une idée simple

Commencez par décrire brièvement l'application ou le service que vous souhaitez créer en 2-3 lignes, tel qu'il vous vient à l'esprit, sous la forme : « Je veux créer quelque chose comme ça ; veuillez créer un document Concept.md détaillant les procédures et les méthodes pour le mettre en œuvre. »

Téléchargez le document généré et enregistrez-le sous le nom Concept.md.

2. Design.md — Créer d'abord les documents de référence UI/Design

Si l'application a une UI, il est bon d'écrire Design.md en premier. C'est-à-dire, s'il existe un service ou une application que vous souhaitez référencer, ou si vous savez déjà comment concevoir une UI vous-même, vous pouvez en faire la demande en fournissant des images de designs réalisés dans Figma, etc.

Méthode

• Choisissez un site web réellement déployé que vous aimez. (par exemple, linear.app, stripe.com, toss.im, etc.)
• Demandez à Claude ou Grok d'« Analyser la structure de mise en page, la palette de couleurs, la typographie, les marges/espacements et les styles de composants de ce site et de les organiser dans Design.md. »

Exemple de prompt

Analysez le design de https://linear.app et rédigez un document Design.md. Vous devez inclure les éléments suivants : 1. Structure de mise en page globale (emplacement Header/Sidebar/Body/Footer) 2. Palette de couleurs (Couleurs primaire, secondaire, d'arrière-plan, de texte en codes HEX) 3. Typographie (Types de polices, système de tailles, graisses) 4. Règles de marges et d'espacement (échelle d'espacement) 5. Styles pour les composants majeurs comme les boutons, les cartes et les formulaires de saisie 6. Prise en charge du mode sombre et mappage des couleurs

Conseils

• Si vous avez le sens du design, comme le contenu du Design.md généré est entièrement décrit en langage naturel, vous pouvez le lire et le modifier/affiner directement dans la direction souhaitée. Ce document devient la référence pour toutes les implémentations UI ultérieures.
• Si vous dites simplement « Fais-le comme ce site », les résultats varieront à chaque fois. Vous devez le fixer avec un document pour maintenir la cohérence.

2. Arbre de recommandation pour la décision de la pile technique

Déterminez la pile en premier en fonction du type de service que vous essayez de créer.

Principes communs pour le serveur (Backend)

• Il doit être possible de l'installer et de l'exécuter directement depuis la CLI dans n'importe quel environnement local.
• Le langage/environnement d'exécution doit être Node.js ou Python.
• Utilisez des outils vérifiés pour un déploiement et un support stables sur tous les OS pour les packages/environnements d'exécution :
• Python → uv
• Node.js → npm

Critères de sélection de la base de données

Instructions détaillées du prompt (Si vous avez des connaissances en développement)

Ce projet est une application web. Configurez le Frontend avec React, et il doit être possible de le tester immédiatement avec npm run dev en local, avec une structure permettant un déploiement stable. Configurez le Backend avec Node.js, et comme une base de données relationnelle est nécessaire, utilisez MariaDB. Incluez un script d'installation qui peut être installé/exécuté directement via CLI dans l'environnement de développement local. Vérifiez ce contenu et le document Concept.md pour rédiger un document ToDo.md pour une implémentation technique détaillée.

• Procédez en joignant le document Concept.md avec ce prompt ou en copiant-collant le contenu du document Concept.md.

Mais que faire si je suis un non-développeur qui ne connaît pas ce qui précède ?

Donnez simplement des instructions intégrées comme celle-ci :

Je ne sais pas comment exécuter ce projet, veuillez donc recommander une méthode. Recommandez si une application web est préférable, si une méthode d'installation OS est plus facile à vérifier pendant le développement, ou si la construction en tant qu'application mobile est meilleure. Si elle peut être affichée dans un navigateur web, configurez le Frontend avec React ; si elle doit être fournie en tant qu'application mobile, configurez le Frontend avec Flutter. S'il s'agit d'une méthode qui doit être installée localement, configurez-la en utilisant npm ou uv, qui peuvent être facilement déployés et installés via CLI. Mettez en place une structure permettant un déploiement stable. Je ne sais pas si un Backend est nécessaire, mais mettez en place une structure stable pour Node.js ou le déploiement/l'installation. Si une base de données est nécessaire, utilisez MariaDB si une base relationnelle est requise, et s'il s'agit simplement d'une base de données clé-valeur, utilisez AWS DynamoDB localement pour le développement et configurez-la pour un déploiement facile sur AWS. S'il s'agit d'un format qui peut être installé/exécuté directement via CLI dans un environnement de développement local, incluez tous les scripts d'installation. Recommandez une pile technique aussi détaillée, vérifiez ce contenu et le document Concept.md, et rédigez un document ToDo.md pour une implémentation technique détaillée.

3. Tableau de bord d'administration — Essentiel s'il y a un serveur

Vous ne savez peut-être pas s'il s'agit d'un service avec un serveur, mais il est généralement bon d'en construire un pour que le développeur puisse personnellement saisir l'état de fonctionnement et la progression de l'ensemble de l'application.

• Les projets avec un serveur doivent inclure l'implémentation d'un tableau de bord d'administration par défaut.
• Éléments minimums à inclure dans le tableau de bord :
• Vérification de l'état du serveur
• État des données clés (métriques de base comme le nombre d'abonnés, le nombre de cas traités, etc.)
• Erreurs/logs récents
• Progression du traitement des tâches principales (lots, files d'attente, etc.)

Exemple de prompt

Si ce service inclut un serveur, incluez un tableau de bord d'administration dans le plan de développement. Le tableau de bord doit permettre de vérifier l'état du serveur, les métriques clés et les logs/erreurs récents. Définissez le compte administrateur par défaut sur 'admin' avec le mot de passe '12345', et incluez la possibilité de changer le mot de passe dans le tableau de bord d'administration. Vérifiez ToDo.md et incluez-le dans le plan de développement si jugé nécessaire.

4. Finalisation de ToDo.md — Plan de développement par module

La base de la programmation est la modularisation. Si vous ajoutez du contenu à ToDo.md pour subdiviser en modules avant d'écrire du code, une bonne architecture pour la maintenance future peut être créée.

Exemple de prompt

Vérifiez le document ToDo.md et vérifiez s'il est bien rédigé selon le guide ci-dessous, et modifiez/ajoutez les parties manquantes. Exigences pour ToDo.md : 1. Concevoir l'ensemble du système pour qu'il soit modulaire avec une conception orientée objet. 2. Spécifier clairement le rôle, l'entrée/sortie et la structure de données de chaque module pour garantir un encapsulage maximal. 3. Créer une séquence d'implémentation sous forme de liste à cocher (en commençant par les modules sans dépendances). 4. Inclure la conception du schéma de base de données. 5. Décrire quand et comment les personnes non techniques peuvent facilement tester.

Éléments à vérifier dans le ToDo.md terminé :

1. Aperçu du projet (un paragraphe)
2. Pile technique confirmée (Résultat de l'arbre de décision à l'étape 2)
3. Liste des modules et spécifications techniques détaillées pour chaque module (Les personnes non techniques peuvent trouver cela difficile à comprendre)
4. Nom et rôle du module
5. Entrée/Sortie (points de terminaison API et formats de requête/réponse)
6. Structure de données utilisée / conception de la table (ou collection) de base de données
7. Relations de dépendance avec les autres modules
8. Séquence d'implémentation (sous forme de cases à cocher, dans l'ordre des dépendances)
9. Vérifier si chaque méthode de test est rédigée à un niveau que je peux comprendre.

Important

• Vous n'êtes pas obligé de lire et de réviser vous-même le ToDo.md généré. Bien qu'il semble que les choses se passeront bien si vous préparez parfaitement, le cœur du Vibe Coding est le processus de création d'un résultat d'abord, puis de le modifier progressivement pour obtenir ce que vous voulez — c'est la partie la plus précieuse et la plus amusante.

Partie pratique : Configuration de l'environnement → GitHub → Début du développement avec Claude Code

Écrit pour que même ceux qui installent des outils de développement pour la première fois puissent suivre.

• Néanmoins, si cela semble trop complexe et que vous ne savez pas pourquoi vous devriez l'utiliser et que vous vous ennuyez à mourir, veuillez d'abord écouter un cours gratuit au lien ci-dessous.

https://nomadcoders.co/git-for-beginners

5. Préparation de l'environnement de développement (Installer seulement 2 choses)

Nous allons installer deux choses.

Et vous avez besoin d'un compte GitHub. Inscrivez-vous gratuitement sur https://github.com (complétez la vérification par e-mail). L'utilisation de Claude Code ou Grok Build nécessite un plan payant Claude (Pro/Max/Team) ou un compte payant Grok.

5-1. 🪟 Étapes d'installation pour les utilisateurs Windows

① Installer Git

1. Allez sur https://git-scm.com/download/win dans votre navigateur → Le téléchargement démarre automatiquement.
2. Exécutez le programme d'installation téléchargé.
3. De nombreuses options d'installation apparaissent ; continuez simplement à cliquer sur « Suivant » avec toutes les valeurs par défaut.
4. Cependant, lorsque l'écran « Choix de l'éditeur par défaut » apparaît, il est bon de sélectionner « Utiliser Visual Studio Code comme éditeur par défaut de Git » (si vous n'avez pas encore installé VS Code, la valeur par défaut convient).
5. Vérifiez l'installation : Lancez PowerShell depuis le menu Démarrer et tapez :

git --version

→ Si une version comme git version 2.xx.x apparaît, c'est un succès. Sinon, essayez de fermer et de rouvrir PowerShell.

② Installer VS Code

1. Allez sur https://code.visualstudio.com → Cliquez sur Télécharger pour Windows.
2. Exécutez le programme d'installation → Continuez à cliquer sur « Suivant ». Cependant, cochez ces deux cases dans l'écran des options :
3. « Ajouter au PATH »
4. « Ajouter l'action 'Ouvrir avec Code' aux menus contextuels des fichiers/dossiers »
5. Lancez VS Code après l'installation. Si une notification d'installation du pack de langue française apparaît sur le premier écran, vous pouvez l'installer.

5-2. 🍎 Étapes d'installation pour les utilisateurs Mac

① Installer Git

1. Ouvrez Terminal : Cmd + Espace → Tapez « Terminal » → Entrée.
2. Tapez :

git --version

1. Si la version apparaît immédiatement, c'est déjà installé → Passez à ②. Si une fenêtre contextuelle de guide d'installation (« Outils de développement en ligne de commande... ») apparaît, cliquez sur « Installer » et attendez. (C'est l'installation de Git).
2. Vérifiez à nouveau avec git --version après la fin.

② Installer VS Code

1. Allez sur https://code.visualstudio.com → Cliquez sur Télécharger pour macOS.
2. Décompressez le fichier téléchargé et faites glisser Visual Studio Code.app vers le dossier Applications. (Important ! Ne l'utilisez pas directement depuis le dossier Téléchargements).
3. Lancez VS Code depuis Applications.

5-3. (Commun) Enregistrer mon nom dans Git — Première fois seulement

Ce paramètre permet de laisser une trace de « qui a travaillé dessus » dans les commits. Dans PowerShell (Windows) ou Terminal (Mac) :

git config --global user.name "Votre Nom" git config --global user.email "votre-email-github@exemple.com"

Entrez le même e-mail que celui utilisé pour vous inscrire sur GitHub.

6. Créer un dépôt GitHub et le connecter à mon PC avec VS Code

Considérez un « Dépôt » comme un dossier cloud qui contient un projet. Le flux est le suivant : Créer un dépôt vide sur le site web GitHub → Le cloner sur mon PC avec VS Code → Télécharger les documents de planification → Connecter ce dépôt à Claude Code web.

6-1. Créer un dépôt sur le site web GitHub

1. Connectez-vous à https://github.comhttps://github.com/).
2. Cliquez sur le bouton + en haut à droite → Nouveau dépôt.
3. Saisissez comme suit :
4. Nom du dépôt : Nom du projet (en anglais, tirets au lieu d'espaces. ex : my-first-app)
5. Sélectionnez Privé (Les projets d'entreprise doivent être Privés !)
6. Cochez la case « Ajouter un fichier README » ✅ ← Les débutants doivent cocher cette case. Cela simplifie l'étape suivante (clone).
7. Cliquez sur Créer un dépôt.
8. Sur la page du dépôt créé, cliquez sur le bouton vert <> Code → Copiez l'adresse dans l'onglet HTTPS.

6-2. Cloner sur mon PC avec VS Code

1. Lancez VS Code.
2. Ctrl + Maj + P (Cmd + Maj + P sur Mac) → La palette de commandes s'ouvre.
3. Tapez clone → Sélectionnez « Git : Cloner ».
4. Collez l'adresse du dépôt copiée et appuyez sur Entrée.
5. Vous pouvez également sélectionner « Cloner depuis GitHub » → Si le navigateur s'ouvre et demande une connexion/autorisation GitHub, approuvez-la. (Première fois seulement).
6. Sélectionnez un emplacement pour enregistrer le projet (par exemple, il est bon de créer un dossier Documents/Projets).
7. Lorsque le clonage est terminé, une notification « Ouvrir » apparaît en bas à droite → Cliquez dessus.
8. Si vous voyez README.md dans l'explorateur de fichiers à gauche, c'est un succès ! 🎉 Ce dossier est maintenant le dossier de travail connecté entre mon PC et GitHub.

6-3. Télécharger les documents de planification — Concept.md, Design.md, ToDo.md

Claude Code web peut lire les fichiers à l'intérieur du dépôt. Donc, mettre les documents de planification dans le dépôt revient à « télécharger des documents ».

1. Faites un clic droit dans un espace vide de l'explorateur de fichiers VS Code → Nouveau fichier → Saisissez le nom Concept.md.
2. Collez la description de l'application que vous avez préparée et enregistrez (Ctrl+S / Cmd+S).
3. Créez et insérez les fichiers Design.md (s'il y a une UI) et ToDo.md de la même manière.
4. Maintenant, téléchargez sur GitHub (commit & push) — en utilisant la méthode en 6-4.

6-4. Commiter et pousser dans VS Code — Souris uniquement

1. Lorsque vous enregistrez un fichier, un badge numérique apparaît sur l'icône en forme de branche (Contrôle de source) à gauche de VS Code.
2. Cliquez sur cette icône → Vous verrez une liste des fichiers modifiés.
3. Dans la zone de saisie du message en haut, écrivez une ligne sur ce que vous avez fait. (par exemple, Documents de planification ajoutés).
4. Cliquez sur le bouton ✔ Commit → La sauvegarde est terminée sur mon PC.
5. Si une fenêtre contextuelle « Aucune modification en attente de validation » apparaît, cliquez sur « Oui » pour tout commiter.
6. Ensuite, cliquez sur le bouton Synchroniser les modifications → Le téléchargement (push) vers GitHub est terminé.
7. Actualisez le dépôt sur le site web GitHub pour voir le Concept.md que vous venez de télécharger. Maintenant, Claude Code web peut également lire ce document.

Le pull (téléchargement) se fait également sur le même écran : S'il y a des modifications que Claude a téléchargées dans le cloud, le bouton Synchroniser les modifications gérera à la fois le téléchargement et le téléchargement.

7. Connecter le dépôt à Claude Code Web et commencer le développement

Ouvrez maintenant Claude Code web dans votre navigateur et connectez le dépôt GitHub que vous venez de créer.

7-1. Connecter Claude Code Web ↔ Dépôt GitHub (Première fois seulement)

1. Accédez à https://claude.ai/code → Connectez-vous avec votre compte Claude.
2. Lors du premier accès, un guide Connecter GitHub apparaît → Suivez le guide.
3. Vous serez redirigé vers la page GitHub, et l'écran d'installation de l'application GitHub Claude apparaîtra :
4. Sélectionnez votre compte GitHub (ou organisation).
5. Sélectionnez la portée d'accès : Il est recommandé de sélectionner « Uniquement les dépôts sélectionnés » et de spécifier le dépôt créé en 6-1.
6. Cliquez sur Installer / Autoriser.
7. Le retour à Claude termine la connexion. Si l'écran des paramètres d'environnement apparaît, laissez-le par défaut.
8. Lors du démarrage d'une nouvelle session (tâche), sélectionnez votre dépôt dans la liste de sélection des dépôts, saisissez un prompt, et la tâche commence.

7-2. Comprendre le fonctionnement de Claude Code et Grok Build Web (Important !)

Claude Code et Grok Build web fonctionnent sur un ordinateur virtuel dans le cloud, pas sur mon PC. Le flux est le suivant :

① Je saisis un prompt

↓

② Claude Code/Grok Build clone mon dépôt dans le cloud et écrit le code

↓

③ Pousse le résultat vers GitHub en tant que « nouvelle branche de tâche »

↓

④ Je tire (pull) cette branche sur mon PC pour tester, ou je vérifie les modifications via Pull Request sur GitHub

↓

⑤ Si ça me plaît, je fusionne dans main.

• Comme il télécharge toujours les résultats vers une nouvelle branche sans toucher directement à la branche main, il n'y a aucun risque de casser le code existant. (Grok Build travaille sur la branche main mais peut être annulé, donc ne vous inquiétez pas des erreurs).

7-4. Prompt de démarrage du développement

Une fois les trois documents (Concept.md / Design.md / ToDo.md) prêts dans main, commencez enfin le développement dans une nouvelle session.

Développez ce projet. Procédez sur la base des documents suivants dans le dépôt : - Concept.md : Description de l'application à créer - ToDo.md : Plan de développement par module (implémenter dans cet ordre) - Design.md : Normes de conception (toute l'UI suit ce document)

Règles de travail : 1. Procédez un module à la fois selon l'ordre d'implémentation dans ToDo.md. 2. Lorsqu'une unité testable est terminée, faites-moi savoir comment l'exécuter/tester sur mon PC local via README ou réponse. Comme je suis un non-développeur, expliquez-le bien comme si vous enseigniez à un débutant. 3. Marquez les éléments terminés avec une coche dans ToDo.md. 4. Dites-moi le nom de la branche de tâche et poussez avec un message de commit facile à retenir. 5. S'il y a des parties peu claires, ne devinez pas ; demandez-moi.

7-5. Cycle répété pendant le développement

① Claude Code web implémente un module dans une branche de tâche → push

↓

② Tirez (pull) cette branche de tâche sur mon PC (VS Code) et exécutez-la/testez-la directement

↓

③ S'il y a un problème → Copiez l'intégralité du message d'erreur et collez-le dans la session web

S'il n'y a pas de problème → « Bien, continuez avec le développement suivant »

↓

Retournez à ① pour le module suivant

↓

④ Une fois toutes les fonctionnalités terminées et les tests réussis

→ Fusionnez dans la branche main via Pull Request

→ Le déploiement est toujours basé sur main

8. Branche — Tester dans les branches de tâche et fusionner dans main pour le déploiement

8-1. Qu'est-ce qu'une branche ?

• Branche main = La vitrine du produit fini qui fonctionne toujours bien. Le déploiement est toujours basé sur main.
• Branche de tâche (par exemple, claude/feature-login) = Un chantier de construction créé en copiant main. Vous pouvez y construire et casser autant que vous le souhaitez ; main est en sécurité.

Claude Code web crée toujours une nouvelle branche de tâche et pousse les résultats. Donc, il y a seulement trois choses que vous devez savoir :

1. Comment vérifier sur quelle branche se trouve actuellement mon dossier.
2. Comment tirer la branche de tâche poussée par Claude sur mon PC pour la tester.
3. Comment fusionner dans main et déployer une fois terminé.

8-2. Vérifier sur quelle branche vous êtes

• Regardez la barre d'état en bas à gauche de l'écran VS Code. Le nom de la branche est affiché à côté de l'icône de branche. (par exemple, main ou claude/feature-login).

8-3. Tirer les branches de tâche créées par Claude Code/Grok Build sur mon PC pour les tester

Lorsque Claude Code web dit « J'ai poussé vers la branche OO », amenez cette branche sur mon PC pour la tester. Grok Build a un bouton « Push to Github » en haut à droite de l'écran web, alors appuyez sur ce bouton pour pousser.

Avec VS Code (Souris uniquement) :

1. Cliquez sur le nom de la branche en bas à gauche → La liste des branches s'ouvre.
2. Si la nouvelle branche n'est pas visible, exécutez ... menu → Fetch dans l'onglet Contrôle de source et réessayez.
3. Sélectionnez la branche de tâche de Claude commençant par origin/claude/... dans la liste → Votre dossier passe à l'état de cette branche.

8-4. Fusionner dans main une fois terminé — Pull Request

Si les fonctionnalités sont terminées et les tests réussis dans la branche de tâche, fusionnez dans main via Pull Request (PR) sur le site web GitHub.

1. Accédez à votre dépôt sur GitHub → Cliquez sur l'onglet Pull requests.
2. Cliquez sur la PR que Claude a faite. Si aucune, New pull request → base : main, compare : sélectionnez la branche de tâche → Create pull request.
3. Cliquez sur Merge pull request → Confirm merge → Réfléchi dans main !
4. Mettez à jour le main de votre PC avec la dernière version :
5. Cliquez sur la branche en bas à gauche de VS Code → Sélectionnez main → Synchroniser les modifications dans l'onglet Contrôle de source.

9. Conseils pour les prompts (Communs)

La qualité du Vibe Coding est proportionnelle à la qualité des prompts.

1. Spécifiez ce qu'il ne faut PAS faire — « Ne modifiez pas le code arbitrairement jusqu'à ce que j'approuve », « N'ajoutez pas de bibliothèques, utilisez uniquement la pile existante. »
2. Un module à la fois — La qualité diminue si vous demandez l'application entière en un seul prompt. Demandez par petits morceaux selon l'ordre du ToDo.md.
3. Collez les erreurs telles quelles — Ne résumez pas les messages d'erreur ; copiez l'intégralité de la sortie du terminal.
4. Laissez Claude demander si c'est ambigu — Incluez « S'il y a des parties peu claires, ne devinez pas ; demandez-moi » dans le prompt.
5. Communiquez sur la base de documents — « Comme je l'ai dit plus tôt » ❌ → « Selon le design du Design.md » ✅. Les documents dans le dépôt sont beaucoup plus stables que la mémoire de la conversation.

Fin.

Comme l'a dit l'ancien Morpheus :

« Neo. Je ne peux que te montrer la porte. C'est toi qui dois la franchir. »