J’ai créé un générateur de site vitrine par IA : voici ce qui se passe vraiment sous le capot
Je suis à l’origine de WebSir (websir.fr), une plateforme SaaS qui génère un site vitrine complet, déployé et accessible en moins de 30 minutes à partir d’un brief en langage naturel. Cet article est un retour technique : pourquoi j’ai construit cet outil, comment fonctionne le pipeline de génération, et pourquoi un site vitrine généré par IA peut surperformer en Web Vitals un site fait main sur Webflow. Bonus à la fin : un code de réduction de 20 %.
Landing de WebSir — l’utilisateur décrit son projet en français à l’assistant conversationnel, et la génération démarre. Alt text suggéré : « Page d’accueil de WebSir avec l’interface de chat pour créer un site vitrine en conversation avec une IA ».
Pourquoi un nième site vitrine généré par IA ?
En tant que développeur, j’ai vu défiler la même demande pendant des années chez les artisans, les freelances et les TPE : « je veux juste un site simple, qui charge vite, sur lequel je peux changer un numéro de téléphone sans appeler quelqu’un ». La réponse de l’industrie a été WordPress + un thème ElementorClick, ou plus récemment Wix, Webflow et consorts. Le problème dans les deux cas reste le même : la stack est lourde, le DOM rendu côté client est obèse, et la moindre modification éditoriale demande de naviguer dans une interface visuelle qui a la complexité d’un Photoshop low-cost.
Quand les LLM sont devenus assez bons pour produire du HTML et du CSS structurés, j’ai voulu prendre le problème à l’envers : plutôt que d’apprendre à l’utilisateur à manipuler un builder, lui demander de décrire ce qu’il veut en français. Et derrière, ne pas générer un site WordPress de plus, mais du HTML statique pur, servi depuis l’edge, sans framework JavaScript côté client. Ce qui m’a mené à WebSir.
Le parcours utilisateur, vu de l’extérieur
L’utilisateur s’inscrit (e-mail + mot de passe, Google, Facebook ou Apple), tape une phrase du type « je suis ostéopathe à Lyon, je veux un site sobre, plutôt vert sauge, avec une page de présentation, une page tarifs, une page contact et une page mentions légales » et le chat conversationnel pilote le reste. L’agent recolte des précisions (couleurs, ton, secteur, structure souhaitée), puis lance la génération. La progression est streamée en temps réel : l’utilisateur voit l’IA travailler par étapes successives — structure, contenu, design, code, assets, validation — sans avoir à deviner ce qui se passe dans la boîte noire.
Au bout de quelques minutes, le site est prêt à prévisualiser. L’utilisateur peut alors demander des modifications (toujours en chat, jamais d’éditeur visuel imposé), ajuster les images, les couleurs, l’arborescence. Quand il est satisfait, il entre dans un tunnel de déploiement en 5 étapes : SEO, domaine, social, paiement, contact. Et c’est seulement à l’étape paiement que Stripe entre en jeu : générer un site complet est entièrement gratuit, seul le déploiement effectif déclenche la facturation. Modèle freemium radical et assumé : si l’IA n’arrive pas à produire un site qui plaît, l’utilisateur n’a rien dépensé.
Sous le capot : WebForge, le moteur de génération
C’est ici que ça devient intéressant pour les développeurs. WebForge est un binaire Node.js / TypeScript indépendant que j’ai conçu spécifiquement pour ce cas d’usage. Il orchestre l’intégralité de la génération du site : analyse du brief, écriture du contenu, choix du design, assemblage du code, optimisation des assets et validation finale. Tout est piloté en interne et l’avancement est exposé en temps réel à l’application web, de sorte que l’utilisateur ne reste jamais devant un sablier muet.
Vue d’éditeur WebSir pendant une génération : la colonne de gauche affiche en temps réel les phases WebForge (écriture du code, validation du template, QA), le panneau central montre le site en cours d’assemblage. Alt text suggéré : « Éditeur WebSir affichant en temps réel les phases de génération WebForge et la prévisualisation du site vitrine en cours de création par l’IA ».
Plusieurs phases visibles pendant la génération
Plutôt que de demander à un seul appel monolithique de produire un site complet (recette classique pour obtenir un résultat décevant), WebForge enchaîne plusieurs phases spécialisées. Vous les voyez littéralement défiler dans le panneau de gauche au moment où le site est généré.
Une partie de ces phases est pilotée par l’IA — celles qui demandent du jugement créatif ou rédactionnel (cadrer le projet, écrire le contenu, choisir le design, produire le code). D’autres phases sont entièrement déterministes, sans aucun appel LLM : elles s’occupent du build, de la validation et de l’auto-correction. Ce sont elles qui rattrapent les erreurs typiques d’une génération par IA — une classe CSS inexistante, un slot oublié, une palette de couleurs incohérente, un rythme de page qui empile deux fois la même section.
Le résultat de cette répartition est simple : la créativité reste à l’IA, la rigueur reste à du code testé. C’est la clé pour livrer un site vitrine généré par IA qui n’hallucine pas, et qui sort du pipeline avec un niveau de qualité reproductible plutôt qu’au petit bonheur la chance.
Une boîte à outils maison pour l’agent
L’agent IA n’écrit pas le site « à la main » en mode complétion brute. Il dispose d’une boîte à outils typée que j’ai définie spécifiquement pour la production de sites vitrines : lecture, écriture et édition de fichiers, instanciation de composants depuis une bibliothèque interne, validation de templates, et toute une batterie d’outils image (génération d’illustrations, génération de logo, génération de favicon, édition d’image, suppression de fond).
L’agent choisit lui-même les outils pertinents en fonction de la phase en cours, et un sous-ensemble d’outils est restreint selon le contexte — par exemple, on ne veut pas qu’une phase de revue critique se mette à réécrire du code en douce. Cette discipline d’outillage est ce qui fait la différence entre un démo Twitter et un produit qui tient en production.
Une fois le site généré, l’utilisateur peut bien sûr continuer à dialoguer avec l’IA par chat, mais il peut aussi cliquer directement sur n’importe quel bloc de la page pour le modifier en contexte : changer un titre, ajuster un appel à l’action, remplacer une image. L’éditeur conserve la connaissance de la structure (hero, services, témoignages, footer…) et propose les modifications adaptées au type de bloc sélectionné.
Sélection visuelle directe d’un bloc « hero » sur un site généré : l’utilisateur clique sur la zone à modifier et l’éditeur applique le changement sans casser la structure. Alt text suggéré : « Édition en contexte d’un bloc hero sur un site vitrine généré par IA dans l’éditeur WebSir ».
Pourquoi du HTML statique en 2026 ?
Beaucoup de plateformes équivalentes produisent une application JavaScript monstrueuse (Wix charge facilement 2 à 3 Mo de JS sur la première page). WebSir fait l’inverse radical : les sites générés sont du HTML / CSS / Vanilla JS ES2022+. Zéro framework côté client. Zéro React, zéro Vue, zéro Alpine.js, zéro jQuery. La règle est appliquée par le CI : un script bloque tout merge qui réintroduirait une dépendance interdite.
Conséquences mesurables :
- LCP minimal — pas d’hydration, pas de bundle JS à parser avant l’affichage du contenu
- FID immédiat — peu de JavaScript sur le main thread
- Bundle léger — quelques kilo-octets de JS pour les interactions (menu mobile, accordéons), pas plus
- Accessibilité naturelle — pas de DOM virtuel, le HTML est lisible tel quel par les lecteurs d’écran et les crawlers SEO
- Robustesse — un site qui marche encore parfaitement même si le JS est désactivé
Côté infrastructure, le site est servi via un réseau de diffusion mondial (edge CDN). Concrètement, chaque page est rendue au point de présence le plus proche du visiteur, où qu’il soit dans le monde. Pas de serveur d’application à scaler, pas de cache à invalider à la main : l’upload, l’injection des meta tags, la configuration DNS et la purge du cache sont entièrement automatisés à chaque redéploiement. Les domaines personnalisés sont gérés en quelques clics, avec certificat SSL automatique.
Le système de variables typées : un coup d’avance sur le RGPD
C’est probablement la partie dont je suis le plus fier techniquement, et celle que les autres plateformes ne font pas. Toute donnée publique récurrente d’un site — numéro de téléphone, e-mail, adresse, SIRET, nom de l’hébergeur, année courante — passe par une balise <var data-key="…"> ou un attribut data-bind-{attr}="key".
Le LLM ne voit jamais la vraie valeur. WebForge reçoit uniquement les clés et les métadonnées (label, type, obligatoire ou non). La substitution réelle se fait après coup, au moment du déploiement, par un moteur de rendu qui injecte les valeurs juste avant la publication.
Bénéfices concrets : les vraies données personnelles ne transitent pas par un fournisseur d’IA tiers, on peut modifier un numéro de téléphone à l’échelle de tout le site en une opération, et on peut activer un drapeau « donnée sensible » qui déclenche un chiffrement supplémentaire sur les variables non destinées à la publication. Pour quelqu’un qui essaie de générer un site vitrine professionnel par IA tout en restant conforme au RGPD, cette séparation contenu / données est déterminante.
Sécurité et hygiène opérationnelle
Quelques détails qui comptent dans un blog de développeur :
- 2FA TOTP obligatoire
- Anti-brute-force à deux étages : 5 tentatives échouées entraînent un lockout du compte pendant 15 minutes
- Formulaires de contact protégés par plusieurs couches de sécurité dont honeypot, temps minimum de remplissage, refus des domaines jetables, vérification MX, Turnstile, 100 % automatisé
- Upload de fichiers dans les formulaires : whitelist MIME, taille maximale par soumission, ClamAV côté serveur
Pourquoi un site vitrine généré par IA peut surperformer un site fait main
L’argument intuitif est : « un humain fait toujours mieux qu’une machine sur la créa ». C’est encore partiellement vrai sur le design, mais c’est de moins en moins vrai sur la performance technique, qui est le terrain de jeu réel du SEO moderne.
Un freelance qui livre un site Webflow ou un thème WordPress bricolé a peu de chances de battre, sur les Core Web Vitals, un pipeline qui est conçu dès le départ pour générer du HTML statique optimisé, validé par une batterie de checks déterministes, et déployé sur un edge mondial. Ajoutez à ça :
- Des balises Schema.org injectées systématiquement pour chaque page (LocalBusiness, Article, BreadcrumbList selon le contexte)
- Un sitemap.xml généré et soumis automatiquement
- Des meta tags Open Graph et Twitter Cards configurés à l’étape « Social » du tunnel
- Une analytics native embarquée sans SDK externe à charger
- Des images servies en WebP ou AVIF quand le navigateur le supporte
…et vous obtenez un site qui, sans effort supplémentaire, coche déjà les principales recommandations Google Page Experience. Quand un crawler arrive, il trouve du HTML lisible, pas un squelette React à hydrater. Quand un visiteur clique, la page s’affiche en quelques centaines de millisecondes depuis le point de présence le plus proche.
Audit Google Lighthouse d’un site vitrine généré par WebSir : 100/100 en Performances, Accessibilité, Bonnes pratiques et SEO. Aucune optimisation manuelle, le score sort de la phase de génération. Alt text suggéré : « Score Google Lighthouse 100/100/100/100 sur un site vitrine généré par l’IA WebSir, mesuré sur Performances, Accessibilité, Bonnes pratiques et SEO ».
Tarification et code promo (la partie que vous attendiez)
L’offre active s’appelle simplement Site vitrine. 39,90 € HT par mois, avec une option annuelle à 430,92 € HT par an qui économise 10 %. Sont incluses :
- Jusqu’à 20 pages, mentions légales et politique de confidentialité comprises
- Un domaine personnalisé ou un sous-domaine en
*.websir.fr - Le certificat SSL géré automatiquement
- Un CDN mondial à edge
- Une analytics native sans bandeau cookies à afficher
- Des formulaires de contact illimités, avec upload de fichiers et anti-spam
- Les modifications illimitées par chat (l’IA reste accessible après publication)
- Le support e-mail
Et voici la partie qui m’a poussé à écrire cet article aujourd’hui : pour les lecteurs de ce blog, j’ai mis en place un code de réduction de 20 % sur le premier abonnement.
Code promo : SITE20
20 % de réduction à entrer à l’étape Checkout du tunnel de déploiement.
Rappel : la génération du site est gratuite. Vous pouvez créer un compte, briefer l’IA, voir le résultat complet, demander toutes les modifications que vous voulez, et n’utiliser le code SITE20 qu’au moment où vous décidez effectivement de publier le site en ligne. Si le rendu ne vous convient pas, vous n’aurez rien dépensé.
Ce qui n’est pas (encore) dans WebSir
Par honnêteté intellectuelle, voici ce qui n’existe pas aujourd’hui. Les offres site dynamique et e-commerce sont prévues mais ne sont pas encore disponibles. La technologie cible n’est pas arrêtée — je sais déjà ce que je n’utiliserai pas (ni WordPress, ni PrestaShop, ni Shopify) mais pas encore ce que je vais retenir. Si vous avez besoin d’une boutique en ligne ou d’un back-office métier dès aujourd’hui, WebSir ne sera pas la bonne réponse — je préfère vous le dire avant que vous ne tapiez votre carte bleue plutôt qu’après.
De même, WebSir cible le marché francophone en priorité. Le contenu généré est en français par défaut, les pages légales sont calquées sur le droit français, et l’agent conversationnel comprend mieux les briefs en français que dans d’autres langues. Le support multilingue arrivera, mais ce n’est pas la priorité du moment.
Conclusion : ce que ça change pour un développeur
Si vous êtes développeur et que vos amis non-techniques vous demandent encore « tu peux pas me bricoler un petit site« , vous savez à quel point cette demande devient pénible à honorer gratuitement. Recommander WebSir pour le besoin « site vitrine professionnel rapidement en ligne, avec un domaine et des formulaires de contact qui marchent » vous libère le week-end. Et si vous êtes vous-même freelance et que vous prenez des missions de site vitrine en sous-traitance, vous pouvez utiliser WebSir comme accélérateur : laissez l’IA produire la base, et facturez le temps de personnalisation à votre client final.
Le code SITE20 reste valable pour tous les lecteurs de ce blog. Rendez-vous sur websir.fr, créez un compte, décrivez ce que vous voulez et regardez le pipeline tourner. Si vous voulez creuser la partie technique, WebForge mérite probablement un article dédié — dites-le moi en commentaire et je détaillerai le système de templates et le mécanisme d’auto-correction dans un prochain post.
Article rédigé par le créateur de WebSir, à destination des développeurs qui veulent comprendre ce qui se passe vraiment quand on génère un site vitrine par IA en 2026.
