Formation Vibe Coding

Pourquoi ces connaissances techniques importent

Vous pourriez considérer que la technique ne vous concerne pas. Vous voulez un outil qui fonctionne, peu importe comment. Cette posture comporte un risque majeur : la dépendance.

Imaginons que vous construisez votre application de gestion de clientèle sur Lovable. Tout fonctionne parfaitement pendant six mois. Puis Lovable triple ses tarifs, ou pivote vers un autre marché, ou ferme. Si vous ignorez totalement ce qui compose votre application, vous perdez tout. Si vous comprenez que votre application se décompose en briques séparables (l'interface d'un côté, les données de l'autre), vous savez que vous pouvez reconstruire l'interface ailleurs tout en conservant l'essentiel : vos données.

Cette connaissance minimale n'est pas optionnelle. Elle constitue votre assurance contre l'enfermement propriétaire.

Les quatre composants d'une application web

Le front-end désigne tout ce que l'utilisateur voit et manipule : les boutons, les formulaires, les couleurs, la disposition des éléments à l'écran. Quand vous décrivez « je veux un bouton bleu en haut à droite qui affiche la liste des clients », vous parlez du front-end. Cette couche est la plus visible mais aussi la plus facilement remplaçable. Perdre votre front-end est contrariant ; le reconstruire prend quelques heures.

Le back-end constitue le moteur invisible de votre application. Il stocke les données (qui sont vos clients, quels dossiers avez-vous ouverts, quel est l'historique des échanges), gère l'authentification (qui a le droit d'accéder à quoi), exécute la logique métier (quand un dossier est clos depuis un an, l'archiver automatiquement). Le back-end est la partie précieuse. Perdre votre back-end, c'est perdre vos données. La reconstruction est alors impossible.

Les intégrations connectent votre application au monde extérieur. Stripe pour encaisser des paiements, Resend pour envoyer des emails, l'API Légifrance pour interroger les textes de loi. Chaque intégration ajoute des capacités mais aussi de la complexité et des points de défaillance potentiels.

Les automatisations font tourner votre application sans intervention humaine. Envoyer un rappel 24 heures avant l'échéance d'un délai de prescription, générer un rapport mensuel d'activité, archiver les dossiers inactifs depuis deux ans.

Pour générer le code

Le marché des outils de vibe coding évolue à une vitesse qui rend toute liste exhaustive rapidement obsolète. Plutôt qu'un inventaire, voici les catégories principales et leurs caractéristiques.

Les générateurs visuels comme Lovable et Bolt excellent pour les prototypes rapides. Vous décrivez votre application en quelques phrases, elle apparaît en quelques minutes. L'interface est intuitive, les résultats souvent impressionnants pour des applications simples. La limite apparaît dès que vous souhaitez du sur-mesure ou une logique complexe.

Les éditeurs augmentés comme Cursor s'adressent à ceux qui veulent aller plus loin. Cursor est un éditeur de code où l'IA assiste votre travail plutôt que de le remplacer entièrement. Vous voyez le code se construire, vous pouvez le modifier, le comprendre, le versionner.

Les agents en ligne de commande comme Claude Code représentent l'approche la plus puissante pour des projets ambitieux. Claude Code fonctionne directement dans votre terminal : vous décrivez ce que vous voulez, l'agent génère le code, l'exécute, identifie les erreurs, les corrige, teste à nouveau, en autonomie.

Installer Cursor

Cursor est un éditeur de code basé sur VS Code, augmenté par l'intelligence artificielle. L'installation prend moins de cinq minutes.

1. Rendez-vous sur cursor.com
2. Cliquez sur « Download » et choisissez votre système (Mac, Windows ou Linux)
3. Lancez l'installateur téléchargé
4. Au premier lancement, connectez-vous avec votre compte Google ou GitHub
5. Cursor propose d'importer vos extensions VS Code existantes : acceptez si vous en avez

L'offre gratuite inclut 2000 complétions par mois et 50 requêtes « slow » au modèle premium. Pour un usage intensif, l'abonnement Pro coûte 20 $/mois.

Installer Claude Code

Claude Code est un agent en ligne de commande développé par Anthropic. Il fonctionne dans votre terminal et peut créer, modifier et exécuter du code en autonomie.

Prérequis

• Node.js 18+ : vérifiez avec node --version dans votre terminal
• Un compte Anthropic avec une clé API (console.anthropic.com)

Installation sur Mac/Linux

Ouvrez votre terminal et exécutez :

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

Configurez ensuite votre clé API :

export ANTHROPIC_API_KEY="sk-ant-votre-clé-ici"

Pour rendre cette configuration permanente, ajoutez la ligne ci-dessus à votre fichier ~/.zshrc (Mac) ou ~/.bashrc (Linux).

Installation sur Windows

Ouvrez PowerShell en tant qu'administrateur et exécutez :

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

Pour la clé API, ajoutez une variable d'environnement système nommée ANTHROPIC_API_KEY avec votre clé comme valeur.

Premier lancement

Naviguez vers le dossier de votre projet et lancez Claude Code :

cd mon-projet
claude

L'agent démarre et attend vos instructions en langage naturel. Tapez votre demande, appuyez sur Entrée, et observez Claude travailler.

La stack technique recommandée

Pour stocker les données : Supabase

Dans le paysage actuel, Supabase s'impose comme le choix évident pour les projets de vibe coding destinés au marché européen.

• Offre gratuite généreuse : 500 Mo de base de données, 1 Go de stockage fichiers, authentification illimitée.
• Open source : Si l'entreprise fermait demain, le logiciel continuerait d'exister.
• Serveurs en Europe : Francfort ou Irlande, conformité RGPD simplifiée.

Le cadre juridique applicable

Vous collectez des données personnelles : noms, emails, numéros de téléphone, contenu des dossiers. Vous êtes responsable de traitement au sens du RGPD. Les sanctions théoriques atteignent 20 millions d'euros ou 4 % du chiffre d'affaires annuel mondial. Pour un avocat, s'ajoute le risque disciplinaire.

Les sept obligations concrètes

1. Information des utilisateurs : politique de confidentialité accessible, mentions légales complètes, bandeau cookies si analytics.
2. Consentement explicite : cases séparées et non pré-cochées. Jamais de case unique « J'accepte tout ».
3. Localisation des données : sélectionnez impérativement la région « EU (Frankfurt) » à la création de votre projet Supabase.
4. Sécurité des données : chiffrement en transit (HTTPS), chiffrement au repos, authentification robuste, Row Level Security.
5. Droits des personnes : consultation, export, modification, suppression. Ces fonctionnalités ne sont pas optionnelles.
6. Registre des traitements : document recensant chaque traitement avec sa finalité, base légale, durées de conservation.
7. Notification de violation : alerter la CNIL dans les 72 heures suivant la découverte d'une faille de sécurité.

Le principe fondamental

La corrélation entre la précision de votre demande et la qualité du résultat est directe et mesurable. Un prompt vague génère une application approximative qui nécessitera dix allers-retours de correction. Un prompt précis produit un résultat exploitable en deux ou trois itérations.

La structure qui fonctionne

Six éléments composent un prompt efficace :

1. Contexte : qui vous êtes, dans quel cadre vous travaillez
2. Objectif : une phrase résumant ce que l'application doit accomplir
3. Fonctionnalités : ce que l'application doit faire concrètement
4. Contraintes techniques : Supabase, auth par magic link, données en Europe...
5. Design : style, palette de couleurs, inspirations
6. Exclusions : ce que vous NE voulez PAS dans cette version

Exemple comparatif

Les prompts qui suivent ont été affinés par itérations successives pour produire du code fonctionnel dans la majorité des cas. Ils supposent l'utilisation de Claude Code ou d'un outil équivalent.

Authentification par magic link

Implémente un système d'authentification avec Supabase utilisant exclusivement les magic links.

Le parcours utilisateur :
- L'utilisateur arrive sur /connexion
- Il saisit son email dans un champ unique
- Il reçoit un email contenant un lien de connexion valide 1 heure
- En cliquant sur le lien, il est authentifié et redirigé vers /espace-personnel
- Sa session persiste même après fermeture du navigateur

Pages à créer :
- /connexion : formulaire email + message de confirmation après envoi
- /espace-personnel : page protégée affichant "Bienvenue [email]" et un bouton de déconnexion
- Toute tentative d'accès à /espace-personnel sans session redirige vers /connexion

Aspects techniques :
- Crée un hook useAuth() centralisant toute la logique d'authentification
- Pendant la vérification de session au chargement, affiche un indicateur de chargement
- Les messages d'erreur doivent être en français et compréhensibles

Credentials Supabase :
- URL : [VOTRE_URL]
- Clé publique : [VOTRE_CLÉ]

Structure de base de données sécurisée

Génère le code SQL pour créer les tables suivantes dans Supabase. Chaque table doit inclure les politiques Row Level Security permettant à chaque utilisateur de voir uniquement ses propres données.

Table "clients" :
Cette table stocke les informations de contact. Un client appartient à un seul utilisateur de l'application.
- Identifiant unique (UUID généré automatiquement)
- Date de création (automatique)
- Nom complet (obligatoire)
- Adresse email (obligatoire, unique par utilisateur, format validé)
- Numéro de téléphone (optionnel)
- Statut (obligatoire : prospect, client_actif, ancien_client)
- Notes libres (optionnel, texte long)
- Référence vers l'utilisateur propriétaire (obligatoire)

Table "dossiers" :
Un dossier appartient à un seul client. Un client peut avoir plusieurs dossiers.
- Identifiant unique
- Date de création
- Référence vers le client concerné
- Intitulé du dossier (obligatoire)
- Description détaillée (optionnel)
- Date d'ouverture (obligatoire)
- Date de clôture (optionnel)
- Statut (ouvert, en_traitement, clos, abandonné)
- Référence vers l'utilisateur propriétaire

Ajoute :
- Les contraintes d'intégrité référentielle (suppression d'un client = suppression de ses dossiers)
- Un index sur le champ email de la table clients
- Un index sur le champ statut de la table dossiers

Génère également des politiques RLS robustes. Active explicitement RLS sur chaque table et crée des politiques pour SELECT, INSERT, UPDATE et DELETE qui vérifient que auth.uid() correspond au user_id de l'enregistrement.

Interface de gestion complète

Crée une interface complète de gestion pour la table "clients" existante dans Supabase.

Tableau principal :
- Colonnes : nom, email, téléphone, statut, date de création
- Pagination : 25 clients par page avec navigation et affichage du total
- Recherche : barre filtrant instantanément sur nom et email (debounce 300ms)
- Filtrage : menu déroulant par statut (tous, prospect, client_actif, ancien_client)
- Tri : cliquer sur un en-tête trie par cette colonne (croissant puis décroissant)

Actions :
- Bouton "Nouveau client" ouvrant un formulaire en modale. Validation du format email et des champs obligatoires avant soumission.
- Bouton "Modifier" sur chaque ligne ouvrant la même modale pré-remplie.
- Bouton "Supprimer" demandant confirmation avant suppression.
- Bouton "Exporter CSV" téléchargeant les données visibles (tenant compte des filtres).

États :
- Chargement initial : squelette de tableau
- Erreur réseau : message explicite + bouton "Réessayer"
- Après action réussie : notification pendant 3 secondes

Credentials Supabase : [URL] et [CLÉ]

Conformité RGPD technique

Ajoute les fonctionnalités RGPD obligatoires à l'application.

Page "Mes données personnelles" accessible depuis le profil :

Section "Consulter" :
Tableau listant toutes les données stockées sur l'utilisateur, organisées par catégorie : informations de compte (email, date inscription), données créées (nombre de clients, nombre de dossiers).

Section "Exporter" :
Bouton "Télécharger toutes mes données" générant un fichier JSON structuré contenant : profil, clients, dossiers, documents (métadonnées uniquement). Clés en français, format lisible.

Section "Supprimer mon compte" :
Processus en plusieurs étapes :
1. Explication de ce qui sera supprimé
2. Saisie du mot "SUPPRIMER" pour confirmer
3. Email de confirmation avec lien d'annulation valide 30 jours
4. Marquage du compte comme "en_suppression"
5. Possibilité d'annuler pendant 30 jours
6. Suppression définitive par tâche planifiée après le délai

Table "suppressions_demandees" pour le suivi.

Accéder aux sources juridiques françaises

Une application juridique gagne en valeur lorsqu'elle peut interroger directement les textes de loi, la jurisprudence ou les conventions collectives. La MCP Factory propose un accès unifié à l'ensemble des bases juridiques françaises pour 12 € mensuels : Légifrance, jurisprudence de la Cour de cassation et des cours d'appel, conventions collectives, BOSS, données entreprises via Pappers.

Calculateur d'indemnités de licenciement

Crée un calculateur d'indemnités de licenciement.

Formulaire :
- Salaire de référence : brut mensuel moyen des 12 ou 3 derniers mois (le plus favorable)
- Ancienneté : années et mois dans l'entreprise
- Convention collective : liste déroulante des principales (Syntec, Métallurgie, Commerce détail, BTP) + option "Autre"
- Motif : personnel, économique, inaptitude
- Âge du salarié (pour majorations éventuelles)

Calculs :
- Indemnité légale selon l'article L. 1234-9 du Code du travail : 1/4 mois par année jusqu'à 10 ans, 1/3 au-delà
- Indemnité conventionnelle si applicable
- Comparaison avec indication du montant le plus favorable

Résultat :
- Détail de chaque calcul avec références légales
- Recommandation explicite
- Avertissements si vérifications manuelles nécessaires

Export PDF présentable avec références et espace pour notes.

Tableau de bord des délais de prescription

Crée un tableau de bord de suivi des délais de prescription.

Saisie d'un dossier :
- Nom et référence interne
- Client (sélection ou création rapide)
- Type de contentieux avec délai automatique : responsabilité contractuelle (5 ans), responsabilité délictuelle (5 ans), droit du travail salaires (2 ans), licenciement (12 mois), consommation (2 ans)
- Date du fait générateur
- Notes

Vue principale :
- Liste triée par urgence (échéance la plus proche en premier)
- Code couleur : vert (>30 jours), orange (15-30 jours), rouge (<15 jours)
- Compteur des dossiers nécessitant action dans les 30 jours

Vue calendrier :
- Affichage mensuel avec échéances positionnées
- Navigation entre les mois

Alertes :
- Email automatique à J-30, J-15, J-7
- Contenu : nom du dossier, client, date d'échéance, lien direct

Multi-utilisateurs :
- Chaque avocat voit ses dossiers
- Les associés voient tous les dossiers

Backend Supabase avec emails via Resend.

Ces erreurs ne sont pas théoriques. Elles se répètent systématiquement chez les débutants en vibe coding et peuvent coûter des jours de travail.

Le prototype en deux heures

Première demi-heure : clarifiez l'intention. Écrivez en une phrase ce que votre application doit permettre. Si cette phrase contient « et » plus d'une fois, vous visez trop large.

Deuxième demi-heure : rédigez le prompt structuré. Ce temps n'est pas perdu, il économise des heures d'itérations.

Troisième demi-heure : générez et testez. Limitez-vous à quatre itérations. Ignorez les détails esthétiques.

Dernière demi-heure : connectez Supabase. Créez la table minimale. Testez avec des données réalistes.

Du prototype au produit viable : 4 semaines

Pour conclure

Le vibe coding redistribue les cartes. Pendant des décennies, créer une application nécessitait soit des compétences techniques rares, soit un budget pour les acheter. Cette barrière s'est considérablement abaissée.

Les risques sont réels. Les incidents de sécurité documentés montrent que le code généré peut être fonctionnel sans être sûr. Pour des applications manipulant des données de clients, le secret professionnel et la responsabilité déontologique imposent une vigilance accrue.

Mais les opportunités sont également tangibles. Un avocat qui maîtrise ces outils peut créer en quelques heures des applications sur mesure que même un budget conséquent n'aurait pas permis de développer il y a cinq ans. L'autonomie technologique devient accessible à qui veut l'apprendre.

À propos de l'auteur

Rédigé par

Pierre Colliot

Fondateur Zevra • Expert Legal Tech & Vibe Coding

Entrepreneur digital depuis 2014, spécialisé en Legal Tech et IA pour avocats. Hôte du podcast Quasar. Diplômé KEDGE Business School. Pratique le vibe coding quotidiennement depuis début 2024 avec +50 projets livrés pour des cabinets d'avocats et entreprises.

• KEDGE Business School — Entrepreneuriat & Marketing (2013-2017)
• 13 000+ followers LinkedIn
• Fondateur Supernovia.io, Zevra, bl-nk.fr

+50

projets vibe coding

10+ ans

d'expérience

13K+

followers LinkedIn

Newsletter LEGAL | IA | TECH

La révolution legaltech arrive — rejoignez 200+ abonnés