Le Guide Ultime du Vibe Coding
Construire des applications Full-Stack complexes avec Gemini, Claude Opus, Anti-gravity et la dictée vocale.
1. La Boîte à Outils (Setup)
Anti-gravity
L'IDE principal. Connexion via Google obligatoire pour activer l'IA.
- Explorateur de fichiers à gauche
- Éditeur de code au centre
- Agent IA (Chat) à droite
Les Modèles IA
Excellent pour le design visuel, l'UI, le CSS (Tailwind) et le câblage de composants.
Idéal pour la planification complexe, l'architecture système, le backend et l'audit.
2. Interface & Raccourcis Dev
| Action | Raccourci | Description |
|---|---|---|
| Ouvrir/Fermer Chat IA | Alt + Cmd + B | Bascule l'affichage du panneau de l'agent. |
| Nouveau Chat | Cmd + Shift + L | Ouvre instantanément une nouvelle conversation. |
| Navigation Fichiers | Alt + Tab | Navigation rapide entre les fichiers ouverts. |
3. L'Art du Prompting & Vibe Coding
La Dictée Vocale
On parle à 150-200 mots/min. L'IA extrait le sens. Idéal pour des "voice dumps" massifs décrivant toute une architecture.
Modes : Planning vs Fast
- Planning : L'IA réfléchit, propose un workflow et attend validation.
- Fast (Éclair) : Exécution immédiate (refactoring, corrections).
Configuration globale : gemini.mmd
# gemini.mmd - Exemple Rôle : Technologue créatif senior et ingénieur front-end. Design : Interfaces minimalistes, épurées, esthétique Apple. Procédure : Pose-moi toujours les 5 questions clés avant de générer le code. Sécurité : Aucune clé en dur. Utilisation systématique de .env.
4. Audit de Sécurité (Crucial)
Le Processus d'Audit en 3 Étapes
- Contexte Vierge : Ouvrez une *nouvelle* session indépendante (Claude Opus).
- Mode Diagnostic : Fournissez le prompt d'audit. Directive :
Don't make changes. Just audit. - Exécution : Une fois validé, ordonnez :
Execute all of the remaining changes.
5. Architecture & Stack
Next.js & Tailwind
Standardise le rendu (HTML/CSS/JS). Les LLMs sont massivement entraînés dessus.
Supabase (PostgreSQL)
Gère la BDD, l'authentification et les politiques RLS. Structure stricte idéale SaaS.
Déploiement (Netlify/Vercel)
Serverless rapide. Flux : Dev Local -> Staging -> Prod.
GitHub
Indispensable pour éviter le chaos et permettre aux agents de collaborer.
6. Les 5 Projets Construits
1. Site Portfolio (Landing Page)
2. Client Dashboard SaaS
3. Générateur de Leads (Wrapper API)
4. Générateur de Miniatures (Paiement)
5. "Splinter" - Syndication de Contenu
7. Business & VBP
Le Code n'est plus la Douve
L'avantage compétitif est désormais la Distribution (marketing). Passez 5% de votre temps à coder, 95% à marketer.
VBP : Tarification Basée sur la Valeur
Règle : Facturez entre 10% et 20% de cette Valeur Créée totale au client B2B.
Acquisition
- Outbound: Cold Email, DMs (Sniper).
- Inbound: YouTube, SEO (Mégaphone).
- Partenariats: Affiliation (30% aux créateurs).
Le Système Anti-Gravity
Ne l'utilisez pas comme ChatGPT. Construisez une véritable architecture.
Philosophie
- Transformer les actions en `skills` réutilisables.
- Studio IA = Front-end / Anti-Gravity = Back-end.
- Gérer intelligemment le Context Rot.
L'Agent Manager
Interagissez globalement avec l'ensemble de vos projets.
> Action : Pioche data projet A + B.
> Résultat : Génération.
1. Configuration et Organisation
1 URL = 1 Projet
Tout le code va dans un seul dossier pour une URL donnée.
Dossier Global de Compétences
├── anti-gravity-skills/ (audit_seo.md, deploy.md)
└── Nouveau_Projet/ # Importez skills ici
2. Performances & Context Rot
Éviter la Pourriture du Contexte
Ouvrez une toute nouvelle fenêtre pour chaque nouvelle tâche complexe.
Une tâche = Un message
Ne demandez pas de créer une section ET de changer les couleurs en même temps.
Briser une Boucle Infinie
3. Logique & Design
Le Problème du "Trust me bro"
Créez l'arbre de décision visuellement > Générez un Endpoint API > Intégrez via MCP.
La Règle des 80%
Construire l'UI dans AI Studio jusqu'à 80%. Télécharger le ZIP. Finir le backend dans Anti-Gravity.
UI Sniping & Audits
Cloner depuis 21st.dev/Codepen. Faire des captures d'écran (Cmd+Shift+5) pour guider l'IA.
4. Déploiement, MCP & Coûts
Optimisation
- Alléger les fichiers contextuels (`claude.md`).
- Ne jamais conserver plus de 50 outils MCP actifs.
- Modèle Rapide pour tâches simples / Claude Opus pour architecture.
Méthodologie Core & Base de Connaissances
Les fondations du workflow Anti-Gravity et concepts avancés.
La Méthode "NotebookLM Architect"
Conceptualisation
Importez vos notes dans NotebookLM. Discutez pour structurer les features avant de coder.
Le Prompt Technique
Exécution
Copiez le résultat "mot pour mot" dans Anti-Gravity. Laissez l'agent exécuter.
L'IDE Orienté Agent
L'IA ne fait plus d'autocomplétion, elle planifie, code (Front/Back/DB), teste et se répare elle-même de manière autonome.
Le Vibe-Edit
Fournis une image à Gemini, demande d'extraire la 'vibe', et utilise ce prompt pour générer des interfaces stylisées.
RAG Persistant
Utiliser NotebookLM comme un disque dur (RAG) pour vos projets. Évite de saturer la fenêtre de contexte de l'IA.
Google Drive & MCP
Zapier MCP connecte l'IA à votre Drive/Mails pour extraire du contexte et créer des roadmaps ultra-personnalisées.
Privacy & Local (Ollama)
Pour les projets sensibles ("Vibe Coding" souverain) : Installez l'extension Client vers `http://localhost:11434` (llama3 / gemma). 100% hors ligne.
⚡ Test Rapide de Connaissances
1. Quelle est la règle d'or lors du transfert du prompt de NotebookLM vers Anti-Gravity ?
2. Quel outil permet de connecter l'IDE à un backend complet instantanément ?
Le Studio IA & Générateurs
Propulsé par Gemini 2.5 Flash & Algorithmes Anti-Gravity
1. Architecte de Prompts (Templates)
🔮 Oracle Technique
Posez une question sur le Vibe Coding, MCP ou l'architecture.
🎨 Sorcier Tailwind
Décrivez un composant, recevez le HTML/CSS (Style Anti-Gravity).
🧠 Générateur de Skill (.md)
Créez le fichier de règles pour spécialiser votre IA (ex: Expert Python).
🚀 Stratège de Lancement
Plan B2B/SaaS en 3 étapes avec suggestions d'outils MCP.
Tracker & Simulateur d'Agent
Simulateur VBP (Value Based Pricing)
(Panier: 45$) $1,125