Site Factory.
Année : 2026
Le site vitrine d’un commerce, produit par un agent de code à partir d’une fiche
Fiche
- Rôle
- Conception de la méthode et des règles
- Équipe
- Seul, en projet personnel, pour éprouver la méthode
- Période
- Février 2026
- Statut
- Méthode prête, éprouvée sur un premier site
- Code
- Privé
- Captures
- Captures du premier site, affiché en local avant sa mise en ligne.
En bref
Une méthode que j’ai conçue seul pour produire avec Claude Code les sites vitrines de commerces locaux. Le commerçant remplit une fiche ; l’agent avance ensuite en cinq phases, chacune avec son outil et validée avant la suivante, sous des règles écrites d’avance en performance, accessibilité, référencement local et sécurité. La méthode a servi à réaliser un premier site, pour une boulangerie artisanale de Romainville.
Point de départ
Un commerce local a besoin d’un site rapide, bien référencé dans son quartier, et qui ne ressemble pas à un modèle. Il n’a ni le temps ni le budget d’une agence, et un agent de code laissé libre produit vite des sites qui se ressemblent tous.
Contraintes
- Un commerçant sans compétence technique : une fiche à remplir, rien d’autre.
- Aucun framework, aucune bibliothèque JavaScript, aucune étape de compilation.
- Un rendu propre à chaque commerce, tiré de sa marque.
Livrables
- Le modèle maître : 631 lignes de règles pour l’agent, et la fiche à remplir par le commerçant.
- Une « mémoire d’agence » : références de mise en page par type de commerce, erreurs visuelles à éviter, effets CSS prêts à l’emploi.
- Les cinq phases, leurs outils et leurs critères de validation.
- Les règles techniques : performance, accessibilité, données structurées, en-têtes de sécurité.
- Une liste de contrôle avant livraison.
- Un premier site réalisé, pour une boulangerie artisanale de Romainville, avec formulaire de contact et mentions légales.
Architecture
Le site produit est en HTML, CSS et un peu de JavaScript, sans framework ni compilation : il s’ouvre tel quel et se déploie sur Netlify. Le CSS est réparti en huit fichiers par rôle (variables, base, mise en page, composants, animations, adaptation mobile…), le JavaScript en deux : le menu et le formulaire.
La configuration Netlify pose les en-têtes de sécurité (politique de sécurité du contenu, protection contre l’intégration dans un autre site) et un cache d’un an sur les fichiers statiques. Les données Schema.org décrivent le commerce pour la recherche locale, et le formulaire passe par Formspree.
Stack technique
- Langages
- Agent de code
- Référencement
- Outils
- Hébergement
Décisions
-
Des règles écrites avant la première ligne de code
Le site doit se charger en moins de 2 secondes en 3G et peser moins de 1 Mo hors images ; les images se chargent à la demande, sauf celle du haut de page, et les scripts sont différés. En accessibilité, la cible est WCAG AA : lien d’évitement, focus visible, contrastes vérifiés, animations coupées pour qui les refuse.
Le référencement local repose sur un titre et une description calibrés, une fiche LocalBusiness en JSON-LD, des balises de partage et un plan du site.
Les produits, présentés comme en vitrine. 
Pensé d’abord pour le téléphone, là où les clients du quartier le consultent. -
Cinq phases, validées une par une
La première phase rassemble, avec Firecrawl, des informations sur le commerce, ses avis et son quartier. La deuxième pose le système de design et le haut de page, jugés décisifs pour la qualité perçue. La troisième génère le reste du site, la quatrième convertit les images en WebP et les redimensionne avec ImageMagick, la cinquième audite le site avec Lighthouse et relit le code.
L’agent ne passe à la phase suivante qu’après validation, et ne génère jamais le site d’un seul coup. L’audit vise plus de 90 en performance et en bonnes pratiques, plus de 95 en accessibilité et en référencement.
-
Une mémoire d’agence contre l’effet modèle
Avant de dessiner, l’agent lit des références de mise en page propres au type de commerce et une liste d’erreurs visuelles à éviter. Le système de design part de la marque du commerce : couleurs, typographies, espacements sur une base de 8 px, ombres et rayons définis une fois et réutilisés partout.
Résultats
- 5
- phases, chacune avec son outil et ses critères de validation
- 2 s
- de chargement au maximum en 3G, exigé par les règles
- 1
- site produit, pour une boulangerie artisanale de Romainville
- 631
- lignes de règles dans le modèle maître
Méthode prête. Le premier site attend sa mise en ligne.