Développement web assisté par IA générative
Sommaire
Anatomie d'un prompt
Prompt vague → code vague
Demander à une IA « fais-moi un site », c'est comme dire à un architecte : « construis-moi une maison ». Sans préciser le nombre de pièces, le terrain, le budget, le style… on obtient quelque chose, mais rarement ce qu'on voulait.
La qualité de la réponse dépend directement de la qualité de la question.
Mauvais vs bon prompt
Mauvais prompt
Crée moi un formulaire de contact pour mon site
Bon prompt (CRTSR)
Contexte : je crée un site web simple pour un restaurant. J'utilise seulement HTML et CSS.
Rôle : tu es un développeur web senior.
Tâche : crée-moi un formulaire de contact avec deux champs. Les champs « nom » et « prénoms » sont des inputs de type text et doivent contenir au minimum deux lettres. Si un champ est incorrect, un message d'erreur s'affiche au-dessus du champ et explique pourquoi la soumission a échoué.
Standards : écris du code HTML valide, avec des commentaires en français. Génère une page HTML complète et un fichier CSS séparé.
Ressources : voici mon fichier index.html : [code]. Utilise le même style.
Le prompt CRTSR
Cinq lettres, cinq éléments.
Contexte
Expliquer le projet à l'IA : quel site, quelles technologies.
L'IA ne connaît pas le projet. Il faut lui dire.
« Je crée un site web simple pour un restaurant. Le restaurant s'appelle "Le Jardin". C'est un petit restaurant français, avec une cuisine traditionnelle. Le site présente le menu, les photos et l'adresse. J'utilise seulement HTML et CSS. »
Rôle
Dire à l'IA quel expert elle doit être.
Un bon rôle donne une meilleure réponse. Un expert pense aux bons détails.
« Tu es un développeur web senior, expert en HTML et CSS. »
Tâche
Demander une seule chose à la fois, de façon précise.
Ne pas demander tout le site. Demander une page, puis une autre.
« Crée la page d'accueil avec un titre, une photo et un menu. »
Standards
Expliquer la qualité attendue : les règles de codage, les commentaires explicatifs, la structure du code.
Préciser le degré d'autonomie de l'IA : ce qu'elle peut décider seule, et ce qu'elle doit demander.
Préciser aussi la sortie : générer le code dans une page HTML ou un fichier CSS.
« Écris du code HTML valide. Ajoute des commentaires en français pour expliquer chaque partie. Range le code dans l'ordre : en-tête, menu, contenu, pied de page. Ne modifie pas le reste de mon code sans me demander. Génère une page HTML complète et un fichier CSS séparé. »
Ressources
Donner à l'IA les éléments du projet : le code, la documentation.
Donner aussi les images : le logo de l'entreprise, les photos du restaurant.
Avec ces ressources, l'IA produit un code cohérent avec le site.
« Voici mon fichier index.html : [code]. Utilise le même style pour la nouvelle page. Voici le logo du restaurant : logo.png. Mets-le en haut de la page. »
L'erreur du prompt unique
Demander tout le site en un seul prompt, c'est une erreur.
« Crée tout mon site de restaurant : toutes les pages, le menu, les photos, le formulaire de contact. »
→ Le résultat est rapide, mais le site est incomplet et le code est de mauvaise qualité.
La bonne méthode : découper.
Un prompt = une seule chose.
D'abord la page d'accueil. Ensuite la page du menu. Puis le formulaire de contact.
Un prompt très long demande trop de choses. Le découper.
S'assurer que l'IA a bien compris
Avant de demander le code, demander à l'IA de reformuler la demande.
Si la reformulation est fausse, corriger et expliquer à nouveau. Un malentendu corrigé avant le code, c'est du temps gagné.
« Est-ce que tu comprends bien ma demande ? Reformule-la avec tes mots avant d'écrire le code. »
Un bon prompt ne remplace pas la vérification
Même avec un bon prompt, l'IA peut faire des erreurs.
Le code semble correct, il fonctionne… mais parfois il est faux ou il n'est pas sécurisé.
Le piège n°1 : confondre « ça marche » avec « c'est correct ».
Lire, comprendre et vérifier TOUJOURS le code de l'IA.
Ne jamais utiliser un code impossible à expliquer.
Questions ouvertes
Les ressources d'un site web
Un site web = des fichiers dans un dossier
Un site web n'est pas un seul fichier.
C'est un ensemble de fichiers qui travaillent ensemble pour produire une interface graphique dans le navigateur.
Une architecture de fichiers, rangés dans un dossier :
HTML, CSS, images
Le code de la page : le contenu et la structure (les textes, les titres, les liens).
Une page = un fichier. index.html est la page d'accueil.
Le style graphique des pages : les couleurs, les polices, la mise en page.
Un seul fichier style.css peut habiller tout le site.
Les images du site : le logo, les photos.
logo.png, photo.jpg, rangées dans le dossier images/.
Les contenus sont intégrés dans la page HTML
La page HTML est le squelette du site. Le CSS et les images viennent s'intégrer à l'intérieur.
Les styles CSS sont reliés ici : <link href="css/style.css">
Le contenu s'écrit ici : les titres, les textes, les liens.
Les images s'affichent ici : <img src="images/logo.png">
Le lien absolu
Les liens permettent de naviguer entre les pages d'un site web ou d'accéder à des ressources externes.
Un lien absolu contient l'adresse complète d'une ressource sur Internet.
Ce type de lien est généralement utilisé pour accéder à des ressources provenant d'un autre site web.
Le lien relatif
Un lien relatif pointe vers une ressource située dans le même site web (dans le même dossier).
Ce lien permet d'accéder à la page commande.html située dans le même dossier que la page actuelle.
Le navigateur recherche ici l'image logo.png dans le dossier images.
À retenir
Lien absolu → adresse complète d'une ressource sur Internet.
Lien relatif → chemin vers une ressource située dans le même site web.
Questions ouvertes
Responsive Design
Le Responsive Design
Le Responsive Design désigne la capacité d'une interface web à s'adapter aux différents supports de consultation :
L'objectif est que le site reste lisible, clair et utilisable, quelle que soit la taille de l'écran.
Même contenu, affichage adapté
Le principe est simple : on garde le même contenu HTML, mais le CSS adapte l'affichage selon le support.
Le responsive ne change pas le contenu du site, il change sa manière de s'afficher.
Aujourd'hui, lorsqu'on demande à une IA de générer une page web, il faut préciser que le site doit être responsive. Sinon, elle peut produire une interface correcte sur ordinateur mais mal adaptée au mobile.