Créer un site professionnel avec l’IA : du cahier des charges au test du formulaire
Neaptide · 6 septembre 2026 · 9 min de lecture · Mis à jour: 3 octobre 2026
Du cahier des charges à la mise en ligne d’un site d’atelier : mise en page, formulaire, erreurs et SEO. Avec captures originales et exemple interactif à tester.
Dans cet article
Un visiteur choisit un atelier, saisit son email et clique sur Envoyer. La page affiche « Merci », mais personne ne reçoit sa demande. Le site a l’air terminé, mais il ne fait pas ce pour quoi il existe. Commencez donc par définir l’action attendue du visiteur et la façon dont vous vérifierez qu’elle aboutit.
Pour un petit site, l’ordre est simple. Rassemblez les faits et décrivez le parcours principal. Construisez la page, puis testez l’affichage et le formulaire. Une fois le site publié, refaites les mêmes vérifications à l’adresse publique. L’agent peut écrire le code, mais les conditions de l’offre et la validation du résultat restent à votre charge.
L’exemple que nous avons créé
Forma est un atelier de céramique fictif. Notre exemple comprend une offre, un programme et un formulaire d’essai. L’image vient de notre guide précédent. Le tarif de 60 € et les conditions sont inventés. Les cinq illustrations sont des captures de cet exemple en fonctionnement. Le serveur vérifie les demandes sans les enregistrer ni envoyer d’email. Seules les adresses @example.com sont acceptées.
1. Préparer les faits avant le design
« Fais un site moderne » ne dit rien de l’essentiel. Notez à qui s’adresse l’atelier, ce que les participants fabriqueront, ce que comprend le prix et quand ils pourront récupérer leur pièce. Conservez les informations confirmées dans un fichier du projet et signalez celles qui manquent. Le modèle n’a pas à combler ces manques avec une adresse, des avis ou une expérience inventés.
2. Prévoir qui mettra le site à jour
Si l’équipe doit modifier régulièrement le contenu sans intervenir dans le code, prévoyez un éditeur ou un CMS. Un petit site sur mesure peut aussi être un projet de code avec une procédure de publication claire. Avant de choisir, demandez-vous qui l’entretiendra une fois la première version en ligne.
Ouvrez le dossier du projet dans un agent capable de travailler sur les fichiers. Avant toute réalisation, demandez-lui le plan de la page et la liste des informations qui lui manquent. Les consignes ci-dessous permettent de reproduire l’exercice.
Crée un site pédagogique pour l’atelier fictif Forma.
Atelier débutant de 2 heures, 60 € par personne, 8 personnes maximum. Matériaux et cuisson compris. Présente ces conditions comme fictives.
Prévois une offre avec bouton, trois étapes et un formulaire. N’invente ni avis, ni adresse, ni résultats. Utilise l’image du projet. Sur écran étroit, place le texte au-dessus de l’image.
Le formulaire accepte un email @example.com et 1 à 8 participants. Vérifie les champs dans le navigateur et sur le serveur. N’enregistre rien et n’envoie aucun email ; indique-le dans le résultat.
Ajoute une panne simulée avec possibilité de réessayer sans perdre les champs. Commence par les fichiers à modifier et les vérifications à réaliser.3. Lire le premier écran comme un visiteur
Un visiteur doit comprendre d’emblée de quelle activité il s’agit, ce qu’elle coûte et ce que le prix comprend. Cliquez sur le bouton principal et assurez-vous qu’il mène bien au formulaire. Dans notre exemple, l’image est placée à côté du texte, si bien qu’on peut modifier le titre sans la refaire. Demandez des corrections précises et sauvegardez une version fonctionnelle après chaque étape importante.
4. Vérifier l’affichage sur une petite largeur
Les colonnes passent l’une sous l’autre et le texte reste lisible. Avant un vrai lancement, ouvrez aussi le site sur un téléphone. Faites apparaître le clavier, passez d’un champ à l’autre, allez jusqu’au bouton. L’aperçu étroit sur ordinateur ne vérifie qu’une partie de tout cela.
Vérifie les formats large et étroit : débordement horizontal, texte coupé, éléments superposés. Parcours les liens et le formulaire au clavier. Corrige chaque problème, puis refais le test concerné.5. Tester trois états du formulaire
Une valeur incorrecte
Saisissez 9 participants. Le formulaire doit expliquer la limite de 1 à 8 près du champ et ne rien envoyer. Le serveur doit lui aussi contrôler les données, car rien n’empêche de contourner l’interface et de lui adresser directement une requête.
Une panne du serveur
Remettez 2 et activez la panne simulée. Le serveur renvoie HTTP 503. La page signale l’échec et conserve ce que vous avez saisi. Désactivez la panne, puis réessayez.
La confirmation
Une demande valide reçoit HTTP 200. Le résultat précise que les champs ont été vérifiés, que rien n’a été enregistré et que rien n’a été envoyé. Le bouton est désactivé pendant la requête.
Sur un site commercial, décidez d’abord où arrive la demande : CRM, outil de réservation ou boîte mail. Envoyez un essai et retrouvez-le dans ce système. Qu’un service ait accepté un email dans sa file d’attente ne prouve pas qu’il l’a livré. Et si les tentatives répétées créent des doublons, c’est côté serveur qu’il faut les traiter.
Le traitement du formulaire a passé 12 tests : données valides, erreurs d’adresse email et de nombre de participants, formats non acceptés, requête trop volumineuse, panne simulée. Ces tests vérifient le fonctionnement de l’exemple. Ils ne disent rien de sa tenue sous forte charge et ne valent pas audit d’un système de réservation.
6. Publier et vérifier l’adresse publique
Le dépôt de code conserve le projet et l’historique des versions, tandis que le service d’hébergement construit le site et le met en ligne. Ici, le dépôt est sur GitHub et l’hébergement chez Vercel. On peut souvent se passer d’un serveur privé virtuel (VPS) séparé. En revanche, l’hébergeur doit pouvoir exécuter le code qui traite le formulaire.
- Enregistrez une version fonctionnelle et reliez le dépôt à l’hébergement.
- Vérifiez la configuration de compilation et d’environnement. Gardez les secrets d’intégration hors du code public.
- Testez une prévisualisation : liens, erreurs, formulaire et résultat.
- Reliez le domaine selon les instructions de l’hébergeur et vérifiez HTTPS.
- Recommencez à l’adresse publique et contrôlez la réception chez le destinataire.
Prévoyez le travail de création, l’outil d’IA, le domaine, l’hébergement, le service de formulaire et la maintenance. L’abonnement à l’IA n’est qu’une ligne de ce budget.
7. Rendre l’offre compréhensible pour le SEO et les réponses IA
Rédigez un titre de page, une description et un titre principal explicites. Le texte doit dire à qui s’adresse le service, ce que comprend le prix et ce qui se passe après une demande. Pour les traductions, vérifiez les adresses et les liens entre versions linguistiques. Les données structurées doivent correspondre au contenu visible.
Des réponses directes et des conditions clairement formulées rendent l’offre plus facile à comprendre et à citer. Elles ne garantissent aucune visibilité dans la recherche ou les réponses IA. Le site d’essai porte une directive noindex, alors que l’article est destiné à être référencé.
Quand faire intervenir un spécialiste
- Paiements, comptes ou réservations avec places limitées.
- Demandes impossibles à suivre jusqu’au destinataire.
- Migration d’un site existant avec conservation des URL.
- Modifications qui cassent régulièrement d’autres éléments.
Apportez le parcours précis et vos résultats de test. Pour un vrai atelier, la vérification se termine quand la personne responsable retrouve la bonne demande dans son outil.