Construire un site propre avec un agent

1Écrire le cadrage avant la première ligne de code

Avant de lancer quoi que ce soit, réponds à ces questions dans un fichier texte. Pas dans ta tête, dans un fichier, parce que tu vas le donner à l'agent.

• À qui s'adresse le site, et quelle action tu attends du visiteur. Une seule action principale, pas cinq.
• Les pages, nommées. Trois suffisent souvent. Chaque page en une phrase.
• Le contenu réel, même brouillon. Pas de faux texte : un agent qui invente le contenu invente aussi la structure qui va avec, et elle ne survivra pas au vrai texte.
• Les contraintes techniques : hébergement visé, faut-il un formulaire, faut-il une base de données.

Ce fichier fait une page. Il t'économisera trois refontes.

2Faire proposer un plan, pas du code

Premier échange, aucune ligne de code :

Voici mon cadrage (fichier joint). Propose-moi une structure de projet et
une liste de composants, avec pour chacun son role en une phrase. Signale
les points ou mon cadrage est ambigu. N'ecris aucun code pour l'instant.

Les ambiguïtés qu'il remonte sont précieuses : ce sont exactement les endroits où, sans plan, il aurait inventé. Tranche-les toi-même, puis valide le plan.

3Construire par tranches vérifiables

Une tranche, c'est quelque chose que tu peux ouvrir et juger. Pas « le site », mais « la page d'accueil sans le formulaire ». Après chaque tranche, tu regardes.

L'ordre qui limite les reprises :

1. La structure et la navigation, sans style.
2. Les jetons de design : couleurs, échelle de tailles, espacements. Une fois, au début.
3. Une page complète, celle qui contient le plus de cas différents.
4. Les autres pages, en réutilisant ce qui existe.

4Vérifier dans le navigateur, pas dans la conversation

Un agent qui n'a pas vu le rendu te décrit ce qu'il a voulu écrire, pas ce qui s'affiche. Branche-lui un navigateur (voir le guide dédié), puis demande des mesures, pas des impressions :

Ouvre http://localhost:3000 en 390 px de large. Compare la largeur de
defilement du document et la largeur visible. Si ca deborde, nomme
l'element responsable et sa classe. Ne corrige rien.

La séquence utile est toujours la même : mesurer, nommer le coupable, corriger, remesurer. Sans la remesure, tu n'as qu'une intention de correction.

Trois vérifications à passer sur chaque page avant de la considérer finie :

5Ce que tu ne délègues pas

Ces décisions coûtent cher à défaire, et un agent n'a aucun moyen de les prendre correctement à ta place.

• Le texte qui engage. Prix, promesses, mentions légales, description de ce que tu vends. Un modèle produit une formulation plausible, et « plausible » sur une page de prix, c'est un problème.
• Ce qui touche à l'argent et aux données personnelles. Paiement, collecte d'adresses, comptes utilisateurs. Fais-toi expliquer, relis, teste. Ne valide pas sur confiance.
• Le choix des dépendances. Chaque paquet ajouté est à maintenir. Demande pourquoi celui-là, et s'il est vraiment nécessaire.
• La direction visuelle. Un agent applique une direction, il n'en choisit pas une. Si tu ne lui en donnes pas, tu récupères la moyenne de son entraînement.