Dossier 02 · Créer avec l’IA
Créer un petit outil
avec l’IA.
Pas à pas.
Le vibe coding, expliqué avec un carnet de liens.
Vous n’avez jamais programmé ? Partons d’un carnet de liens pour comprendre comment demander, essayer et corriger.
Vous avez une idée de petit outil, mais vous ne savez pas programmer. Pouvez-vous demander à une intelligence artificielle de vous aider à le fabriquer ?
Oui. Vous pouvez lui décrire votre besoin avec des phrases ordinaires. Elle peut alors écrire le code, c’est-à-dire les instructions qui font fonctionner l’outil. Vous essayez le résultat, puis vous lui expliquez ce qui doit changer.
Pour comprendre cette façon de travailler, nous allons prendre un exemple : un carnet où garder des liens vers des pages intéressantes, avec une petite note pour chacune.
Au fil du dossier, vous apprendrez à décrire ce carnet, vérifier ses fonctions et conserver une copie de vos données. Aucune connaissance en programmation n’est nécessaire pour comprendre le parcours.
Étape 1 / 8
Le carnet : notre exemple pour apprendre
Imaginez que vous trouvez une page sur le compostage et que vous voulez la retrouver plus tard. Dans le carnet, vous remplissez trois cases :
| Case | Exemple |
|---|---|
| Titre | Bien commencer son compost |
| Adresse de la page | L’adresse copiée dans votre navigateur |
| Note | À relire avant d’installer le composteur |
Vous cliquez sur Ajouter au carnet. Le lien apparaît dans votre liste. Plus tard, vous cherchez « compost » pour le retrouver.
Le carnet permet aussi de modifier une note, supprimer un lien et télécharger une copie de votre liste.
C’est l’exercice de ce dossier. Son apparence reprend celle de LoopTheHuman pour garder les mêmes repères visuels.
Étape 2 / 8
Pourquoi parle-t-on de « vibe coding » ?
Vous rencontrerez souvent cette expression pour parler de création de logiciels avec une IA. Le principe est facile à comprendre : on décrit ce que l’on veut, l’IA propose du code, puis on regarde le résultat et on demande des changements.
Le terme recouvre des usages différents. Certains essaient le résultat sans examiner le code. D’autres cherchent aussi à comprendre et à vérifier ce que l’IA a produit. Le développeur Simon Willison explique cette distinction dans son article sur le sujet.
Dans notre atelier, nous avancerons par petites étapes, avec une question à chaque fois : comment savoir si cela fonctionne ?
Étape 3 / 8
Dire à l’IA ce que l’on veut
Commencez par décrire l’usage, comme si vous demandiez de l’aide à une personne.
Voici une consigne à copier dans votre outil d’IA :
Cette consigne donnée à l’IA est parfois appelée un prompt. Il s’agit simplement de votre demande.
Lisez la réponse. L’IA a-t-elle bien compris ? Si elle propose des comptes utilisateurs ou des fonctions dont vous n’avez pas besoin, recentrez la demande :
Votre première vérification : vous devez pouvoir expliquer, en une phrase, ce que le carnet fera.
Étape 4 / 8
Passer de la demande à un outil que l’on peut essayer
L’IA peut vous donner des fichiers contenant le code. Dans notre exemple, il y en a trois :
| Fichier | À quoi sert-il ? |
|---|---|
index.html | Il décrit ce qui apparaît dans la page : titres, cases et boutons. |
styles.css | Il définit l’apparence : couleurs, tailles et disposition. |
app.js | Il fait fonctionner les actions : ajouter, chercher ou enregistrer un lien. |
Vous n’avez pas à retenir ces noms pour comprendre la suite. Retenez les trois rôles : ce que l’on voit, son apparence et ce qui se passe quand on agit.
Comment ouvrir votre carnet en 3 étapes
Pour essayer notre exemple, téléchargez le carnet prêt à ouvrir. Vous pouvez aussi l’essayer directement dans votre navigateur.
Le téléchargement contient un dossier compressé : c’est une enveloppe qui rassemble les fichiers. Avant de commencer, ouvrez cette enveloppe avec « Extraire tout » sous Windows, ou un double-clic sur le fichier ZIP sous macOS. Choisissez un dossier facile à retrouver, par exemple sur votre bureau.
- Rassemblez les trois fichiers. Dans le dossier extrait, vérifiez que
index.html,styles.cssetapp.jssont côte à côte. Si vous utilisez les fichiers de votre IA, enregistrez-les ensemble de la même façon. - Ouvrez le carnet. Faites un double-clic sur
index.html. Vous pouvez aussi choisir « Ouvrir avec », puis votre navigateur habituel. Vérification : la page du carnet apparaît avec ses cases et ses boutons. Notre version téléchargée n’a pas besoin d’Internet pour fonctionner. - Faites un premier essai. Écrivez un titre, par exemple « Mon premier lien », puis une adresse complète, par exemple
https://example.org. Ajoutez une note si vous le souhaitez et cliquez sur Ajouter au carnet. Vérification : votre lien apparaît dans la liste à côté du formulaire, ou sous celui-ci sur un petit écran.
Si la page s’affiche mais que le bouton ne fonctionne pas, vérifiez que les trois fichiers sont bien réunis après extraction. Pour un carnet produit par votre propre IA, vous pouvez lui demander :
Avant de fermer : utilisez Exporter le carnet pour garder une copie. La conservation des données d’un fichier ouvert par double-clic dépend du navigateur. Si le stockage est bloqué, un message vous prévient : vous pouvez essayer le carnet, mais vous devez exporter vos liens avant de fermer la page.
À ce stade, le carnet fonctionne sur votre ordinateur. Le rendre accessible sur Internet est une autre étape.
Étape 5 / 8
Vérifier avec des gestes simples
Commencez avec des liens de démonstration. Faites une seule manipulation à la fois.
| Ce que vous faites | Ce que vous devez constater |
|---|---|
| Ajouter un lien et une note | Le lien apparaît une seule fois dans la liste. |
| Rechercher un mot de la note | Le lien correspondant est retrouvé. |
| Modifier cette note | Le nouveau texte remplace l’ancien. |
| Recharger la page | Le lien et sa note sont toujours présents. |
| Envoyer le formulaire vide | Un message explique ce qui manque. |
| Supprimer un lien | Le carnet demande confirmation avant de le retirer. |
Ces vérifications sont des tests. Vous comparez ce que vous vouliez avec ce que vous observez.
Si quelque chose échoue, décrivez précisément le problème :
Après la correction, refaites la manipulation. Vérifiez aussi que l’ajout et la recherche fonctionnent encore. Une réponse rassurante de l’IA ne remplace pas votre essai.
Étape 6 / 8
Garder une copie de ses liens
Dans notre carnet, les liens sont conservés dans le navigateur utilisé. Ils ne sont pas automatiquement disponibles sur un autre ordinateur. Ils peuvent aussi disparaître si vous effacez les données du site dans votre navigateur. Explication technique : MDN
Deux boutons servent à garder et récupérer une copie :
- Exporter : télécharger votre liste dans un fichier.
- Importer : lire ce fichier pour remettre la liste dans le carnet.
Le fichier porte l’extension .json. C’est un format de données que le carnet sait lire. Vous n’avez pas besoin de le modifier vous-même.
Pour essayer la sauvegarde, utilisez une petite liste de démonstration : exportez-la, puis vérifiez que le carnet peut la relire et la restaurer. Dans notre exemple, l’import remplace la liste actuelle après votre confirmation.
Si le fichier est abîmé ou incompatible, le carnet doit le refuser et conserver la liste déjà présente.
Facultatif · Pour plus tard
Le mettre sur Internet : seulement si c’est utile
Vous pouvez d’abord utiliser le carnet sur votre ordinateur. Pour le rendre accessible à une adresse web, il faut le mettre en ligne.
Un hébergeur est le service qui conserve les fichiers du site et les transmet aux navigateurs des visiteurs. Un nom de domaine, comme loopthehuman.com, est l’adresse choisie pour y accéder.
Cette étape demande ses propres vérifications : l’adresse mène-t-elle au bon outil ? Les fonctions marchent-elles encore ? Les fichiers et les captures contiennent-ils uniquement ce que vous voulez rendre public ?
La mise en ligne du carnet ne changera pas son fonctionnement : chaque navigateur gardera sa propre liste. Elle ne créera pas une liste commune entre plusieurs personnes.
Étape 8 / 8
Ce que l’IA fait, et ce qu’il vous reste à faire
L’IA peut proposer du code, expliquer un fichier et aider à corriger un problème. Pour avancer, vous devez préciser le besoin, essayer le résultat et conserver une copie de ce qui fonctionne.
Gardez des données de démonstration pour apprendre. Avant de publier des fichiers ou des captures, vérifiez les noms et les adresses e-mail visibles. Un pseudonyme affiché sur la page ne masque pas automatiquement les informations présentes ailleurs.
Le carnet fourni ne demande ni inscription ni abonnement. Le service d’IA utilisé pour créer votre propre variante peut, lui, être payant. Si vous choisissez de mettre l’outil en ligne, vérifiez aussi les conditions de l’hébergeur et le prix éventuel du nom de domaine.
Le but de cet atelier est de fabriquer un petit outil dont vous comprenez l’usage, les limites et la façon de récupérer les données.
Un pas à la fois
Votre premier outil commence
par une petite idée.
Décrivez-la avec vos mots. Essayez une fonction. Gardez ce qui marche. Vous pourrez ajouter la suite après.
« Bien joué. On vérifie la sauvegarde ? »
Revenir à la première demande ↑