Exemples de vibe coding : 10 types d'applications réelles, prompts et erreurs

Les exemples de vibe coding les plus courants sont de petites applications web utiles : suivis, pages de réservation, outils internes, espaces clients, pages de présentation, quiz, tableaux de bord et petits outils d'IA. Voici dix exemples. Pour chacun, vous découvrirez qui le crée, le premier prompt, ce qui se passe généralement mal et le prompt de correction qui règle le problème.

Ce sont des compositions des projets que les gens apportent le plus souvent aux créateurs d'applications IA, et non des études de cas d'une seule personne. Les prompts sont prêts à copier. Les échecs sont ceux qui reviennent sans cesse, et c'est pour cela qu'ils sont la partie utile. Si le vibe coding est nouveau pour vous, commencez par ce qu'est le vibe coding.

1. Un suivi de budget personnel

Qui le crée : des particuliers qui ont essayé les tableurs et abandonné.

Premier prompt :

Créez un suivi de budget mensuel. J'ajoute des dépenses avec un montant, une catégorie (alimentation, loyer, transport, loisirs, autre), une date et une note. Affichez le total du mois par catégorie sous forme de graphique à barres et une liste des dépenses récentes. Je peux définir un budget par catégorie et voir ce qu'il reste.

Ce qui s'est mal passé : le graphique comptait toutes les dépenses jamais saisies, pas seulement celles du mois, si bien qu'au deuxième mois chaque catégorie paraissait dépassée. Par ailleurs, les montants saisis avec une virgule (« 1,200 ») étaient enregistrés comme 1.

Prompt de correction :

Le graphique et les totaux ne doivent inclure que les dépenses du mois sélectionné. Ajoutez un sélecteur de mois en haut, réglé par défaut sur le mois en cours. Acceptez aussi les montants saisis avec des virgules ou des espaces et enregistrez-les comme des nombres.

Leçon : « ce mois-ci » est une règle. Dites les règles à voix haute.

2. Une page de réservation pour un petit salon

Qui le crée : des propriétaires de petites entreprises fatigués de prendre les rendez-vous par téléphone et en messages privés.

Premier prompt :

Créez une page de réservation pour mon salon. Les clients choisissent une prestation, une date et un créneau libre, puis saisissent leur nom et leur téléphone. J'ai une page d'administration privée, derrière une connexion, qui affiche les réservations par jour.

Ce qui s'est mal passé : deux clients ont réservé le même créneau de 10 h à une minute d'intervalle, car la page ne vérifiait la disponibilité qu'au premier chargement. Une coloration de 90 minutes ne bloquait pas non plus les créneaux suivants.

Prompt de correction :

Quand un client envoie une réservation, vérifiez côté serveur que chaque créneau couvert est toujours libre, et refusez-la avec le message « Ce créneau vient d'être pris » si ce n'est pas le cas. Une prestation bloque toute sa durée : une réservation de 90 minutes à 10 h bloque donc 10 h, 10 h 30 et 11 h.

Leçon : tout ce que deux personnes peuvent faire en même temps demande une vérification côté serveur. Voir comment créer une application de réservation pour la version complète.

3. Un menu de restaurant avec un QR code

Qui le crée : des propriétaires de cafés et de restaurants qui réimpriment leurs menus trop souvent.

Premier prompt :

Créez un site de menu adapté au mobile pour mon café. Des sections petit-déjeuner, déjeuner, boissons et desserts, chaque plat avec son nom, son prix, une courte description et des mentions alimentaires (végétalien, sans gluten). J'ai besoin d'une page d'administration pour modifier les plats et les marquer comme épuisés. Affichez un QR code imprimable qui mène au menu.

Ce qui s'est mal passé : rien n'a planté, mais le menu était lent sur le Wi-Fi du café, car les photos de téléphone en pleine taille étaient chargées pour chaque plat.

Prompt de correction :

Les photos du menu sont trop lourdes. Redimensionnez les images envoyées à 800 px de large au maximum, compressez-les et chargez-les au fur et à mesure que le visiteur fait défiler la page.

Leçon : testez sur une connexion lente, pas seulement au bureau.

4. Un suivi de matériel ou de stock pour une équipe

Qui le crée : des responsables des opérations qui remplacent un tableur partagé.

Premier prompt :

Créez un outil de gestion de stock pour notre équipe d'entrepôt. Les articles ont un nom, une référence (SKU), une quantité, un emplacement et un seuil minimum. Le personnel se connecte et peut ajouter du stock, retirer du stock avec un motif, et voir en rouge la liste des articles sous le seuil minimum. Conservez un historique de chaque modification et de son auteur.

Ce qui s'est mal passé : l'historique affichait « utilisateur 3 » au lieu des noms, et retirer plus de stock qu'il n'en existait rendait la quantité négative.

Prompt de correction :

Affichez le nom de la personne dans l'historique, pas son identifiant. Interdisez tout retrait qui ferait passer la quantité sous zéro ; affichez plutôt « Seulement 4 en stock ».

Leçon : décrivez ce qui doit être impossible, pas seulement ce qui doit être possible. Notre guide sur la création d'une application de gestion de stock couvre le reste.

5. Un espace client pour un indépendant ou un studio

Qui le crée : des designers, comptables, consultants et agences.

Premier prompt :

Créez un espace client. J'invite les clients par e-mail. Chaque client se connecte et ne voit que ses propres projets, fichiers et factures, et peut laisser des commentaires. Je me connecte en administrateur et je vois tout.

Ce qui s'est mal passé : c'est l'échec le plus grave de la liste. Les pages ne montraient à chaque client que ses projets, mais le serveur renvoyait n'importe quel projet si l'on modifiait le numéro dans la barre d'adresse. Naviguer en tant qu'un seul client ne le révélait jamais.

Prompt de correction :

Vérifiez chaque route serveur qui renvoie des projets, fichiers, commentaires ou factures. Chacune doit confirmer que le client connecté est propriétaire de l'enregistrement, et répondre « introuvable » sinon. Testez ensuite : connectez-vous en tant que client A et essayez d'ouvrir le projet du client B avec son identifiant.

Leçon : cacher quelque chose à l'écran n'équivaut pas à le protéger. Pour aller plus loin, voir le vibe coding est-il sûr ?.

6. Une page de présentation avec liste d'attente

Qui le crée : des fondateurs qui testent une idée avant de la construire.

Premier prompt :

Créez une page de présentation pour une application qui aide les répétiteurs à planifier leurs cours et à encaisser leurs paiements. Titre principal, sous-titre, inscription par e-mail, trois avantages, une section « comment ça marche » et une FAQ. Enregistrez les inscriptions dans une base de données avec la date, et laissez-moi les télécharger en CSV depuis une page privée.

Ce qui s'est mal passé : en quelques jours, la liste s'est remplie d'inscriptions factices venues de robots, et la page n'avait ni titre ni description, si bien que les liens partagés affichaient un aperçu vide.

Prompt de correction :

Ajoutez une protection de base contre les robots au formulaire d'inscription (un champ caché piège et une limite de 5 inscriptions par adresse IP par heure). Ajoutez un titre de page, une méta-description et une image de partage sur les réseaux sociaux.

Leçon : un formulaire public finit toujours par être trouvé. Voir comment créer une page de liste d'attente.

7. Une application de quiz pour un enseignant

Qui le crée : des enseignants et formateurs qui veulent quelque chose de plus léger qu'une plateforme de formation.

Premier prompt :

Créez une application de quiz pour ma classe. Je crée des quiz avec des questions à choix multiples, une seule bonne réponse par question. Les élèves rejoignent avec un code et leur prénom, répondent aux questions et voient leur score à la fin. Je vois un tableau de résultats par quiz.

Ce qui s'est mal passé : les bonnes réponses étaient envoyées au navigateur avec les questions, si bien qu'un élève curieux pouvait les lire dans le code source de la page. Les élèves pouvaient aussi renvoyer leurs réponses jusqu'à obtenir 100 %.

Prompt de correction :

N'envoyez jamais les bonnes réponses au navigateur. Vérifiez les réponses sur le serveur après l'envoi. N'autorisez qu'un seul envoi par prénom d'élève et par quiz, et montrez à l'enseignant si quelqu'un tente de recommencer.

Leçon : le navigateur appartient à l'utilisateur. Tout ce qui s'y trouve peut être lu.

8. Un petit outil d'IA

Qui le crée : des responsables marketing, rédacteurs et fondateurs qui veulent un assistant IA ciblé.

Premier prompt :

Créez un outil qui transforme la description d'un produit en cinq publications pour les réseaux sociaux, dans différents tons (amical, expert, ludique, court, long). Utilisez une API d'IA. Je colle la description, je choisis une plateforme et j'obtiens les publications avec des boutons de copie.

Ce qui s'est mal passé : la première version appelait le service d'IA directement depuis le navigateur, avec la clé d'API dans la page, où n'importe qui pouvait la copier et faire exploser la facture.

Prompt de correction :

Déplacez l'appel à l'IA sur le serveur. Enregistrez la clé d'API comme un secret, jamais dans le code du front-end. Limitez chaque visiteur à 20 générations par jour.

Leçon : les clés doivent être stockées comme secrets côté serveur. Voir comment protéger ses clés d'API et comment ajouter des fonctions d'IA à votre application.

9. Un site d'entreprise en arabe et en anglais

Qui le crée : des entreprises du Golfe et du monde arabe qui s'adressent à leurs clients dans deux langues.

Premier prompt :

Créez un site web pour mon cabinet de décoration d'intérieur, en arabe et en anglais, avec un sélecteur de langue. Pages : accueil, services, réalisations, à propos et contact. L'arabe doit être entièrement de droite à gauche.

Ce qui s'est mal passé : le texte arabe était aligné à droite, mais la mise en page n'était pas miroir : les flèches pointaient dans le mauvais sens et le menu était du mauvais côté. Certains numéros de téléphone s'affichaient aussi à l'envers.

Prompt de correction :

En arabe, mettez toute la mise en page en miroir : définissez le sens de la page de droite à gauche, placez le menu à droite, inversez les icônes directionnelles et gardez les numéros de téléphone et les adresses e-mail de gauche à droite à l'intérieur du texte arabe.

Leçon : le sens de droite à gauche est une mise en page, pas un simple alignement. Mythex gère l'arabe et les autres mises en page de droite à gauche, et vous pouvez écrire vos prompts directement en arabe.

10. Un suivi qui devient une application mobile

Qui le crée : des coachs, salles de sport et groupes communautaires dont les utilisateurs vivent sur leur téléphone.

Premier prompt :

Créez un carnet d'entraînement pour mes clients en coaching personnel. Chaque client se connecte, voit le programme que je lui ai assigné pour la semaine, coche les exercices et note les charges. Je vois la progression de chaque client sur un graphique.

Ce qui s'est mal passé : l'application web fonctionnait, mais sur téléphone les boutons étaient trop petits pour être touchés pendant un entraînement, et le graphique était illisible.

Prompt de correction :

Concevez cela pour une utilisation à une main sur téléphone : de grandes zones tactiles en bas de l'écran, un exercice par écran avec de grands boutons Suivant et Terminé, et un graphique simple de progression hebdomadaire.

Leçon : si les gens vont l'utiliser sur téléphone, concevez d'abord pour le téléphone. Sur Mythex Pro, l'application publiée peut ensuite devenir une application Android pour Google Play et une application iPhone envoyée sur TestFlight ; l'application mobile ouvre votre application publiée, donc chaque publication la met à jour. Voir la page créateur d'applications mobiles.

Les schémas derrière ces exemples

Dans les dix cas, les échecs se répartissent en quelques groupes :

Aucun de ces points ne demande de lire du code. Il faut tester comme un utilisateur curieux, un peu hostile, et décrire précisément ce que l'on voit.

Essayez-en un vous-même

Choisissez l'exemple le plus proche de votre idée, copiez son premier prompt et changez les détails. Utilisez ensuite le prompt de correction comme liste de contrôle avant de partager. Notre aide-mémoire de prompts de vibe coding en propose 30 de plus, et comment créer une application avec le vibe coding suit un projet de l'idée à l'application publiée. Quand vous êtes prêt, lancez-le dans le créateur d'applications IA ou parcourez les modèles pour un bon départ.

Questions