04 — Premier projet guidé : générateur de fiches produit

@diagram:lesson-contract
duration :: 12 min lecture + 1h15 pratique
deliverable :: Application web locale fonctionnelle — générateur de fiches produit gourde inox 750 ml
outcome :: Savoir déléguer la construction d'un prototype complet à un agent en 7 étapes contrôlées

Les 7 étapes du projet guidé

@diagram:step-bar
Étape 1 :: Verrouiller la V1 dans SPEC.md
Étape 2 :: Demander un plan avant le code
Étape 3 :: Créer le squelette de l'application
Étape 4 :: Implémenter la logique de génération
Étape 5 :: Ajouter le bouton Copier
Étape 6 :: Tester avec le cas de référence
Étape 7 :: Commit Git de la version stable

Résultat attendu

Tu construis une page web qui tourne en local. Elle réunit :

• un formulaire ;
• un bouton « Générer » ;
• un bloc de résultat ;
• un bouton « Copier » ;
• une logique de génération simple, même sans API au départ.

Pour démarrer, une génération simulée suffit. L’appel à une vraie API IA viendra plus tard, si le prototype mérite d’être poursuivi.

La sortie attendue : exemple gourde inox 750 ml

Voilà ce que l’application doit produire quand tu lui passes le cas de test de référence.

Données d’entrée :

• Produit : Gourde inox 750 ml
• Public cible : randonneurs occasionnels
• Bénéfice 1 : garde l’eau fraîche
• Bénéfice 2 : solide dans un sac
• Bénéfice 3 : facile à nettoyer

Fiche produit générée :

# Gourde inox 750 ml — pour randonneurs occasionnels

Une solution robuste et légère, pensée pour les sorties en plein air sans contraintes.
Idéale pour qui veut une gourde qui dure et se range facilement dans un sac.

**Arguments de vente :**
- Garde l'eau fraîche plusieurs heures grâce à la double paroi inox
- Résiste aux chocs et aux rayures du quotidien
- Nettoyage facile, embout large, passe au lave-vaisselle
- Format 750 ml : autonomie pour une demi-journée de marche
- Sans BPA, matériau alimentaire certifié

**Formats disponibles :** 500 ml · 750 ml · 1 L
**Prix suggéré :** 18–25 € selon finition

Vise ce niveau de détail à la fin de l’étape 4. L’agent rédige le texte structuré ; ton travail consiste à relire le français et à vérifier que le format colle au SPEC.md.

Étape 1 — Verrouille la V1

Dans SPEC.md, garde cette version :

## V1
Application locale de génération de fiche produit.

Entrées :
- nom produit
- public cible
- bénéfice 1
- bénéfice 2
- bénéfice 3

Sortie :
- titre
- description courte
- 5 bullet points

Pas de backend en V1.
Pas d'appel API obligatoire en V1.

Étape 2 — Demande un plan avant le code

Lis SPEC.md.
Propose un plan d'implémentation en 5 étapes pour une app Vite + React.
Inclue les fichiers à créer ou modifier.
Ne code pas encore.

Relis le plan et garde-le court. Si l’agent y glisse une base de données, de l’auth ou un design system complet, refuse et redemande.

Étape 3 — Fais créer le squelette

Crée le squelette Vite + React pour la V1.
La génération peut être simulée avec une fonction locale.
Après modification, indique les fichiers changés et la commande de lancement.

L’agent doit te donner cette commande de lancement :

npm run dev

Tu préfères du HTML/CSS/JS simple ? Adapte la demande :

Crée trois fichiers : index.html, style.css, app.js.
L'application doit fonctionner en ouvrant index.html dans le navigateur.

Étape 4 — Ajoute une génération locale propre

La fonction locale prend les champs du formulaire et en sort un brouillon. Voici la logique à reproduire :

Titre : [Nom produit] pour [public cible]
Description : Une solution simple pour [public cible], pensée pour [bénéfice principal].
Bullet points : reprendre les bénéfices et ajouter des formulations utiles.

Prompt :

Ajoute une fonction generateProductSheet(input).
Elle doit retourner un objet : title, description, bullets[].
Pas d'appel API.
Garde le code lisible et testable.

Étape 5 — Ajoute le bouton copier

Ajoute un bouton Copier qui copie le résultat complet dans le presse-papiers.
Affiche un message court après copie.
Ne change pas le reste de l'interface.

Étape 6 — Vérifie dans le navigateur

Lance l’application et saisis ces données :

Produit : Gourde inox 750 ml
Public : randonneurs occasionnels
Bénéfice 1 : garde l'eau fraîche
Bénéfice 2 : solide dans un sac
Bénéfice 3 : facile à nettoyer

Le résultat doit être un texte français, lisible et copiable.

Étape 7 — Fais un point Git

Une fois que ça marche, sauvegarde l’état :

git status
git add .
git commit -m "add product sheet prototype v1"

Check-list de validation

@diagram:checklist
item-1 :: L'application démarre localement.
item-2 :: Le formulaire contient toutes les entrées prévues.
item-3 :: Le bouton génère un résultat sans erreur.
item-4 :: Le résultat est en français.
item-5 :: Le bouton copier fonctionne.
item-6 :: La V1 ne contient pas de fonctionnalité hors périmètre.
item-7 :: Un commit Git sauvegarde la version stable.

Pièges fréquents

• Brancher une API trop tôt. Vérifie d’abord que l’interface et le flux tiennent debout.
• Laisser le style bloquer la validation. Une interface dépouillée suffit pour apprendre.
• Demander plusieurs changements à la fois. Une modification, une vérification, puis la suivante.
• Ne pas tester avec de vraies données. Le formulaire passe avec « test » et casse sur un cas réaliste.

Suite conseillée

Passe au module 5 pour apprendre à travailler avec un agent coding sur des tâches plus longues sans perdre la visibilité.