30 invites de vibe coding à copier (aide-mémoire)

Les meilleures invites de vibe coding sont courtes, précises et centrées sur le comportement : qui utilise l'application, ce qu'il peut y faire, ce qu'elle conserve et à quoi elle ressemble. Voici 30 invites à copier et coller, regroupées selon l'étape où vous en êtes, du premier jet à la publication. Remplacez les parties entre [crochets] par vos propres détails.

Elles fonctionnent dans n'importe quel créateur d'applications IA ou agent de codage. Si vous voulez le raisonnement derrière elles, notre guide plus long sur comment écrire des invites pour les créateurs d'applications IA explique les principes. Cette page est l'aide-mémoire.

Comment utiliser cet aide-mémoire

• Commencez par une invite de premier jet, puis utilisez les autres une à la fois.
• Testez après chaque invite. Parcourez le changement avant d'envoyer la suivante.
• Conservez ce qui fonctionne. La plupart des invites de suivi ici se terminent par « garde tout le reste identique », et ce n'est pas un hasard.
• Collez le texte exact. Les messages d'erreur, les libellés de boutons et les mots affichés à l'écran valent mieux que n'importe quelle description.

Invites de premier jet

Elles établissent la forme de l'application. Chacune nomme les utilisateurs, les actions, les données et l'apparence.

1. Un outil de suivi simple

Construis un outil de suivi de [habitude] pour moi. Je peux ajouter une [habitude] avec un nom et une couleur, la cocher une fois par jour, et voir une grille de 30 jours ainsi que ma série en cours. Enregistre tout pour que ce soit encore là après un rechargement. Design épuré et minimal qui fonctionne sur un téléphone.

2. Une page de réservation pour une petite entreprise

Construis une page de réservation pour mon [salon de coiffure]. Les clients choisissent un service ([coupe 30 min, couleur 90 min]), une date et un créneau libre entre [9 h et 18 h], puis saisissent leur nom, leur téléphone et leur courriel. Deux personnes ne peuvent pas réserver le même créneau. J'ai besoin d'une page d'administration privée, derrière une connexion, qui liste les réservations à venir par jour.

3. Un outil interne

Construis un outil interne pour que mon équipe suive les [prêts d'équipement]. Chaque article a un nom, un code et un statut (disponible, en prêt, brisé). Le personnel se connecte, peut sortir un article à son nom et le remettre. Affiche un tableau avec des filtres par statut et un historique de qui a eu chaque article.

4. Une page d'accueil avec liste d'attente

Construis un site d'une page pour [mon produit : une application de planification de repas pour parents occupés]. Un bandeau avec titre, sous-titre d'une phrase et inscription par courriel. Puis trois avantages, une courte section sur le fonctionnement et une FAQ. Enregistre les courriels d'inscription dans une base de données et affiche-moi la liste sur une page d'administration privée.

5. Un portail client

Construis un portail client pour mon [studio de design]. Chaque client se connecte et ne voit que ses propres projets, avec le statut, les fichiers que j'ai téléversés et un fil de commentaires. Je me connecte comme administrateur et je vois tous les clients. Les clients ne doivent jamais voir les données des autres.

6. Une calculatrice ou un outil de soumission

Construis une calculatrice de soumission pour mon [entreprise de nettoyage]. Données : nombre de chambres, de salles de bain, services supplémentaires (four, fenêtres, réfrigérateur) et fréquence (ponctuelle, hebdomadaire, mensuelle). Affiche le prix à mesure que les options changent, avec le détail. Tarifs : [collez votre grille tarifaire]. Ajoute un bouton pour envoyer la demande de soumission à moi par courriel.

Invites de planification

Utilisez-les avant une grosse fonction, ou chaque fois que vous ne savez pas comment décrire quelque chose.

7. Planifier avant de construire

Avant d'écrire du code, décris en mots simples les écrans que tu construiras, les données que tu stockeras et les décisions dont tu as besoin de ma part. Attends mon accord.

8. Transformer une idée confuse en première version

Voici mon idée : [collez des notes]. Propose la plus petite première version qui reste utile, en 5 à 8 puces. Indique ce que tu laisserais pour plus tard et pourquoi.

9. Demander ce qui manque

Quelles questions un développeur me poserait-il avant de construire ceci? Pose-les-moi une à une, puis résume mes réponses sous forme de court cahier des charges.

10. Vérifier un gros changement d'abord

Je veux ajouter [des comptes d'équipe où plusieurs personnes partagent un même espace de travail]. Explique ce qui doit changer dans les données, les écrans et les autorisations, et ce qui pourrait casser. Ne change rien pour l'instant.

Invites de design

11. Définir un style clair

Refais le style de l'application : fond blanc cassé chaleureux, texte foncé, une couleur d'accent [#1F6F50], coins arrondis, espacements généreux et une police sans empattement moderne. Garde la mise en page et chaque fonction exactement telles quelles.

12. Reprendre l'esprit d'une référence

Fais en sorte que le tableau de bord ressemble à une application financière sereine : beaucoup d'espace blanc, des chiffres grands et gras, des étiquettes petites et grises, un seul graphique simple en haut. Ne copie le logo ni le texte d'aucune marque.

13. Corriger la mise en page sur téléphone

Sur un téléphone de 375 px de large, le tableau de [la page Commandes] défile latéralement et les boutons se chevauchent. Transforme chaque ligne en carte empilée sur les petits écrans. Ne change pas la mise en page sur ordinateur.

14. États vides, de chargement et d'erreur

Ajoute des états appropriés à [la liste des projets] : un état vide accueillant avec un bouton pour ajouter le premier projet, un squelette de chargement pendant que les données arrivent, et un message clair avec un bouton de nouvelle tentative si le chargement échoue.

15. Prise en charge de la droite à gauche

Ajoute une version arabe de l'interface avec une mise en page complète de droite à gauche. Les icônes qui indiquent une direction doivent être inversées; les nombres et les dates doivent suivre le format régional. Garde l'anglais comme langue par défaut.

Invites de données et de fonctions

16. Rendre les données persistantes

Pour l'instant mes données disparaissent quand je recharge la page. Stocke-les plutôt dans une vraie base de données, et garde les écrans actuels fonctionnels de la même façon.

17. Ajouter une connexion

Ajoute une inscription et une connexion par courriel et mot de passe. Chaque utilisateur ne doit voir et modifier que ses propres [entrées]. Affiche le courriel de l'utilisateur dans la barre du haut avec un bouton de déconnexion.

18. Ajouter des rôles

Ajoute deux rôles : administrateur et membre. Les administrateurs peuvent ajouter, modifier et supprimer des [produits]; les membres peuvent seulement les consulter. Applique cela sur le serveur, et pas seulement en cachant les boutons.

19. Ajouter une recherche et des filtres

Ajoute une zone de recherche au-dessus de [la liste des contacts] qui correspond au nom, à l'entreprise ou au courriel pendant que je tape, plus un filtre par [statut]. Conserve l'ordre de tri actuel.

20. Ajouter le téléversement de fichiers

Permets aux utilisateurs de joindre jusqu'à [5] images à chaque [annonce], [5 Mo] maximum chacune. Affiche des miniatures sur l'annonce et une vue agrandie au clic. Seul le propriétaire peut supprimer ses images.

21. Importer depuis un tableur

Ajoute un bouton Importer qui prend un CSV avec les colonnes [nom, courriel, téléphone, notes], affiche un aperçu des 10 premières lignes et me laisse confirmer avant d'enregistrer. Ignore les lignes sans courriel et dis-moi combien ont été ignorées.

Invites de correction

22. Signaler un bogue clairement

Lorsque je [clique sur Enregistrer dans le formulaire de modification], j'obtiens « [texte exact de l'erreur] » et le changement n'est pas enregistré. Attendu : le changement s'enregistre et je reviens à la liste. Trouve la cause, explique-la en une ou deux phrases, puis corrige-la.

23. Arrêter une boucle de corrections

Nous avons essayé de corriger ceci trois fois et ça échoue encore. Arrête de modifier le code. Liste les trois causes les plus probables, comment vérifier chacune, et laquelle tu crois être la bonne.

24. Annuler les effets secondaires

Ton dernier changement a corrigé le sélecteur de date, mais [la barre latérale] a disparu. Remets la barre latérale exactement comme elle était et garde la correction du sélecteur de date.

25. Expliquer avant de changer

Explique comment [le total de la caisse] est calculé actuellement, étape par étape, en indiquant les fichiers concernés. Ne change rien.

Invites de tests et de révision

26. Cas limites

Énumère 10 façons dont un vrai utilisateur pourrait casser [le formulaire de réservation] : champs vides, textes très longs, double-clics, deux personnes en même temps, mauvais fuseaux horaires. Teste chacun et corrige ce qui échoue. Dis-moi ce que tu as changé.

27. Résumer les changements récents

Résume chaque changement effectué lors des [cinq] dernières étapes en mots simples, et signale tout ce qui pourrait toucher aux données existantes.

Invites de sécurité

Associez-les à notre page le vibe coding est-il sécuritaire?.

28. Vérifier l'accès aux données

Vérifie le code serveur : un utilisateur connecté peut-il lire ou modifier les [dossiers] d'un autre utilisateur en changeant un identifiant dans une requête? Montre-moi où l'accès est vérifié et corrige les failles.

29. Vérifier les secrets exposés

Liste chaque clé d'API, mot de passe ou jeton utilisé par cette application et l'endroit où chacun est stocké. Assure-toi qu'aucun ne se trouve dans du code qui s'exécute dans le navigateur ou dans des fichiers versionnés. Déplace-les vers les secrets si c'est le cas.

Invites de publication

30. Vérification avant lancement

Je m'apprête à publier ceci pour de vrais utilisateurs. Examine-le comme un réviseur : liens brisés, titres et descriptions de page manquants, formulaires sans validation, pages lentes, erreurs de console et tout ce qui semble inachevé sur un téléphone. Donne-moi une liste classée par importance, puis corrige les cinq premiers points.

Invites à éviter

Certaines invites donnent systématiquement de moins bons résultats :

• « Rends ça meilleur. » Meilleur comment? Nommez l'écran et le changement.
• « Corrige tout. » L'IA modifiera beaucoup de choses et vous ne saurez pas ce qui a bougé.
• « Utilise [bibliothèque], [cadre] et [motif]. » À moins d'avoir une raison précise, décrivez le comportement et laissez l'outil choisir la pile.
• « Voici ma clé d'API : … » Ne collez jamais de secrets dans un clavardage. Utilisez les paramètres de secrets de l'outil.
• Dix fonctions dans un seul message. Découpez-les.

Faire des invites une habitude

Après quelques projets, vous aurez vos propres versions de ces invites. Gardez-les dans une note et réutilisez celles qui fonctionnent. Mythex se souvient aussi de qui vous êtes et de votre façon de travailler d'un projet à l'autre, de sorte que les préférences que vous répétez, comme votre style habituel ou votre pile, reviennent sans que vous ayez à les retaper.

Si vous bloquez sur une première invite, le générateur d'invites d'application gratuit transforme une idée en une phrase en une invite de départ plus complète. Et pour voir ce que ces invites produisent en pratique, lisez nos exemples de vibe coding, ou collez l'invite 1 dans le créateur d'applications IA et remplacez les crochets par votre propre idée.

Questions