Découvrez les possibilités

Des exemples de vibe coding à adapter à votre idée

Ces exemples de vibe coding montrent comment transformer une demande formulée en langage courant en un petit prototype testable. Choisissez un scénario, décrivez ce qu’il doit faire et vérifiez le résultat à l’aide d’une courte liste de contrôle, sans supposer que le code généré est terminé.

Vérifiez les résultats générés avant de les utiliser
Visuel de la page d’accueil de Vibe Code

le processus de travail actuel du public cible

La plupart des projets commencent par une idée et une liste approximative de fonctionnalités. L’étape utile consiste à définir une personne, une tâche et un moyen de vérifier si le résultat fonctionne.

Une personne qui crée son premier projet

Vous tenez une liste de livres dans un document, mais retrouver ceux que vous n’avez pas terminés prend trop de temps. Demandez un suivi de lecture avec un champ pour le titre, un sélecteur de statut, un filtre et des notes qui restent enregistrées après l’actualisation de la page. Commencez avec trois exemples de livres pour pouvoir tester immédiatement chaque commande.

Un résultat utile vous permet d’ajouter un livre, de modifier son statut, de filtrer la liste et de recharger la page sans perdre les entrées. Si le plus difficile est de choisir un premier projet, les idées de vibe coding pour débutants proposent des points de départ plus simples.

idées de vibe coding pour débutants

Une personne qui organise des événements pour sa communauté

Vous recueillez actuellement les détails des événements dans des messages, puis les copiez sur une page partagée. Décrivez une page d’événement adaptée aux mobiles, avec une date, un lieu, un programme et un lien de contact bien visible. Fournissez le texte réel de l’événement afin de pouvoir évaluer la mise en page avec des contenus de longueur réaliste.

Le prototype doit afficher l’heure et le lieu de façon lisible sur un écran étroit, et le lien de contact doit ouvrir la destination prévue. Pour examiner de plus près la création de cette page, la page consacrée aux sites web en vibe coding aborde les choix propres aux sites web.

site web en vibe coding

Une personne qui coordonne une petite équipe

Les tâches sont dispersées entre les notes et les conversations, ce qui rend difficile de voir ce qui est en attente. Demandez un tableau de tâches simple avec trois statuts, un champ pour la personne responsable et un moyen de modifier ou de supprimer une tâche. Laissez les autorisations et la synchronisation partagée de côté pour cette première version.

Une première version convaincante vous permet de déplacer une tâche d’un statut à un autre et de comprendre ce qui se passe lorsque la page se recharge. Si l’outil nécessite ensuite un processus de création d’application plus complet, le guide pour créer une application en vibe coding explique comment en construire et en vérifier une.

comment créer une application en vibe coding

notre place dans ce processus

Vibe Code intervient à l’étape du prototype : décrivez une tâche bien délimitée, examinez le résultat, puis corrigez ce qui n’a pas fonctionné. Choisissez une portée adaptée à la question à laquelle vous devez répondre.

ou

Option 1

Vous devez vérifier si un écran explique clairement une idée.

Commencez par une maquette sur une seule page, avec des titres, des libellés et des exemples de contenu réalistes.

Vous pouvez évaluer l’ordre de lecture et la mise en page sur mobile sans concevoir d’abord le stockage des données. Demandez à un collègue de trouver une information précise ; son hésitation vous en apprendra plus qu’une capture d’écran soignée.

ou

Option 2

Vous devez tester une tâche personnelle récurrente.

Demandez un petit outil interactif, par exemple un outil de suivi permettant d’ajouter, de modifier, de filtrer et de supprimer des entrées.

Ces actions révèlent rapidement les états manquants. Vérifiez les listes vides, les saisies invalides et le comportement après rechargement avant d’ajouter des graphiques ou des écrans décoratifs.

ou

Option 3

Vous avez besoin de comptes, de données partagées ou d’informations sensibles.

Considérez le résultat généré comme un cahier des charges et un prototype, pas comme un service prêt à être mis en ligne.

L’authentification, les règles d’accès, la confidentialité et la récupération des données exigent une mise en œuvre et des tests rigoureux. Utilisez des exemples de données fictives pendant que vous explorez l’interface.

avant/après

Chaque scénario part d’un processus manuel familier et aboutit à un résultat que vous pouvez examiner. Les étapes décrivent ce qu’il faut demander et tester, sans garantir un produit fini.

    • Débutant

      Des notes de lecture éparses à un outil de suivi des lectures

      Avant : les titres et la progression sont répartis entre plusieurs notes. Après : une seule vue regroupe les livres par statut et permet d’ajouter rapidement un titre et de noter une réflexion. Le test essentiel consiste à vérifier qu’une entrée reste intacte après modification et actualisation de la page.

      1. Décrivez les champs : titre, auteur, statut et note facultative.
      2. Demandez des commandes pour ajouter, modifier et supprimer des entrées, ainsi que pour les filtrer par statut.
      3. Saisissez des exemples de livres, puis testez la liste vide, un changement de statut et un rechargement.
      Essayer un prompt pour un outil de suivi
    • Débutant

      D’un message d’invitation à une page pratique

      Avant : les participants parcourent un fil de messages pour retrouver l’adresse et l’heure de début. Après : une page d’événement compacte affiche ces informations près du haut et permet de consulter facilement le programme. Vérifiez son affichage sur un écran de la largeur d’un téléphone avant de la partager.

      1. Indiquez le nom de l’événement, la date, le lieu, le programme et les coordonnées.
      2. Demandez une page adaptative avec des titres clairs et un lien de contact visible.
      3. Vérifiez l’espacement sur petit écran, les destinations des liens et les éventuelles informations manquantes sur l’événement.
      Essayer une page d’événement
    • Intermédiaire

      Des rappels dans une conversation à un prototype de tableau de tâches

      Avant : les responsabilités et l’avancement sont noyés dans la conversation. Après : un tableau affiche les tâches par statut et attribue un responsable à chacune. Il s’agit d’un exemple de flux de travail local, et non d’une garantie que plusieurs personnes peuvent modifier les mêmes données sans risque.

      1. Définissez les trois statuts et les champs indispensables pour chaque tâche.
      2. Demandez des commandes pour créer, modifier, déplacer et supprimer des tâches.
      3. Testez une tâche sans responsable, un titre vide et ce qui se passe après l’actualisation de la page.
      Essayer un tableau de tâches

    cahier des charges du livrable

    Un bon prompt précise l’utilisateur, l’action principale, les champs ou le contenu requis, ainsi que le comportement à vérifier. Pour ces exemples de vibe coding, demandez des données d’exemple et un état vide, puis testez vous-même chaque commande visible. N’incluez pas d’informations personnelles dans les prompts exploratoires et prévoyez une vérification distincte avant d’utiliser un prototype avec de vrais utilisateurs.

    Demandez un résultat que vous pouvez réellement vérifier

    • Une tâche claire et un public défini
    • Un contenu d’exemple réaliste, jamais de données privées
    • Une liste de vérification pour les actions, les erreurs et les rechargements
    Créer un prototype

    FAQ sur les scénarios

    Par exemple, vous pouvez décrire en langage courant un outil de suivi des lectures, une page d’événement ou un tableau de tâches simple, puis améliorer le résultat généré par itérations. L’essentiel est de préciser le comportement souhaité, d’examiner ce qui a été produit et de demander des modifications ciblées.

    Essayez une liste personnelle avec quelques champs et un seul filtre, par exemple des livres classés selon leur statut de lecture. Vous pourrez tester l’ajout, la modification et le filtrage des entrées sans avoir besoin de comptes partagés ni d’une source de données externe.

    Il peut servir de point de départ, mais une démo fonctionnelle n’est pas une version testée. Vérifiez l’accessibilité, la gestion des erreurs, le comportement des données et les besoins en matière de sécurité avant de demander à quiconque de s’y fier.

    Notez les actions qu’il est censé permettre, puis effectuez-les une par une avec des données d’exemple. Testez l’état vide, les saisies inattendues, les écrans étroits et l’actualisation de la page. Dans votre prochaine demande, signalez les problèmes précis plutôt que de demander une amélioration vague.

    Commencer à créer
    Commencer à créer