Exemples de vibe coding : 10 types d'applications réels, invites et ce qui a mal tourné

Les exemples de vibe coding les plus courants sont de petites applications web utiles : suivis, pages de réservation, outils internes, portails clients, pages d'accueil, quiz, tableaux de bord et petits outils d'IA. Voici dix exemples. Pour chacun, vous verrez qui le construit, la première invite, ce qui tourne habituellement mal et l'invite de suivi qui corrige le problème.

Ces exemples sont des composites des projets que les gens apportent le plus souvent aux créateurs d'applications IA, et non des études de cas d'une personne en particulier. Les invites sont à copier. Les échecs sont ceux qui reviennent sans cesse, et c'est pourquoi ils sont la partie utile. Si le vibe coding lui-même est nouveau pour vous, commencez par ce qu'est le vibe coding.

1. Un suivi de budget personnel

Qui le construit : des personnes qui ont essayé les tableurs et abandonné.

Première invite :

Construis 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. Affiche 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 qui reste.

Ce qui a mal tourné : le graphique comptait toutes les dépenses jamais saisies, et non seulement celles du mois, de sorte qu'au deuxième mois chaque catégorie semblait dépassée. De plus, les montants saisis avec une virgule (« 1,200 ») étaient enregistrés comme 1.

Invite de correction :

Le graphique et les totaux ne doivent inclure que les dépenses du mois sélectionné. Ajoute un sélecteur de mois en haut, réglé par défaut sur le mois en cours. Accepte aussi les montants saisis avec des virgules ou des espaces et enregistre-les comme 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 construit : des propriétaires de petites entreprises lassés de prendre les rendez-vous par téléphone et par messages privés.

Première invite :

Construis une page de réservation pour mon salon. Les clients choisissent un service, 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 a mal tourné : deux clients ont réservé le même créneau de 10 h à une minute d'intervalle, parce que la page ne vérifiait la disponibilité qu'au premier chargement. Une réservation de couleur de 90 minutes ne bloquait pas non plus les créneaux suivants.

Invite de correction :

Lorsqu'un client soumet une réservation, vérifie sur le serveur que chaque créneau couvert est toujours libre, et refuse avec « Ce moment vient d'être pris » si ce n'est pas le cas. Un service bloque toute sa durée : une réservation de 90 minutes à 10 h bloque 10 h, 10 h 30 et 11 h.

Leçon : tout ce que deux personnes peuvent faire en même temps exige 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 code QR

Qui le construit : des propriétaires de cafés et de restaurants qui réimpriment les menus trop souvent.

Première invite :

Construis un site de menu pour mobile pour mon café. Des sections pour déjeuner, dîner, boissons et desserts, chaque article avec nom, prix, courte description et mentions alimentaires (végane, sans gluten). J'ai besoin d'une page d'administration pour modifier les articles et les marquer épuisés. Affiche un code QR que je peux imprimer et qui mène au menu.

Ce qui a mal tourné : rien ne cassait, mais le menu était lent sur le Wi-Fi du café, car des photos de téléphone en pleine résolution étaient chargées pour chaque article.

Invite de correction :

Les photos du menu sont trop lourdes. Redimensionne les images téléversées à un maximum de 800 px de largeur, compresse-les et charge-les au fur et à mesure que le visiteur fait défiler la page.

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

4. Un suivi d'équipement ou de stock pour une équipe

Qui le construit : des gestionnaires des opérations qui remplacent un tableur partagé.

Première invite :

Construis un outil d'inventaire pour notre équipe d'entrepôt. Les articles ont un nom, un SKU, une quantité, un emplacement et un niveau minimum. Le personnel se connecte et peut ajouter du stock, en retirer en indiquant une raison, et voir une liste des articles sous le minimum mise en évidence en rouge. Garde un historique de chaque changement et de la personne qui l'a fait.

Ce qui a mal tourné : l'historique affichait « utilisateur 3 » au lieu des noms, et retirer plus de stock qu'il n'en restait faisait passer la quantité en négatif.

Invite de correction :

Affiche le nom de la personne dans l'historique, et non son identifiant. Ne permets pas un retrait qui ferait passer la quantité sous zéro; affiche plutôt « Seulement 4 en stock ».

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

5. Un portail client pour un travailleur autonome ou un studio

Qui le construit : des designers, des comptables, des consultants et des agences.

Première invite :

Construis un portail client. J'invite les clients par courriel. Chaque client se connecte et ne voit que ses propres projets, fichiers et factures, et peut laisser des commentaires. Je me connecte comme administrateur et je vois tout.

Ce qui a mal tourné : c'est la défaillance la plus importante de cette liste. Les pages n'affichaient à chaque client que ses propres projets, mais le serveur renvoyait n'importe quel projet si l'on modifiait le numéro dans la barre d'adresse. Cliquer en tant que client ne révélait jamais le problème.

Invite de correction :

Vérifie chaque route serveur qui renvoie des projets, des fichiers, des commentaires ou des factures. Chacune doit confirmer que le client connecté est propriétaire de l'enregistrement, et renvoyer « introuvable » sinon. Ensuite, teste-le : connecte-toi comme le client A et essaie d'ouvrir le projet du client B avec son identifiant.

Leçon : cacher quelque chose à l'écran n'est pas la même chose que le protéger. Plus à ce sujet dans le vibe coding est-il sécuritaire?.

6. Une page de lancement avec liste d'attente

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

Première invite :

Construis une page d'accueil pour une application qui aide les tuteurs à planifier des leçons et à recevoir des paiements. Titre principal, sous-titre, inscription par courriel, trois avantages, une section sur le fonctionnement et une FAQ. Enregistre les inscriptions dans une base de données avec la date, et laisse-moi les télécharger en CSV depuis une page privée.

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

Invite de correction :

Ajoute 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). Ajoute un titre de page, une méta-description et une image de partage pour les réseaux sociaux.

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

7. Une application de quiz pour un enseignant

Qui le construit : des enseignants et des formateurs qui veulent quelque chose de plus léger qu'un système de gestion de l'apprentissage.

Première invite :

Construis 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 se joignent avec un code et leur prénom, répondent aux questions et voient leur pointage à la fin. Je vois un tableau des résultats par quiz.

Ce qui a mal tourné : les bonnes réponses étaient envoyées au navigateur avec les questions, de sorte qu'un élève curieux pouvait les lire dans le code source de la page. Les élèves pouvaient aussi soumettre à nouveau jusqu'à obtenir 100 %.

Invite de correction :

N'envoie pas les bonnes réponses au navigateur. Vérifie les réponses sur le serveur après la soumission. Permets une seule soumission par prénom d'élève et par quiz, et montre à 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 construit : des spécialistes du marketing, des rédacteurs et des fondateurs qui veulent un assistant IA ciblé.

Première invite :

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

Ce qui a mal tourné : 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 grimper la facture.

Invite de correction :

Déplace l'appel d'IA sur le serveur. Stocke la clé d'API comme secret, jamais dans le code frontal. Limite chaque visiteur à 20 générations par jour.

Leçon : les clés vont dans les secrets sur le serveur. Voir comment protéger vos 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 construit : des entreprises du Golfe et du monde arabe qui servent deux langues.

Première invite :

Construis un site web pour mon entreprise de design d'intérieur en arabe et en anglais, avec un sélecteur de langue. Pages : accueil, services, portfolio, à propos et contact. L'arabe doit être entièrement de droite à gauche.

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

Invite de correction :

En arabe, miroite toute la mise en page : place la direction de la page de droite à gauche, mets le menu à droite, inverse les icônes directionnelles, et garde les numéros de téléphone et les courriels de gauche à droite à l'intérieur du texte arabe.

Leçon : la droite à gauche est une mise en page, et non un simple alignement. Mythex gère l'arabe et les autres mises en page de droite à gauche, et vous pouvez rédiger vos invites directement en arabe.

10. Un suivi qui devient une application mobile

Qui le construit : des entraîneurs, des gymnases et des groupes communautaires dont les utilisateurs vivent sur leur téléphone.

Première invite :

Construis un journal d'entraînement pour mes clients en entraînement personnel. Chaque client se connecte, voit le plan que je lui ai assigné pour la semaine, coche les exercices et note les charges. Je vois les progrès de chaque client sur un graphique.

Ce qui a mal tourné : 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.

Invite de correction :

Conçois-la pour une utilisation à une main sur téléphone : de grandes zones tactiles au bas de l'écran, un exercice par écran avec de gros boutons Suivant et Terminé, et un graphique simple de progression hebdomadaire.

Leçon : si les gens l'utiliseront 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 à TestFlight; l'application mobile ouvre votre application publiée, de sorte que chaque publication la met à jour. Voir la page du créateur d'applications mobiles.

Les constantes derrière ces exemples

Dans les dix cas, les échecs se regroupent en quelques familles :

Aucun de ces points n'exige de lire du code. Ils exigent de tester comme un utilisateur curieux et légèrement hostile, et de décrire précisément ce que vous voyez.

Essayez-en un vous-même

Choisissez l'exemple le plus proche de votre idée, copiez sa première invite et changez les détails. Puis utilisez l'invite de correction comme liste de contrôle avant de partager. Notre aide-mémoire d'invites 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. Lorsque vous êtes prêt, commencez dans le créateur d'applications IA ou parcourez les modèles pour un bon départ.

Questions