Concepts généraux
- IA (Intelligence Artificielle) : La simulation, par des machines (en particulier des systèmes informatiques), de processus d’intelligence humaine permettant d’accomplir des tâches comme l’apprentissage, le raisonnement et la résolution de problèmes.
- Prompt** :** Un texte ou une entrée qui guide les modèles d’IA afin de générer des résultats ou d’effectuer certaines tâches. Il s’agit d’une fonctionnalité clé de Lovable, et c’est avec des invites que vous créez ou modifiez des composants ou éléments spécifiques dans votre application.
Termes spécifiques à Lovable
- Chat Mode** :** Lovable va au-delà de la simple génération de code ; il devient un assistant interactif qui te guide à chaque étape du développement. Il aide les fondateurs à réfléchir de manière critique, à planifier efficacement, à déboguer intelligemment et à livrer en toute confiance.
- Mode édition : L’action de modifier du contenu ou du code.
- Edit** :** Un outil qui permet un développement piloté par l’IA avec des contrôles visuels natifs de Tailwind pour un affinage facile.
- Historique : Le système de suivi et de gestion des modifications apportées à ton app et à ton code au fil du temps.
- Knowledge** :** Capture les détails essentiels du projet dans un document vivant qui évolue avec ton app.
- Labs** :** Fonctionnalités expérimentales de Lovable, dédiées au test et à la démonstration de fonctionnalités nouvelles, innovantes ou en cours de développement. Celles-ci peuvent être modifiées ou supprimées à tout moment.
- Remixer : Tu peux remixer un projet public existant ou l’un de tes propres projets. Le remixage te permet de réutiliser l’état actuel d’un projet comme point de départ et de construire à partir de celui-ci. C’est un excellent moyen d’explorer de nouvelles idées, d’apporter des ajustements ou d’itérer avec différentes modifications tout en préservant la version originale. Note qu’il n’est pas possible de remixer des projets lorsque Supabase est connecté.
- Aperçu : Permet aux utilisateurs de voir ou de tester du contenu en direct ou des fonctionnalités avant qu’ils ne soient finalisés ou publiés, de manière interactive.
- Diff : Une comparaison qui montre les différences entre deux versions d’un fichier ou d’un code.
- /index : Fait référence à la page principale ou par défaut d’un site web ou d’une app, souvent nommée « index.html » ou « index.js ».
- Lovable API - Build with URL** :** La fonctionnalité Lovable API Build with URL te permet de créer des applications par programmation en passant des invites et des images via des paramètres d’URL. Cela permet une intégration fluide avec des sites web, des outils internes ou des workflows d’automatisation, ce qui permet aux utilisateurs de générer des apps Lovable en un seul clic.
Concepts produit et développement
Gestion de produits & Stratégie
- MVP (Minimum Viable Product) – Une version d’un produit qui comporte juste assez de fonctionnalités pour satisfaire les premiers utilisateurs et valider une idée avant un développement à grande échelle.
- Feuille de route – Un plan stratégique global qui décrit la vision, la direction et les fonctionnalités prévues pour un produit au fil du temps.
- Demande de fonctionnalité – Une suggestion formelle ou informelle, émise par des utilisateurs ou des parties prenantes, pour ajouter une nouvelle fonctionnalité à un produit.
- User Story – Une description courte et simple d’une fonctionnalité ou d’un besoin, rédigée du point de vue d’un utilisateur final.
- Parcours utilisateur : La série d’étapes qu’un utilisateur suit pour atteindre un objectif spécifique au sein d’un produit ou d’un service.
- Persona : Une représentation fictive d’un utilisateur cible, basée sur des recherches, pour guider les décisions de conception et de développement.
Concepts d’ingénierie
- PRD (Product Requirements Document) : Un document détaillé qui décrit les objectifs, les fonctionnalités et les spécifications d’un produit afin de guider son développement.
- API (Application Programming Interface) : Un moyen permettant à différents services de communiquer. Vous pouvez le voir comme un protocole qui indique quel type d’informations vous pouvez obtenir ou envoyer entre des systèmes. Les types les plus courants sont les API REST, utilisées par de nombreux sites, et les API GraphQL, qui offrent une approche plus flexible pour interroger des données.
- Refactor : Processus de restructuration de code existant sans modifier son comportement externe, afin d’améliorer sa lisibilité, sa maintenabilité ou ses performances.
- GitHub : Une plateforme web de contrôle de version et de développement logiciel collaboratif utilisant Git.
Données et analyses
- Test A/B – Méthode consistant à comparer deux versions d’une page web ou d’une fonctionnalité afin de déterminer laquelle offre les meilleures performances en fonction du comportement des utilisateurs.
- Taux de conversion – Pourcentage d’utilisateurs qui réalisent une action souhaitée, comme s’inscrire ou effectuer un achat.
- Taux de désabonnement – Pourcentage d’utilisateurs qui arrêtent d’utiliser un produit sur une période donnée.
- Taux de rétention – Pourcentage d’utilisateurs qui continuent à utiliser un produit au fil du temps.
- Suivi d’événements – Suivi d’actions utilisateur spécifiques (par exemple, clics sur des boutons, envois de formulaires) pour mieux comprendre leur comportement et leur engagement.
Playbook de développement UI/UX et front-end
Développement frontend
- Frontend : La partie d’une application logicielle avec laquelle les utilisateurs interagissent directement, englobant les éléments d’interface utilisateur et d’expérience utilisateur.
- React : Une bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur, en particulier des applications monopage.
- Gradient : Un dégradé, c’est‑à‑dire une transition progressive entre deux couleurs ou plus, ou entre plusieurs nuances, dans un design.
- Tailwind CSS : Framework CSS open source orienté utilitaires qui fournit un ensemble complet de classes prédéfinies, permettant aux développeurs de créer des designs personnalisés directement dans leur HTML en appliquant ces classes utilitaires aux éléments.
- Design Systems : Un ensemble de composants réutilisables, de principes directeurs et de normes qui garantissent la cohérence et l’homogénéité du design à travers un produit ou une marque.
Concepts de design UI/UX
- Accent Color : Une couleur d’accentuation utilisée pour mettre en évidence les éléments clés d’un design, souvent alignée avec ou complémentaire à la couleur principale de la marque pour renforcer l’intérêt visuel.
- Theme : Un ensemble cohérent de choix de design, incluant les couleurs, les polices et les mises en page, qui définit l’esthétique générale et l’expérience utilisateur d’une application ou d’un site web.
- Responsive Design : Une approche du design web qui garantit que le contenu s’adapte de manière fluide aux différentes tailles et orientations d’appareils, offrant une expérience utilisateur optimale.
- Above the Fold : La partie d’une page web visible par les utilisateurs sans faire défiler la page, cruciale pour capter l’attention et transmettre immédiatement les informations essentielles.
- CTA (Call to Action) : Un appel à l’action, souvent sous la forme d’un bouton ou d’un lien, qui encourage les utilisateurs à effectuer une action spécifique, comme « S’inscrire » ou « En savoir plus ».
- Headings (Titres) : Éléments de texte qui introduisent et organisent les sections de contenu, généralement formatés avec différents niveaux (par exemple H1, H2) pour établir une hiérarchie de contenu claire.
- Footer : La section inférieure d’une page web, contenant généralement des informations supplémentaires comme des coordonnées, des liens de navigation et des mentions légales.
- Fil d’Ariane : Une aide à la navigation affichant l’emplacement actuel de l’utilisateur dans la hiérarchie d’un site, souvent présentée sous forme de liste horizontale de liens.
- Favicon – Une petite icône affichée dans l’onglet du navigateur, les favoris et les résultats de recherche, représentant généralement une marque ou un site web.
- Meta Title (Balise title) – Le titre d’une page web qui apparaît dans les résultats des moteurs de recherche et les onglets du navigateur, influençant le SEO et le taux de clics des utilisateurs.
- Meta Description – Un court résumé du contenu d’une page web affiché dans les résultats des moteurs de recherche, visant à améliorer la découvrabilité et l’engagement des utilisateurs.
- URL canonique – Une balise utilisée pour spécifier la version préférée d’une page web, ce qui aide à éviter les problèmes de contenu dupliqué dans l’indexation des moteurs de recherche.
- URL Slug – La partie d’une URL qui identifie une page particulière dans un format lisible (par exemple
example.com/product-name). - Sitemap – Un fichier structuré (XML ou HTML) qui fournit une liste des pages d’un site web, aidant les moteurs de recherche à les indexer efficacement.
- Navigation Bar (Barre de navigation) – Un menu horizontal ou vertical fournissant des liens vers les sections essentielles d’un site web pour faciliter la navigation.
- Liens d’évitement – Des liens cachés qui permettent aux utilisateurs de contourner du contenu répétitif et de naviguer directement vers le contenu principal, améliorant ainsi l’accessibilité.
- Pagination – Une méthode consistant à diviser le contenu en plusieurs pages, couramment utilisée dans les blogs, les résultats de recherche et les listes de produits pour améliorer l’expérience utilisateur.
- Lien d’ancrage – Un hyperlien qui dirige les utilisateurs vers une section spécifique au sein de la même page au lieu de charger une nouvelle page.
- Page 404 – Une page d’erreur personnalisée affichée lorsqu’un utilisateur tente d’accéder à une URL inexistante, le guidant de nouveau vers un contenu pertinent.
Éléments de notification et de feedback
- Toast : Une notification brève et non intrusive qui apparaît temporairement pour informer les utilisateurs du résultat d’une action ou apporter un simple retour.
- Snackbar – Similaire à un toast, mais généralement situé en bas de l’écran avec des actions optionnelles (par exemple, « Annuler » pour un élément supprimé).
- Tooltip – Une petite fenêtre contextuelle qui fournit des informations supplémentaires au survol d’un élément ou lorsqu’il reçoit le focus.
- Badge – Un petit indicateur visuel, souvent utilisé sur des icônes ou des boutons, pour afficher des notifications, des compteurs ou des mises à jour de statut.
- Loading Spinner (Loader) – Un indicateur visuel qui représente un processus en cours, comme le chargement d’une page ou l’envoi d’un formulaire.
- Progress Bar – Une barre horizontale qui indique le pourcentage de progression d’une tâche ou d’un processus.
- Skeleton Loader – Une interface de remplacement qui imite la mise en page du contenu final pendant son chargement, ce qui améliore la perception des performances.
Overlays et fenêtres contextuelles
- Popover : Une superposition temporaire qui présente des informations ou des options supplémentaires liées à un élément d’interface utilisateur spécifique, apparaissant généralement lors d’une interaction de l’utilisateur.
- Dialog (Modal) : Une fenêtre qui apparaît devant le contenu principal pour capter l’attention de l’utilisateur, nécessitant souvent une action avant de revenir à l’interface principale.
- Drawer (panneau latéral) – Un panneau qui glisse depuis le côté de l’écran pour afficher des options de navigation ou des paramètres sans interrompre le contenu principal.
- Lightbox – Une fenêtre modale qui affiche des images ou des médias en vue agrandie, en assombrissant l’arrière-plan pour favoriser la concentration.
- Alert Box – Une boîte de dialogue générée par le système ou déclenchée par l’application qui informe les utilisateurs d’informations importantes, comme des erreurs ou des avertissements.
- Button : Un élément cliquable qui déclenche une action ou un événement, comme l’envoi d’un formulaire ou l’ouverture d’une boîte de dialogue.
- Switch (Toggle) : Un contrôle à bascule qui permet aux utilisateurs de basculer entre deux états, comme activé ou désactivé, souvent semblable à un interrupteur physique.
- Tabs – Un composant qui organise le contenu en vues distinctes au sein d’une même interface, permettant aux utilisateurs de passer d’une section à l’autre sans quitter la page.
- Stepper (Wizard) – Un composant utilisé pour les processus en plusieurs étapes, indiquant aux utilisateurs l’étape en cours et les guidant jusqu’à la finalisation du processus.
- Pagination – Un modèle d’interface qui divise le contenu en pages, souvent utilisé pour les résultats de recherche ou les applications riches en contenu.
- Breadcrumb – Une aide à la navigation qui affiche l’emplacement actuel de l’utilisateur dans la hiérarchie d’un site, souvent représentée par une liste horizontale de liens.
- Accordion – Une section repliable qui se déploie ou se referme pour afficher ou masquer dynamiquement du contenu.
- Dropdown Menu – Une liste d’options qui apparaît lorsqu’un utilisateur clique sur un bouton ou un champ, ou les survole, souvent utilisée pour la navigation ou la sélection.
Formulaires et éléments de saisie
- Formulaire : Une collection structurée de champs de saisie permettant aux utilisateurs d’envoyer des données, comme des informations de contact ou des recherches.
- Groupe de boutons radio : Un ensemble de boutons radio liés permettant aux utilisateurs de sélectionner une seule option parmi plusieurs choix.
- Case à cocher : Une case interactive que les utilisateurs peuvent cocher ou décocher pour sélectionner ou désélectionner une option, ce qui permet plusieurs sélections au sein d’un même ensemble.
- Champ de texte (champ de saisie) – Un élément d’interface de base dans lequel les utilisateurs peuvent saisir du texte, par exemple dans des barres de recherche, des formulaires de connexion ou des commentaires.
- Zone de texte – Un champ de saisie plus grand conçu pour du texte multilignes, couramment utilisé pour les messages ou les formulaires de feedback.
- Select (liste déroulante) – Un élément d’interface qui permet aux utilisateurs de choisir une option dans une liste prédéfinie, souvent présenté sous forme de menu déroulant.
- Sélecteur de date – Un élément d’interface qui permet aux utilisateurs de sélectionner une date à partir d’un calendrier plutôt que de la saisir manuellement.
- Curseur (sélecteur de plage) – Un contrôle qui permet aux utilisateurs de définir une valeur dans une plage en faisant glisser une poignée le long d’une barre.
- Champ de téléversement de fichier – Un composant qui permet aux utilisateurs de sélectionner et de téléverser des fichiers depuis leur appareil.
- Saisie semi-automatique (recherche prédictive) – Un champ de texte qui suggère dynamiquement des résultats correspondants à mesure que les utilisateurs tapent, améliorant l’expérience de recherche.
Styles et tendances de design
Tu peux utiliser ces termes dans n’importe quel prompt pour décrire un style précis que tu cherches à obtenir.
- Neobrutalism : Une tendance de design web caractérisée par des éléments bruts, non polis, une typographie audacieuse et de forts contrastes, s’inspirant de l’architecture brutaliste du milieu du XXᵉ siècle.
- Rétro : Un design qui intègre des styles, motifs et éléments de décennies passées, évoquant la nostalgie et une esthétique vintage.
- Hacker : Une esthétique qui reflète la culture DIY et open source, souvent avec des polices à chasse fixe, des arrière-plans sombres et des interfaces inspirées des terminaux.
- Glass (Glassmorphism) : Un style de design qui utilise des éléments translucides, semblables à du verre dépoli, avec des ombres et bordures subtiles pour créer de la profondeur.
- Nudy : Une approche de design minimaliste qui utilise des palettes de couleurs nude ou neutres pour créer une esthétique douce et discrète.
Ressources de design & d’assets
- 21st.dev : Un registre communautaire open source proposant des composants d’interface utilisateur React minimalistes, modernes et réutilisables, propulsés par Tailwind CSS et Radix UI, conçus pour aider les ingénieurs en design à livrer plus efficacement des interfaces utilisateur soignées.
- Dribbble : Une communauté en ligne de premier plan où les designers et les professionnels créatifs présentent leur travail, découvrent de l’inspiration en matière de design et entrent en contact avec des clients ou des collaborateurs potentiels.
- Noun Project : Une plateforme offrant une vaste collection d’icônes gratuites et de photos libres de droits, permettant aux utilisateurs d’accéder à des ressources visuelles pour divers projets.
- SVG Repo : Une bibliothèque complète de plus de 500 000 vecteurs et icônes SVG sous licences ouvertes, permettant aux utilisateurs de rechercher, explorer, éditer et télécharger des visuels adaptés à une grande variété de projets.
- Google Fonts : Une bibliothèque gratuite de polices optimisées pour le web, offrant aux designers et développeurs un large choix d’options typographiques pour enrichir leurs projets.
- Typewolf : Une ressource qui aide les designers à sélectionner les combinaisons de polices idéales pour leurs projets en présentant des typographies tendance et en proposant des listes de polices soigneusement sélectionnées.
Développement back-end et bases de données
Notions de base sur le backend
- Backend : L’infrastructure côté serveur d’une application qui gère le traitement des données, le stockage et la logique métier.
- Supabase** :** Une plateforme backend-as-a-service open source qui fournit une base de données Postgres, de l’authentification, des API prêtes à l’emploi et des fonctionnalités en temps réel.
- Webhooks – Des callbacks HTTP déclenchés par des événements qui notifient des applications externes lorsque des actions spécifiques se produisent.
Gestion des bases de données et exécution de requêtes
- CRUD (Create, Read, Update, Delete) : Les quatre opérations de base effectuées sur les données dans une base de données ou une application.
- SQL (Structured Query Language)** :** Un langage de programmation dédié conçu pour gérer et manipuler des bases de données relationnelles, permettant d’effectuer des tâches comme l’interrogation, la mise à jour et l’organisation des données.
- PostgreSQL – Une puissante base de données relationnelle open source, connue pour sa scalabilité, son extensibilité et sa conformité ACID.
Concepts spécifiques à Supabase
- Fonction Edge** :** Fonctions TypeScript côté serveur, distribuées à l’échelle mondiale sur l’Edge — au plus près de vos utilisateurs. Elles peuvent être utilisées pour écouter des webhooks ou intégrer votre projet Supabase avec des services tiers comme Stripe, Anthropic ou Resend.
- RLS (Row-Level Security)** :** Une fonctionnalité des bases de données qui permet de contrôler l’accès à des lignes spécifiques dans une table en fonction des rôles ou attributs des utilisateurs — elle permet en pratique de définir des règles d’autorisation granulaires et des règles SQL complexes adaptées aux besoins spécifiques de votre activité.
- Storage** :** Un service ou système pour stocker et gérer des données, comme des images, des vidéos, des documents et tout autre type de fichier.
- Bucket** :** Dans Supabase Storage, un bucket est un conteneur distinct qui organise les fichiers et dossiers, détermine le modèle d’accès (public ou privé) et définit les restrictions de chargement, comme la taille maximale des fichiers et les types de contenu autorisés.
- Endpoint** :** Dans le contexte de Supabase, un endpoint est une URL spécifique qui permet aux clients d’interagir avec la base de données via des appels d’API RESTful, afin d’effectuer des opérations comme la création, la lecture, la mise à jour ou la suppression de données.
- Fournisseur d’authentification : Une entité ou un service qui vérifie les identifiants des utilisateurs pour permettre un accès sécurisé aux applications ou systèmes. Dans le contexte de Supabase, les fournisseurs d’authentification incluent différentes méthodes telles que les connexions par mot de passe, les magic links, les mots de passe à usage unique (OTP), les connexions via les réseaux sociaux et les intégrations de Single Sign‑On (SSO), pour une authentification utilisateur flexible et sécurisée.
Sécurité & Authentification
- OAuth – Un protocole d’authentification largement utilisé qui permet aux utilisateurs de se connecter à des applications en utilisant des services tiers comme Google, Facebook ou GitHub.
- Authentification à deux facteurs (2FA) – Une mesure de sécurité qui exige des utilisateurs qu’ils fournissent deux formes d’identification avant d’accéder à un compte.
- CORS (Cross-Origin Resource Sharing) – Une politique de sécurité qui contrôle quels sites web ou applications peuvent accéder aux ressources d’un serveur.