← ← Retour aux Réflexions AI

De zéro à une application en ligne en 24 heures : Guide pratique du Vibe Coding avec Cursor AI

Publié le février 2026

Publié sur le blog TEN INVENT · Février 2026

Introduction

Vous avez une idée d'application. Peut-être un tableau de bord interne, peut-être un outil de productivité, peut-être un MVP que vous voulez tester avec des clients réels. Normalement, vous vous lanceriez dans la planification de l'architecture, le choix des frameworks, la configuration de Docker, Kubernetes, microservices — et trois semaines plus tard, vous n'avez toujours pas une page fonctionnelle.

Il existe une alternative. Elle s'appelle le vibe coding — un terme popularisé par Andrej Karpathy (co-fondateur d'OpenAI) qui décrit un style de développement où vous décrivez ce que vous voulez, et l'IA écrit le code. Vous êtes le réalisateur, l'IA est l'équipe de production.

Dans cet article, je vous montre un workflow concret pour passer de l'idée à une application déployée en production en 24 heures. Pas théorique. Pratique. Avec des étapes claires, des outils concrets et des leçons tirées de l'expérience directe.

Heure 0–1 : Installation et configuration de Cursor

Qu'est-ce que Cursor ?

Cursor est un éditeur de code basé sur VS Code, mais construit de zéro pour travailler avec l'IA. Ce n'est pas un plugin ajouté par-dessus — c'est un IDE où l'IA est citoyenne de première classe. Elle peut lire tout votre projet, modifier plusieurs fichiers simultanément, exécuter des commandes dans le terminal et faire du refactoring sur tout le codebase.

Installation

Allez sur cursor.com et téléchargez l'application pour votre système d'exploitation.
Installez-la comme toute autre application. Si vous avez utilisé VS Code, vous vous sentirez chez vous — les extensions et paramètres peuvent être importés.

Abonnement

Cursor propose un plan gratuit (Hobby) avec des fonctionnalités limitées, mais pour un vibe coding sérieux, vous avez besoin du plan Pro (20 €/mois). Ce que vous obtenez :

Complétions Tab illimitées — suggestions de code en temps réel
Mode auto illimité — l'IA choisit automatiquement le meilleur modèle pour chaque tâche
Mode Agent — l'IA peut modifier plusieurs fichiers, exécuter des commandes et implémenter des fonctionnalités complètes
Accès aux meilleurs modèles — Claude, GPT, Gemini

Si vous découvrez que 20 €/mois ne suffit pas (peu probable au début), vous pouvez passer à Pro+ (60 €/mois) ou Ultra (200 €/mois) plus tard.

Conseil : Commencez avec Pro. Surveillez votre consommation pendant une semaine. Passez à un plan supérieur uniquement si vous atteignez constamment les limites.

Premiers pas dans Cursor

Après l'installation :

Ouvrez Cursor et connectez votre compte GitHub.
Familiarisez-vous avec les trois modes principaux :
- Ask Mode (Ctrl/Cmd + L) — vous posez des questions à l'IA, recevez des réponses et suggestions sans modifications automatiques
- Agent Mode (Ctrl/Cmd + I) — l'IA implémente de manière autonome : crée des fichiers, modifie le code, exécute des commandes
- Complétions Tab — suggestions inline pendant que vous tapez, acceptez avec Tab
Configurez les Cursor Rules — des instructions permanentes que l'IA respecte dans votre projet. Créez un fichier .cursorrules à la racine du projet.

Heure 1–3 : Choisir une stack technique simple (et ne pas se compliquer !)

La règle d'or : le monolithe bat les microservices

C'est probablement la décision la plus importante que vous prendrez. Et l'erreur la plus fréquente des développeurs (et de l'IA) est de sur-ingénierie l'architecture.

Vous n'avez pas besoin de :

Docker (pas pour un MVP)
Kubernetes (absolument pas)
Microservices (peut-être dans 2 ans)
Bases de données distribuées
Files de messages
15 services qui communiquent entre eux

Vous avez besoin de :

Un framework full-stack
Une base de données
Un service d'hébergement simple

Stacks recommandés pour le vibe coding

Voici ce qui fonctionne le mieux avec l'IA — des stacks que les modèles connaissent très bien à partir des données d'entraînement :

Option 1 : Next.js + Supabase (la plus friendly avec l'IA)

Next.js — framework React avec server-side rendering, API routes, et routing intégré
Supabase — base de données PostgreSQL avec authentification, stockage, et API automatique
Tailwind CSS — style utilitaire (l'IA génère excellentement Tailwind)
Vercel — déploiement en un clic, gratuit pour les projets personnels

Option 2 : Laravel + Inertia.js + React (idéal si vous préférez PHP)

Laravel — framework PHP mature, documentation excellente
Inertia.js — pont entre le backend Laravel et le frontend React/Vue
SQLite ou PostgreSQL — base de données simple
Laravel Forge ou Railway — déploiement simple

Option 3 : SvelteKit + Prisma + SQLite (minimaliste)

SvelteKit — framework moderne, rapide, code minimal
Prisma — ORM intuitif pour les bases de données
SQLite — zéro configuration pour le développement
Vercel ou Netlify — déploiement automatique

Pourquoi la simplicité compte-t-elle ?

L'IA génère un meilleur code quand la stack est simple. Plus vous avez de dépendances et de couches d'abstraction, plus :

L'IA fait moins d'erreurs
Le debug est plus rapide
Le contexte Cursor reste concentré
Vous pouvez livrer plus vite

Règle pratique : Si vous ne pouvez pas expliquer votre stack en 30 secondes, elle est trop compliquée pour le vibe coding.

Initialisation du projet

Ouvrez le terminal dans Cursor et créez le projet. Exemple avec Next.js :

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
cd my-app

Initialisez Git immédiatement :

git init
git add .
git commit -m "initial setup"

Connectez à un repo GitHub :

gh repo create my-app --public --source=. --push

À partir de ce moment, chaque progrès significatif = un commit. Vous aurez besoin de cette historique.

Heure 3–12 : Écrire de bons prompts et les diviser stratégiquement

C'est le cœur du vibe coding. Vous n'écrivez pas de code — vous écrivez des instructions. Et la qualité de vos instructions détermine la qualité du code généré.

Principe #1 : Ne pas demander tout d'un coup

La plus grande erreur :

❌ "Construis-moi une application de gestion de tâches avec authentification, tableau de bord, CRUD complet, notifications, et export PDF."

C'est "draw the rest of the owl". L'IA générera quelque chose, mais ce sera fragile, plein de raccourcis, et difficile à déboguer.

Au lieu de cela, divisez en petites étapes logiques :

✅ Étape 1 : "Crée le modèle de données pour une application de gestion de tâches. J'ai besoin de : User (name, email, password), Project (name, description, owner), Task (title, description, status, priority, assignee, project). Utilise Prisma comme ORM avec SQLite."

✅ Étape 2 : "Crée la page d'authentification avec login et register, en utilisant NextAuth.js avec credentials provider. Style avec Tailwind, design minimal et propre."

✅ Étape 3 : "Crée un tableau de bord qui affiche les projets de l'utilisateur connecté. Chaque projet est une carte avec le nom, la description courte, et le nombre de tâches. Ajoute un bouton 'Nouveau Projet'."

Chaque étape doit être suffisamment petite pour que l'IA puisse la garder en contexte (le contexte est limité !) et suffisamment claire pour qu'il n'y ait pas d'ambiguïté.

Principe #2 : Utiliser Ask Mode pour la planification, Agent Mode pour l'exécution

Un workflow puissant :

Ask Mode — décrivez ce que vous voulez construire et demandez à l'IA un plan étape par étape
Examinez le plan, ajustez si nécessaire
Agent Mode — donnez chaque étape du plan, une par une
Testez après chaque étape
Committez après chaque fonctionnalité terminée

Principe #3 : Fournir un contexte explicite

L'IA ne lit pas dans les pensées. Plus vous êtes spécifique, meilleur est le résultat. Techniques concrètes :

Références avec @:

@filename — référence à un fichier spécifique du projet
@codebase — l'IA analyse tout le projet
@docs — référence à la documentation externe

Structure d'un bon prompt :

Contexte : Je travaille sur une application Next.js de gestion de tâches.
J'ai déjà l'authentification fonctionnelle et les modèles de données configurés.

Tâche : Crée la page de détail pour un projet individuel.

Exigences :
- Route : /projects/[id]
- Affiche le nom et la description du projet
- Liste les tâches comme un tableau Kanban (colonnes : À Faire, En Cours, Terminé)
- Chaque tâche est une carte draggable entre les colonnes
- Utilise @dnd-kit pour drag and drop
- Style avec Tailwind, design propre

Fichiers pertinents : @schema.prisma @layout.tsx

N'utilise pas de bibliothèques supplémentaires sans me demander.

Principe #4 : Quand quelque chose ne marche pas, donne le contexte à l'erreur

Ne dis pas juste "ça ne marche pas". Fais ceci :

"J'obtiens cette erreur quand j'essaie d'accéder à /projects/1 : [colle l'erreur complète]. J'ai vérifié et le projet avec id 1 existe dans la base de données. Je pense que le problème est server component vs client component. Peux-tu investiguer ?"

Si c'est un problème visuel, prends une capture d'écran et colle-la directement dans le chat Cursor (oui, elle comprend les images).

Principe #5 : Configurer les Cursor Rules

Crée un fichier .cursorrules à la racine du projet :

Tu es un développeur senior spécialisé en Next.js 14+ avec App Router.

Règles :
- Utilise TypeScript strict, pas de any
- Composants serveur par défaut, client seulement quand nécessaire
- Tailwind pour le style, pas de CSS séparé
- Convention de nommage : camelCase pour les variables, PascalCase pour les composants
- Gestion des erreurs avec try/catch dans toutes les opérations async
- Commentaires en français
- Messages commit en anglais, format conventional commits

Stack : Next.js 14, TypeScript, Tailwind CSS, Prisma, SQLite, NextAuth.js

Ces règles sont automatiquement incluses dans chaque prompt, assurant la cohérence sur l'ensemble du projet.

Principe #6 : Diviser tes sessions de travail

Le contexte AI se dégrade au fur et à mesure que la conversation grandit. Après chaque 15-20 messages (ou quand tu changes radicalement la fonctionnalité), ouvre un nouveau chat (Cmd/Ctrl + T). Cursor garde l'accès à tout le projet, mais la conversation est fraîche.

Heure 12–18 : Itération, test, polishing

Cycle de développement vibe coding

C'est le rythme naturel :

Prompt → Génération → Test → Feedback → Ajustement → Commit → Répéter

Quelques conseils pour cette phase :

Teste dans le navigateur après chaque changement majeur. Ne laisse pas l'IA générer 5 fonctionnalités sans vérifier aucune. Si ça ne marche pas, le rollback est douloureux.

Utilise les checkpoints. Cursor a un bouton "Restore checkpoint" à côté de chaque message du chat. Si l'IA a cassé quelque chose, tu peux revenir à l'état précédent en un clic.

Refactorise au fil de l'eau. Périodiquement, demande à l'IA :

"Analyse le code actuel depuis @codebase. Identifie les duplications, incohérences ou motifs qui devraient être refactorisés. Ne fais pas de modifications, liste-les juste."

Puis adresse-les un par un.

Ne ignore pas les avertissements. Si l'IA génère du code qui "marche mais avec des warnings", corrige les warnings maintenant. Ils deviennent des bugs plus tard.

Heure 18–24 : Déploiement avec GitHub et CI/CD

Pourquoi GitHub + CI/CD ?

Tu as le code local, ça marche sur ta machine. Maintenant il faut qu'il aille en ligne, accessible à tous. Et tu ne veux pas faire cela manuellement à chaque fois. Tu veux un pipeline : push vers GitHub → test automatique → déploiement automatique.

Étape 1 : Structurer le repo sur GitHub

Si tu n'as pas encore fait, connecte le projet à GitHub :

# Si tu n'as pas créé le repo encore
gh repo create my-app --public --source=. --push

# Assure-toi d'avoir un bon .gitignore
# (Next.js le crée automatiquement, mais vérifie)

Crée deux branches principales :

main — code de production, toujours stable
develop — code de développement

git checkout -b develop
git push -u origin develop

Workflow : tu travailles sur develop (ou feature branches), fais des PR vers main, au merge ça déploie automatiquement.

Étape 2 : Configurer le déploiement sur Vercel

Vercel est l'option la plus simple pour Next.js (mais fonctionne aussi avec React, Svelte, etc.) :

Va sur vercel.com et crée un compte avec GitHub.
Clique sur "Import Project" et sélectionne ton repo.
Vercel détecte automatiquement le framework et configure la build.
Clique sur "Deploy". En 60 secondes, ton app est en ligne.

Désormais, chaque push vers main déploie automatiquement en production. Chaque PR reçoit un déploiement de preview avec URL unique — parfait pour tester avant le merge.

Étape 3 : Ajouter GitHub Actions pour CI

Même avec Vercel qui fait le déploiement automatique, tu veux une couche CI qui vérifie le code avant le déploiement. Crée le fichier .github/workflows/ci.yml :

name: CI Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  quality-check:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Type check
        run: npx tsc --noEmit

      - name: Build
        run: npm run build

Ce que fait ce workflow :

À chaque push vers main ou develop, et à chaque Pull Request :
- Installe les dépendances
- Exécute le linter (vérifie le style du code)
- Vérifie les types TypeScript
- Essaie une build complète

Si l'un de ces étapes échoue, la PR est marquée avec ❌ et ne déploie pas.

Étape 4 : Le workflow complet

Voici à quoi ressemble le flux de travail du commit à la production :

Tu écris du code dans Cursor
       ↓
git add . && git commit -m "feat: add task board"
       ↓
git push origin develop
       ↓
GitHub Actions exécute CI (lint, types, build)
       ↓
Crée Pull Request : develop → main
       ↓
Vercel crée Déploiement de Preview (URL unique pour test)
       ↓
Tu vérifies le preview, merge PR
       ↓
Vercel déploie automatiquement en production
       ↓
L'app est live ! 🚀

Bonus : Variables d'environnement

Si ton app utilise des clés API, des identifiants de base de données ou d'autres secrets :

Local : fichier .env.local (ajouté au .gitignore, pas uploadé sur GitHub)
Vercel : Settings → Environment Variables → ajoute chaque variable
GitHub Actions : Settings → Secrets and variables → Actions → ajoute les secrets nécessaires

Important : Ne mets jamais de clés API ou de mots de passe directement dans le code. Utilise toujours des variables d'environnement.

Récapitulatif : Timeline de 24 heures

| Intervalle | Activité | Résultat | |------------|-----------|----------| | Heure 0–1 | Installation Cursor, abonnement Pro, familiarisation | IDE configuré, compte actif | | Heure 1–3 | Choix stack technique, initialisation projet, repo GitHub | Projet fonctionnel local, repo connecté | | Heure 3–12 | Développement avec prompts stratégiques (modèles de données → authentification → UI → logique) | Fonctionnalités principales implémentées | | Heure 12–18 | Itération, debugging, polishing, refactoring | App locale stable et testée | | Heure 18–24 | Configuration CI/CD, déploiement Vercel, test production | App live sur internet avec déploiement automatique |

Leçons finales

Le vibe coding ne signifie pas du mauvais code. Cela signifie du code généré intelligemment, guidé par un développeur qui sait ce qu'il veut. L'IA écrit, tu penses, relis et décides.

Les petits prompts battent les grands prompts. Un prompt de 3 lignes qui demande une fonctionnalité claire produit un meilleur code qu'un prompt de 30 lignes qui demande une application complète.

Committe souvent, teste souvent. Git est ton filet de sécurité. Chaque fonctionnalité qui marche = un commit. Ne accumule pas 4 heures de travail sans committer.

Ne t'attache pas au code. Si l'IA a généré quelque chose qui ne marche pas après 2-3 tentatives de correction, fais un rollback et reformule le prompt. C'est plus rapide que de corriger à l'infini.

La stack simple gagne. Un monolithe sur Next.js avec Supabase ou SQLite bat une architecture microservices n'importe quel jour de la semaine — au moins pour un MVP. Tu peux compliquer plus tard quand tu as des utilisateurs réels et des problèmes réels de mise à l'échelle.

L'IA est ton assistant, pas ton patron. Relis le code généré. Demande pourquoi il a fait certaines choix. Apprends de ce qu'il génère. Le meilleur vibe coder n'est pas celui qui accepte aveuglément, mais celui qui guide intelligemment.

Cet article fait partie de la série de publications techniques sur le blog TEN INVENT. Si tu as une idée d'application et souhaites la concrétiser, contactez-nous.