Comment rédiger un prompt complet pour créer un site web avec l’IA ?

Le prompt web devient un véritable cahier des charges

Lorsqu’un projet web est confié à une agence ou à un développeur, il commence généralement par une phase de cadrage : objectifs, utilisateurs, arborescence, fonctionnalités, identité graphique, contraintes techniques ou encore stratégie de référencement.

L’utilisation de l’intelligence artificielle ne supprime pas cette étape. Elle la rend au contraire encore plus importante.

Un bon prompt doit donc être considéré comme un mini cahier des charges destiné à l’intelligence artificielle.

Plus les informations fournies sont claires, organisées et précises, plus l’outil pourra produire un site cohérent avec les besoins du projet.

1. Commencer par le contexte et les objectifs du projet

Avant de demander à une IA de générer une interface, il faut lui expliquer précisément ce qu’elle est en train de construire.

Le contexte doit notamment présenter l’activité de l’entreprise, son positionnement et la finalité du futur site.

Une instruction peut par exemple être formulée ainsi :

Créer le site internet d’un restaurant afro-contemporain haut de gamme situé à Toulouse. Le site doit présenter le restaurant, sa carte et son histoire tout en permettant aux visiteurs de réserver une table.

Les objectifs peuvent ensuite être précisés :

• développer la visibilité de l’entreprise ;
• présenter ses produits ou services ;
• générer des demandes de contact ;
• obtenir des réservations ;
• renforcer son positionnement ;
• permettre au client de gérer certains contenus.

Cette première étape permet à l’intelligence artificielle de comprendre la logique métier avant de commencer à réfléchir à l’interface.

2. Identifier les utilisateurs du site

Un site destiné à des professionnels ne possède pas nécessairement la même expérience utilisateur qu’un site destiné au grand public.

Il est donc important de décrire les principaux utilisateurs :

• leur profil ;
• leurs besoins ;
• leurs attentes ;
• leur niveau de connaissance ;
• les actions que l’on souhaite leur faire réaliser.

La cible influence directement la direction artistique, la navigation, les contenus et les appels à l’action.

3. Construire l’arborescence du site

Il faut ensuite expliquer à l’IA quelles pages doivent être créées et comment elles sont organisées.

Il est recommandé d’indiquer les URL en plus des intitulés.

/
Accueil

/notre-histoire
Notre histoire

/services
Services

/services/[slug]
Détail d'un service

/actualites
Actualités

/actualites/[slug]
Article

/contact
Contact

Pour les actualités, produits, réalisations ou services, prévoir les pages individuelles dès cette étape aide l’IA à comprendre que ces contenus devront fonctionner de manière dynamique.

4. Détailler la structure de chaque page

Une instruction telle que « crée une belle page d’accueil » laisse beaucoup trop de liberté à l’outil.

Il est préférable de décrire chaque section.

Exemple de structure pour une page d’accueil

1. Hero : H1, introduction, photographie et deux appels à l’action.
2. Présentation : titre, texte et image.
3. Services : présentation des principaux services.
4. Réalisations : sélection des derniers projets.
5. Témoignages : avis de clients.
6. Appel à l’action : prise de contact ou demande de devis.
7. Footer : coordonnées, navigation et informations légales.

Le prompt devient alors une sorte de wireframe écrit.

5. Définir précisément la direction artistique

Les termes « moderne », « beau » ou « premium » sont trop subjectifs pour constituer à eux seuls une direction artistique.

Il faut préciser :

• le style général ;
• la palette de couleurs ;
• les typographies ;
• les espacements ;
• le style photographique ;
• les animations souhaitées ;
• les éléments graphiques à éviter.

Exemple

Créer une interface premium, minimaliste et éditoriale avec beaucoup d’espace, de grandes photographies, une grille structurée et des animations discrètes.

Éviter les grosses ombres, les dégradés artificiels, les cartes arrondies utilisées partout et l’apparence générique d’un template généré par IA.

Préciser ce que l’on ne souhaite pas obtenir est souvent aussi efficace que décrire le résultat attendu.

6. Décrire le comportement responsive

Demander simplement un « site responsive » ne garantit pas une expérience réellement pensée pour chaque taille d’écran.

Le prompt peut préciser les comportements attendus.

• Desktop : grilles de trois ou quatre colonnes selon les sections.
• Tablette : passage progressif sur deux colonnes.
• Mobile : une colonne, menu adapté et appels à l’action facilement accessibles.

On peut également demander des vérifications sur plusieurs largeurs, par exemple 375 px, 768 px, 1024 px et 1440 px.

7. Identifier les contenus dynamiques

Tous les contenus d’un site ne doivent pas nécessairement être directement écrits dans les composants.

Il faut identifier les informations qui seront régulièrement modifiées :

• actualités ;
• réalisations ;
• services ;
• produits ;
• témoignages ;
• membres d’une équipe ;
• galeries.

Le prompt doit alors préciser que ces informations doivent provenir d’une base de données ou d’un CMS et ne doivent pas être codées directement dans les pages.

8. Définir un véritable back-office

Les outils d’intelligence artificielle peuvent également être utilisés pour générer des espaces d’administration adaptés aux besoins du client.

On peut par exemple demander un espace sécurisé accessible depuis :

/admin

Le propriétaire du site pourrait ensuite gérer uniquement :

• ses actualités ;
• ses réalisations ;
• ses services ;
• ses photographies ;
• ses demandes de contact.

L’objectif est de créer une interface beaucoup plus simple qu’un back-office généraliste lorsque le client n’a besoin que de quelques fonctionnalités.

Définir également les droits

Le prompt doit préciser les permissions associées aux différents profils.

• Visiteur : consultation du contenu public.
• Éditeur : gestion de certains contenus.
• Administrateur : gestion complète du back-office.

9. Ajouter les exigences SEO, performance, accessibilité et sécurité

Un site professionnel ne se résume pas à son apparence. Plusieurs éléments invisibles doivent également être intégrés au cahier des charges envoyé à l’IA.

Référencement naturel

Il est possible de demander :

• une structure HTML sémantique ;
• un seul H1 principal par page ;
• des balises title et meta description ;
• des URL propres ;
• des balises canonical ;
• les balises Open Graph ;
• un sitemap XML ;
• un fichier robots.txt ;
• des données structurées lorsque cela est pertinent.

Performance

• optimisation des images ;
• lazy loading lorsque cela est pertinent ;
• limitation des ressources inutiles ;
• code propre et performant.

Accessibility

• HTML sémantique ;
• navigation clavier ;
• labels associés aux formulaires ;
• textes alternatifs pour les images ;
• contrastes suffisants.

Security

• authentification sécurisée ;
• contrôle des permissions ;
• validation des données ;
• protection des espaces privés ;
• aucune clé sensible exposée dans le navigateur.

La génération par IA accélère le développement mais ne remplace pas la vérification humaine avant une mise en production.

10. Terminer le prompt avec des critères d’acceptation

Une méthode particulièrement efficace consiste à indiquer précisément à l’intelligence artificielle comment vérifier que le projet est terminé.

Par exemple :

1. Toutes les pages prévues sont disponibles.
2. La navigation fonctionne correctement.
3. Le site fonctionne sur mobile, tablette et ordinateur.
4. Un administrateur peut se connecter au back-office.
5. Une actualité peut être créée depuis l’administration.
6. L’actualité apparaît sur le site public.
7. L’actualité peut être modifiée et supprimée.
8. Un visiteur non authentifié ne peut pas accéder au back-office.
9. Les formulaires fonctionnent correctement.
10. Les métadonnées SEO sont présentes.
11. Aucune erreur critique n’apparaît dans la console.

Ces critères constituent une première base de recette fonctionnelle.

Quelle structure utiliser pour un prompt de création de site web ?

Une trame réutilisable peut être organisée de la manière suivante :

1. Contexte
2. Objectifs
3. Cibles
4. Arborescence
5. Structure des pages
6. Direction artistique
7. Responsive
8. Fonctionnalités
9. Contenus dynamiques
10. Back-office
11. Modèle de données
12. Authentification et permissions
13. SEO
14. Accessibility
15. Performance
16. Security
17. Intégrations externes
18. Contenus de démonstration
19. Contraintes
20. Critères d’acceptation

Cette structure peut servir de base pour un site vitrine, un site de restaurant, un portfolio, un espace membre ou encore une application métier.

Faut-il créer tout le site avec un seul prompt ?

Pas nécessairement.

Pour un projet complexe, demander la génération de l’intégralité du site en une seule fois peut rendre le résultat plus difficile à contrôler.

Une méthode plus efficace consiste à avancer progressivement :

1. Prompt maître : contexte, architecture et première interface.
2. Prompt 2 : modèle de données et base de données.
3. Prompt 3 : authentification et permissions.
4. Prompt 4 : création du back-office.
5. Prompt 5 : responsive et expérience mobile.
6. Prompt 6 : référencement, performances et accessibilité.
7. Prompt 7 : audit, tests et correction des bugs.

Chaque étape peut ainsi être testée avant d’ajouter la suivante.

L’IA change la vitesse de création, pas les fondamentaux du web

L’intelligence artificielle permet de produire beaucoup plus rapidement des interfaces, du code, des contenus et certaines fonctionnalités.

Elle ne supprime cependant pas les questions fondamentales d’un projet web :

• Que doit-on construire ?
• Pour quel utilisateur ?
• Dans quel objectif ?
• Comment le site doit-il fonctionner ?
• Quels contenus le client pourra-t-il administrer ?
• Comment les données seront-elles sécurisées ?
• Comment vérifier que le projet fonctionne correctement ?

L’IA réduit donc considérablement le temps nécessaire pour passer d’une idée à une première version fonctionnelle, mais elle renforce l’importance du cadrage, de la conception et du contrôle qualité.

Le prompt n’est plus seulement une phrase envoyée à une intelligence artificielle : il devient une nouvelle forme de cahier des charges web.

Questions fréquentes sur la création de sites web avec l’IA