Créer un site web avec l'IA : le guide complet

1. Ce que vous obtenez

Pas une maquette : un projet complet et fonctionnel, avec une vraie base de données créée pour lui. Selon votre demande, il peut inclure des comptes utilisateurs, des réservations, du paiement, des envois d'e-mails et une messagerie.

B-Coder construit trois types de projets :

Quand le type n'est pas évident, B-Coder choisit « site ».

2. Deux façons de démarrer

• De zéro : vous décrivez votre site avec vos mots.
• En refonte : vous décrivez ce que vous voulez et vous joignez des images d'exemples (captures de votre site actuel, logo, photos) et, si vous le souhaitez, des documents avec vos vrais textes et tarifs. La section 9 détaille ce cas.

Les deux passent par la même barre.

3. La barre de départ

Voici ce qui se passe, dans l'ordre, quand vous validez votre demande.

1. 1Vous écrivez et vous joignez. Formats acceptés : images (JPEG, PNG, GIF, WebP) et documents (PDF, Word, Excel, CSV).
2. 2Vos fichiers sont lus. Le texte de vos documents est ajouté à votre demande, et vos images sont analysées. Si un fichier est illisible, B-Coder en est prévenu et n'invente pas son contenu.
3. 3Le projet reçoit un nom, déduit de votre demande.
4. 4L'atelier s'ouvre sur votre nouveau projet.
5. 5Questions de cadrage. Si votre demande est floue, B-Coder pose de une à trois questions à choix. Si elle est précise, il n'en pose aucune. Vos réponses complètent la demande.
6. 6Une narration s'affiche en quelques secondes : quelques phrases à la première personne (« Je construis… »), propres à votre projet, pendant que le travail commence.
7. 7La construction démarre.

4. Avant le lancement

• Jetons. La génération consomme des jetons de votre quota. Si le quota ne suffit pas, elle ne démarre pas et l'application vous propose les packs.
• Elle continue sans vous. Si vous fermez l'onglet, la génération se poursuit. À votre retour, vous retrouvez l'historique des étapes et le résultat.
• Un projet à la fois. Si une génération tourne déjà sur ce projet, vous la rejoignez. Une fois terminée, relancer produit une nouvelle génération.

5. Comment B-Coder construit votre projet

5.1 Comprendre

B-Coder lit votre demande, vos réponses, vos documents et vos images. Il en déduit :

• le type de projet (site, application, jeu) ;
• les pages nécessaires et ce que chacune doit accomplir ;
• les fonctions utiles : comptes, réservations, paiement, e-mails, messagerie. Il n'active que celles que votre demande implique : un site vitrine sans réservation n'aura pas de réservation ;
• les informations à enregistrer dans la base de données.

Si vous avez joint vos vraies données (clients, produits, tarifs), elles sont reprises telles quelles, sans être résumées ni remplacées par des inventions.

5.2 Concevoir

Chaque projet reçoit sa propre identité visuelle : couleurs, typographies, ambiance, composition des pages. Elle est adaptée à votre métier et au type de projet. Un site, une application et un jeu ne se conçoivent pas de la même façon. Le but est que deux projets ne se ressemblent pas.

5.3 Construire

B-Coder écrit les pages, la navigation, les contenus, la base de données et les fonctions demandées. Vos propres images (logo, photos) sont intégrées. Les images manquantes sont générées par IA, et vos vraies photos sont toujours préférées à une image générée.

La navigation est bâtie sur les pages réellement créées : pas de lien qui mène nulle part.

5.4 Vérifier

Avant de vous présenter le résultat, B-Coder le contrôle. La section 7 détaille ces contrôles.

5.5 Livrer

Vous recevez un compte rendu clair de ce qui a été construit, de ce qui fonctionne, et de ce qu'il reste éventuellement à configurer.

6. La base de données

Votre projet (sauf un jeu) dispose d'une vraie base de données, créée spécialement pour lui. B-Coder :

1. 1conçoit les tables adaptées à votre activité : clients, produits, réservations, articles, selon le cas ;
2. 2crée la base et ses tables ;
3. 3vérifie qu'elles existent bien, et les répare si besoin. Le site n'est pas livré posé sur une base vide sans que vous le sachiez ;
4. 4charge des données de démonstration : vos vrais noms, produits et tarifs si vous les avez fournis, sinon des exemples à remplacer.

Si le projet a des comptes, un compte de démonstration est créé pour que vous puissiez vous connecter tout de suite.

7. Les contrôles avant le « prêt »

Un site qui s'affiche n'est pas forcément un site qui fonctionne. B-Coder enchaîne plusieurs contrôles automatiques :

1. 1La compilation. Le projet est compilé comme pour une vraie mise en ligne. Si des erreurs apparaissent, B-Coder les corrige automatiquement, tant que cela progresse. Si ça n'aboutit pas, il s'arrête et vous le dit.
2. 2Le démarrage. Le site est lancé et B-Coder vérifie qu'il répond correctement.
3. 3Un passage automatique sur le site. Un navigateur automatique ouvre votre site, clique sur les boutons visibles et observe si les pages répondent. S'il y a des comptes, il se connecte avec le compte de démonstration. Il ne déclenche jamais de paiement ni de suppression.
4. 4Un regard sur le rendu. La capture du site est examinée pour repérer un défaut flagrant : page vide, absence totale de mise en forme, images cassées, écran d'erreur. Les questions de goût ne sont pas jugées.
5. 5Un verdict honnête. Terminé, ou échec : le message l'indique explicitement.

8. Ce que vous recevez à la fin

Un compte rendu basé sur ce qui a réellement été construit, et pas sur des promesses :

• le nombre de pages et leurs adresses ;
• les informations enregistrées dans la base de données ;
• les fonctions actives : comptes, réservations, paiement, e-mails, messagerie ;
• les images ;
• comment vous connecter avec le compte de démonstration, si le projet a des comptes ;
• ce qui reste à configurer pour la mise en ligne : les accès au service de paiement pour des paiements réels, et ceux du service d'e-mail pour l'envoi réel ;
• l'état réel du projet : il fonctionne, ou une erreur subsiste (avec l'invitation à demander la correction dans le chat), ou la vérification n'a pas pu aboutir faute de ressources de la machine (votre projet n'est alors pas en cause).

Votre site s'affiche dans l'aperçu de l'atelier.

9. Refondre un site existant à partir d'images

Voyez d'abord une refonte en vidéo, puis lisez le détail de chaque étape.

Comment faire

1. 1Dans la barre, décrivez la refonte : « refaire le site de mon cabinet, plus moderne, mêmes contenus ».
2. 2Joignez des captures de votre site actuel, votre logo, vos photos.
3. 3Si vous le pouvez, joignez aussi vos textes et tarifs réels en PDF, Word, Excel ou CSV.

Ce que B-Coder fait de vos images

• Il observe le style : couleurs, typographie, ambiance, mise en page.
• Il lit le texte visible : menu, tarifs, slogan.
• Il distingue votre matériel de vos exemples. Votre logo, vos photos de produits, de lieux ou d'équipe sont destinés à apparaître sur le site. Une capture ou une maquette d'un autre site sert d'inspiration et n'est pas affichée.
• Il place chaque élément là où il a du sens : le logo dans l'en-tête et le pied de page à sa taille naturelle, une photo dans la section qui en parle.

Vos documents sont lus : les données réelles qu'ils contiennent sont reprises intégralement dans les pages et dans la base de données.

Conseils

• Nommez clairement vos fichiers (« logo.png », « equipe.jpg »).
• Fournissez vos textes en document plutôt que de compter sur la lecture d'une capture : un texte lu dans une image peut comporter des erreurs.
• Dites ce que vous voulez garder et ce que vous voulez changer.

Ce que ce parcours ne fait pas

• Il ne copie pas votre ancien site pixel par pixel : il s'en inspire.
• Il ne va pas chercher votre site à partir de son adresse web. Vous lui montrez des captures et vous lui fournissez les textes.
• Un site est construit autour de quelques pages principales. Un très grand site doit être regroupé ou construit par étapes.

10. À quoi vous attendre

• Une durée de plusieurs minutes. Elle dépend de la taille du projet, et vous pouvez quitter la page.
• Un premier jet complet, à retoucher. Le chat B-Coder sert ensuite à modifier, corriger, ajouter.
• Un contenu à relire. B-Coder écrit des textes plausibles : vérifiez les informations factuelles (adresses, tarifs, mentions légales).
• Des données de démonstration si vous n'avez pas fourni les vôtres : remplacez-les par vos vraies données.
• Des accès à configurer pour le paiement réel et l'envoi réel d'e-mails.
• Aucune promesse de classement. Générer un site ne garantit ni sa place dans Google ni sa citation par une IA : pour mesurer les deux, voir la visibilité SEO et GEO.
• Une dépendance à des services externes. En cas de panne de l'un d'eux, B-Coder bascule automatiquement sur une solution de secours.

11. Référencement : ce que bmaster apporte à votre site

Un site est trouvé sur Google et cité par les IA pour deux raisons : ce qu'il dit (son contenu) et ce sur quoi il repose (sa technique). bmaster agit sur les deux, sans jamais promettre de classement.

Une base technique pensée pour être lue par Google

• Des pages rendues côté serveur. Votre site est construit avec Next.js : chaque page est envoyée avec son contenu déjà présent dans le code que lisent les moteurs de recherche. Le texte est lu immédiatement, sans dépendre de l'exécution de scripts dans le navigateur.
• Une structure claire. Un seul titre principal par page, une hiérarchie de titres respectée, des textes alternatifs sur les images, la langue de la page déclarée, un titre et une description pour le site.
• Des images et des polices optimisées. Les images ont des dimensions déclarées (la page ne « saute » pas au chargement) et sont servies de façon optimisée ; les polices s'affichent sans bloquer le texte.
• Un design pensé d'abord pour le mobile. La mise en page s'adapte aux petits écrans, ce que Google prend en compte.
• Aucun lien mort. La navigation est bâtie sur les pages réellement créées.

Un hébergement et un réseau gérés pour vous

• Aucun serveur à louer ni à configurer. Votre site publié tourne dans son propre conteneur isolé, sur des serveurs privés gérés par bmaster.
• Une adresse en HTTPS dès la publication. Pour votre propre domaine, bmaster vérifie votre configuration DNS puis émet le certificat de sécurité.
• Une infrastructure suivie. L'équipe technique met à jour et surveille les serveurs, et une page de statut des services est publique.

Un seul endroit, de la génération à la mesure

Le site est construit, publié, relié à votre domaine et mesuré au même endroit. L'analyse « Visibilité SEO & GEO » vous montre où vous apparaissez sur Google et dans les réponses des IA, et chaque recommandation s'applique en un clic : voir le guide Visibilité SEO & GEO.

Une histoire vraie : un an dans l'ombre, puis la première position

Une entrepreneuse que nous avons accompagnée avait un site sous WordPress. Pendant plus d'un an, elle y avait mis du temps et de l'énergie, et pourtant il restait invisible : jamais sur la première page de Google, là où se jouent les premiers contacts avec de futurs clients.

Nous lui avons conseillé de le refaire avec bmaster. Elle s'est lancée : un nouveau site, construit à partir de son activité, puis amélioré en suivant les recommandations de l'analyse de visibilité.

18 jours plus tard, son site était en première position sur Google pour plusieurs mots-clés, devant des concurrents installés depuis une quinzaine d'années. Aujourd'hui, selon ce qu'elle nous a expliqué, elle reçoit de plus en plus de demandes de clients.

Peut-être avez-vous le même point de départ : un site qui existe, mais que personne ne trouve. Chaque situation est différente : le résultat dépend de l'activité, de la concurrence, du contenu et de bien d'autres facteurs, et bmaster ne garantit aucune position.

12. Après la génération

Votre projet existe, et vous pouvez continuer à le faire évoluer avec le chat B-Coder : demander une modification de design, un nouveau contenu, une nouvelle fonctionnalité, ou la correction d'une erreur signalée dans le compte rendu. Quand il vous convient, vous pouvez le publier : voir la documentation B-Coder.

13. Modifier votre site avec le chat : un exemple en direct

Une fois le site généré, le chat de B-Coder sert à le modifier en langage naturel. Voici une vraie séance, condensée, sur le site d'un groupe de musique : sept demandes, chacune formulée comme on parlerait à un collaborateur. Les noms et les liens ont été retirés. Pas de code, pas de fichier à ouvrir.

1. 1Vous : « J'aimerais que tu enlèves cette partie en bas, au pied de page. » (avec une capture d'écran)
   B-Coder : retire le grand bloc décoratif du bas de page (le titre en contour, les points dorés et la ligne de présentation), en gardant ce qui sert encore ailleurs, comme la rangée des réseaux sociaux. Il vérifie le projet, sans erreur, puis précise honnêtement qu'il n'a pas regardé la page dans le navigateur, et liste ce qu'il reste en bas de page.
2. 2Vous : « Tu reprends ces images et tu les mets dans le site. Ce sont les images officielles. » (dix photos jointes)
   B-Coder : place chaque photo là où elle a du sens (bandeau d'accueil, histoire, présentation du groupe, page de réservation, galerie, vidéos), remplace toutes les anciennes images, repère que deux photos sont identiques (neuf photos distinctes sont donc utilisées) et signale qu'il a rédigé lui-même deux légendes, en vous demandant si vous voulez d'autres textes.
3. 3Vous : trois liens de vidéos YouTube, dont l'un figure deux fois.
   B-Coder : garde le lien en double une seule fois, récupère les vrais titres, enregistre les vidéos dans la base de données du site, branche l'aperçu de l'accueil (qui n'affichait rien) et ajoute les vidéos aux données de départ pour qu'elles soient recréées à la mise en ligne.
4. 4Vous : « Dans l'en-tête, c'est cette photo qui doit apparaître. C'est tout le groupe. » Vous annulez la proposition, puis vous précisez : « Peux-tu juste recadrer l'image pour que ce soit un paysage ? »
   B-Coder : recadre la photo en 16:9 en gardant tous les visages, conserve l'originale, met à jour l'en-tête et l'aperçu de partage sur les réseaux sociaux.
5. 5Vous : le lien de la page d'artiste Spotify, puis « Donc crée une page complète. »
   B-Coder : construit la page audio avec un lecteur intégré et des liens de streaming, enregistre le lien officiel, et masque la liste des titres tant que la base n'en contient aucun, plutôt que d'afficher un bloc vide. Il demande le lien de l'album pour ajouter un second lecteur.
6. 6Vous : « L'image dans le bloc de bienvenue, il faut que ce soit celle-ci », et « sur la page audio, remplace l'image du haut par celle-ci. »
   B-Coder : change les deux images, décale le cadrage pour que le visage reste visible, et prévient que sur mobile le visage pourrait passer sous le texte.
7. 7Vous : « La vignette de la page d'accueil, il faudrait que ça vienne du clip. »
   B-Coder : branche la miniature officielle du clip. La version haute définition n'existant pas pour cette vidéo, il utilise la meilleure disponible, prévoit la photo officielle en secours si elle ne charge pas, et applique la même logique à la page Vidéos.

Voir la version mobile en un clic

Pendant la séance, B-Coder a signalé un point à vérifier sur mobile : le cadrage d'une photo, dont le visage pouvait passer sous le texte. Les sites qu'il construit sont conçus d'abord pour le mobile, et le Studio permet de le contrôler tout de suite :

1. 1Dans la barre d'outils du Studio, cliquez sur « Aperçu mobile » : l'aperçu passe à la largeur d'un téléphone. « Aperçu bureau » ramène la vue large.
2. 2Parcourez la page comme le ferait un visiteur, en regardant surtout les images, les titres posés sur une photo et les boutons.
3. 3Si quelque chose ne va pas, dites-le simplement. Exemple de demande (il ne vient pas de la séance ci-dessus) : « Sur mobile, le visage est coupé par le titre. Décale la photo vers le bas. » B-Coder ajuste le cadrage, et vous revenez à l'aperçu mobile pour vérifier.

Ce que cet exemple montre

• Une phrase suffit. Vous pouvez joindre des images, des captures d'écran et des liens.
• Chaque modification est présentée, puis approuvée avant d'être appliquée, et elle reste ciblée : B-Coder ne touche qu'à ce que vous avez demandé.
• Il ne s'arrête pas à l'apparence. Il enregistre aussi des contenus dans la base de données du site (les vidéos, les liens) et dans ses données de départ.
• Il dit ce qu'il a fait, ce qu'il n'a pas vérifié et ce qu'il a inventé : une photo en double, des légendes écrites par lui, une miniature moins nette.
• Vous gardez la main. Une proposition peut être annulée, puis reformulée plus simplement.

14. Questions fréquentes

15. Messages et solutions

16. Glossaire

• Brief : votre demande, complétée des questions de cadrage et de vos réponses.
• Fonction (ou capacité) : une fonctionnalité activée si besoin : comptes, réservation, paiement, e-mails, messagerie.
• Base de données : l'endroit où le site enregistre ses informations (clients, produits, réservations…).
• Données de démonstration : les données de départ chargées dans la base, à remplacer par les vôtres.
• Compte de démonstration : un compte prêt à l'emploi pour vous connecter dès la fin de la génération.
• Passage automatique : le contrôle d'un navigateur automatique qui parcourt le site.
• Refonte : reconstruction d'un site existant à partir d'exemples et de contenus.
• Rendu côté serveur : la page est envoyée avec son contenu déjà écrit, que les moteurs de recherche lisent immédiatement.

Pour aller plus loin

Deux pages officielles de Google, utiles pour que votre nouveau site soit bien compris par les moteurs de recherche :

• Google Search Central : guide de démarrage SEO — Les bases du référencement naturel, par Google.
• Google Search Central : les fonctions d’IA et votre site — Comment les fonctions d’IA de la recherche Google s’appuient sur les sites.

À lire aussi sur bmaster