Mon workflow vibe coding au quotidien

Le vibe coding, c'est quoi ?

Le terme "vibe coding" décrit une manière de travailler où l'on dialogue avec un agent IA capable de lire, écrire et exécuter du code. Pas du code généré sans réflexion : le travail conceptuel — comprendre le besoin, choisir une architecture, valider le résultat — reste humain. L'agent est un binôme rapide à qui on délègue les mécaniques, pas un substitut au cerveau.

Le mot a pris en popularité fin 2025 et début 2026 avec la maturité des agents type Claude Code, Cursor ou Copilot Workspace. Il est parfois utilisé péjorativement pour désigner du code bâclé. Ma définition est la suivante : vibe coding = workflow assisté par IA avec la rigueur habituelle (tests, sécurité, revues). Rien n'est sacrifié, tout est accéléré.

Ce qui suit est mon retour de praticien après plusieurs mois d'usage quotidien sur des projets clients et perso : ce site (QA Consulting), vitefait-bienfait-sp, white-label-hotel-platform, chatbot-booking-poc. Le workflow s'est stabilisé autour de 5 outils chaînés.

Le workflow en un coup d'œil

Cinq outils, chacun avec un rôle clair, qui se passent le relais. Chaque étape produit un livrable que l'étape suivante consomme.

Détaillons chaque outil et son rôle dans la chaîne.

Les 5 outils en détail

Claude Code est l'agent au cœur du dispositif. Il tourne en CLI dans le terminal et s'intègre à VSCode et JetBrains. Il dispose d'outils : Read, Edit, Write, Bash, Grep, et de skills qui sont des compétences scriptées. Tout repose sur un principe simple : le modèle ne voit que son contexte, donc on optimise le contexte qu'on lui donne.

superpowers est une collection de skills open-source créée par Jesse Vincent. Chaque skill est un mode de travail : brainstorming pour explorer une idée, writing-plans pour produire un plan d'exécution, subagent-driven-development pour déléguer à des sous-agents, code-review pour relire. C'est ce qui transforme une conversation libre en workflow discipliné. Sur ce site, chaque feature suit le triptyque brainstorm → spec → plan → exec.

claude design est un mode où l'agent propose des maquettes (HTML/SVG) qu'on visualise dans un navigateur et qu'on valide par clic. Idéal pour les choix de layout, de palette, de composants. On ne décrit plus l'UI avec des mots qui ne disent rien — on regarde, on compare, on choisit. La refonte de-AI design de ce site (passage au vert sapin) a été conduite via ce mode.

Playwright associé à la skill playwright-cli est le combo gagnant pour les tests end-to-end. Le binaire playwright-cli est exposé via MCP. La skill associée enseigne à l'agent comment l'utiliser efficacement. Concrètement, l'agent peut lancer un navigateur réel, cliquer sur un sélecteur, attendre qu'un élément apparaisse, faire une capture, vérifier un texte — tout sans changer de contexte. La QA visuelle devient conversationnelle.

GitHub et la CI/CD ferment la chaîne. L'agent prépare la PR, écrit le titre et la description, propose des commits atomiques. Les workflows GitHub Actions (ou Azure DevOps Pipelines) déclenchent lint, typecheck, tests unitaires, tests e2e, audit sécurité. Si tout passe, la PR est mergeable. Sinon, l'agent itère sur les retours. On détaillera l'intégration au chapitre 6.

Bien prompter et économiser ses tokens

Un bon prompt à un agent ressemble à une bonne issue Jira : objectif clair, contraintes explicites, critère de succès vérifiable. Pas d'ambiguïté, pas de "fais au mieux". Si l'objectif est flou, l'agent invente — et son invention est convaincante mais souvent fausse.

Objectif : ajouter une page /pricing avec 3 tiers de prix.

Contraintes :
- Réutiliser le composant <PricingCard> existant
- Bilingue FR + EN (dicts existants)
- Pas de back-office, données en dur dans pricingContent.ts

Critère de succès : la route s'affiche, les 3 cards sont rendues,
typecheck + lint + Jest passent.

Économiser ses tokens, c'est moins payer ET aller plus vite. Trois leviers principaux : prompt caching, modèle adapté à la tâche, hygiène du contexte. Le prompt caching côté Anthropic met en cache la partie stable du contexte (système, CLAUDE.md). Une CLAUDE.md propre et figée fait gagner ~90% sur les tokens d'entrée à chaque tour.

Côté modèles : Claude Opus pour les tâches de raisonnement (design, debugging complexe), Sonnet pour la majorité des cas (implémentation guidée), Haiku pour les opérations mécaniques (renames, formatting). Un outil comme RTK (Rust Token Killer) intercepte les commandes shell courantes (git, npm, jest) et économise 60-90% sur ces opérations en filtrant le bruit.

Ce qu'on n'oublie pas

L'IA accélère ; elle ne dispense pas de la rigueur. Quatre piliers à ne jamais sacrifier, sous peine de payer plus tard ce qu'on a gagné maintenant.

Ces quatre piliers ne sont pas spécifiques au vibe coding. Ce sont les bonnes pratiques de développement classique. La différence : avec l'IA, ils deviennent encore plus critiques car la vitesse d'exécution augmente. Sans filet, on déploie des bugs aussi vite qu'on déploie des features.

Intégrer dans son projet et sa CI/CD

Côté projet, trois fichiers minimum dans le repo : un CLAUDE.md à la racine (conventions, stack, points d'attention), un dossier .claude/settings.json (permissions et hooks), et un dossier docs/superpowers/ pour les specs et plans qu'on garde comme trace. Le tout versionné comme du code.

Côté CI/CD, deux setups reviennent selon le contexte client. Setup 1 — GitHub Actions sur les projets web modernes (Vercel, Cloudflare). C'est le setup de ce site (QA Consulting, déploiement Vercel direct sans CI GitHub) et de vitefait-bienfait-sp, dont le workflow ci.yml chaîne lint (ESLint + Prettier), typecheck (tsc), tests unitaires (vitest) et tests e2e (playwright). Pre-commit hooks via husky + commitlint pour la discipline locale, previews Vercel par PR.

# Extrait .github/workflows/ci.yml
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run lint && npm run format:check

  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run typecheck

  test-e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npm run test:e2e

Setup 2 — Azure DevOps sur les projets entreprise. C'est le setup de white-label-hotel-platform et de chatbot-booking-poc : pipeline PR → CI → CD sur Azure DevOps, tests Jest + Enzyme sur les composants React, audit Snyk au build pour les vulnérabilités dépendances et code. Le déploiement est automatique après merge sur la branche release. L'agent maintient les YAML des pipelines comme tout autre fichier du repo : il propose les ajustements, on valide, on merge.

L'IA bien intégrée n'est pas une magie. C'est un outil de plus dans la chaîne, qu'on traite comme tel : avec des process, des tests, et de la revue. Bien fait, ça change le rapport au code — moins de friction sur la mécanique, plus de temps pour ce qui compte : comprendre le besoin et valider le résultat.