Le Guide Complet de Lovable : Tout Ce Que Tu Dois Savoir

Créer ton premier projet

1. Crée un compte sur lovable.dev
2. Clique sur "New Project" depuis le dashboard
3. Tu arrives sur une interface de chat où tu peux décrire ton application

Comprendre l'interface

L'interface de Lovable se compose de plusieurs éléments :

• La vue éditeur : là où tu vois le code de ton application et le preview
• L'interface de chat : là où tu communiques avec l'IA pour construire ton app
• Le panneau de preview : montre une vue en direct de ton application
• Les paramètres : pour configurer les détails du projet, les intégrations, etc.

Plans gratuit vs payant

• Le plan gratuit offre un nombre limité de messages par jour
• Les plans payants donnent plus de messages, des projets privés, et des fonctionnalités supplémentaires
• Réfléchis à tes besoins avant de choisir

Mode Chat vs Mode par défaut

C'est une distinction importante à comprendre :

• Mode Chat : pour les discussions, la planification et le debugging sans faire de changements au code. Active-le dans les paramètres Labs pour avoir des conversations sans modifications.
• Mode par défaut : pour implémenter des changements réels dans le code

Utilise le Mode Chat quand tu veux réfléchir, planifier ou débugger sans risquer de casser quelque chose. Passe en mode par défaut uniquement quand tu es prêt à faire des modifications.

Questions à te poser au début

Avant de te lancer, pose-toi ces questions :

1. Est-ce que j'ai besoin d'un backend ? (la plupart des apps en ont besoin)
2. Est-ce que j'ai besoin d'une authentification utilisateur ?
3. Quelle est mon ambition pour ce projet ? (gratuit, premium, fonctionnalités avancées ?)
4. Est-ce que l'intégration d'IA va bénéficier à mes utilisateurs ?
5. De quelles APIs tierces pourrais-je avoir besoin ?

Le principe CLEAR

Pour des prompts efficaces, suis ces principes :

• Contexte : donne le contexte ou le rôle de l'IA
• Tâche : spécifie le but exact que tu veux atteindre
• Guidelines : inclus ton approche ou style préféré
• Exemples : donne des exemples de ce que tu attends (si utile)
• Contraintes : mentionne les limitations ou ce qu'il faut éviter

Le prompting structuré (méthode "petites roues")

Pour les débutants ou les tâches complexes, structure tes prompts comme ça :

Contexte : [Informations de fond sur ton app]
Tâche : [La fonctionnalité spécifique que tu veux implémenter]
Guidelines : [Ton approche préférée]
Contraintes : [Les limitations ou exigences spécifiques]

Exemple :

Contexte : Je crée une app de planification de repas pour des utilisateurs soucieux de leur santé
Tâche : Construis un formulaire pour ajouter de nouvelles recettes avec ingrédients, calories et temps de préparation
Guidelines : Utilise un design clean et minimaliste avec Tailwind CSS
Contraintes : Le formulaire doit valider tous les champs avant soumission

Développement incrémental

Découpe les applications complexes en petites tâches :

1. Commence par la fonctionnalité principale (ex: "Crée une app todo basique")
2. Ajoute les fonctionnalités une par une (ex: "Ajoute l'authentification", puis "Ajoute la possibilité de marquer les tâches comme terminées")
3. Teste après chaque ajout avant de passer à la suite

Le méta-prompting

Demande à Lovable de t'aider à améliorer tes prompts :

Je veux créer un dashboard avec des analytics utilisateur. Aide-moi à formuler un meilleur prompt pour cette demande.

Erreurs courantes à éviter

• Ne micromanage pas les petits détails trop tôt
• Focus sur la fonctionnalité avant le design
• Suis le plan que tu as établi au départ
• Pense à toi comme le chef de projet, pas le codeur

Utiliser des références visuelles

1. Crée des maquettes avec des outils comme Figma ou Excalidraw
2. Prends des screenshots de tes designs
3. Partage-les avec Lovable en glisser-déposer ou copier-coller
4. Demande à Lovable d'implémenter le design

Documentation du projet

Une bonne documentation est essentielle. Crée ces documents clés :

1. Plan d'implémentation étape par étape
2. Flux de l'app avec le parcours utilisateur, menus et pages
3. Guidelines de design basiques

Des outils comme codeguide.dev peuvent t'aider à générer ces documents automatiquement.

C'est quoi Supabase ?

Supabase, c'est une alternative open-source à Firebase. Elle fournit une base de données PostgreSQL hébergée avec des capacités temps réel, une authentification utilisateur, du stockage de fichiers, et des fonctions serverless. La connecter à Lovable te donne un backend prêt pour la production sans écrire de code boilerplate.

Configuration de Supabase

1. Crée un compte sur Supabase
2. Crée un nouveau projet dans Supabase
3. Dans Lovable, va dans Settings → Connect Supabase
4. Suis les instructions pour lier ton projet Supabase

Deux approches pour l'authentification

Il y a deux façons de gérer l'authentification, et personnellement j'ai testé les deux :

Option 1 : Authentification avec Supabase

C'est top et ça marche bien, mais il faut savoir que Supabase ne gère pas l'envoi des emails transactionnels (mot de passe oublié, magic links, confirmation d'inscription, etc.). Tu dois donc ajouter un service d'emailing à côté.

Sur un de mes projets, j'ai utilisé Brevo pour les emails transactionnels. Il faut demander à Lovable de créer une Edge Function pour gérer l'envoi des emails via Brevo.

Option 2 : Authentification avec Clerk (ma préférence)

C'est ce que j'utilise et ce que je montre dans la formation Cofondateur IA.

Avec Clerk, tout est géré : login, inscription, mot de passe oublié, magic links, et tous les emails transactionnels. Pas besoin de brancher un service d'emailing séparé.

Dans ce cas, Supabase sert uniquement pour la base de données et les Edge Functions, pas pour l'auth.

Fonctionnalités courantes avec Supabase

Tables de base de données :

Crée une table 'tasks' avec les champs id, title, description et completion status

Row-Level Security (RLS) :

Configure des politiques RLS pour que les utilisateurs ne puissent voir que leurs propres tâches

Edge Functions : pour gérer les appels API, l'intégration IA, et autres processus backend

Bonnes pratiques pour Supabase

1. Définis clairement ton schéma de base de données avant l'implémentation
2. Utilise la fonctionnalité temps réel de Supabase pour les mises à jour instantanées
3. Teste les opérations de base de données à fond avant le déploiement

Dépannage de la connexion Supabase

Si tu rencontres des problèmes :

1. Vérifie que ton URL Supabase et ta clé API sont corrects
2. Assure-toi que ton site est ajouté aux origines autorisées de Supabase
3. Regarde les logs des Edge Functions dans Supabase pour les messages d'erreur

Ajouter des clés API de manière sécurisée

1. Crée ta clé API (ex: depuis OpenAI, Stripe, etc.)
2. Dans Lovable, demande de stocker la clé API de manière sécurisée dans Supabase
3. Lovable t'aidera à configurer la clé dans les secrets Supabase
4. Ça garde tes clés sécurisées plutôt que de les mettre en dur dans le code

C'est quoi GitHub ?

Pense à GitHub comme un cloud pour ton code. C'est l'endroit où tu sauvegardes tout ton projet en ligne, avec un historique de toutes les modifications.

C'est important pour deux raisons :

1. Sauvegarde : si tu fais une bêtise, tu peux revenir en arrière à une version qui marchait
2. Flexibilité : si un jour tu ne veux plus utiliser Lovable et que tu préfères passer sur VS Code avec Claude Code, ou sur Cursor, tu pourras récupérer ton code et continuer à travailler dessus ailleurs

Connecter GitHub

1. Dans l'éditeur Lovable, clique sur GitHub → Connect to GitHub
2. Autorise Lovable à accéder à ton compte GitHub
3. Choisis de créer un nouveau repo (ou d'en utiliser un existant)

C'est tout. Une fois connecté, chaque modification que tu fais dans Lovable est automatiquement sauvegardée sur GitHub.

Pourquoi c'est utile

• Filet de sécurité : tu peux toujours revenir à une version précédente
• Liberté de changer d'outil : ton code t'appartient, tu peux le récupérer et l'utiliser ailleurs
• Déploiement facile : certains services d'hébergement (comme Cloudflare) se connectent directement à GitHub

Switcher vers un autre éditeur de code

Si tu décides de quitter Lovable pour continuer ton projet sur VS Code ou Cursor, c'est simple :

1. Clone ton repo GitHub sur ton ordinateur
2. Ouvre-le dans l'éditeur de ton choix (VS Code, Cursor, etc.)
3. Continue à développer avec Claude Code ou l'IA de ton choix
4. Quand tu fais des modifications, elles sont sauvegardées sur GitHub

C'est ce workflow que je détaille dans la section "Passer de Lovable à VS Code / Cursor".

Quand se concentrer sur le design

• Termine d'abord les fonctionnalités principales
• Corrige les bugs majeurs avant les améliorations esthétiques
• Dédie un temps spécifique au design (ex: jour 5 dans un workflow de 7 jours)

Ressources et librairies de design

• 21st.dev : composants UI et animations avec des prompts prêts à l'emploi pour Lovable
• Mobbin : wireframes et patterns de design des plus grandes marques
• Shadcn/UI et Tailwind : librairies de composants standard
• Material UI : templates complets pour dashboards et applications

L'approche "3S"

1. Select (Sélectionner) : utilise l'outil d'édition de Lovable pour sélectionner le composant que tu veux modifier
2. Screenshot : prends des captures d'écran des designs que tu veux implémenter
3. Sketch (Esquisser) : utilise des outils comme Excalidraw pour créer des wireframes

Utiliser l'outil Edit

1. Clique sur le bouton Edit dans Lovable
2. Sélectionne l'élément que tu veux modifier
3. Fais des changements ou demande à Lovable de le modifier
4. Sauvegarde les changements

Implémenter des designs depuis 21st.dev

1. Parcours les composants sur 21st.dev
2. Trouve un composant qui te plaît
3. Clique sur "Copy Prompt"
4. Colle le prompt dans Lovable
5. Lovable implémentera le design

Utiliser des screenshots comme référence

1. Trouve un design que tu aimes (depuis Mobbin, Tailwind UI, etc.)
2. Prends une capture d'écran
3. Colle-la dans Lovable
4. Demande : "Peux-tu reproduire ce design dans mon application ?"

Créer des wireframes avec Excalidraw

1. Esquisse ton design dans Excalidraw
2. Prends une capture d'écran de ton esquisse
3. Partage-la avec Lovable
4. Demande à Lovable d'implémenter le design

Édition avancée avec le Dev Mode

1. Active le Dev Mode dans les paramètres de ton compte Lovable
2. Utilise-le pour éditer directement le code quand nécessaire
3. Utilise-le pour des ajustements précis difficiles à expliquer en prompts

Checklist pré-déploiement

1. QA complète (Quality Assurance)

   • Crée des comptes de test
   • Essaie toutes les fonctionnalités avec un regard frais
   • Teste sur différents navigateurs et appareils

2. Configure le SEO

   • Mets à jour les titres, descriptions et meta tags
   • Prépare les images Open Graph pour le partage social

3. Ajoute le tracking analytics

Configuration SEO

Utilise ce prompt avec Lovable :

Je suis prêt pour le lancement. Mets à jour :
1. Le titre
2. La description
3. Les paramètres Open Graph
4. Le schema organization
5. Tout autre élément SEO

Ne modifie pas le favicon ou l'og-image, je m'en occupe manuellement.

Préparer les images pour le partage social

1. Crée une image Open Graph (1200x630px)

   • Sauvegarde-la en "og-image.png"

2. Crée un favicon

   • Utilise favicon.io pour convertir ton logo
   • Sauvegarde en "favicon.ico" ou "favicon.png"

3. Upload les deux dans le dossier /public de ton repo GitHub

Options d'hébergement

Hébergement sur Lovable : Tu peux héberger directement sur Lovable en cliquant sur "Publish" en haut à droite. Tu obtiens un sous-domaine lovable.app.

Autres services d'hébergement : Il existe d'autres services comme Vercel ou Netlify qui sont très bien.

Personnellement, j'utilise Cloudflare Pages. C'est gratuit, c'est top, tu ajoutes ton nom de domaine et ça gère tout automatiquement. Chaque fois que tu fais une modification sur GitHub, ton site se met à jour. Simple et efficace.

Configuration des emails

Ça dépend de comment tu as configuré ton authentification :

Si tu utilises Clerk (comme moi) : Clerk gère tous les emails transactionnels automatiquement : mot de passe oublié, magic links, confirmation d'inscription, etc. Tu n'as rien à configurer côté email transactionnel.

Pour l'email marketing, j'utilise Brevo à côté.

Si tu utilises Supabase pour l'auth : Tu dois brancher un service d'emailing comme Brevo pour les emails transactionnels. Il faudra demander à Lovable de créer une Edge Function pour gérer l'envoi des emails.

Paramètres Supabase importants pour la production

Si tu utilises Supabase pour l'authentification :

1. Va dans Authentication → Settings → URL Configuration
2. Mets à jour le Site URL avec ton URL de production (pas localhost)
3. Ça assure que la vérification email fonctionne correctement

Obtenir du feedback utilisateur

1. Crée un formulaire de feedback simple
2. Envoie des emails aux nouveaux utilisateurs pour avoir leurs impressions
3. Track les métriques essentielles : inscriptions, usage des fonctionnalités, visites de retour
4. Utilise le feedback pour orienter le développement futur

Approche de debugging

1. Bouton "Try to Fix" : utilise le bouton de correction intégré de Lovable pour les erreurs simples
2. Prompting structuré : quand le bouton ne fonctionne pas, utilise un prompt structuré
3. Aide externe : utilise ChatGPT ou d'autres outils IA pour les problèmes complexes

Template de prompt pour corriger les bugs

Je rencontre cette erreur : [MESSAGE D'ERREUR]
J'ai essayé le bouton "Try to fix it" mais ça n'a pas résolu le problème.
Voici ce que je vois :

[Décris le problème en détail]
[Si applicable, inclus les erreurs de console]

Qu'est-ce qui cause ce problème et comment on peut le corriger ?

Écran blanc ou chargement infini

• Vérifie les erreurs JavaScript dans la console du navigateur
• Cherche des erreurs dans ta hiérarchie de composants
• Essaie un hard refresh (Ctrl+F5 ou Command+Shift+R)
• Utilise le bouton "Try to fix" dans Lovable

Problèmes d'authentification

• Vérifie que ton URL Supabase et ta clé API sont corrects
• Check ta configuration d'auth dans Supabase
• Assure-toi que ton site est ajouté aux origines autorisées de Supabase
• Vérifie les paramètres de vérification email

Problèmes de connexion base de données

• Confirme que ton projet Supabase est bien lié
• Vérifie les problèmes de politique Row Level Security (RLS)
• Vérifie que tes tables ont la bonne structure
• Regarde les logs des Edge Functions dans Supabase

Erreurs de composants React

• Utilise des console.log pour identifier le composant problématique
• Vérifie les dépendances manquantes dans les hooks useEffect
• Cherche des boucles de rendu infinies dans les mises à jour de state
• Considère de revenir à une version précédente qui fonctionnait

Utiliser ChatGPT pour les bugs complexes

1. Identifie les fichiers qui causent probablement le problème
2. Télécharge les fichiers bruts depuis GitHub
3. Upload-les dans ChatGPT
4. Décris l'erreur en détail
5. Demande à ChatGPT d'analyser le problème et de proposer une solution
6. Demande à ChatGPT de générer un prompt pour Lovable avec la correction

Prévenir les bugs futurs

Quand un bug est corrigé, demande à Lovable :

• "Comment on aurait pu éviter ce problème ?"
• "Qu'est-ce qu'on peut changer dans notre workflow pour prévenir des problèmes similaires ?"
• "Quels signaux d'alerte devrait-on surveiller ?"

Prompts de debugging avancés

Investigation initiale :

La même erreur continue d'arriver. Prends un moment pour faire une investigation préliminaire et trouver la cause racine. Examine les logs, workflows et dépendances pour comprendre le problème. Ne fais aucun changement tant que tu n'as pas compris la situation et proposé une solution initiale basée sur ton analyse.

Analyse approfondie :

Le problème persiste sans résolution. Fais une analyse approfondie du flux et des dépendances, en arrêtant toutes modifications jusqu'à ce que la cause racine soit identifiée avec certitude. Documente les échecs, leurs raisons, et tout pattern ou anomalie observé dans le comportement. Pas de spéculation - assure-toi que tes findings sont détaillés et complets avant de suggérer des solutions.

Nettoyage des console.log :

Peux-tu élaborer une stratégie pour identifier et éliminer systématiquement les console.log superflus tout en préservant la fonctionnalité et le design ? Le plan doit décrire les étapes pour vérifier que chaque log est non-essentiel, documenter ceux qui pourraient nécessiter un traitement alternatif, et faire des tests approfondis pour s'assurer que l'intégrité de l'app est maintenue.

Pourquoi sortir de Lovable ?

Lovable c'est parfait pour démarrer rapidement, mais pour aller plus loin et avoir un contrôle total sur ton projet, tu as besoin d'outils plus puissants comme VS Code avec Claude Code ou Cursor.

Étapes pour synchroniser ton projet

1. Transfère le projet vers GitHub

• Dans l'éditeur Lovable, clique sur l'icône GitHub en haut à droite
• Sélectionne "Transfer to GitHub"
• Connecte-toi à ton compte GitHub si demandé
• Choisis ton compte ou organisation GitHub
• Clique sur "Create Repository"
• Attends la confirmation avec le lien vers le nouveau repo

2. Clone le repo dans VS Code ou Cursor

• Ouvre VS Code ou Cursor
• Clique sur File → Clone Git Repository
• Colle l'URL du repo GitHub (ex: https://github.com/ton-username/nom-du-projet.git)
• Choisis un dossier destination sur ton ordinateur
• Clique sur "Clone"
• L'app téléchargera le repo et ouvrira tous les fichiers

3. Fais un changement de code

• Dans le panneau chat de Cursor ou avec Claude Code, tape une demande comme :

  Change la couleur principale du site de violet à bleu
  

• L'IA suggérera des mises à jour dans les fichiers concernés
• Clique sur "Accept All Changes" quand demandé
• Attends que les mises à jour soient appliquées

4. Ouvre le terminal et vérifie le statut Git

• Ouvre un terminal (clic sur le "+" en bas → "New Terminal")
• Tape git status
• Confirme quels fichiers ont été modifiés

5. Commit et push les changements vers GitHub

Option A - Via le terminal :

git add .
git commit -m "Updated primary color to blue"
git push

Option B - Via le chat de l'IA :

• Tape : "Synchronise ces changements avec GitHub"
• L'IA gèrera le add, commit et push pour toi

6. Vérifie les changements dans Lovable

• Retourne sur ton projet Lovable
• Attends quelques secondes - Lovable se synchronise automatiquement avec GitHub
• Pas besoin de rafraîchir ; la version mise à jour devrait apparaître dans le preview
• Confirme que tes changements (ex: mise à jour des couleurs) sont bien en ligne

C'est fait !

Tu as maintenant un workflow complet : construire dans Lovable, éditer dans VS Code/Cursor, synchroniser via GitHub, et voir les mises à jour en direct.

Pourquoi la documentation est cruciale

Avant de te lancer sur Lovable, il est essentiel d'avoir une vision claire de ce que tu veux construire. Sans ça, tu vas tourner en rond avec des prompts vagues et l'IA va partir dans tous les sens.

C'est pour ça que dans la formation Cofondateur IA, je te montre comment transformer ton idée en documents clairs avant de toucher à Lovable.

Les deux documents essentiels

L'idée, c'est de donner à ChatGPT (ou Claude) ton idée de projet, et de lui faire générer deux documents :

📄 Document A — Le "One Pager produit"

C'est un mix entre le PRD (Product Requirement Document) et le UI Starter. En clair : un résumé de ce que le produit doit faire et à quoi il ressemble.

Il contient :

• Ce que fait ton app en une phrase claire
• Qui sont tes utilisateurs cibles
• Les fonctionnalités principales (pas 47, juste l'essentiel)
• Le parcours utilisateur (de l'inscription à l'utilisation)
• L'apparence générale (style, couleurs, ambiance)

🧩 Document B — Le plan technique

Il détaille la stack, la base de données et la logique d'implémentation. ChatGPT peut même te suggérer des outils que tu ne connais pas encore.

Il contient :

• La stack technique (frontend, backend, base de données)
• La structure de la base de données (quelles tables, quels champs)
• Les intégrations nécessaires (Stripe, APIs externes, etc.)
• La logique d'implémentation étape par étape

Le rôle de ces deux documents

Ces fichiers sont la base du prompt principal que tu utiliseras dans Lovable. Ils servent de contexte produit à l'IA, pour qu'elle puisse coder et designer ton projet correctement.

Avant d'aller plus loin, relis-les et corrige ce qui te semble imprécis. Tu peux discuter avec ChatGPT pour ajuster les détails ou valider certaines parties.

Utiliser la Knowledge Base de Lovable

Une fois tes documents prêts, tu peux les ajouter dans la "Knowledge Base" de Lovable (dans les paramètres du projet). L'IA aura toujours ce contexte en tête quand elle travaille sur ton projet.

Tu peux aussi prompter l'IA avec :

Avant d'écrire du code, lis la Knowledge Base et partage ta compréhension de mon projet.

Utilise le "Chat mode" pour cette tâche afin de t'assurer qu'aucune modification n'est faite à ton projet pendant que tu valides la compréhension de l'IA.

Mobile First

La plupart des développeurs priorisent le design desktop simplement parce que ça a l'air mieux sur un grand écran. Mais la réalité, c'est qu'on devrait se concentrer sur le mobile-first depuis des années.

Prompt recommandé :

Rends toujours les choses responsives sur tous les breakpoints, avec un focus mobile-first.
Utilise les best practices UI/UX modernes pour déterminer comment les breakpoints devraient changer les composants.
Utilise les breakpoints intégrés de shadcn et Tailwind au lieu de breakpoints custom, sauf si l'utilisateur demande explicitement des breakpoints personnalisés.
Optimise l'app pour mobile sans changer son design ou sa fonctionnalité. Analyse la mise en page et la responsivité pour identifier les ajustements nécessaires pour les petits écrans et les interactions tactiles. Élabore un plan détaillé avant d'éditer du code, et teste à fond sur tous les appareils pour t'assurer que l'app se comporte exactement comme maintenant. Pause et propose des solutions si tu n'es pas sûr.

Être précis et détaillé

Quand tu travailles avec Lovable, il est crucial de fournir des demandes claires et spécifiques. Plutôt que de dire simplement "déplace le bouton à droite", dis plutôt : "dans le header en haut, déplace le bouton d'inscription sur le côté gauche de la page, en t'assurant que le style reste cohérent."

Plus tes instructions sont précises, moins tu auras d'erreurs et plus tu économiseras de crédits !

Toujours ajouter des instructions sur comment tu veux que Lovable approche chaque tâche :

Guidelines clés : Approche les problèmes systématiquement et articule ton raisonnement pour les problèmes complexes. Découpe les tâches importantes en parties gérables et demande des clarifications si nécessaire. Quand tu fournis du feedback, explique ton processus de réflexion et pointe à la fois les défis et les améliorations potentielles.

Étape par étape

Évite d'assigner cinq tâches à Lovable en même temps ! Ça peut amener l'IA à créer de la confusion. Voici une meilleure approche :

1. Commence par le design frontend, page par page, section par section
2. Puis branche le backend en utilisant l'intégration native Supabase
3. Ensuite, affine l'UX/UI si nécessaire

Ce processus étape par étape permet à l'IA de se concentrer sur une tâche à la fois, réduisant la probabilité d'erreurs et d'hallucinations.

Ne pas perdre de composants

Tu peux implémenter cette vérification après des changements significatifs et après une série de petits ajustements. Cette pratique a été inestimable pour maintenir la cohérence du projet et prévenir la perte soudaine de composants.

Réfère-toi régulièrement à notre document filesExplainer.md pour t'assurer qu'on enregistre précisément les changements dans le code et les composants, gardant notre structure de fichiers organisée et à jour.

Refactoring

Le refactoring est essentiel dans ton cycle de développement avec Lovable. Il est souvent suggéré par l'IA pour minimiser le temps de chargement et les erreurs.

Prompt de refactoring :

Refactorise ce fichier tout en t'assurant que l'interface utilisateur et la fonctionnalité restent inchangées - tout doit apparaître et fonctionner de manière identique. Priorise l'amélioration de la structure et de la maintenabilité du code. Documente soigneusement la fonctionnalité existante, confirme que les protocoles de test sont établis, et implémente les changements graduellement pour prévenir les risques ou régressions. Si tu n'es pas sûr à un moment donné, pause le processus.

UI et Design

Améliorer un composant spécifique :

Améliore le [NOM DU COMPOSANT] pour avoir une apparence plus professionnelle. Rends-le [AMÉLIORATIONS SPÉCIFIQUES] tout en maintenant la cohérence avec notre système de design global.

Implémenter un design depuis une référence :

J'aimerais implémenter un design similaire à cette capture d'écran. Crée un [TYPE DE COMPOSANT] qui correspond à cette mise en page et ce style, tout en s'intégrant au système de design existant de l'application.

Créer des animations :

Ajoute une animation de transition fluide quand [ACTION SE PRODUIT]. Utilise des transitions CSS ou Framer Motion, en t'assurant que ça fonctionne sur tous les appareils et n'impacte pas les performances.

Implémenter une mise en page responsive :

Rends la [PAGE/COMPOSANT] entièrement responsive. Sur mobile (< 768px), ça doit [COMPORTEMENT MOBILE]. Sur tablette (768px-1024px), ça doit [COMPORTEMENT TABLETTE]. Sur desktop (>1024px), ça doit [COMPORTEMENT DESKTOP].

Dépannage

Corriger une erreur spécifique :

Je rencontre cette erreur : [MESSAGE D'ERREUR]. Elle se produit quand [ÉTAPES POUR REPRODUIRE]. Voici ce que j'ai déjà essayé : [TENTATIVES PRÉCÉDENTES]. Analyse le problème et fournis une solution.

Résoudre des problèmes d'authentification :

Les utilisateurs ont des problèmes avec l'authentification. Spécifiquement, [DÉCRIS LE PROBLÈME]. Vérifie notre flux d'authentification, la configuration Supabase, et le code côté client pour identifier et corriger le problème.

Optimisation des performances :

La [PAGE/FONCTIONNALITÉ] charge lentement. Analyse notre code pour identifier les goulots d'étranglement de performance, surtout dans [ZONES SPÉCIFIQUES], et optimise pour de meilleurs temps de réponse et une meilleure expérience utilisateur.

SEO

Écrire des métadonnées efficaces :

Génère un titre et une meta description optimisés SEO pour cette page : [SUJET DE LA PAGE]. Garde le titre sous 60 caractères et la description sous 160 caractères.

Écrire du schema markup :

Écris du schema markup JSON-LD pour une page [TYPE DE PAGE] avec ces données : [INSÈRE LES DONNÉES]. Assure-toi qu'il suit les guidelines de données structurées de Google.

Améliorer le SEO on-page :

Analyse le contenu de cette page pour des améliorations SEO : [COLLE LE CONTENU]. Suggère le placement de mots-clés, l'usage des headers, et des améliorations de structure.

Quand utiliser l'automatisation

• Edge Functions : pour les appels API directs via Supabase
• n8n : pour l'automatisation auto-hébergée et scalable, et pour intégrer des services externes (Slack, Stripe, outils CRM, etc.)

Exemple : Appeler une API IA via une Edge Function

1. Crée ton interface dans Lovable avec un formulaire ou un bouton d'action
2. Demande à Lovable de créer une Edge Function Supabase qui appelle l'API de ton choix (OpenAI, Claude, Replicate, etc.)
3. Stocke ta clé API dans les secrets Supabase (jamais en dur dans le code)
4. L'Edge Function reçoit les données du frontend, appelle l'API, et retourne le résultat
5. Lovable affiche le résultat à l'utilisateur

Webhooks et appels API : cas d'usage avancés

• Valide les réponses : assure le bon traitement des réponses webhook
• Teste de manière incrémentale : envoie d'abord des données minimales avant de construire des workflows API complexes
• Utilise des modèles de raisonnement : débugge les erreurs en demandant à l'IA d'analyser les réponses incorrectes