Générer les pages HTML avec l'IA

← Les principes · 15 diapositives · flèches ou clic pour avancer

Kickoff · Semaine 1 · La boutique générée

Générer les pages HTML avec l'IA

Les prompts qui produisent un vrai site : une page à la fois, cohérente, sémantique et en français

Le saut quantique : L'IA devient votre intégrateur

C'est une bascule majeure. Jusqu'ici, vous étiez des analystes. À partir de maintenant, l'IA va littéralement coder pour vous.

Vous n'allez pas taper manuellement chaque balise : vous devenez le directeur technique. Vous dictez l'intention sémantique, l'IA génère le HTML et le CSS.

Vous l'intention sémantique IA le HTML et le CSS La boutique en ligne
Projet Web Transactionnel · Le kickoff2

Avant la première page : le contexte

Puisque vous n'avez pas encore de Devis (il viendra à la Mission 5), votre boussole est votre Fiche de choix de sujet (rédigée à la Mission 1).

Dans une nouvelle discussion avec l'IA, copiez-collez simplement le champ « Description » de votre fiche en tête de la discussion. L'IA a besoin de ce contexte, sinon elle générera une boutique générique et vide d'âme.

LA FICHE DE CHOIX DE SUJET rédigée à la Mission 1 du kickoff Nom du projet Coéquipiers Sujet de la boutique Description de la boutique « La serre urbaine vend des plantes rares aux collectionneurs… » LA DISCUSSION IA une nouvelle discussion Collez la « Description » ici… copier-coller
Projet Web Transactionnel · Le kickoff3
Tutoriel : Forger son Projet IA personnel →

La règle du Produit Minimum Viable (MVP)

Attention : vous générez l'intégration HTML statique de l'Itération 1, pas l'application finale ! Ne visez pas trop grand et limitez votre périmètre technologique pour garantir votre livraison.

Utilisez la technique des données figées en dur ("hardcoding"). Par exemple : au lieu d'exiger une carte géographique interactive complexe, demandez à l'IA de concevoir une maquette affichant simplement 10 trajets textuels prédéfinis. Le "vrai" module complexe viendra dans une itération future.

Projet Web Transactionnel · Le kickoff4

Le Cadre de Référence : Les Normes

L'IA génère du code, mais elle ne connaît pas nos standards de qualité locaux. Avant de taper votre premier prompt, téléversez le document des Normes du Cours directement dans la discussion. L'IA s'en servira pour aligner son code sur nos attentes.

NORMES DU COURS téléverser LA DISCUSSION IA avant le premier prompt Joindre les Normes du Cours…
Projet Web Transactionnel · Le kickoff5

LE PROMPT de la première page (l'accueil)

​Génère la page d'accueil de ma boutique de cupcakes en UN SEUL fichier HTML avec le CSS embarqué dans la page. Pas de framework, pas de JavaScript pour l'instant. La page présente : une section vedette avec le cupcake du moment, puis la vitrine principale organisée en grille de cartes (image, nom, prix sur chaque carte). La vitrine est séparée en deux catégories : « avec gluten » et « sans gluten ». L'entête de la page contient le nom de la boutique et le menu (Accueil, Cupcakes, Contact), et un pied de page complète le tout. Style : [ex: minimaliste, tons pastels roses et beiges, typographie arrondie et chaleureuse]. Textes réalistes : tous les textes parlent de vrais cupcakes (saveurs, prix, descriptions appétissantes), en français - AUCUN lorem ipsum. Spécification du code, sémantique et EN FRANÇAIS : des id pour les éléments uniques (#entete, #vitrine-cupcakes), des classes systématiques pour ce qui se répète (.cupcake > .cupcake-titre, .cupcake-prix), balises header, nav, main, section, footer.

Les crochets [ ] sont à remplacer par VOTRE sujet et VOTRE charte : c'est là que le prompt devient le vôtre.

Projet Web Transactionnel · Le kickoff6

Vérifier avant d'accepter

  • Balises sémantiques : header, nav, main, section, footer - pas une soupe de div
  • Les id et les classes sont en français et suivent le patron du cours
  • Aucune librairie externe, aucune image inventée qui donnera un 404
  • Aucun lorem ipsum : tous les textes parlent de VOTRE boutique
  • La page respire sur mobile (le navigateur en mode responsive)

Cinq vérifications, deux minutes. Une page acceptée les yeux fermés, c'est une dette qui attend la démo.

Projet Web Transactionnel · Le kickoff7

LE PROMPT des pages suivantes

​J'ai téléversé ma page d'accueil terminée (index.html). Génère maintenant les DEUX pages du panneau d'administration. 1. La page "Liste de l'inventaire" : elle présente la liste des cupcakes avec un bouton "Ajouter" en haut. Pour chaque ligne, on retrouve un bouton "Éditer" et un bouton "Supprimer" utilisant des icônes claires. Une alternance de couleurs ou une démarcation franche permet de bien distinguer chaque rangée. 2. La page "Formulaire" (qui sert pour Ajouter ET Éditer) : elle comporte les champs Nom, Description, Prix, Image, et un menu déroulant (Avec / Sans gluten). Ces champs sont logiquement regroupés dans deux fieldsets. Ces pages doivent être PARFAITEMENT cohérentes avec l'accueil : exactement le même entête, le même menu (avec l'élément actif indiqué), le même pied de page, les mêmes classes et palette. Textes réalistes : les libellés, le tableau et les exemples parlent de vrais cupcakes, en français - AUCUN lorem ipsum. Spécification du code, sémantique et EN FRANÇAIS : des id pour les éléments uniques (#liste-inventaire, #formulaire-cupcake), classes systématiques pour ce qui se répète (.rangee-cupcake).

Pour générer les pages suivantes, l'IA a besoin de votre code actuel. Ne vous épuisez pas à copier-coller des milliers de lignes : téléversez simplement vos fichiers .html et .css existants directement dans la discussion (via l'icône trombone de votre IA). Fournissez ensuite votre prompt pour la nouvelle page. La machine lira vos fichiers et réutilisera votre design.

Projet Web Transactionnel · Le kickoff8

Itérer sur UNE page

  • Retouches ciblées : « change seulement l'entête, ne touche à rien d'autre »
  • Jamais « régénère la page » pour un détail : vous perdez tout ce qui était bon
  • Si l'IA dérive (styles qui changent, classes renommées) : repartez du dernier bon HTML, collé au complet
  • Gardez chaque version acceptée : le HTML d'hier est votre filet de sécurité

Le HTML accepté fait foi, pas la conversation : quand le doute s'installe, on recolle le vrai fichier et on repart de là.

Projet Web Transactionnel · Le kickoff9

Extraire le CSS commun

​J'ai téléversé mes trois pages terminées : index.html, admin.html et paiement.html. Extrais tout le CSS partagé dans un fichier decoration/style.css, laisse dans chaque page seulement son CSS propre, et branche les trois pages sur le fichier commun. Ne change AUCUNE apparence : la boutique de cupcakes doit rester identique.
accueil.html <style> produits.html <style> mission.html <style> decoration/ style.css le CSS partagé, une seule fois chaque page garde son CSS propre et un <link> unique : l'apparence reste identique
  • À faire quand trois pages existent : avant, c'est prématuré; après, le CSS a déjà divergé
  • Vérifiez ensuite chaque page : « identique » se contrôle page par page, pas sur parole
  • À partir d'ici, les nouvelles pages se branchent sur decoration/style.css dès le prompt
Projet Web Transactionnel · Le kickoff10

Versionner à mesure

  • Une page acceptée = un commit, avec un message clair : « Page liste des produits - grille et tri »
  • Le kanban suit les fenêtres du devis : une carte par page, qui traverse le tableau
  • La page se publie en ligne dès son commit : le site grandit sous les yeux du client
  • Générer vite n'excuse pas de versionner mal : l'historique raconte votre démarche au correcteur

Voir les diaporamas Versionner un projet Github et Commandes Github du groupe DEVOPS.

Projet Web Transactionnel · Le kickoff11

La règle d'or : une page à la fois

POURQUOI ?Le focus

L'IA est puissante mais perd sa précision si on lui demande un site entier : elle produit alors des brouillons génériques.

Cibler une seule page force un niveau de détail parfait : vrais textes, vrai CSS, structure sémantique propre.

C'est le MVP (Minimum Viable Product).

COMMENT ?L'exécution technique
  1. Demander la page la plus complexe (ex : l'Accueil)
  2. Tester visuellement le résultat dans le navigateur
  3. Valider et figer le code (Commit)
  4. Fournir ce HTML parfait à l'IA comme fondation pour la page suivante
Projet Web Transactionnel · Le kickoff12

Les pièges de la génération

Le lorem ipsum survivant
Il se cache dans un pied de page et ressort à la démo
Les images fantômes
src="velo-rouge.jpg" que personne n'a créé : 404 garanti
Le zoo de classes
.produit ici, .item là, .card ailleurs : trois pages, trois dialectes
Le CSS jumeau qui diverge
Copié dans chaque page, modifié dans une seule : l'entête change de couleur en naviguant
Le tout-régénéré
On redemande tout pour un bouton, on perd trois retouches faites à la main
Projet Web Transactionnel · Le kickoff13

Le Check-point technique avant livraison

Un technicien ne livre jamais sans tester.
  • Chaque fenêtre du devis a sa page, publiée en ligne
  • Entête, menu et pied de page parfaitement identiques d'une page à l'autre
  • Code sémantique en français : id uniques, classes systématiques
  • Le CSS commun vit dans decoration/style.css, sans doublon
  • Aucun lorem ipsum, aucune image en 404
  • L'historique Git montre une page par commit
Projet Web Transactionnel · Le kickoff14

L'Audit Humain : Vous êtes le garant

L'IA propose, le développeur dispose. Ne faites jamais une confiance aveugle à la machine.

Vous avez l'obligation d'auditer manuellement chaque ligne de code générée. Vous devez vérifier qu'elle respecte à la lettre les Normes du Cours que vous avez fournies. Ne livrez jamais un code que vous ne comprenez pas.

Projet Web Transactionnel · Le kickoff15