Guide pratique
Ce tutoriel de vibe coding pour débutants vous guide dans la création d’une page de liste de tâches simple. Décrivez ce qu’elle doit faire, examinez le résultat et appuyez-vous sur vos observations pour guider la modification suivante.
Une petite page de liste de tâches suffit pour pratiquer le cycle complet. Vous n’avez pas besoin de planifier une application entière avant de rédiger votre première instruction.
Suivez ce cycle court chaque fois que vous pratiquez le vibe coding : demandez un résultat précis, testez-le vous-même, puis demandez une correction ciblée.
Demandez une page de liste de tâches avec un champ de texte, un bouton d’ajout, des cases à cocher et un moyen de supprimer les tâches terminées. Précisez ce qui doit se passer après l’actualisation de la page et gardez la demande visuelle simple.
Ajoutez une tâche, marquez-la comme terminée, supprimez les tâches terminées, puis rechargez la page. Notez précisément l’action qui échoue au lieu de juger l’ensemble du projet sur son apparence.
Signalez l’action qui échoue et le comportement attendu : par exemple, les tâches disparaissent après l’actualisation, alors qu’elles devraient rester. Testez à nouveau la même action après la modification.
Les éléments requis permettent de concentrer ce tutoriel sur les comportements observables. Les éléments facultatifs facilitent le repérage des points à améliorer.
Un navigateur dans lequel vous pouvez ouvrir la page générée et interagir avec elle — Vous devez cliquer sur les commandes et recharger la page pour vérifier son comportement.
Une description en une phrase de votre page de liste de tâches — Indiquez l’action de l’utilisateur et ce qui doit se passer ensuite.
Une courte liste de tests : ajouter, terminer, effacer et actualiser — Effectuez les mêmes vérifications après chaque modification concernée.
Des exemples de noms de tâches sans informations privées — Essayez d’abord un texte ordinaire, puis une entrée vide et une entrée longue.
Une fenêtre de navigateur étroite, au format mobilefacultatif — Utilisez-la pour vérifier que les boutons et le texte des tâches restent utilisables.
Une fois que cette petite page fonctionne, passez à un projet comportant un seul nouveau défi, plutôt que d’ajouter toutes les fonctionnalités d’un coup.
Les outils ont changé, mais la bonne habitude enseignée dans ce tutoriel reste la même : examiner un résultat avant d’en demander un autre.
La préversion technique de GitHub Copilot a intégré les suggestions de code par IA au travail dans un éditeur. Il fallait toujours que le développeur lise la suggestion et décide si elle convenait.
Le lancement public de ChatGPT a permis de décrire facilement une tâche de programmation avec des mots de tous les jours et de poser des questions complémentaires sur le résultat.
Les outils proposant des aperçus des interfaces générées ont facilité la comparaison entre l’écran demandé et le résultat affiché, puis la description d’une modification précise.
Andrej Karpathy a popularisé le terme vibe coding. Pour un débutant, la leçon pratique n’est pas d’accepter tous les résultats : il faut lancer la page et décrire ce qui se passe réellement.
Considérez un résultat inattendu comme un indice pour le prochain prompt. Ces vérifications sont plus fiables que de demander à répétition une meilleure version.
1
Cliquez sur Add après avoir saisi un nom de tâche court. Si aucune nouvelle ligne n’apparaît, indiquez à Vibe Code sur quel bouton vous avez cliqué, ce que vous avez saisi et ce que vous vous attendiez à voir. Demandez-lui de faire fonctionner cette interaction avant de demander des changements de style. Après la correction, essayez aussi de ne rien saisir : la page doit soit refuser clairement une entrée vide, soit la traiter de façon délibérée.
2
Vérifiez d’abord que l’ajout et la validation des tâches fonctionnent avant de recharger la page. Actualisez-la ensuite et observez si la liste réapparaît. Si elle disparaît, demandez que les tâches soient conservées pendant la session du navigateur ou sur l’appareil, en précisant que les actions d’ajout et de validation existantes doivent continuer à fonctionner. La correction devient ainsi vérifiable, et vous réduisez le risque qu’elle perturbe un autre contrôle.
3
Réduisez la largeur du navigateur et cherchez les boutons coupés, les noms de tâches qui débordent ou les contrôles trop rapprochés. Décrivez le problème d’affichage précis plutôt que de demander une refonte complète. Après la modification de la mise en page, testez de nouveau les actions sur les tâches, avec une fenêtre étroite puis large : les changements visuels peuvent modifier par inadvertance les zones cliquables.
Une démo fonctionnelle est une étape utile, pas la preuve que tous les cas particuliers sont résolus. Gardez ces limites à l’esprit lorsque vous la développez.
La page de liste de tâches peut sembler terminée alors qu’une case à cocher, l’action pour effacer la liste ou le comportement après actualisation ne fonctionne pas.
Que faire à la place
Reprenez la même liste de quatre actions à tester après chaque modification et notez précisément celle qui échoue.
Un petit exercice local ne permet pas d’établir que le code généré est sûr pour des données sensibles ou un déploiement public.
Que faire à la place
Utilisez des tâches fictives, ne saisissez aucun secret et prévoyez une revue distincte du code et de la sécurité avant de traiter de vraies données utilisateur.
Une saisie vide, un texte inhabituellement long et des clics répétés peuvent produire des résultats différents du scénario prévu.
Que faire à la place
Ajoutez les cas particuliers à votre liste de tests un par un et demandez une correction précise pour chaque échec.
Le fait que les tâches restent visibles après une actualisation sur un appareil ne signifie pas qu’elles apparaîtront dans un autre navigateur ou sur un autre appareil.
Que faire à la place
Déterminez si l’accès sur plusieurs appareils est vraiment nécessaire avant de demander des fonctionnalités de stockage ou de compte.
Commencez avec l’instruction pour créer la liste de tâches, puis vérifiez vous-même chaque action. Ce tutoriel de vibe coding pour débutants est particulièrement utile lorsque chaque demande de suivi décrit un problème constaté et un résultat vérifiable.
Créez une page de liste de tâches avec un champ de saisie, un bouton Ajouter, des cases à cocher et une action pour supprimer les tâches terminées. Chaque commande produit un résultat visible, ce qui rend la page plus facile à tester qu’une application vaste et vaguement décrite.
Vous pouvez commencer par décrire la page avec des mots simples et tester ses commandes dans un navigateur. Apprendre à lire les messages d’erreur courants et à reconnaître les éléments d’une page vous aidera à apporter des corrections plus précises.
Indiquez le nom de la page, ses commandes essentielles et ce que chacune doit faire. Ajoutez une exigence importante, comme la conservation des tâches après une actualisation, mais gardez les détails décoratifs pour une étape ultérieure.
Décrivez l’action que vous avez effectuée, ce qui s’est passé et ce que vous attendiez à la place. Par exemple, indiquez qu’après avoir saisi une tâche, un clic sur Ajouter ne crée aucune ligne. Demandez ensuite de corriger cette interaction et testez-la à nouveau.
Pour cet exercice, il est terminé lorsque vous pouvez ajouter une tâche, la marquer comme terminée, supprimer les tâches terminées et actualiser la page sans perdre de tâches de manière inattendue. Testez une saisie vide et un écran étroit avant de considérer la première version comme terminée.