` avec des classes arbitraires. Elles appellent `
`, ``, ``, dont le rendu est géré une fois pour toutes par le design system. Un changement de charte graphique se propage automatiquement à tout le site.
**Le versioning vit dans Git.** Chaque modification de contenu passe par un commit. On sait qui a changé quoi, quand, pourquoi. On peut ouvrir une pull request pour une relecture. On peut publier une version préliminaire sur une branche pour recueillir des retours avant mise en ligne.
### Le CMS pour les non-techniques
Pour que les équipes content, marketing ou communication restent autonomes sans ouvrir un éditeur de code, Lonestone maintient un CMS open source qui lit directement les fichiers MDX et commit vers Git : [**AstroCMS**](https://github.com/lonestone/astrocms). Un éditeur visuel MDX, des formulaires de frontmatter générés automatiquement à partir des schémas Zod, un navigateur de collections, l’insertion de composants Astro dans le texte, et une intégration optionnelle avec Claude Code pour la rédaction assistée. Le tout sans base de données : la source de vérité reste les fichiers versionnés dans Git.
Pour démarrer vite avec une base propre, le [**template Astro de Lonestone**](https://github.com/lonestone/astro-template) embarque déjà le socle complet. Astro 6, Tailwind v4, MDX, collections typées Zod, sitemap automatique, open graph, hreflang, JSON-LD, table des matières, miroir markdown de chaque page, fichier llms.txt, navigation mobile clonée, mode multilingue. AstroCMS est préinstallé. Il reste à remplir le contenu et à adapter la charte graphique.
## Le pilotage par un fichier AGENTS.md
### Un prompt unique qui aligne tous les agents
Dès qu’on travaille avec des agents IA, la cohérence devient le sujet numéro un. Un agent bien prompté produit un résultat excellent, un agent mal prompté produit du texte générique qu’il faut réécrire. La bonne pratique qui s’est imposée en 2026 consiste à placer à la racine du projet un fichier `AGENTS.md` qui décrit au LLM tout ce qu’il doit savoir pour travailler comme un membre de l’équipe. Ce nom de fichier est devenu le standard commun à la plupart des agents de code (Claude Code, Cursor, OpenCode, Codex, Aider, Cline).
Un bon AGENTS.md ressemble à un document d’onboarding. On y trouve notamment la stack technique (Astro, Tailwind, TypeScript, React pour les composants complexes, Netlify), les conventions de contenu (français, pas de tirets cadratins, formulations positives), la structure des dossiers (`src/content/` pour les collections, `src/components/` pour les composants), les règles de rédaction pour les FAQ (questions formulées comme un prospect, réponses à la troisième personne pour être réutilisables par un chatbot IA), les conventions de design (utiliser Tailwind).
N’importe quel agent IA qui ouvre ce repo respecte alors la charte immédiatement. Un nouveau rédacteur qui prompte Claude pour écrire un article obtient un résultat aligné sur les 72 articles existants. Un designer qui convertit une maquette Figma en composant Astro obtient un rendu cohérent avec le design system.
### Symlinks pour les agents qui utilisent un autre nom
La plupart des agents majeurs (Cursor, Cline, Copilot, Codex, Aider) lisent directement `AGENTS.md`. Claude Code, lui, cherche en priorité un fichier `CLAUDE.md` à la racine. Plutôt que de dupliquer le contenu, on garde `AGENTS.md` comme source unique et on ajoute un symlink pour les cas particuliers :
```
ln -s AGENTS.md CLAUDE.md
```
Un seul fichier à maintenir, tous les agents à jour en même temps. Si la charte évolue, on met à jour `AGENTS.md` et tous les outils suivent automatiquement. On ajoute un symlink supplémentaire au cas par cas si un nouvel agent utilisé par l’équipe attend un autre nom.
### Un fichier AGENTS.md qui se lit facilement
Il fait en général 100 à 300 lignes, structuré en sections courtes. On y place des règles qui se vérifient : “tous les titres doivent passer sous 60 caractères” ou “les pages solutions vont dans `src/content/solutions/`”. On y place des exemples concrets : “au lieu d’écrire ‘ne dépend pas’, écrire ‘reste indépendant’”. On y évite les paragraphes philosophiques : ce que l’agent doit savoir, pas ce qu’on aimerait qu’il comprenne.
## Les skills pour industrialiser la production
### Qu’est-ce qu’un skill
Un skill est un ensemble d’instructions et d’outils qu’un agent peut invoquer pour accomplir une tâche précise. Concrètement, un skill est un dossier qui contient un fichier `SKILL.md` (la procédure à suivre, étape par étape), mais aussi, au besoin, des scripts exécutables, des gabarits de texte, des exemples de bon résultat ou des documents de référence que l’agent peut lire pour ne pas réinventer à chaque fois. Ce format riche permet d’encoder non seulement le “quoi faire”, mais aussi le “avec quoi” et le “comme ça”.
Un standard ouvert (Agent Skills) émerge autour de ce format, mais l’emplacement du dossier parent n’est pas encore unifié : Claude Code lit `.claude/skills/`, Cursor lit `.cursor/skills/`, Codex lit `.codex/skills/`, et d’autres outils ont leur propre convention. Cursor sait déjà découvrir les trois principaux dossiers pour faciliter le passage d’un agent à l’autre. La même logique que pour l’AGENTS.md s’applique : on maintient un seul dossier canonique et on crée les symlinks nécessaires selon les agents utilisés par l’équipe. L’équipe définit une fois la procédure et l’agent la rejoue à chaque demande.
Le gain n’est pas seulement un gain de temps. C’est aussi une garantie de qualité constante. Un skill qui rédige des articles de blog oblige l’agent à vérifier que le titre fait moins de 60 caractères, que la meta description tient en 160 caractères, que le keyword principal apparaît dans les 100 premiers mots, que les liens internes pointent vers des pages existantes. Ce sont des contrôles qu’un humain pressé oublie, qu’un agent exécute systématiquement.
### La bibliothèque de skills Lonestone
Sur le repo du site lonestone.io, une quinzaine de skills tournent en production, notamment :
* **write-blog-post** : recherche web, analyse des rapports SEO internes, rédaction complète d’un article MDX, génération de l’illustration, création de la miniature, vérification des longueurs de balises.
* **seo** : point d’entrée qui dispatche vers les scripts de collecte de données (rank tracking, keyword opportunities, competitor analysis, on-page audit, backlinks, SERP features, content performance, dashboard).
* **seo-optimize-page** : audit d’une page précise et application des optimisations (balises, maillage, FAQ, internal linking).
* **seo-content-plan** : croise les rapports et propose un plan éditorial avec priorités, mots-clés cibles et outlines.
* **update-evergreen** : parcourt la liste des pages evergreen, lance pour chacune un sous-agent qui recherche les changements récents sur le web et met à jour le contenu.
* **research-and-update** : recherche ciblée pour rafraîchir un contenu précis.
* **generate-social-preview** : capture automatique de la preview OG à 1200x630 via Playwright.
* **generate-image** : génération d’illustrations d’articles avec un prompt.
* **replicate-webpage** : reproduction d’une page web existante à partir d’un screenshot (ça s’est avéré très utile pour migrer depuis Framer).
* **page-solution** : création d’une page commerciale en respectant le schéma des collections solutions.
Chaque skill est exécutable à la demande (`/write-blog-post "sujet"`) ou orchestré dans une routine. Pour les membres de l’équipe, la barrière technique est nulle : ils prompt l’agent comme ils parleraient à un collègue.
### Un skill est versionné dans le repo
Un skill est un fichier Markdown versionné avec le reste du code. Quand la méthode évolue (nouveau format de frontmatter, nouvelle règle SEO, nouveau ton éditorial), on met à jour le skill et tous les membres de l’équipe, humains et agents, partent de la nouvelle version la fois suivante. Pas de formation à refaire, pas d’oubli, pas de variante personnelle.
## Le pilotage par la data : DataForSEO, GSC, Analytics
### Trois sources croisées
Un site ne se pilote plus à l’intuition. Trois sources de données alimentent les décisions éditoriales chez Lonestone :
**DataForSEO** fournit les positions SERP, le volume de recherche, la difficulté concurrentielle, les mots-clés de la concurrence, les SERP features (featured snippet, People Also Ask, AI Overview). Les API DataForSEO couvrent le rank tracking quotidien, l’exploration de mots-clés par intention, les audits on-page via `instant_pages`, le profil de backlinks, les questions extraites de Google. Pour un site commercial, c’est la première source pour repérer les opportunités.
**Google Search Console** donne la vérité du trafic entrant : impressions, clics, CTR, positions moyennes, requêtes exactes que Google associe à chaque page. GSC a ajouté en 2026 des dimensions de filtrage par type d’apparition (AI Overviews, featured snippets) et une configuration en langage naturel. On peut désormais demander au GSC : “montre-moi les requêtes mobiles à fort volume mais faible CTR sur les 28 derniers jours”.
**Google Analytics ou Umami** apporte la donnée d’engagement : durée de session, pages vues par visite, taux de rebond, conversions. Croisée avec GSC, elle permet de distinguer les pages qui rankent mais ne convertissent pas, de celles qui convertissent mais ne rankent pas encore. Chez Lonestone, le choix se porte sur [Umami](https://umami.is) plutôt que sur Google Analytics : la solution fonctionne sans cookies (donc sans bandeau de consentement à afficher), son interface est nettement plus simple à prendre en main et elle est auto-hébergée en France, ce qui simplifie la conformité RGPD et garde les données d’audience sous contrôle. Le branchement sur un site Astro se fait en quelques minutes.
### L’analyse cross-sources
Le skill `seo:content` chez Lonestone croise GSC et Umami page par page. Les pages qui apparaissent en haut de GSC mais en bas d’Umami sont des candidates à la refonte (elles attirent mais n’engagent pas). Les pages avec un bon engagement mais peu de visibilité SEO sont des candidates à l’optimisation (elles ont le produit mais pas l’audience). Chaque semaine, un dashboard résume les quick wins prioritaires.
La barrière à l’entrée est faible. DataForSEO facture à la requête (environ 0,0015 $ par requête SERP), GSC est gratuit via API, Umami tourne sur un petit serveur ou une version cloud à quelques euros par mois.
## Rédaction et mise à jour automatisées
### La rédaction assistée d’articles de blog
Un skill `write-blog-post` en production chez Lonestone orchestre quatre étapes :
1. **Recherche web** avec des requêtes ciblées sur le sujet, les statistiques récentes, les prises de position d’experts.
2. **Lecture des pages internes connexes** pour identifier les opportunités de maillage et éviter le doublon.
3. **Exploration des rapports SEO** pour récupérer les mots-clés sous-exploités et les questions People Also Ask du SERP.
4. **Rédaction dans le format Lonestone** (titre sous 60 caractères, description sous 160, takeaways en frontmatter, liens internes, FAQ, structure respectant l’AGENTS.md).
Le rédacteur humain n’a plus qu’à relire, corriger les formulations marketing, ajouter des anecdotes clients. Le temps passé sur un article est divisé par 5 à 10 pour une qualité supérieure à la moyenne des articles écrits en mode artisan.
### Les pages alternatives et les landing pages
Au-delà du blog, deux types de pages commerciales profitent énormément de l’automatisation :
**Les pages alternatives** (“alternative à Salesforce”, “alternative à Webflow”, “alternative à ClickUp”). Un skill dédié génère ces pages à partir d’un brief produit et d’une analyse de la concurrence. Chaque page cible un mot-clé transactionnel à fort potentiel (“alternative à X”) avec une intention claire : un prospect qui cherche à quitter un outil propriétaire pour une solution plus adaptée.
**Les landing pages commerciales**, déclinées par secteur, par persona ou par cas d’usage. Le skill `page-solution` chez Lonestone génère une page complète en respectant le schéma des collections Astro : hero avec tag, composants d’avantages, section pricing, FAQ, CTA, social preview. Le designer et le CMO relisent, ajustent, publient.
### Programmatic SEO, version 2026
La SEO programmatique consiste à produire des centaines de pages uniques à partir d’un jeu de données et d’un template. La version 2026 y ajoute l’IA pour rendre chaque page réellement différenciée, pas juste une variante superficielle.
Chez Lonestone, le pattern typique combine trois ingrédients. Un fichier YAML ou CSV qui contient les données (liste de villes, liste de technologies, liste de secteurs). Un template Astro qui génère la structure commune. Un skill qui enrichit chaque page avec une introduction spécifique générée par un LLM, des cas d’usage contextualisés, des liens internes variés, des métadonnées uniques. On obtient ainsi 200 pages “agence développement web à Nantes”, “à Lyon”, “à Bordeaux” et ainsi de suite, différenciées page par page plutôt que dupliquées, qui captent chacune des requêtes longue traîne.
Le coût marginal par page est de l’ordre de quelques centimes en tokens LLM, plus le coût de build et de stockage (négligeable sur un CDN statique). Un équivalent sur Webflow atteindrait rapidement les 1 000 € par mois en licences et en frais par collection.
### La mise à jour du contenu evergreen
Le mot evergreen désignait à l’origine un contenu “indémodable”, qu’on publie une fois et qui reste pertinent pendant des années sans qu’on ait besoin d’y toucher : un guide de fond, une définition, une page pilier. Avec l’arrivée des moteurs IA et leur prime à la fraîcheur, la définition a évolué. Chez Lonestone, on parle désormais d’evergreen pour qualifier un contenu vivant qui reste à jour en continu grâce aux routines automatisées : les faits, les chiffres, les versions logicielles, les tarifs, les réglementations cités dans la page sont rafraîchis à chaque changement pertinent, pendant que la structure et l’angle éditorial restent stables.
Un contenu evergreen, qu’on parle de guide, de page pilier ou de FAQ, perd sa visibilité dès qu’il vieillit. Une page non modifiée depuis 14 jours subit en moyenne 23 % de citations en moins dans les IA qu’un contenu frais. Une page mise à jour dans les trois derniers mois est citée deux fois plus souvent qu’une page non maintenue.
Le skill `update-evergreen` chez Lonestone lit un fichier `EVERGREEN.md` qui liste les pages à maintenir, puis lance pour chacune un sous-agent :
1. Le sous-agent lit la page actuelle.
2. Il identifie les sujets susceptibles d’avoir évolué (tarifs cités, versions de logiciels, statistiques, réglementations).
3. Il fait de la deep research sur chaque sujet.
4. Il met à jour uniquement les faits qui ont changé, sans réécrire les parties encore valides.
5. Il met à jour la date `update` du frontmatter.
Sur un site de 70 articles, cette routine tourne en quelques dizaines de minutes et maintient l’ensemble du corpus à jour. Sans automatisation, c’est plusieurs semaines de travail manuel qu’aucune équipe n’a le temps de faire sérieusement.
### Le maillage interne que l’agent tisse tout seul
Un effet de bord très précieux de cette méthode mérite d’être souligné. Quand un agent IA écrit ou met à jour une page, il explore spontanément le reste du site avant de rédiger. Il lit les articles connexes, les pages solutions, les offres, les cas clients, et tisse au fil du texte des liens internes pertinents : un article sur le SEO qui renvoie vers l’[offre correspondante](/solutions/creation-site-web), un guide produit qui met en avant un cas client, une FAQ qui pointe vers un autre article qui creuse la réponse.
Trois bénéfices en découlent :
* **Le netlinking SEO** s’enrichit sans effort humain. Chaque nouveau contenu renforce l’autorité des pages piliers vers lesquelles il pointe, et l’agent évite naturellement les liens cassés ou les ancres génériques.
* **Les parcours de conversion** se construisent tout seuls. Un visiteur qui arrive par un article de blog est progressivement orienté vers les pages commerciales via des liens contextuels, pas via un bandeau publicitaire collé en fin d’article.
* **La cohérence globale** du site se maintient. Les messages clés, les formulations, les positionnements reviennent page après page sans duplication, parce que l’agent s’appuie sur la charte et sur les pages existantes plutôt que de réinventer à chaque fois.
Un humain peut tenir cette discipline sur 10 articles. Au-delà de 50, l’oubli et l’incohérence s’installent. Un agent maintient la même rigueur sur 1 000 pages.
## Le GEO pour être cité par les IA
### Les signaux qui comptent pour les moteurs génératifs
ChatGPT, Perplexity, Claude, Google AI Overviews ne lisent pas le web comme Google classique. Ils favorisent des signaux précis quand ils choisissent quoi citer :
* **Données structurées JSON-LD** : schema.org bien implémenté (Article, FAQPage, HowTo, Organization, Product). Les pages avec schema propre sont citées 3,2 fois plus souvent. Entre 65 % et 71 % des pages citées par Google AI Mode et ChatGPT comportent du schema.
* **Structure de titres claire** : H1 unique, H2 et H3 logiques, paragraphes denses mais courts (40 à 60 mots pour les blocs de réponse).
* **Statistiques et citations** : les pages qui citent des chiffres sourcés ou des experts gagnent 30 à 40 % de visibilité IA selon les travaux de recherche de Princeton.
* **FAQ explicite** : les questions formulées comme un prospect, avec des réponses autonomes réutilisables hors contexte, sont très prisées par les moteurs IA.
* **Fichier llms.txt** : un index dédié aux LLM qui liste les pages importantes et leur version markdown. Le template Astro Lonestone le génère automatiquement.
* **Fraîcheur** : date de mise à jour récente et modifications substantielles (20 à 30 % du contenu) au moins plusieurs fois par an.
### La FAQ comme moteur de GEO
La section FAQ est un investissement à très haut rendement. Chaque question est une opportunité d’être cité par un moteur IA quand un utilisateur pose cette même question. Chez Lonestone, la règle de rédaction des FAQ est stricte : les réponses sont rédigées à la troisième personne (“Lonestone accompagne”, pas “nous accompagnons”), sans formulations marketing, avec des liens internes pertinents, et compréhensibles hors contexte. Un chatbot IA doit pouvoir reprendre la réponse telle quelle.
### Le fichier llms.txt
Le fichier `/llms.txt` est devenu en 2026 l’équivalent du `sitemap.xml` pour les LLM. Il liste les pages importantes du site, avec pour chacune une URL vers sa version markdown brute (sans design, sans JavaScript), que l’IA peut parser efficacement. Sur le template Astro Lonestone, ce fichier est auto-généré au build à partir des collections de contenu, avec un en-tête qui présente le site et son périmètre.
## Les assets visuels : miniatures, illustrations, previews et screenshots automatisés
### Les miniatures et illustrations d’articles
Chaque article de blog a besoin d’une miniature (la vignette qui apparaît dans la grille du blog, dans les listes d’articles associés, dans les aperçus de partage) et parfois d’une ou deux illustrations intégrées au texte pour expliquer une comparaison, un processus ou un concept abstrait. Les produire à la main demanderait du temps de designer sur chaque article.
Un skill `generate-image` délègue cette production à un modèle d’image (Nano Banana Pro, Imagen 3, Midjourney via API). L’agent qui rédige l’article identifie les 1 à 3 endroits où une illustration aide la compréhension, écrit lui-même les prompts adaptés au ton visuel de la marque (fond sombre diffus, palette dusty pastel, accent jaune, style éditorial légèrement 3D), et lance la génération. Les images atterrissent directement à côté du fichier MDX de l’article, versionnées dans Git, et prêtes à être référencées dans le contenu. Le tout sans ouvrir Photoshop ni briefer un designer pour un article de blog standard.
La miniature suit la même logique, avec un format spécifique (1200x630) et des contraintes plus strictes sur la lisibilité à petite taille. Le prompt, affiné une fois dans le skill, produit des miniatures cohérentes visuellement d’un article à l’autre, même quand une dizaine de rédacteurs ou d’agents différents interviennent.
Les modèles d’image récents, et en particulier Nano Banana Pro, ont franchi un cap sur les visuels complexes. Ils produisent désormais des schémas, des diagrammes et des infographies soignés à partir d’un simple prompt descriptif (une architecture technique, un parcours utilisateur, un comparatif visuel). Ce qui demandait quelques heures à un illustrateur tient en une minute, avec un rendu exploitable directement.
Pour les diagrammes plus structurés (arbres de décision, flux de données, organigrammes, séquences), une intégration [Mermaid](https://mermaid.js.org) complète utilement la génération d’image. Mermaid permet de décrire un diagramme directement en texte, dans un format que tous les grands LLM maîtrisent parfaitement. L’agent peut ainsi écrire un bloc Mermaid dans le MDX, qui se rend en diagramme propre à la compilation, reste modifiable par n’importe quel membre de l’équipe, et se versionne ligne par ligne dans Git. Les deux approches se combinent : image générée pour les visuels artistiques, Mermaid pour les schémas précis qui doivent évoluer avec le contenu.
### Les previews OG générées automatiquement
Chaque page commerciale (offres, solutions, métiers, technos) nécessite une image Open Graph de 1200x630 pixels. Générer ces images à la main prend du temps et produit des incohérences visuelles. Le skill `generate-social-preview` automatise la capture. Il prend un chemin de page en entrée, navigue via Playwright MCP sur la version locale du site, cache le header, force la première section à 100vh, met en pause les vidéos, et capture l’image au bon format.
Sur le site lonestone.io, la preview de chaque offre, solution, métier ou techno est ainsi régénérée dès qu’un élément visuel change. La marque reste cohérente à chaque partage LinkedIn, X, Slack ou WhatsApp.
### Les screenshots d’interface pour les articles
Pour les articles techniques qui présentent une interface (un dashboard, un éditeur, un formulaire), le skill équivalent lance Playwright sur une URL cible et capture automatiquement le rendu. Les screenshots vivent à côté du MDX, sont versionnés dans Git, et se régénèrent simplement quand l’UI évolue.
## L’orchestration : Claude Code routines et OpenClaw
### Les routines Claude Code
Claude Code intègre des “routines” (scheduled tasks) et des fonctions de “dispatch” (délégation à des sous-agents spécialisés) qui permettent de lancer un skill à intervalle régulier ou en parallèle sans intervention humaine. À noter que ces fonctionnalités ont d’abord émergé dans OpenClaw : Claude Code publie régulièrement de nouveaux ajouts pour combler les manques face aux runtimes agentiques plus matures, et les routines comme le dispatch en font partie. Exemples typiques chez Lonestone :
* Lundi 8h : `seo:rank` pour récupérer les positions de la semaine et alerter si un mot-clé prioritaire a chuté.
* Lundi 9h : `seo:dashboard` pour agréger les KPI et lister les opportunités de la semaine.
* Premier jour du mois : `seo:keywords` + `seo:competitors` + `seo:serp` + `seo:content` pour le bilan mensuel.
* Premier lundi du mois : `update-evergreen` pour rafraîchir tout le contenu pilier.
* Chaque publication d’article : audit `seo:onpage` immédiat sur la nouvelle URL.
### OpenClaw pour un agent joignable depuis Slack ou Telegram
[OpenClaw](https://docs.openclaw.ai) est un runtime agentique open source, auto-hébergé, qui se branche sur n’importe quel fournisseur de modèles (Claude, GPT, Gemini, Ollama en local, OpenRouter pour mixer plusieurs modèles). Son principal intérêt par rapport aux routines Claude Code est de transformer l’agent en compagnon permanent joignable depuis les canaux que l’équipe utilise déjà : Slack, Telegram, Discord, email. N’importe quel membre de l’équipe peut envoyer un message à l’agent (“publie la nouvelle version de l’article sur le SaaS”, “regénère la preview de la page X”, “ajoute une FAQ sur ce sujet”) et recevoir le résultat dans la foulée, sans ouvrir un terminal, sans lancer un IDE sur sa machine, sans même être sur un poste de travail. L’agent garde le contexte entre les échanges et peut demander des précisions, proposer un diff avant validation, ou déclencher une action sur le repo.
La compatibilité multi-fournisseurs permet aussi de choisir le bon modèle pour chaque tâche. On peut utiliser Claude pour la rédaction longue et les décisions éditoriales, GPT pour une requête qui bénéficie du style de ses réponses, un modèle local Ollama pour les traitements confidentiels, et laisser OpenClaw arbitrer selon le skill invoqué. Avec une skill bien calibrée, OpenClaw peut aussi déléguer une partie du travail à Claude Code pour les tâches de code qui profitent de son outillage spécifique.
Pour la plupart des équipes Lonestone, Claude Code suffit au démarrage. OpenClaw prend le relais quand les dirigeants ou les équipes content veulent pouvoir interagir avec le site depuis leur téléphone ou depuis Slack, ou quand l’équipe veut pouvoir basculer librement d’un fournisseur de modèle à l’autre.
## Comparatif des coûts
### Un site statique + agents IA vs un CMS propriétaire
Le tableau suivant compare un site vitrine multilingue de 80 pages, avec 3 éditeurs, un blog actif et des landing pages commerciales, sur une horizon de 12 mois.
Poste
Astro + MDX + Netlify + Claude Code
Webflow Business + agents externes
Hébergement + CDN
0 à 20 €/mois selon trafic
49 $/mois (Business, 3 sièges inclus)
Sièges éditeurs supplémentaires
0 € (Git, AstroCMS)
39 $/mois par siège au-delà de 3
Multilingue
Natif, gratuit
Localization à 9 $ par langue par mois
Automatisations IA
Claude Code à partir de 17 $/mois par utilisateur, palier à 100 $ si besoin
Zapier / Make + API Webflow, 50 à 150 $/mois
Données SEO (DataForSEO)
0 à 100 €/mois selon volume
0 à 100 €/mois selon volume
Production de 50 landing pages programmatiques
Coût marginal proche de zéro
Plan supérieur nécessaire + temps de saisie manuel
Mise à jour evergreen sur 70 articles
Routine automatisée
Manuel, plusieurs semaines par an
Code source
Propriété du client
Propriété de Webflow
Total annuel estimé
0 à 2 500 €
600 à 3 500 € + beaucoup de temps humain
Un point rassurant : la borne basse du scénario Astro est réellement à 0 €. Si l’activité éditoriale ralentit ou s’arrête un temps, on coupe simplement les abonnements IA et les API de données, et le site continue à tourner gratuitement ou presque sur le free tier de l’hébergeur. Côté plateforme propriétaire, les abonnements de base continuent d’être dus quoi qu’il arrive, sous peine de voir le site disparaître.
La différence se joue donc moins sur la facture d’abonnement que sur le temps humain, le coût marginal d’une nouvelle page, d’une nouvelle langue, d’une nouvelle version commerciale, et sur la capacité à laisser des agents IA piloter le site. En Astro, une landing page supplémentaire ou une mise à jour complète du corpus coûte quelques minutes de prompt et quelques centimes de tokens. En Webflow ou Framer, chaque ajout est une saisie manuelle qu’aucun agent ne sait réellement automatiser.
### Au-delà du coût : le time-to-market
Le vrai gain se mesure en temps de publication. Publier un nouvel article sur un site automatisé demande 20 à 40 minutes de la part d’un humain (brief, relecture, ajustements, validation). Publier la même qualité à la main demande 4 à 8 heures. Sur une cadence d’un article par semaine, c’est plusieurs centaines d’heures gagnées par an, redéployables sur le positionnement produit, la vente, les retours clients.
## Les sites qui tournent déjà ainsi
[**Lonestone.io**](/) est construit sur ce socle. Astro 6, Tailwind v4, MDX, React pour les composants complexes, Netlify, AstroCMS pour l’équipe, 15 skills Claude Code en production, routines hebdomadaires pour le SEO et mensuelles pour l’evergreen, DataForSEO + GSC + Umami pour la data. Le site comporte à date 73 articles de blog, 7 solutions, 8 offres, 3 métiers, plusieurs landing pages programmatiques (technos, projets). Le coût total d’hébergement est inférieur à 50 € par mois. La cadence de publication est d’un article par semaine en moyenne, avec une mise à jour trimestrielle des contenus piliers.
[**Rolebase.io**](https://rolebase.io), le SaaS de gouvernance partagée maintenu par Lonestone, utilise la même architecture pour son site marketing. L’équipe y publie des articles de fond, des cas clients, des guides, avec les mêmes routines automatisées. Les deux sites partagent le même template de base et les mêmes skills, avec des charte graphique et ton éditorial différents, pilotés chacun par leur propre AGENTS.md.
## Le rôle du designer et du dirigeant dans ce nouveau monde
### Pour le designer
Le designer continue de concevoir les écrans sur Figma. La différence : au lieu de recréer la maquette dans Webflow ou Framer, il prompte un agent IA via un serveur MCP Figma qui convertit directement la sélection en composant Astro+Tailwind. Les ajustements suivants se font soit en prompting, soit en ouvrant le composant et en éditant une ligne de classes Tailwind. Le designer garde son autonomie, et n’a plus à apprendre un CMS supplémentaire.
Pour les animations complexes, qui étaient un argument fort de Framer, la combinaison Tailwind + Motion (Framer Motion pour React) + View Transitions natives d’Astro couvre désormais tous les cas d’usage. Avec en bonus le contrôle total du code et des performances.
### Pour le dirigeant
Pour un dirigeant qui n’entre pas dans le code, l’expérience devient fluide. Il ouvre AstroCMS ou discute avec un agent dans Slack. Il demande “ajoute une page pour notre nouvelle offre X”, “met à jour l’article sur la cybersécurité avec les dernières stats”, “génère une landing page alternative à ClickUp pour notre solution de gestion de projet”. L’agent exécute, montre un diff, attend validation, publie. Aucun allers-retours avec une équipe externe pour des modifications qui auraient demandé 3 jours il y a encore 2 ans.
Le dirigeant garde le contrôle stratégique : c’est lui qui valide les directions, les messages, les priorités. Il délègue l’exécution à l’agent, comme il la déléguerait à un collaborateur expérimenté, avec la différence que le collaborateur tourne 24h sur 24 et ne demande ni congés ni réunions.
## Par où commencer concrètement
Pour une entreprise qui envisage cette bascule, la progression classique chez Lonestone tient en cinq étapes.
**1\. Cadrer les objectifs.** Volume de contenus prévu, langues cibles, SEO et GEO visés, budget, équipe interne impliquée. Sans cadrage, la refonte devient vite un projet sans fin.
**2\. Partir d’un template éprouvé.** Le [template Astro Lonestone](https://github.com/lonestone/astro-template) évite de redévelopper le socle (structure, SEO, multilingue, CMS, llms.txt). Une refonte classique démarre en 2 à 3 semaines au lieu de 2 à 3 mois.
**3\. Installer l’AGENTS.md et les premiers skills.** Charte éditoriale, conventions de composants, règles de FAQ, premiers skills de rédaction et d’optimisation SEO. C’est l’étape qui conditionne la qualité de tout ce qui suit.
**4\. Connecter la data.** DataForSEO, Google Search Console, Analytics ou Umami. Premier audit SEO complet pour repérer les quick wins et dessiner un plan éditorial 12 mois.
**5\. Lancer les routines.** Une routine hebdomadaire de rank tracking, une routine mensuelle de content plan, une routine trimestrielle d’update evergreen. Montée en charge progressive au rythme de l’équipe.
Chez Lonestone, un projet de ce type se chiffre entre 15 000 et 60 000 € selon le volume de contenu, la complexité du design et les automatisations voulues. Comparé à un Webflow multilingue avec agents externes, le retour sur investissement est atteint en 12 à 24 mois, avec un site qui reste la propriété complète du client.
## À retenir
L’ère du CMS propriétaire maintenu à la main s’achève. Le site d’entreprise de 2026 est un système composé de trois briques : un socle statique lisible par les agents IA (Astro + MDX + Tailwind), un pilotage par prompt et par skills pour industrialiser la production sans perdre en qualité, et des routines d’automatisation qui maintiennent le site frais sans intervention humaine quotidienne. L’investissement initial est du même ordre qu’une refonte classique, mais le coût de possession sur 5 ans est drastiquement inférieur, et la visibilité sur les nouveaux canaux (GEO, IA génératives) profite d’une avance durable.
Un projet de refonte ou de création de site web dans cette approche ? L’équipe Lonestone accompagne sur la [création de site web sur mesure](/solutions/creation-site-web), le [cadrage](/offres/shape), la [mise en production](/offres/scale) et la [maintenance](/blog/maintenance-site-internet). [Prenons un temps ensemble](/contact).
FAQ
## Questions fréquentes
### Faut-il abandonner Webflow ou Framer pour passer à Astro ?
Non, pas forcément. Webflow et Framer restent pertinents pour les sites vitrines simples, les landing pages ponctuelles et les équipes sans ressources techniques. La bascule vers un site statique Astro + MDX devient pertinente quand le site grandit, que le multilingue entre en jeu, que les besoins d’automatisation par agents IA apparaissent, ou que le coût des licences et des sièges dépasse le budget de développement. Lonestone aide à faire ce diagnostic lors d’un échange initial.
### Qu'est-ce que le GEO (Generative Engine Optimization) ?
Le GEO désigne l’ensemble des pratiques qui rendent un contenu facilement cité par les moteurs de recherche génératifs : ChatGPT, Perplexity, Google AI Overviews, Claude. Il s’appuie sur les données structurées JSON-LD, des FAQ bien rédigées, des statistiques sourcées, une structure de titres claire, un fichier llms.txt et une fraîcheur régulière. Le GEO complète le SEO classique et devient critique alors que Gartner projette une baisse de 25 % du trafic organique commercial d’ici fin 2026.
### Un site statique peut-il gérer du contenu dynamique (panier, formulaire, chatbot) ?
Oui. Un site Astro reste statique pour les pages de contenu mais peut embarquer des composants interactifs (“islands”) React, Vue ou Svelte qui s’hydratent côté navigateur. Les interactions complexes (panier e-commerce, espace client, chatbot) passent par des fonctions serverless (Netlify Functions, Cloudflare Workers) ou des API externes. Cette architecture est décrite dans le [guide Jamstack](/blog/jamstack).
### Qui peut éditer le contenu d'un site Astro + MDX ?
Les éditeurs non techniques utilisent [AstroCMS](https://github.com/lonestone/astrocms), un CMS open source maintenu par Lonestone qui lit directement les fichiers MDX et commit vers Git. L’interface ressemble à celle d’un CMS classique avec un éditeur visuel MDX, un navigateur de collections, des formulaires de frontmatter auto-générés. Les éditeurs plus techniques peuvent travailler directement dans un IDE ou prompt un agent IA pour modifier le contenu.
### Combien coûte la maintenance d'un site automatisé par agents IA ?
L’hébergement Netlify ou Cloudflare Pages tourne entre 0 € (free tier) et 50 € par mois pour un site à fort trafic. Les abonnements aux agents IA commencent à 17 $ par mois et par utilisateur sur Claude Code, ce qui suffit à la plupart des équipes. Le palier supérieur à 100 $ par mois est utile pour les profils très actifs (rédaction, refonte de pages, gros volumes de commits), et le plan à 200 $ reste rarement nécessaire. Les API de data (DataForSEO, GSC) coûtent de 0 à 100 € par mois selon le volume de requêtes. Le temps humain baisse de 50 à 80 % par rapport à une maintenance manuelle, grâce aux routines d’update evergreen et de rédaction assistée.
### Comment être cité par ChatGPT, Perplexity ou Google AI Overviews ?
Pour être cité par les moteurs génératifs, le contenu doit combiner plusieurs signaux : des données structurées JSON-LD (Article, FAQPage, HowTo, Organization), une structure de titres claire (un H1, des H2/H3 logiques), des paragraphes de réponse de 40 à 60 mots, des statistiques sourcées, une FAQ explicite, un fichier llms.txt et une mise à jour régulière. Les pages qui respectent ces critères sont citées 3,2 fois plus souvent que les pages non structurées. Le template Astro Lonestone embarque ces éléments par défaut.
### Que se passe-t-il si Lonestone n'est plus disponible pour maintenir le site ?
Le site reste la propriété complète du client. Le code source, les contenus MDX, les configurations, les skills, les routines : tout vit dans un dépôt Git que le client possède. N’importe quelle équipe technique (interne ou externe) peut reprendre le site, continuer à l’exploiter et le faire évoluer. C’est une différence majeure avec les CMS propriétaires comme Webflow ou Framer, où la migration vers une autre plateforme implique une réécriture complète.
### Faut-il être une grande entreprise pour en bénéficier ?
Non. L’approche est particulièrement avantageuse pour les PME, les startups et les éditeurs logiciels qui veulent publier beaucoup de contenu avec une petite équipe. Le coût marginal d’une nouvelle page étant proche de zéro, la méthode scale sans surcoût linéaire. Les grandes entreprises en profitent aussi, notamment pour le multilingue à grande échelle et la production de landing pages programmatiques par secteur ou par persona.
Sommaire
[1 / Ce qui change pour un site web en 2026](#ce-qui-change-pour-un-site-web-en-2026) [2 / Webflow et Framer : ce qu’ils ont apporté, pourquoi ils ne suffisent plus](#webflow-et-framer--ce-quils-ont-apporté-pourquoi-ils-ne-suffisent-plus) [3 / L’architecture cible : statique, MDX, composants Astro](#larchitecture-cible--statique-mdx-composants-astro) [4 / Le pilotage par un fichier AGENTS.md](#le-pilotage-par-un-fichier-agentsmd) [5 / Les skills pour industrialiser la production](#les-skills-pour-industrialiser-la-production) [6 / Le pilotage par la data : DataForSEO, GSC, Analytics](#le-pilotage-par-la-data--dataforseo-gsc-analytics) [7 / Rédaction et mise à jour automatisées](#rédaction-et-mise-à-jour-automatisées) [8 / Le GEO pour être cité par les IA](#le-geo-pour-être-cité-par-les-ia) [9 / Les assets visuels : miniatures, illustrations, previews et screenshots automatisés](#les-assets-visuels--miniatures-illustrations-previews-et-screenshots-automatisés) [10 / L’orchestration : Claude Code routines et OpenClaw](#lorchestration--claude-code-routines-et-openclaw) [11 / Comparatif des coûts](#comparatif-des-coûts) [12 / Les sites qui tournent déjà ainsi](#les-sites-qui-tournent-déjà-ainsi) [13 / Le rôle du designer et du dirigeant dans ce nouveau monde](#le-rôle-du-designer-et-du-dirigeant-dans-ce-nouveau-monde) [14 / Par où commencer concrètement](#par-où-commencer-concrètement) [15 / À retenir](#à-retenir)
Sommaire 1 / Ce qui change pour un site web en 2026 2 / Webflow et Framer : ce qu’ils ont apporté, pourquoi ils ne suffisent plus 3 / L’architecture cible : statique, MDX, composants Astro 4 / Le pilotage par un fichier AGENTS.md 5 / Les skills pour industrialiser la production 6 / Le pilotage par la data : DataForSEO, GSC, Analytics 7 / Rédaction et mise à jour automatisées 8 / Le GEO pour être cité par les IA 9 / Les assets visuels : miniatures, illustrations, previews et screenshots automatisés 10 / L’orchestration : Claude Code routines et OpenClaw 11 / Comparatif des coûts 12 / Les sites qui tournent déjà ainsi 13 / Le rôle du designer et du dirigeant dans ce nouveau monde 14 / Par où commencer concrètement 15 / À retenir
Lonestone est une agence qui conçoit et développe des produits web et mobile innovants intégrant de l'IA.
Nos experts partagent leurs expériences sur le blog. Contactez-nous pour discuter de vos projets !
[En savoir plus sur Lonestone](/)
[Parler à un expert](/contact)
Besoin d'accompagnement ?
Nos experts sont disponibles pour discuter de votre projet.
[Parler à un expert](/contact)
## On continue la lecture ?
[Tous les articles](/blog)
[
L’approche Jamstack pour moderniser la façon de penser vos sites web
La Jamstack, un ensemble de technologies pour améliorer les performances et la scalabilité de votre site web.
](/blog/jamstack)[
Quel CMS choisir en fonction de votre site web ?
Un CMS permet de créer et gérer votre site Internet facilement. Découvrez comment choisir le CMS adapté à votre projet.
](/blog/cms-site-web)[
Le SEO technique n’est pas une option
Le SEO technique est indispensable pour assurer la visibilité de votre site ou web app. Découvrez les bonnes pratiques à connaître pour éviter de disparaître dans les résultats de recherche.
](/blog/le-seo-technique-nest-pas-une-option)
[Tous les articles](/blog)
## Nos guides
### Guide de l'IA générative
[
01\. IA, Machine Learning & Deep Learning
](/ai/deep-learning)[
02\. LLM (Large Language Model) : définition et fonctionnement
](/ai/llm)[
03\. RAG + MCP : Architecture pour agents IA
](/ai/rag-mcp)[
04\. Agents IA : définition et cas d'usage
](/ai/agents-ia)[
05\. Boostez vos logiciels avec l'intégration de l'IA
](/ai/integration-ia)[
06\. Meilleurs outils IA pour les entreprises
](/ai/outils-ia)
### Guide pour créer un SaaS IA
[
01\. Construire un SaaS IA rentable : la méthode qui fonctionne
](/creer-saas-ia/roadmap)[
02\. Comparatif LLM 2026 : quel modèle choisir pour votre SaaS ?
](/creer-saas-ia/comparatif-llm-saas)[
03\. Héberger un SaaS IA en France : performances, coûts et souveraineté
](/creer-saas-ia/heberger-ia)[
04\. Framework d’évaluation IA : pourquoi et comment le mettre en place
](/creer-saas-ia/evaluation)[
05\. MCP (Model Context Protocol) : le standard pour connecter IA et logiciels
](/creer-saas-ia/mcp)[
06\. Bien choisir entre RAG et ses alternatives : ce que personne ne vous explique vraiment
](/creer-saas-ia/rag)[
07\. Comment concevoir un copilote IA qui crée de la vraie valeur dans un SaaS
](/creer-saas-ia/copilote-ia)[
08\. POC IA : comment valider votre idée avant d’investir dans un SaaS IA
](/creer-saas-ia/poc)
### Blog de Lonestone
Retrouvez nos derniers articles sur le développement web, l'IA, le product design et les retours d'expérience de nos projets.
[Accéder au blog](/blog)
Lonestone apporte son expertise product à 200+ grands comptes, PME et startups depuis 11 ans.
Avec notre équipe senior et nos méthodes rodées, vous pouvez comptez sur une livraison rapide d'un produit robuste vraiment utile.
## Nos solutions
[
01\. Intégration IA pour éditeurs logiciels
](/solutions/integration-ia-editeurs)[
02\. Automatisation de process avec IA
](/solutions/automatisation-process-ia)[
03\. Création de SaaS pour startup
](/solutions/creation-saas)[
04\. Développement d'outils internes
](/solutions/developpement-outil-metier)[
05\. Création d'app mobile
](/solutions/creation-app-mobile)[
06\. Création de site web
](/solutions/creation-site-web)[
07\. Création de CRM sur mesure
](/solutions/crm-sur-mesure)
## On discute de votre projet ?
Échange gratuit et sans engagement, directement avec un expert du sujet. Devis sous 48h.
[Demander un devis](/contact) Prendre rdv
Contacter l'équipe
de Lonestone