Tutoriel : guide complet pour démarrer avec Claude Code et le vibe coding

De plus en plus de développeurs adoptent une approche simple de la programmation : au lieu d’écrire tout le code à la main, on oriente l’IA, on valide les choix, puis on review et on valide. C’est l’idée derrière le Vibe Coding : faire avancer un projet rapidement, sans sacrifier la rigueur.

Dans cet article, on va voir 3 choses essentielles pour bien démarrer avec Anthropic via Claude Code et le vibe coding :

  1. Créer une app from scratch proprement (sans prompts vagues)

  2. L’utiliser sur une codebase existante avec un fichier CLAUDE.md

  3. Gérer une grosse évolution d’architecture sans perdre le contrôle

Prérequis

Côté machine

  • macOS, Linux ou Windows

  • Un terminal (ou l’Integrated Terminal de votre IDE)

Côté outils

  • Node.js installé (inclut généralement npm)
    Vérification :

 
node -v npm -v

Côté compte

  • Un compte Claude (abonnement ou autre mode d’accès selon votre organisation)

1) Installer Claude Code

Vous avez deux méthodes : l’install “native” (script) ou via npm. Si l’une pose problème chez vous, passez à l’autre.

Méthode A : installation native (recommandée)

macOS / Linux

 
curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell

 
irm https://claude.ai/install.ps1 | iex

Windows CMD

 
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Méthode B : installation via npm (utile si le script Windows coince)

 
npm install -g @anthropic-ai/claude-code

Ensuite, lancez l’outil :

 
claude

Pendant le setup, vous choisirez généralement :

  • Votre style (thème clair/sombre)

  • Votre méthode de connexion (compte Claude, etc.)

  • Puis vous vous authentifiez

Quand c’est bon, vous verrez un message de succès et claude sera utilisable dans vos projets.

2) Utiliser Claude Code dans Visual Studio Code

Même si Claude Code marche très bien dans un terminal “classique”, il devient particulièrement efficace quand vous l’utilisez dans Visual Studio Code (terminal intégré + navigation rapide du code).

Ouvrir un terminal intégré

Dans VS Code, ouvrez un terminal (souvent via le menu Terminal) puis lancez :

 
claude

Astuce “confiance du dossier”

Au démarrage dans un repo, Claude Code peut demander si vous faites confiance à ce dossier. C’est normal : cela conditionne certaines actions et l’accès aux fichiers.

3) Scénario 1 : créer une app from scratch (sans prompts vagues)

L’erreur classique quand on “vibe code” : donner un prompt trop flou. Exemple :

“Fais une app de gestion de tâches.”

Résultat : Claude doit deviner le stack, le stockage, l’architecture, les principes de code, etc.

Le prompt qui marche mieux

Faites plutôt :

  • une liste courte de besoins “haut niveau”

  • puis une consigne explicite : “pose-moi des questions avant d’écrire du code”

  • et passez en plan mode

Exemple de prompt (copiable) :

 
Objectif : créer une app de gestion des corvées pour un bureau. Besoins prioritaires : - Vue calendrier type Outlook (jour / semaine / mois) - Ajouter / supprimer une corvée - Corvées récurrentes (hebdo, mensuel…) - Assigner une corvée à un membre - Ajouter / supprimer des membres d’équipe Contraintes : - Propose un stack simple - Stockage local acceptable - Code propre, lisible, structuré Avant d’écrire du code : - Pose-moi les questions nécessaires (stack, stockage, contraintes, principes d’ingénierie) - Puis propose un plan d’implémentation détaillé pour validation.

Passer en Plan Mode

Passez en plan mode (souvent via Shift + Tab jusqu’à voir “plan mode”).

En plan mode :

  • Claude réfléchit, liste les choix, et pose des questions

  • Il ne code pas tant que vous n’avez pas validé

Valider (ou corriger) le plan

Quand Claude propose un plan :

  • Vérifiez les décisions implicites (stack, framework, build tool, styling)

  • Corrigez ce que vous voulez avant exécution

Exemple : vous voulez TypeScript plutôt que JS.
Répondez clairement :

“Utilise TypeScript partout (pas de JavaScript).”

Puis relisez le nouveau plan.

Approvals : auto-accept ou manuel

Vous aurez souvent deux approches :

  • Tout approuver manuellement (bien pour débuter)

  • Auto-accepter les edits (plus rapide, mais demande de la vigilance)

Même en auto-accept, gardez le réflexe : review du code ensuite.

4) Workflow essentiel : commit tôt, commit souvent

Après un premier jet fonctionnel :

  • Faites un commit “baseline”

  • Puis itérez (bugs, amélioration UI, refactors)

Pourquoi : chaque nouveau prompt peut introduire une régression. Si vous committez souvent, vous pouvez revenir rapidement à un état stable.

Checklist simple :

  • Une branche par feature / bugfix

  • Un commit par étape cohérente

  • Review avant merge

5) Scénario 2 : utiliser Claude Code sur une app existante (CLAUDE.md)

Sur une codebase existante, la question est : “Comment l’IA va respecter nos standards ?”

La réponse pratique : un fichier CLAUDE.md à la racine, qui sert de “contrat” de travail. Son contenu est repris à chaque session et guide Claude sur :

  • le stack

  • la structure du projet

  • les conventions

  • la manière de travailler (tests, lint, branches, etc.)

Structure recommandée pour un bon CLAUDE.md

Pensez en 3 couches :

  1. Le “quoi”

  • stack, packages, scripts, structure des dossiers

  1. Le “pourquoi”

  • rôle des composants, choix d’architecture, règles métier

  1. Le “comment”

  • règles de contribution : branches, tests, style, niveau de qualité attendu

Exemple minimal (copiable) :

 
# CLAUDE.md ## Stack et outils - Front : React + TypeScript - UI : composants simples, éviter les dépendances inutiles - Stockage : localStorage (pour l’instant) - Scripts : npm run dev, npm test ## Structure du projet - src/components : UI réutilisable - src/features : logique métier par domaine - src/lib : helpers et utilitaires - src/types : types partagés ## Règles de contribution - Toujours créer une branche pour chaque changement - Ne jamais casser les tests existants - Ajouter/adapter des tests si tu modifies une logique importante - Préférer des changements petits et vérifiables - Expliquer les décisions clés dans les PR/commits

Astuce “progressive disclosure” : si votre doc devient longue, faites un index dans CLAUDE.md et pointez vers d’autres fichiers Markdown (ex : docs/architecture.md, docs/domain.md).

Réinitialiser le contexte pour simuler une “première arrivée”

Si vous voulez que Claude reparte “à zéro” sur la conversation (utile pour tester CLAUDE.md), utilisez la commande de nettoyage de contexte de l’outil (souvent une slash command du type /clear).

6) Scénario 3 : grosse évolution d’architecture (et le mode YOLO)

Exemple de grosse demande :

“Les changements doivent se synchroniser en temps réel entre plusieurs onglets sans refresh.”

La bonne méthode est un workflow en 4 étapes :

  1. Explore (quels fichiers sont concernés ?)

  2. Plan (propose plusieurs options)

  3. Code (implémentation par phases)

  4. Commit (stabilisation)

Prompt conseillé : 3 options puis plan

Exemple :

 
Objectif : quand j’ajoute/modifie une corvée, les changements doivent apparaître sur les autres onglets sans refresh. Fais d’abord : 1) Explore les fichiers concernés (stockage, calendrier, état global) 2) Propose 3 options d’implémentation (simple -> robuste), avec avantages/inconvénients 3) Recommande une option et propose un plan détaillé par étapes Ne code pas tant que je n’ai pas validé.

Exemple d’option “robuste”

Dans la vidéo, l’option la plus “puissante” consiste à créer un serveur et synchroniser via WebSocket. C’est plus lourd que du simple state local, mais c’est un vrai saut d’architecture (multi-clients).

Le mode YOLO : à utiliser avec prudence

Le mode YOLO (souvent activable via un toggle) supprime les demandes d’autorisation pour exécuter certaines commandes. C’est extrêmement rapide, mais plus risqué.

Bon usage :

  • Vous êtes sur une branche

  • Vous avez des tests

  • Vous êtes prêt à review et à revert

Mauvais usage :

  • Projet sensible

  • Pas de tests

  • Vous n’avez pas le temps de relire

7) Bonnes pratiques pour “vibe engineer” sans chaos

  • Parlez à Claude comme à un senior dev : clair, ferme, spécifique

  • Exigez un plan avant le code sur les sujets structurants

  • Corrigez les décisions implicites (stack, TS vs JS, conventions)

  • Commits fréquents + branches systématiques

  • Review du code comme si un collègue l’avait écrit

Conclusion

Claude Code est efficace pour produire du code rapidement, mais la réussite vient surtout de votre méthode :

  • un prompt qui force la clarification

  • un plan validé avant d’écrire

  • une discipline Git

  • un CLAUDE.md solide pour les projets existants

  • et des évolutions d’architecture pilotées en options + phases

C’est ce mélange qui transforme “vibe coding” en Vibe Engineering.