Le prompt qui valait 500 euros

Et pourquoi ils m'ont filé entre les doigts

Temps de lecture : 4 minutes

Too long to read :

• 🔍Etude de cas : coder une roue de la fortune, la route vers les 500 euros

• ✏️ Le Prompt du jour : la roue de la fortune

• 🤔Mon avis : Quel est l’avenir du code avec les IA génératives ?

• 🛠 Les outils du jour : Lumen, Welcome account, statisfAI

---

Hello et bienvenue dans cette 35ème édition des prompts d'Alexis !

Aujourd’hui, j’ai un use case intéressant.

Il y a quelques jours, j'ai vu ce post sur LinkedIn :

Je vous résume : un free-lance data offrait 500 euros à celui qui réussissait une roue de la fortune en 1 prompt avec musique, couleur, et un beau design. La contrainte : il fallait ne jamais avoir codé.

Ici, c'est le lieu où on trouve les meilleurs prompts donc je me suis donné 1h pour réussir son défi.

Le but de cette édition n'est pas d'apprendre à utiliser l'IA pour coder, mais de comprendre une logique qui peut te dépanner avec n'importe quel problème que tu vas rencontrer en cherchant une solution avec Chat GPT.

À la fin de l’édition, je te dis si j'ai gagné les 500 euros et te donne mon avis sur “est ce que les développeurs vont être remplacés”.

Allez c'est parti !

---

🔍Etude de cas : coder une roue de la fortune, la route vers les 500 euros

Voici un rappel des contraintes :

• La roue doit être créée en 1 prompt.

• Il doit y avoir des effets sonores.

• Il doit y avoir de la couleur.

• Le design doit être présentable à un client.

Vendredi dernier, j’ai mis entre parenthèses mon travail pendant 1h pour faire le challenge.

J'ai commencé par construire un prompt basique :

Tu es un expert en code tu as déja codé des sites ultracomplexe. Aujourdhui le challenge est le suivant. Tu vas devoir coder une roue de la fortune codée en HTML, Java Script et CSS. Il doit y avoir de belles couleurs le textes doit être bien centré et il dit y avoir des bruitages. J'utilise l'outil codepen. Comme dans la vraie roue de la fortune, il doit y avoir les chiffres de 1 à 30.

J’ai utilisé l’outil Codepen pour afficher le code.

Comme tu peux t’en douter le premier résultat n’était pas fameux :

Les numéros vont de 1 à 30 et ne sont pas aléatoires, les couleurs ne sont pas belles. Au fur et à mesure j’ai affiné et ajouté des contraintes au prompt initial.

Je te passe l'intégralité des versions, donc on passe directement à la V3.

Version 3 de la roue de la fortune

Voici le prompt de la V3 :

Tu es un expert en code tu as déja codé des sites ultracomplexe. Aujourd’hui le challenge est le suivant. Tu vas devoir coder une roue de la fortune codée en HTML, Java Script et CSS. Il doit y avoir de belles couleurs le texte doit être bien centré et il dit y avoir des bruitages. J'utilise l'outil codepen. Comme dans la vraie roue de la fortune il doit y avoir les chiffres de 30 cases..

Voici les règles :

1) Les 30 couleurs doivent être différentes
2) A la fin de chaque spin, tu devras  afficher le numéro gagnant
3) le bouton "spin the wheel" devra être bleu
4) mets un trait de référence rouge qui permettra de voir à quel niveau est la roue dans sa rotation
5) dans les 30 cases il doit y avoir :
- 2 fois le mot banqueroute
- 1 fois le mot passez
-1 fois le chiffre """0"""
- Sur le reste des cases il doit y avoir des nombres aléatoires entre 100 et 5000 mais ils doivent finir soit par 50 (exemple 350) soit par "00" (exemple 1000)
6) tous les chiffres et mots doivent être écrits en noirs et centrés au milieu des cases de la roue
7) La roue doit être centrée pour être entièrement visible
8) les couleurs doivent être réparties aléatoirement

Voici le résultat :

La roue n’affiche pas le bon numéro, les mots ne rentrent pas sur les cases mais on se rapproche. On passe à la V6.

Version 6 de la roue de la fortune

Voici le prompt de la V6 :

Tu es un expert en code tu as déja codé des sites ultracomplexe. Aujourd’hui le challenge est le suivant. Tu vas devoir coder une roue de la fortune codée en HTML, Java Script et CSS. Il doit y avoir de belles couleurs le texte doit être bien centré et il dit y avoir des bruitages. J'utilise l'outil codepen. Comme dans la vraie roue de la fortune il doit y avoir les chiffres de 30 cases..

Voici les règles :

1) Les 30 couleurs doivent être différentes
2) A la fin de chaque spin tu devras afficher le numéro gagnant
3) le bouton "spin the wheel" devra être bleu
4) mets un trait fin de référence rouge qui permettra de voir à quel niveau est la roue dans sa rotation. le trait doit être fin et rouge.
5) dans les 30 cases, il doit y avoir :
- 2 fois le mot banqueroute
- 1 fois le mot passez
-1 fois le chiffre """0"""
- Sur le reste des cases il doit y avoir des nombres aléatoires entre 100 et 5000 mais ils doivent finir soit par 50 (exemple 350) soit par "00" (exemple 1000)
6) tous les chiffres et mots doivent être écrits en noirs et centrés au milieu des cases de la roue. Ils doivent tous tenir sur une case.
7) La roue doit être centrée pour être entièrement visible. C’est très important on doit voir la roue dans son intégralité
8) les couleurs doivent être réparties aléatoirement. il doit y avoir une couleur par case.
9) on doit voir l'animation de la roue tourner.

Voici le résultat de la V6 :

Les couleurs sont plus sympas, le bon chiffre est affiché et on a les cases en entier. Problème, le trait rouge au milieu est double et les mots Bankrupt et Pass sont tous à côter.

Version finale de la roue de la fortune

À partir de ce moment ça faisait 45 minutes que j’étais sur le problème. Je me suis dit que pour réussir en moins d’une heure, il fallait que je le fasse en plusieurs prompts.

Au bout de 3 prompts plus de bug. J'ai enfin la version que je veux (sans la musique).

Plutôt pas mal sans aucune base en code.

🤔Est-ce que j'ai eu les 500 euros ?

Je n'ai pas eu les 500 euros pour 3 raisons :

1) La consigne était de réussir en 1 prompt donc ce n'est pas réussi, même si le résultat final est le bon.

2) Je n'ai pas réussi à mettre la musique. J'ai compris plus tard que pour réussir il aurait fallu mettre le nom du fichier mp3 directement dans le prompt.

3) 1 personne a fait mieux et a réussi en 1 prompt. La différence c’est qu’elle avait un background en code qui lui a donné un avantage pour mieux formuler son prompt.

Le voici :

tu es un expert en code html, css javascript. Est-ce que tu peux créer une roue de la fortune qui permet d'appuyer sur un bouton et que la roue de la fortune tourne jusqu'à obtenir un résultat. Donc la roue doit être divisée en plusieurs partie et chaque partie a une valeur monétaire 10.-,20.-,30.-,40.-,50.-,60.-,70.-,80.-,90.-,100.-.

**Est-ce que tu peux créer une page html avec:
- une roue avec une aiguille qui pointe vers le haut. 
- Chaque partie de la roue doit afficher sa valeur respective (par exemple 10€)
- un bouton en dessous
- un texte encore en dessous qui annonce l'argent gagné. 

**Est-ce que tu peux créer une page css avec le style de base pour rendre jolie. 
- J'aimerais également rajouter une image en background.jpg. 
- Il faut également ajouter une animation lors du chargement de la page qui fait apparaitre la roue par le bas en fade in. 
- Le texte qui annonce le gain doit être grand et sur un fond coloré.

**Est-ce que tu peux créer une page js qui 
- gère l'action du bouton pour faire tourner la roue et qui change le texte dynamiquement en fonction de quelle portion de la roue se trouve l'aiguille.
- Il faut également jouer un son (sound.mp3) lorsque le bouton pour tourner la roue est cliqué et jouer le son (jackpot.mp3) lorsque la roue s'arrête.

La personne ayant réussi avait un background en code, les 500 euros ont été donnés à une association.

Cet exemple illustre très bien un conseil que je donne souvent : il faut avoir une conversation avec Chat GPT, ce n’est pas un one shot.

---

Est-ce que l'IA va remplacer les développeurs ?

Pour moi la réponse est clairement non. C'est d'ailleurs ce que j'ai commenté sous le post initialement. J'ai réussi à créer la roue mais je n'arrivais pas à lire le code et je n’aurais pas pu résoudre les bugs s’il y en avait eu.

Le développement web, c'est beaucoup de résolution de problèmes. On peut difficilement faire ça sans coder.

Par contre :

• Les non devs / tech vont pouvoir coder des petits éléments rapidement pour compléter une page ou créer des petites choses.

• Les devs vont pouvoir coder beaucoup plus vite et corriger le code pour affiner leurs demandes.

---

🛠 Les outils du jour : Lumen, Welcome Account, StatisfAI

Cette semaine j’étais à Vivatech et j’ai des super projets à présenter. Exceptionnellement, les boîtes que je présente ne sont pas liées à la création de contenu.

Lumen : une technologie pour aider les aveugles à marcher sans chien ni bâton.

Welcome Account : Un compte en banque pour vos salariés internationaux qui viennent d’arriver en France.

SatisfAI : Outil qui te permet d’améliorer ton support grâce à l’IA.

---

Voilà, c’est tout pour aujourd’hui.

N’hésite pas à me poser toutes tes questions directement en répondant à ce mail.

Si tu as aimé, cette édition tu peux cliquer sur le petit cœur tout en bas et même mettre un commentaire.😊

À la semaine prochaine, mardi, 8h, pour allier l’intelligence humaine et artificielle ! 🧠🤖