Guide 2026 : Créer un site internet sur WordPress ou Webflow avec un agent IA

Créer un site web peut vite coûter cher.

Quand on passe par une agence, le budget monte rapidement. Pour un site bien construit, avec plusieurs pages, un design travaillé, une version mobile propre et une base SEO correcte, on peut facilement arriver entre 10 000 et 20 000 €.

Quand on lance son activité, ce budget n’est pas toujours possible.

On a pourtant besoin d’un site.

On veut présenter son offre.
Montrer ce que l’on fait.
Donner confiance.
Permettre aux gens de nous contacter.

Il existe aujourd’hui beaucoup d’outils qui promettent de créer un site avec l’IA en quelques minutes. On répond à quelques questions, on choisit un style et une page apparaît.

Ça dépanne.

Mais souvent, ça reste très général.

Les textes sont génériques. Les sections manquent de logique. On sent vite que le site a été généré d’un coup.

Le problème ne vient pas de l’IA.

Il vient surtout de la façon dont on l’utilise.

Demander à une IA de créer un site entier avec une seule phrase, ce n’est pas la même chose que travailler avec un agent IA connecté directement à l’outil.

C’est là que ça devient intéressant.

Aujourd’hui, on peut connecter des agents IA à presque tous les outils que l’on utilise. WordPress, Elementor, Webflow, un navigateur, un éditeur de code, une base de données, un CRM, Notion, Airtable ou Google Sheets.

L’agent ne se contente plus de vous donner une réponse dans une fenêtre de discussion.

• Il peut voir l’outil.
• Comprendre ce qui est déjà présent.
• Créer une page.
• Modifier une section.
• Changer un texte.
• Ajouter une image.
• Corriger un espacement.
• Vérifier le rendu sur mobile.

Vous lui donnez une direction, et il agit dans le vrai projet.

C’est ce que j’ai découvert avec WordPress et Elementor.

Personnellement, je n’étais pas bon sur ces outils.

Je savais ce que je voulais obtenir. Je ne savais pas toujours où cliquer. Je pouvais perdre du temps sur un réglage, une section ou un problème d’affichage mobile.

Apprendre WordPress et Elementor sérieusement demande du temps.

Combien de temps faut-il pour être vraiment à l’aise ?

Six mois ?
Un an ?

Il faut comprendre WordPress, Elementor, les pages, les réglages, les espacements, le responsive et les problèmes qui arrivent en cours de route.

Ce n’est pas impossible.

Mais c’est long.

Avec un agent IA connecté à WordPress et Elementor, j’ai pu faire des choses que je n’aurais pas su faire seul au départ. Je pouvais lui montrer une section, lui expliquer le résultat attendu et le laisser m’aider à la construire directement dans Elementor.

Je gardais la direction.

L’agent s’occupait d’une partie de l’exécution.

Puis je regardais le résultat. Je lui demandais de corriger un bouton, de déplacer un bloc, d’ajuster un titre ou de revoir la version mobile.

Après quelques corrections, le site prenait forme.

Le site sur lequel vous lisez cet article a été créé avec cette stratégie.

Ce n’est donc pas une méthode imaginée pour écrire un article. C’est celle que j’utilise réellement.

Et cette logique ne concerne pas seulement la création de sites.

Un agent IA connecté à un outil peut vous permettre de gagner une compétence en plus.

Vous ne devenez pas expert en une nuit.

Mais vous pouvez commencer à produire avec l’aide d’un agent qui connaît mieux l’outil que vous. Sur certaines tâches, il peut travailler aussi bien qu’une personne qui s’est formée pendant un an.

Il peut vous guider.
Faire les premières actions.
Vous montrer ce qui bloque.
Corriger avec vous.
Et vous aider à comprendre en travaillant.

Avant, il fallait souvent se former pendant des mois avant de pouvoir créer quelque chose de correct.

Aujourd’hui, on peut apprendre pendant que l’on construit.

Je ne dis pas ça pour enlever de la valeur aux personnes qui se sont formées pendant des années.

Leur expérience compte.

Elles voient des problèmes qu’un débutant ne voit pas et connaissent les détails qui font la différence.

Mais il faut aussi regarder ce qui se passe.

Le monde évolue vite.

Les agents IA deviennent capables d’utiliser les outils avec nous. Des tâches qui demandaient une vraie maîtrise technique deviennent accessibles à des personnes qui ont une idée claire et qui savent guider leur agent.

Quelqu’un qui ne connaissait pas Elementor peut maintenant construire une section propre.

Quelqu’un qui ne savait pas coder peut modifier un site.

Quelqu’un qui n’a jamais utilisé Webflow peut être accompagné dans la création d’une page.

Et cela va bien au-delà des sites web.

Un agent peut se connecter à vos emails, votre CRM, vos documents, vos tableaux, vos bases de données ou vos outils de gestion.

Chaque connexion vous ouvre de nouvelles possibilités.

Vous pouvez faire des choses que vous n’auriez pas su faire seul. Vous pouvez aussi avancer sur des projets que vous auriez laissés de côté par manque de compétences ou de temps.

Cela ne veut pas dire qu’il suffit de cliquer sur un bouton.

Il faut toujours savoir ce que l’on veut.

Il faut préparer la structure, les textes et les images. Puis vérifier chaque page sur ordinateur et sur téléphone.

L’agent IA peut faire beaucoup.

Mais il faut bien lui parler.

Il faut lui donner le contexte. Lui montrer la bonne page. Lui expliquer la section à créer. Lui dire ce qu’il peut modifier. Puis vérifier son travail.

C’est exactement ce que nous allons faire dans cet article.

Je vais vous montrer comment créer un site avec WordPress et Elementor, mais aussi comment appliquer cette méthode avec Webflow.

Nous allons préparer le projet.

• Choisir une direction.
• Créer les pages.
• Construire le site section par section.
• Connecter l’agent IA.
• Lui donner les bonnes instructions.
• Vérifier le résultat sur ordinateur, tablette et mobile.
• Puis corriger ce qui doit l’être.

Je vais partager les étapes que j’utilise, les prompts, les vérifications et les erreurs à éviter.

Vous pourrez reprendre la méthode directement pour votre propre projet.

Je partage tout ça parce que j’aime ce que je fais.

J’aime tester ces outils. J’aime voir jusqu’où on peut aller. Et j’aime surtout transformer une idée en quelque chose de réel.

Je ne veux pas garder cette méthode pour moi.

Je veux vous montrer ce que je fais, comment je le fais et comment vous pouvez le reproduire de votre côté.

Si cette méthode peut vous aider à créer votre site, à lancer votre projet ou à découvrir une nouvelle compétence, alors cet article aura rempli son rôle.

Vous n’avez pas besoin de tout connaître avant de commencer.

Vous avez besoin d’un projet, d’une direction et d’un agent IA bien connecté.

On va maintenant voir comment mettre tout ça en place.

Ce qui change avec les agents IA en 2026

Jusqu’à récemment, utiliser une IA voulait surtout dire ouvrir une discussion et poser une question.

On demandait un texte.
Une idée.
Un plan.
Une explication.

Puis on copiait la réponse dans notre outil.

L’IA nous aidait à réfléchir, mais elle ne faisait pas vraiment le travail avec nous.

Aujourd’hui, ça change.

On peut maintenant connecter un agent IA directement à nos outils.

• Il peut ouvrir WordPress.
• Regarder une page.
• Modifier une section dans Elementor.
• Ajouter un titre.
• Déplacer une image.
• Changer un bouton.
• Vérifier le résultat sur mobile.

L’agent ne reste plus dans une fenêtre de discussion.

Il peut agir dans le vrai projet.

C’est cette différence qui rend les possibilités très intéressantes.

Imaginons que vous vouliez créer une page d’accueil avec WordPress et Elementor.

Avec une IA classique, vous pouvez lui demander :

Quelles sections dois-je mettre sur ma page d’accueil ?

Elle va vous proposer un hero, des services, des avis, une FAQ et un bouton de contact.

C’est utile.

Mais après, c’est à vous de tout construire dans Elementor.

Vous devez créer les conteneurs.
Choisir les widgets.
Régler les tailles.
Ajouter les espacements.
Adapter la page au mobile.

Avec un agent IA connecté, vous pouvez aller plus loin.

Vous pouvez lui demander d’ouvrir la page, de créer la section et de suivre une structure précise.

Vous pouvez lui montrer une capture d’écran.

Vous pouvez lui dire :

Je veux une section avec un titre à gauche, un texte court, un bouton et une image à droite. Garde le style du reste du site et vérifie le rendu sur ordinateur et mobile.

L’agent peut ensuite construire la section dans Elementor.

Vous regardez le résultat.

Le titre est trop grand ?
Vous lui dites de le réduire.

Le bouton manque d’espace ?
Vous lui demandez de corriger le padding.

L’image est mal placée sur mobile ?
Vous lui demandez de revoir l’alignement.

Vous n’avez pas besoin de connaître le nom de chaque réglage avant de commencer.

Vous lui expliquez ce que vous voyez et ce que vous voulez obtenir.

C’est comme ça que j’ai commencé à utiliser WordPress et Elementor avec un agent IA.

Je n’étais pas bon sur ces outils.

Je pouvais comprendre le résultat que je voulais. Mais je ne savais pas toujours comment le construire.

Je pouvais perdre du temps sur un détail.

• Un conteneur qui ne voulait pas s’aligner.
• Un titre qui dépassait.
• Une image qui ne s’affichait pas comme prévu.
• Une section correcte sur ordinateur, mais cassée sur mobile.

Avec l’agent connecté à WordPress, je pouvais lui demander de regarder directement le problème.

Il pouvait voir la page.
Il pouvait tester une modification.

Puis je pouvais vérifier le résultat avec lui.

Je n’avais plus besoin d’attendre de maîtriser tout Elementor avant de créer quelque chose.

J’apprenais en même temps que je construisais.

Et c’est là que les agents IA peuvent vous apporter une compétence en plus.

Pas seulement sur WordPress.

On peut connecter un agent IA à beaucoup d’outils.

• Webflow.
• Un navigateur.
• Un éditeur de code.
• Notion.
• Airtable.
• Google Sheets.
• Un CRM.
• Une boîte email.
• Une base de données.

Selon l’outil, l’agent peut lire des informations, créer du contenu, remplir des champs, modifier des éléments ou lancer des actions.

Prenons un exemple simple.

Vous n’êtes peut-être pas très à l’aise avec les tableurs.
Mais vous avez un fichier avec vos prospects.

Vous pouvez demander à un agent connecté au fichier de nettoyer les données, organiser les colonnes et repérer les informations manquantes.

Vous ne devenez pas expert de Google Sheets en quelques minutes.

Mais vous arrivez à faire un travail que vous n’auriez peut-être pas su faire seul.
La même logique existe avec un site.

Vous n’avez pas besoin de connaître chaque bouton de WordPress avant de commencer.

Vous devez surtout savoir ce que vous voulez créer.

L’agent vous aide ensuite à utiliser l’outil.

Cela ne veut pas dire qu’il faut le laisser tout faire sans regarder.

Un agent peut se tromper.

• Il peut modifier le mauvais élément.
• Choisir un réglage qui ne vous plaît pas.
• Créer une section qui fonctionne sur ordinateur, mais pas sur téléphone.

Vous devez donc garder la main.
Vous lui donnez une tâche précise.
Vous regardez ce qu’il fait.
Vous vérifiez le résultat.

Puis vous lui demandez une correction si nécessaire.

C’est pour ça que nous allons construire le site section par section.

Nous n’allons pas lui demander de créer dix pages en une seule fois.

Nous allons commencer par une page.

Puis par une première section.

Nous allons la construire, la regarder et la corriger.

Une fois qu’elle est prête, nous passerons à la suivante.

Cette méthode permet aussi de mieux parler à l’agent.

Au lieu de lui dire :

Crée-moi un beau site moderne.

Nous allons lui donner des informations qu’il peut utiliser.

1. Le rôle de la page.
2. La cible.
3. Les textes.
4. Les couleurs.
5. Une capture d’inspiration.
6. Le rendu attendu sur mobile.
7. Les éléments qu’il ne doit pas modifier.

Plus la demande est claire, plus le résultat a des chances d’être bon.

C’est aussi important de comprendre qu’un agent IA n’a pas besoin d’avoir accès à tout.

Les mots de passe, les paiements et les informations sensibles doivent rester sous votre contrôle.

Vous pouvez vous connecter vous-même à WordPress.

Une fois la session ouverte, l’agent peut travailler sur la page sans connaître votre mot de passe.

Vous restez responsable du projet.

L’agent vous aide à l’exécuter.

C’est cette manière de travailler que nous allons utiliser dans la suite de cet article.

Avant de connecter l’agent, nous devons maintenant choisir l’outil avec lequel nous allons construire le site.

WordPress avec Elementor ou Webflow ?

Les deux permettent de créer un bon site.

Mais ils ne répondent pas exactement aux mêmes besoins.

WordPress avec Elementor ou Webflow : que choisir ?

Avant de créer votre site, il faut choisir l’outil dans lequel votre agent IA va travailler.

Dans cet article, nous allons parler de deux solutions : WordPress avec Elementor et Webflow.

Les deux permettent de créer un très bon site.

Le choix dépend surtout de votre projet, de votre façon de travailler et de ce que vous souhaitez faire après la mise en ligne.

WordPress avec Elementor

WordPress sert à gérer le site.

Vous pouvez y créer vos pages, publier des articles, ajouter des utilisateurs et installer des extensions.

Elementor vient ensuite se connecter à WordPress.

Il ajoute un éditeur visuel qui permet de construire les pages avec des conteneurs et des widgets. On peut ajouter un titre, un texte, une image ou un bouton directement sur la page. Elementor permet aussi d’adapter de nombreux réglages pour l’ordinateur, la tablette et le mobile.

Vous avez donc deux outils qui travaillent ensemble :

• WordPress gère le contenu et le fonctionnement du site ;
• Elementor permet de construire son apparence.

Cette combinaison est intéressante si vous voulez créer un site vitrine avec un blog.

WordPress a été pensé pour publier et gérer du contenu. Vous pouvez créer des catégories, organiser vos articles et faire évoluer votre site au fil du temps.

Vous pouvez également installer des plugins.

Un plugin ajoute une fonction à WordPress. Cela peut être un formulaire, un outil SEO, un système de réservation, un espace membre ou une connexion avec un autre logiciel.

C’est l’un des avantages de WordPress.

Vous pouvez partir d’un site avec trois pages, puis ajouter de nouvelles fonctions lorsque votre activité évolue.

Mais cette liberté demande aussi un peu de suivi.

Il faut choisir un hébergeur.
Il faut installer WordPress.
Il faut mettre à jour les plugins et le thème.

Il faut aussi prévoir des sauvegardes. Certains problèmes peuvent venir d’un conflit entre un plugin, un thème ou une version de WordPress.

Ce n’est pas forcément compliqué.

Il faut seulement savoir que le site ne va pas se gérer entièrement tout seul après sa publication.

Un agent IA peut vous aider dans une grande partie de ce travail.

Il peut ouvrir la page dans Elementor, ajouter une section, modifier un texte ou vérifier le rendu.

Mais les accès, les sauvegardes et les mises à jour importantes doivent rester sous votre contrôle.

Webflow

Webflow regroupe la création du site, la gestion du contenu et la publication dans le même environnement.

Vous créez vos pages sur un canvas visuel.

Vous ajoutez des sections, des blocs, des images et des textes. Vous pouvez ensuite régler les dimensions, les espacements, les positions et les styles.

Webflow permet de construire visuellement le site tout en générant sa structure HTML, CSS et JavaScript. Le projet peut ensuite être publié depuis la même plateforme.

Il n’est donc pas nécessaire de chercher un hébergeur séparé pour commencer à publier avec Webflow.

Pour utiliser votre propre nom de domaine, vous devez toutefois prendre un plan de site payant.

Webflow possède aussi son propre CMS.

Le CMS permet de créer des collections de contenu.

Vous pouvez avoir une collection pour vos articles, une autre pour vos réalisations et une autre pour les membres de votre équipe.

Chaque nouvel élément reprend ensuite le même modèle de page.

Vous pouvez donc créer un blog avec Webflow.
Vous pouvez aussi publier des études de cas ou des pages de projets.
Webflow est souvent apprécié pour le contrôle qu’il donne sur le design.

Vous travaillez avec une logique proche de celle du développement web : des sections, des blocs, des classes et des réglages de mise en page.

Vous pouvez également créer des animations déclenchées par un clic ou par le défilement de la page. Webflow propose pour cela un système visuel d’interactions et d’animations.

Cette liberté demande de comprendre quelques bases.

Il faut savoir comment les éléments sont placés.
Il faut aussi comprendre comment un style appliqué à une classe peut être utilisé sur plusieurs éléments.

Ce n’est pas du code.

Mais la logique est parfois proche du CSS.

Une fois que cette logique est comprise, on peut construire des pages très précises.

Webflow permet également de travailler le responsive à partir de plusieurs breakpoints. Le design peut être ajusté pour les grands écrans, les tablettes et les téléphones.

Comparaison entre WordPress avec Elementor et Webflow

Point comparé	WordPress avec Elementor	Webflow
Installation	Il faut un hébergement, un domaine, WordPress et Elementor.	Le projet est créé directement dans Webflow.
Création des pages	Construction visuelle avec des conteneurs et des widgets.	Construction visuelle avec des sections, des blocs et des classes.
Prise en main	L’interface d’Elementor est accessible pour créer les premières sections.	Il faut comprendre la structure des éléments et la logique des classes.
Blog	WordPress est très adapté à la publication régulière d’articles.	Le blog se construit avec les collections du CMS Webflow.
Design	Beaucoup de réglages visuels sont disponibles dans Elementor.	Webflow donne un contrôle précis sur la structure et les styles.
Animations	Possibles avec Elementor, des réglages supplémentaires ou du code.	Système d’interactions et d’animations intégré à Webflow.
Responsive	Réglages séparés pour ordinateur, tablette et mobile.	Gestion du design avec plusieurs breakpoints.
Fonctionnalités	Grand choix de plugins pour ajouter des fonctions.	Fonctions intégrées, applications et connexions externes.
Hébergement	Vous choisissez votre propre hébergeur.	L’hébergement est lié au plan Webflow choisi.
Maintenance	Plugins, thème, sauvegardes et mises à jour à surveiller.	Une partie technique est gérée par la plateforme.
Agent IA	L’agent peut travailler dans WordPress et Elementor.	L’agent peut travailler dans le Designer Webflow.
Projet adapté	Site vitrine, blog, site de contenu ou projet avec plusieurs intégrations.	Site vitrine, portfolio ou projet avec un design très travaillé.

Lequel choisir pour votre site ?

Pour un site avec beaucoup d’articles, des plugins et des connexions avec d’autres outils, je choisirais souvent WordPress avec Elementor.

Vous avez beaucoup de liberté.

Vous pouvez changer d’hébergeur, installer de nouvelles fonctions et faire évoluer le site selon vos besoins.

WordPress est aussi intéressant si vous prévoyez de travailler votre référencement avec beaucoup de contenu.

Pour un site vitrine où le design et les animations occupent une place importante, je regarderais Webflow.

L’environnement est regroupé au même endroit.

Vous construisez le site, gérez son contenu et le publiez depuis Webflow.

Le résultat peut être très propre lorsque la structure et les classes sont bien organisées.

Il n’y a donc pas un outil qui gagne dans toutes les situations.

Le bon choix dépend de ce que vous allez créer.

Vous voulez publier beaucoup d’articles et ajouter plusieurs fonctions ?

WordPress avec Elementor peut être adapté.

Vous voulez créer un site vitrine avec des animations et contrôler chaque partie du design ?

Webflow peut être adapté.

Personnellement, j’ai commencé avec WordPress et Elementor.

C’est sur ces outils que j’ai testé ma méthode avec un agent IA.

Je n’étais pas très bon sur Elementor au départ.

Mais mon agent pouvait ouvrir la page, créer les éléments et m’aider à corriger le résultat.

Cette méthode fonctionne aussi avec Webflow.

L’interface change.
Les réglages changent.

Mais la logique reste la même.

On prépare le projet.
On donne une direction à l’agent.
On construit une section.
On regarde le résultat.

Puis on corrige ce qui doit l’être.

Quel agent IA choisir pour créer son site : Codex avec GPT‑5.5 ou Claude Code avec Claude Opus 4.8 ?

Nous avons choisi l’outil qui va servir à construire le site.

Maintenant, il faut choisir l’agent IA qui va travailler avec nous.

Les deux options que je vous propose sont :

• Codex, créé par OpenAI ;
• Claude Code, créé par Anthropic.

Avant de les comparer, il faut comprendre une petite différence.

Codex et Claude Code sont les agents.

GPT‑5.5 et Claude Opus 4.8 sont les modèles qui font fonctionner ces agents.

On peut voir le modèle comme le cerveau. L’agent lui donne ensuite accès au terminal, aux fichiers, au navigateur et aux outils dont il a besoin.

Est-ce que Codex et Claude Code peuvent faire la même chose ?

Dans notre cas, oui.

Les deux peuvent nous aider à créer un site avec WordPress, Elementor ou Webflow.

Ils peuvent lire les fichiers d’un projet, modifier du code, lancer des commandes et vérifier leur travail. Codex peut être utilisé depuis son application, un terminal ou un éditeur de code. Claude Code fonctionne lui aussi dans le terminal, les éditeurs de code, l’application Claude et le navigateur.

Mais ce qui nous intéresse surtout ici, c’est leur capacité à se connecter à d’autres outils.

Codex et Claude Code prennent tous les deux en charge le MCP.

Le MCP permet de connecter un agent à un navigateur, une base de données, une documentation, Figma ou d’autres services. Une fois la connexion faite, l’agent peut lire les informations de l’outil et effectuer certaines actions directement dedans.

Codex peut également utiliser un navigateur intégré, une extension Chrome et une fonction de contrôle de l’ordinateur. Il peut voir une page, cliquer, écrire, prendre une capture et vérifier le résultat.

Claude Code peut aussi contrôler un navigateur lorsqu’on lui ajoute la bonne connexion MCP.

Dans les deux cas, nous pouvons donc demander à l’agent de :

• ouvrir WordPress ;
• accéder à Elementor ;
• créer une page ;
• ajouter une section ;
• modifier un texte ;
• déplacer une image ;
• ouvrir la prévisualisation ;
• vérifier le rendu ;
• corriger la version mobile ;
• sauvegarder la page.

L’outil ne change pas notre méthode.

On prépare la section.
On explique le résultat attendu.

L’agent construit.

On vérifie.

Puis on lui demande de corriger ce qui ne va pas.

GPT‑5.5 ou Claude Opus 4.8 ?

Au moment où j’écris cet article, GPT‑5.5 est le modèle conseillé par OpenAI pour les tâches complexes dans Codex. OpenAI le présente comme son modèle le plus fort pour le code avec agent, l’utilisation d’outils et le travail sur ordinateur.

Claude Opus 4.8 est le modèle Opus le plus avancé d’Anthropic. Il est conçu pour le raisonnement complexe, le code sur de longues tâches et les projets qui demandent beaucoup d’autonomie. Anthropic indique aussi avoir amélioré sa capacité à utiliser les outils au bon moment et à conserver le contexte pendant les longues sessions.

Voici une comparaison simple.

Point comparé	Codex avec GPT‑5.5	Claude Code avec Opus 4.8
Entreprise	OpenAI	Anthropic
Agent	Codex	Claude Code
Modèle	GPT‑5.5	Claude Opus 4.8
Travail dans les fichiers	Peut lire, créer et modifier les fichiers du projet.	Peut lire, créer et modifier les fichiers du projet.
Commandes dans le terminal	Peut lancer des commandes et vérifier leur résultat.	Peut lancer des commandes et vérifier leur résultat.
Connexion MCP	Oui	Oui
Utilisation du navigateur	Navigateur intégré, extension Chrome, MCP et contrôle de l’ordinateur selon la configuration.	Navigateur, outils et services accessibles avec les connexions MCP adaptées.
Création de sites	Très adapté au code, au frontend, aux tests et à la vérification visuelle.	Très adapté au code, au frontend et aux longues sessions de construction.
Fenêtre de contexte du modèle	Environ 1,05 million de tokens dans l’API et 400 000 dans Codex.	1 million de tokens dans les environnements principaux pris en charge.
Sortie maximale dans l’API	128 000 tokens	128 000 tokens
Niveaux de raisonnement	Aucun, faible, moyen, élevé ou très élevé selon le réglage.	Raisonnement adaptatif avec plusieurs niveaux d’effort.
Prix API standard	5 $ par million de tokens en entrée et 30 $ en sortie.	5 $ par million de tokens en entrée et 25 $ en sortie.
Pour WordPress et Elementor	Oui, avec un accès au navigateur correctement configuré.	Oui, avec un accès au navigateur correctement configuré.
Pour Webflow	Oui, avec un accès au navigateur correctement configuré.	Oui, avec un accès au navigateur correctement configuré.
Mon conseil	Très bon choix si vous utilisez déjà ChatGPT et Codex.	Très bon choix si vous utilisez déjà Claude ou la méthode Claude Code.

Les deux modèles proposent une grande fenêtre de contexte et une sortie maximale de 128 000 tokens dans leurs API. GPT‑5.5 coûte actuellement 5 $ par million de tokens en entrée et 30 $ en sortie. Claude Opus 4.8 coûte 5 $ en entrée et 25 $ en sortie. Ces prix concernent l’API et non forcément l’abonnement utilisé dans Codex ou Claude Code.

Est-ce qu’un modèle est vraiment meilleur que l’autre ?

Je ne pense pas qu’il soit utile de chercher un gagnant absolu.

Les deux sont capables de réaliser notre site.

Sur une tâche, Codex pourra donner un meilleur résultat dès la première tentative. Sur une autre, Claude Code pourra mieux suivre la structure demandée.

Le résultat dépend aussi de votre prompt, des outils connectés et des informations fournies à l’agent. Un très bon modèle avec une demande vague peut créer une mauvaise section.

Un agent bien guidé peut produire un très bon résultat avec l’un ou l’autre.

Il faut également faire attention aux chiffres publiés par les entreprises.

OpenAI présente GPT‑5.5 comme très performant sur les tâches dans le terminal et le travail sur ordinateur. Anthropic présente Opus 4.8 comme très bon sur l’utilisation du navigateur et les longues tâches avec des outils. Mais ces résultats ne reposent pas toujours sur les mêmes tests ou la même configuration. On ne peut donc pas comparer chaque chiffre directement.

Le meilleur test reste votre propre projet.

Donnez la même mission aux deux agents.

Par exemple :

Analyse cette page d’accueil. Prépare un plan pour reproduire son hero dans Elementor. Ne modifie encore rien. Explique la structure, les widgets nécessaires et les réglages responsive.

Vous pourrez voir lequel comprend le mieux votre demande.

Lequel allons-nous utiliser pour la suite ?

Dans la suite de cet article, je vais principalement vous montrer la méthode avec Claude Code.

C’est l’outil que j’ai utilisé pour construire mon propre site avec WordPress et Elementor.

Mais vous pouvez suivre les mêmes étapes avec Codex.

Vous devrez parfois changer une commande ou la manière de connecter le navigateur. Le travail demandé restera le même.

Il faudra ouvrir le bon projet.

Connecter l’agent au navigateur.

Se connecter soi-même à WordPress ou Webflow.
Puis donner à l’agent une première tâche courte.

Ne lui donnez jamais votre mot de passe.

Vous ouvrez la session vous-même. Une fois connecté, l’agent peut travailler dans la page avec les autorisations que vous lui avez données.

Que vous choisissiez Codex ou Claude Code, retenez surtout ceci :

l’agent n’a pas besoin de tout savoir sur votre projet dès la première demande.

Nous allons lui donner le contexte au fur et à mesure.

Une page.
Une section.
Un objectif.
Une vérification.
Puis une correction.

Connecter votre agent IA à Chrome pour créer votre site sur WordPress ou Webflow

Maintenant que notre agent est choisi, nous pouvons préparer tout ce dont il aura besoin avant de commencer à construire le site.

Nous avons choisi notre agent IA.

Maintenant, nous allons lui donner accès à l’outil dans lequel notre site sera construit.

Pour WordPress avec Elementor comme pour Webflow, le travail se passe dans un navigateur. Nous allons donc connecter notre agent à Google Chrome.

Une fois la connexion active, l’agent pourra voir la page ouverte, cliquer dans les menus, ajouter des éléments, modifier les réglages et vérifier le résultat.

Il ne sera plus limité à nous expliquer quoi faire.

Il pourra travailler avec nous dans la vraie interface.

Le MCP, c’est quoi ?

Pour connecter un agent IA à un outil, on utilise une méthode appelée MCP, pour Model Context Protocol.

Le MCP est un standard ouvert qui permet à une application IA de communiquer avec des outils extérieurs.

On peut le comparer à une prise universelle.

Au lieu de créer une connexion différente pour chaque agent et chaque logiciel, le MCP donne une manière commune de les relier.

Grâce à cette méthode, un agent peut recevoir des informations venant d’un outil. Il peut aussi utiliser les actions que cet outil lui autorise.

Il peut par exemple lire des fichiers, consulter une base de données, utiliser un logiciel ou agir dans un navigateur.

Dans notre cas, Chrome va devenir les yeux et les mains de l’agent.

Il pourra voir WordPress ou Webflow comme nous les voyons.

Il pourra repérer les boutons.
Lire les textes.
Ouvrir les pages.
Utiliser les menus.
Cliquer dans l’éditeur.

Nous n’allons pas créer nous-mêmes un serveur MCP.

Les applications Desktop de Claude et de Codex proposent déjà une connexion officielle à Chrome.

Claude parle d’un connecteur Claude in Chrome.

Codex utilise un plugin accompagné d’une extension Chrome.

Ce ne sont pas des serveurs MCP que nous devons installer manuellement. Mais la logique est la même : nous donnons à l’agent un outil contrôlé qui lui permet de voir et d’utiliser notre navigateur.

Pourquoi connecter l’agent à Chrome ?

Il existe parfois des connexions directes entre un agent et un logiciel.

Mais pour construire un site dans Elementor ou Webflow, le navigateur reste très utile.

L’agent doit voir le rendu réel de la page.

Il doit pouvoir ouvrir l’éditeur, sélectionner une section, regarder les espacements et passer d’une vue ordinateur à une vue mobile.

Il doit aussi voir les images, les boutons et les éventuels problèmes d’affichage.

Une connexion aux données de WordPress ne lui montrerait pas tout ce qui apparaît dans l’éditeur visuel.

Chrome permet également d’utiliser votre session déjà connectée.

Vous pouvez donc vous connecter vous-même à WordPress ou Webflow, puis laisser l’agent travailler dans cette session.

Vous ne lui donnez jamais votre mot de passe.

Ce qu’il faut préparer

Installez d’abord l’application Desktop de l’agent que vous avez choisi.

Vous aurez également besoin de Google Chrome.

Pour cette méthode, utilisez bien Chrome. L’extension Claude in Chrome n’est pas prise en charge sur les autres navigateurs basés sur Chromium.

Préparez ensuite trois éléments :

• l’adresse de connexion à WordPress ou Webflow ;
• l’adresse de la page que vous voulez modifier ;
• vos identifiants, que vous saisirez vous-même.

Pour la première connexion, gardez le mode de validation actif.

Votre agent vous demandera alors votre accord avant d’accéder à un nouveau site ou de lancer certaines actions.

Cela permet de voir ce qu’il veut faire avant de le laisser agir.

Connecter Claude Desktop à Chrome

Avec Claude, la connexion se fait grâce à l’extension Claude in Chrome.

• Ouvrez l’application Claude Desktop.
• Cliquez sur vos initiales en bas à gauche.
• Ouvrez ensuite Settings, puis allez dans Connectors.
• Cherchez Claude in Chrome dans la liste.
• Cliquez sur Configure, puis activez le connecteur.

Si l’extension n’est pas encore installée, Claude vous proposera de la télécharger. Les étapes officielles sont les suivantes :

1. ouvrir Chrome ;
2. ajouter l’extension Claude depuis le Chrome Web Store ;
3. se connecter avec son compte Claude ;
4. accepter les autorisations ;
5. épingler l’extension dans la barre de Chrome.

Une fois l’extension installée, l’icône Claude doit apparaître dans Chrome. L’extension permet à Claude de lire une page, d’ouvrir des onglets, de cliquer, d’écrire et de prendre des captures.

Revenez ensuite dans Claude Desktop.

Ouvrez une nouvelle conversation.

Dans la liste des connecteurs disponibles pour cette conversation, activez Claude in Chrome.

Cette option est désactivée par défaut dans chaque nouveau chat. Il faut donc vérifier qu’elle est bien active dans la conversation utilisée pour construire le site.

Pour votre première utilisation, choisissez le mode Ask before acting.

Claude préparera un plan et vous demandera votre accord avant de commencer.

Vous pourrez voir les sites qu’il veut ouvrir et les actions qu’il prévoit.

Je vous conseille de garder ce mode pendant toute la création du site. Il vous permet de vérifier les actions importantes avant leur exécution.

Vous pouvez maintenant lui envoyer cette demande :

Ouvre Chrome et rends-toi sur la page d’administration de mon site. Arrête-toi dès que tu arrives sur la page de connexion. Ne saisis aucun identifiant à ma place.

Claude doit alors ouvrir Chrome ou utiliser une fenêtre déjà ouverte.

Connecter Codex Desktop à Chrome

Avec Codex, la connexion se prépare depuis la partie Plugins de l’application.

Ouvrez Codex Desktop.

Allez ensuite dans Plugins.
Ajoutez le plugin Chrome.
Codex va vous guider pour installer l’extension dans Chrome et accepter les autorisations nécessaires.

Une fois l’installation terminée, ouvrez Chrome et vérifiez que l’extension Codex indique Connected.

Revenez ensuite dans Codex et créez une nouvelle conversation. OpenAI recommande de démarrer un nouveau fil après l’installation afin que la connexion soit bien prise en compte.

Vous pouvez appeler directement Chrome dans votre demande avec @Chrome :

@Chrome ouvre la page d’administration de mon site. Arrête-toi à l’écran de connexion et attends que je me connecte moi-même.

Lors du premier accès, Codex vous demandera normalement d’autoriser le site.

Vous pouvez :

• autoriser le site pour cette conversation ;
• toujours autoriser ce domaine ;
• refuser l’accès.

Pour commencer, autorisez simplement le domaine pour la conversation en cours.

Codex possède aussi un navigateur intégré.

Ce navigateur est pratique pour regarder une page publique ou tester un site qui ne demande aucune connexion.

En revanche, il ne reprend pas votre session Chrome, vos cookies ou vos comptes déjà connectés.

Pour ouvrir l’administration de WordPress ou votre projet Webflow, utilisez donc l’extension Chrome officielle, et non le navigateur intégré de Codex.

Ouvrir WordPress avec votre agent

Pour WordPress, donnez à l’agent l’adresse de votre administration.

Elle ressemble généralement à ceci :

https://votredomaine.com/wp-admin

Demandez-lui d’ouvrir cette page et de s’arrêter à l’écran de connexion.

Si WordPress vous demande votre adresse email, votre nom d’utilisateur, votre mot de passe ou un code de vérification, remplissez ces informations vous-même.

Ne les écrivez pas dans la conversation.

Ne demandez pas non plus à l’agent de les enregistrer.

Une fois la connexion terminée, vous devez arriver sur le tableau de bord WordPress.

Dites alors à l’agent :

La connexion est terminée. Confirme que tu vois le tableau de bord WordPress. Ne modifie encore rien.

S’il peut identifier le menu WordPress et confirmer qu’il voit le tableau de bord, la connexion à Chrome fonctionne.

Nous pouvons ensuite ouvrir la page à construire.

Dans WordPress, allez dans Pages.

Trouvez la page concernée, puis cliquez sur Modifier avec Elementor.

Vous pouvez le faire vous-même ou demander à l’agent de le faire. Elementor confirme que l’accès à une page se fait depuis le menu Pages de WordPress, puis avec l’option Edit with Elementor.

Une fois l’éditeur ouvert, copiez son adresse exacte.

Cette adresse contient normalement l’identifiant de la page.

Donnez cette adresse à votre agent afin qu’il travaille directement sur la bonne page.

Vous pouvez lui écrire :

Ouvre cette page dans Elementor : [URL DE L’ÉDITEUR]. Confirme que tu vois le canvas, le panneau Elementor et la page à modifier. Ne construis rien pour le moment.

L’éditeur Elementor contient notamment un panneau, une barre supérieure et le canvas sur lequel la page est construite.

Quand l’agent confirme qu’il voit ces éléments, WordPress et Elementor sont prêts.

Ouvrir Webflow avec votre agent

La méthode est presque la même avec Webflow.

Demandez à l’agent d’ouvrir le tableau de bord Webflow.

S’il affiche une page de connexion, reprenez la main.

Saisissez vous-même votre adresse email, votre mot de passe et votre code de vérification.

Une fois connecté, ouvrez le bon projet.

Depuis le tableau de bord, il suffit normalement de passer sur la miniature du site et de choisir Open in Webflow. Le site s’ouvre alors dans l’espace de construction.

Vous pouvez aussi ouvrir le projet vous-même, puis copier son adresse et la transmettre à l’agent.

Envoyez ensuite cette demande :

Confirme que tu vois le projet Webflow, le canvas et les panneaux de construction. Identifie la page actuellement ouverte, mais ne modifie encore aucun élément.

L’agent doit pouvoir vous donner le nom du projet et décrire la page affichée.

S’il ne voit que la page publique du site, dites-lui de revenir au tableau de bord Webflow et d’ouvrir le projet dans l’espace de construction.

Vérifiez également que votre compte possède les droits nécessaires pour modifier le site. Dans Webflow, les outils disponibles dépendent du rôle attribué au membre du projet.

Faire un dernier test avant de commencer

Nous n’avons pas encore besoin de demander à l’agent de créer une section.

Le premier test doit seulement vérifier quatre choses :

1. l’agent peut ouvrir Chrome ;
2. il peut accéder au bon site ;
3. il voit l’éditeur WordPress, Elementor ou Webflow ;
4. il peut lire la page sans se tromper de projet.

Envoyez-lui ce dernier message :

Fais uniquement un contrôle de connexion. Donne-moi le nom du site, le nom de la page ouverte, l’outil utilisé et confirme que tu peux voir l’éditeur. Ne modifie rien et ne sauvegarde rien.

Comparez sa réponse avec ce qui est affiché devant vous.

Le nom du site est correct.
La bonne page est ouverte.
L’agent voit l’éditeur.

Il comprend s’il travaille dans WordPress, Elementor ou Webflow.

À ce moment-là, la connexion fonctionne.

Garder vos accès sous votre contrôle

La connexion à Chrome donne beaucoup de possibilités à l’agent.

Il faut donc lui donner des demandes précises.

N’ouvrez pas votre banque, votre gestionnaire de mots de passe ou des documents sensibles dans la même session.

Autorisez uniquement les sites utiles au projet.

Pour WordPress et Webflow, vous gérez vous-même :

• la connexion ;
• les mots de passe ;
• les paiements ;
• les codes de vérification ;
• les réglages de sécurité.

L’agent peut construire le site.

Vous gardez le contrôle du compte.

À ce stade, votre agent peut voir l’éditeur et travailler dans votre projet.

La connexion est terminée.

Comment partir d’un site d’inspiration pour créer vos sections avec l’IA

Maintenant que notre agent IA est connecté à Chrome, nous pouvons commencer à travailler sur le site.

La méthode que j’utilise est assez directe.

Je ne demande pas à l’agent de créer tout le site en une seule fois.

Je travaille section par section.

Je commence par chercher une section qui me plaît sur un autre site. Cela peut être un haut de page, une présentation des services, une FAQ, une section avec des témoignages ou un appel à l’action.

Je ne cherche pas forcément un site qui fait la même chose que moi.

Je regarde surtout la structure.

Comment le titre est placé.
Où se trouve l’image.
Comment les cartes sont organisées.
Quels espaces sont utilisés.
Comment la section s’adapte au mobile.

Une fois que j’ai trouvé une section qui me convient, je prends une capture d’écran.

La capture aide l’agent à comprendre ce que je veux obtenir.

Une URL seule ne suffit pas toujours. Le site peut contenir beaucoup de pages et beaucoup de sections. L’agent doit savoir exactement quelle partie analyser.

Je cadre donc uniquement la section qui m’intéresse.

La capture doit montrer le début et la fin de la section. Elle doit aussi laisser apparaître les espaces autour des éléments.

Je peux ensuite envoyer cette capture à mon agent et lui donner l’adresse du site source.

Pourquoi donner aussi l’URL du site ?

La capture montre le résultat visuel.

Mais elle ne montre pas tout.

Elle ne permet pas de connaître précisément :

• la taille des textes ;
• les couleurs exactes ;
• les marges ;
• les espacements internes ;
• les ombres ;
• les arrondis ;
• la largeur des conteneurs ;
• les animations ;
• les effets au passage de la souris ;
• le comportement de la section sur mobile.

Avec l’URL, l’agent peut ouvrir le site source et analyser sa structure.

Il peut regarder le HTML, qui correspond à l’organisation des éléments présents dans la page.

Il peut aussi analyser le CSS, qui gère leur apparence : les tailles, les couleurs, les positions, les espacements et les effets.

La capture lui montre ce que nous voulons reproduire.

L’analyse du HTML et du CSS lui explique comment la section a été construite.

Nous ne lui demandons donc pas de deviner le design à partir d’une image.

Nous lui donnons les moyens de comprendre la section avant de commencer.

Préparer trois onglets dans Chrome

Pour travailler dans de bonnes conditions, je prépare trois onglets.

Le premier onglet contient le site source.

C’est le site sur lequel se trouve la section qui nous sert d’inspiration.

Le deuxième onglet contient l’éditeur de notre site.

Pour WordPress, il s’agit de la page ouverte dans Elementor.

Le troisième onglet contient la prévisualisation de notre page.

Cette page permet de voir le résultat réel, sans les panneaux de l’éditeur.

Nous avons donc :

1. la source à analyser ;
2. la page à modifier ;
3. le résultat à vérifier.

Cette organisation aide l’agent à ne pas se tromper de page.

Je lui donne ensuite les trois URL directement dans mon prompt.

Pour Elementor, l’URL de l’éditeur contient généralement l’identifiant de la page. Il faut donc copier l’adresse complète.

La prévisualisation doit également pointer vers la bonne page.

Avant d’envoyer le prompt, je vérifie une dernière fois que les trois onglets sont ouverts et que je suis bien connecté à WordPress.

Construire une seule section à la fois

Il peut être tentant de montrer tout un site à l’agent et de lui demander de tout refaire.

Je vous déconseille de commencer comme ça.

Plus la mission est grande, plus l’agent doit prendre de décisions tout seul.

Il peut choisir une mauvaise structure, oublier certains détails ou créer une page difficile à modifier par la suite.

Avec une seule section, le travail est beaucoup plus facile à contrôler.

Nous pouvons regarder le résultat.

Voir ce qui fonctionne.

Puis demander une correction précise.

Par exemple :

Le bouton est trop haut. Réduis son espacement interne et vérifie qu’il reste lisible sur mobile.

Ou :

Le titre prend trop de place sur tablette. Réduis sa taille uniquement pour ce format.

Une fois la section validée, nous pouvons passer à la suivante en gardant la même méthode.

Demander un plan avant la construction

Je ne demande pas à l’agent de commencer à cliquer tout de suite.

Je lui demande d’abord d’analyser la section et de préparer un plan.

Il doit comprendre :

• quel est le conteneur principal ;
• combien de blocs sont présents ;
• quels widgets utiliser ;
• comment les éléments sont alignés ;
• quelles images sont nécessaires ;
• quels effets doivent être reproduits ;
• comment la section évolue selon la taille de l’écran.

Cette étape permet de repérer les problèmes avant de modifier notre page.

Si la structure proposée ne correspond pas à ce que nous voulons, nous pouvons la corriger immédiatement.

C’est beaucoup plus facile que de reconstruire toute la section après coup.

Utiliser les éléments natifs de l’outil

Sur Elementor, je demande à l’agent d’utiliser les widgets natifs.

• Un titre doit être créé avec un widget de titre.
• Un paragraphe avec un éditeur de texte.
• Une image avec un widget image.
• Un bouton avec un widget bouton.

Cette règle est importante.

Si l’agent ajoute toute la section dans un gros bloc de code HTML, le résultat peut être joli, mais il devient difficile à modifier dans Elementor.

Je veux pouvoir revenir plus tard, cliquer sur un texte et le changer moi-même.

Je veux aussi pouvoir remplacer une image ou ajuster un espace sans devoir toucher au code.

Le CSS personnalisé reste possible lorsqu’un effet ne peut pas être réalisé autrement. Mais l’agent doit me prévenir avant de l’utiliser.

Pour Webflow, la logique est la même.

On utilise les sections, les divs, les textes, les images, les boutons et les classes de Webflow. On évite de placer toute la section dans un bloc de code externe.

Vérifier le résultat sur trois écrans

Une section n’est pas terminée simplement parce qu’elle ressemble à la source sur un ordinateur.

Elle doit aussi fonctionner sur une tablette et un téléphone.

Dans mon prompt, je donne donc trois largeurs précises :

• 1440 pixels pour l’ordinateur ;
• 768 pixels pour la tablette ;
• 390 pixels pour le mobile.

L’agent doit analyser la source sur ces trois formats.

Il doit ensuite construire la section et vérifier notre résultat sur les mêmes tailles.

Il peut ainsi voir si un titre dépasse, si une image est coupée, si les cartes sont trop serrées ou si un bouton devient difficile à lire.

Après cette comparaison, il liste les écarts et les corrige.

C’est cette boucle qui permet d’obtenir un résultat propre :

analyser, construire, regarder, corriger et vérifier à nouveau.

Le prompt que j’utilise

Vous devez remplacer les éléments entre crochets par vos propres informations.

PROMPT TECHNIQUE — RECONSTRUCTION PIXEL-PERFECT D’UNE SECTION D’UN SITE SOURCE VERS ELEMENTOR

CONTEXTE

Trois onglets Chrome sont ouverts :

• SOURCE : [URL_SOURCE]
• SECTION CIBLÉE : [NOM_SECTION]
• ÉDITEUR : [URL_ELEMENTOR]
• PRÉVISUALISATION : [URL_PREVIEW]

Je joins également une capture d’écran précise de la section à reproduire.

OBJECTIF

Reproduis la section [NOM_SECTION] dans Elementor avec une fidélité visuelle pixel-perfect sur :

• ordinateur : 1440 px ;
• tablette : 768 px ;
• mobile : 390 px.

Reprends la structure, la typographie, les espacements, les couleurs, les images, les effets au survol, les animations et le comportement responsive.

Adapte les textes et les images à mon propre projet lorsque je te fournis le contenu.

CONTRAINTES

• Utilise uniquement les widgets natifs d’Elementor : Container, Heading, Text Editor, Button, Image, Icon, Icon Box, Divider, Tabs, Accordion et Form si nécessaire.
• N’utilise pas de widget HTML.
• N’utilise pas de shortcode.
• N’installe aucun plugin tiers sans mon accord.
• Utilise du CSS personnalisé uniquement lorsqu’un effet est impossible avec Elementor.
• Préviens-moi avant d’ajouter du CSS personnalisé.
• Toutes les images nécessaires à la composition doivent être présentes dans la section finale.
• Ne copie pas les textes, le logo ou l’identité de la source.
• Utilise la source uniquement pour comprendre la structure et le rendu visuel.
• La section finale doit rester entièrement modifiable dans Elementor.

ÉTAPE 1 — ANALYSE DE LA SOURCE

Ouvre l’URL source et localise le conteneur principal de la section ciblée.

Pour chaque élément, analyse :

• le texte ;
• la balise HTML ;
• les classes ;
• la position ;
• les dimensions ;
• les styles calculés ;
• les couleurs ;
• les polices ;
• les tailles de texte ;
• les hauteurs de ligne ;
• les paddings ;
• les marges ;
• les gaps ;
• les bordures ;
• les arrondis ;
• les ombres ;
• les transformations ;
• les animations ;
• les pseudo-éléments.

Effectue l’analyse en 1440 px, 768 px et 390 px.

Liste également toutes les images avec :

• leur rôle dans la section ;
• leur URL ;
• leurs dimensions ;
• leur format ;
• leur texte alternatif ;
• leur comportement responsive.

ÉTAPE 2 — DÉTECTION DES EFFETS

Teste les éléments interactifs de la section :

• effets au survol ;
• transitions ;
• animations automatiques ;
• effets au défilement ;
• éléments sticky ;
• accordéons ;
• onglets ;
• carrousels ;
• changements d’état.

Pour chaque effet, indique comment le reproduire avec Elementor.

Privilégie toujours une solution native.

Si une approximation est nécessaire, explique-la avant de construire.

ÉTAPE 3 — PLAN D’IMPLÉMENTATION

Avant de modifier Elementor, présente-moi un plan court avec :

• le conteneur principal ;
• les conteneurs enfants ;
• les widgets utilisés ;
• l’ordre des éléments ;
• les réglages responsive ;
• les images nécessaires ;
• les effets à reproduire ;
• les éventuelles limites techniques.

Si une information est incertaine, pose une question courte.

N’invente pas une décision importante.

ÉTAPE 4 — CONSTRUCTION DANS ELEMENTOR

Après validation du plan, ouvre l’URL de l’éditeur.

Construis la section avec les conteneurs et les widgets natifs d’Elementor.

Garde une structure claire et facile à modifier.

Sauvegarde après chaque étape importante, mais pas après chaque petite modification.

Ne modifie aucune autre section de la page.

ÉTAPE 5 — VÉRIFICATION

Ouvre ou recharge l’URL de prévisualisation.

Compare la source et notre résultat sur :

• ordinateur : 1440 px ;
• tablette : 768 px ;
• mobile : 390 px.

Vérifie notamment :

• la largeur de la section ;
• les alignements ;
• les espacements ;
• les tailles de texte ;
• les images ;
• les boutons ;
• les effets ;
• la hauteur de la section ;
• les éventuels débordements.

Liste les écarts visibles.

Corrige-les, recharge la prévisualisation, puis vérifie à nouveau.

Continue jusqu’à obtenir une version propre ou jusqu’à rencontrer un blocage précis.

GO

Commence par analyser la section source.

Ne modifie pas Elementor avant de m’avoir présenté ton plan.

À la fin, donne-moi un compte rendu court avec :

• ce qui a été construit ;
• ce qui a été adapté ;
• les vérifications réalisées ;
• les éventuelles différences restantes.

Ce prompt est long parce qu’il donne une méthode complète à l’agent.

Il ne lui dit pas seulement : « reproduis cette section ».

Il lui explique quoi regarder, comment construire et comment vérifier son travail.

Vous pouvez garder ce prompt dans un document et le réutiliser pour chaque nouvelle section.

Il suffit de changer :

• l’URL source ;
• le nom de la section ;
• l’URL Elementor ;
• l’URL de prévisualisation ;
• la capture d’écran ;
• les textes de votre projet.

Pour Webflow, vous pouvez reprendre la même structure.

Il faut simplement remplacer les contraintes Elementor par les éléments natifs de Webflow : sections, divs, classes, textes, images, boutons et composants.

Une fois la première section terminée, vous n’avez pas besoin de réécrire toute votre méthode.

Vous pouvez envoyer une demande plus courte :

Voici la prochaine section. Reprends la même méthode : analyse de la source, plan, construction, vérification sur ordinateur, tablette et mobile, puis correction des écarts.

Maintenant que la première section est créée, vous pouvez continuer avec votre agent IA

Une fois votre première section terminée, vous avez déjà fait le plus important.

Votre agent connaît votre site.

Il sait quelle page modifier.
Il voit l’éditeur.
Il connaît le site d’inspiration.
Il comprend la méthode de travail.
Il sait aussi qu’il doit vérifier le résultat sur ordinateur, tablette et mobile.

Vous n’avez donc pas besoin de lui renvoyer le grand prompt à chaque petite modification.
Vous pouvez rester dans la même conversation et lui donner des demandes plus courtes.

C’est à partir de ce moment que le travail devient vraiment intéressant.

Vous pouvez changer les textes, remplacer les images, modifier les couleurs, corriger les espacements ou ajouter une nouvelle section.

Vous lui expliquez ce que vous voulez.

Il ouvre la page, effectue la modification et vérifie le résultat avec vous.

La méthode reste toujours la même : une demande précise, une modification, une vérification puis une sauvegarde.

Changer les textes de votre section

La section reproduite depuis un autre site vous sert surtout de base visuelle.

Il ne faut pas garder les textes du site source.

Votre site doit parler de votre activité, de votre offre et de vos clients.

Vous pouvez donc envoyer vos nouveaux textes directement à l’agent.

Indiquez-lui la section concernée et le texte à remplacer.

Dans la section hero de la page d’accueil, remplace le titre actuel par :

[VOTRE NOUVEAU TITRE]

Remplace le paragraphe par :

[VOTRE NOUVEAU PARAGRAPHE]

Garde le même design, les mêmes espacements et la même structure.
Vérifie que les nouveaux textes restent lisibles sur ordinateur, tablette et mobile.
Sauvegarde ensuite la page.

Vous n’avez pas besoin d’utiliser les bons termes techniques.

Vous pouvez simplement lui dire ce que vous voulez voir.

Par exemple :

Le titre prend trop de place depuis que nous avons changé le texte. Réduis légèrement sa taille sur ordinateur et adapte-la sur tablette et mobile. Ne change pas la taille des autres titres du site.

L’agent peut regarder le problème directement dans la page.

Il peut tester une nouvelle taille, ouvrir la prévisualisation et vérifier si le titre reste bien placé.

Vous pouvez aussi lui demander de vous aider à écrire les textes.

Donnez-lui votre cible, votre offre et le résultat proposé.

Réécris les textes de cette section pour mon activité.

Mon entreprise : [VOTRE ACTIVITÉ]
Ma cible : [VOTRE CIBLE]
Mon offre : [VOTRE OFFRE]
Le résultat recherché : [VOTRE RÉSULTAT]

Garde le même nombre de blocs et une longueur proche des textes actuels.
Utilise des phrases simples.
Ne modifie pas encore la page. Présente-moi d’abord les nouveaux textes.

Vous pouvez lire sa proposition, corriger quelques phrases puis lui demander de les ajouter dans le site.

Modifier les couleurs

Vous pouvez aussi changer les couleurs sans ouvrir chaque réglage vous-même.

Si vous connaissez déjà les couleurs de votre identité, donnez directement leurs codes à l’agent.

Dans cette section, remplace le vert actuel par #25D366.
Remplace le fond gris par #F7F7F7.
Garde le texte principal en noir.

Applique ces couleurs uniquement à cette section.
Vérifie le contraste du texte et du bouton.
Contrôle ensuite le résultat sur ordinateur et mobile.

Précisez toujours si la couleur doit être modifiée dans une seule section ou dans tout le site.

Une couleur appliquée à une classe globale dans Webflow ou à un style global dans Elementor peut changer plusieurs pages.

Si vous souhaitez modifier toute l’identité visuelle, dites-le clairement.

Mets à jour les couleurs principales de tout le site :

Couleur principale : [CODE COULEUR]
Couleur secondaire : [CODE COULEUR]
Fond clair : [CODE COULEUR]
Texte principal : [CODE COULEUR]

Commence par identifier les styles globaux utilisés dans Elementor.
Présente-moi les éléments qui seront modifiés avant d’appliquer les changements.

Cette dernière phrase est importante.

Elle permet de voir ce que l’agent prévoit de modifier avant qu’il touche à toutes les pages.

Remplacer une image

Pour changer une image, vous pouvez l’ajouter dans la médiathèque WordPress ou dans les assets Webflow.

Vous pouvez aussi envoyer le fichier à votre agent s’il peut y accéder.

Indiquez-lui ensuite exactement quelle image remplacer.

Dans la section services de la page d’accueil, remplace l’image située à droite par l’image [NOM DU FICHIER] présente dans la médiathèque.

Garde les mêmes dimensions visuelles.
Ne déforme pas l’image.
Utilise un recadrage adapté si nécessaire.
Vérifie son affichage sur ordinateur, tablette et mobile.

L’image que vous ajoutez n’aura pas toujours le même format que celle du site source.

Elle peut être plus large, plus haute ou avoir un fond différent.

L’agent doit donc vérifier le rendu après le remplacement.

Vous pouvez aussi lui demander de corriger uniquement le mobile.

L’image est bien placée sur ordinateur, mais elle est trop grande sur mobile.
Réduis sa largeur uniquement sur mobile et centre-la.
Ne change pas le rendu sur ordinateur et tablette.

L’avantage est que vous décrivez simplement ce que vous voyez.

L’agent trouve ensuite le réglage concerné.

Corriger un bouton, un espace ou un détail

Une fois la section construite, vous allez sûrement remarquer quelques détails.

• Un bouton trop petit.
• Un titre trop proche du texte.
• Une image mal alignée.
• Une section trop haute.
• Un espace trop grand sur mobile.

Ne demandez pas à l’agent d’améliorer toute la page.

Montrez-lui le problème précis.

Dans le hero, le bouton principal est trop étroit.
Augmente son espace intérieur horizontal.
Garde la même hauteur et le même arrondi.
Vérifie que le texte reste sur une seule ligne sur mobile.

Pour un problème d’espacement :

Ajoute un peu plus d’espace entre le titre et le paragraphe dans la section FAQ.
Ne change pas l’espace entre les questions.
Vérifie le résultat dans la prévisualisation avant de sauvegarder.

Pour un problème d’alignement :

Sur tablette, les trois cartes de services ne sont pas bien alignées.
Identifie la cause et corrige uniquement la vue tablette.
Vérifie ensuite que la correction n’a pas modifié le rendu sur ordinateur et mobile.

Une demande précise évite que l’agent modifie des éléments qui étaient déjà corrects.

Ajouter une nouvelle section

Quand votre première section est validée, vous pouvez en chercher une autre.

Vous reprenez exactement le même processus.
Vous trouvez une section qui vous plaît.
Vous prenez une capture.
Vous ouvrez le site source.

Puis vous indiquez à l’agent où cette nouvelle section doit être ajoutée.

Voici la prochaine section à reproduire.

Source : [URL DU SITE SOURCE]
Section : [NOM DE LA SECTION]
Éditeur : [URL DE VOTRE ÉDITEUR]
Prévisualisation : [URL DE VOTRE PAGE]

Je joins une capture précise de la section.

Ajoute-la sous la section services de ma page d’accueil.
Reprends la même méthode que précédemment : analyse de la source, plan, construction avec les éléments natifs, vérification sur ordinateur, tablette et mobile, puis correction des écarts.

Adapte les textes et les images à mon projet.
Ne modifie pas les sections déjà validées.

Vous pouvez reproduire cette boucle autant de fois que nécessaire.

1. Le hero.
2. Les services.
3. Les témoignages.
4. La méthode.
5. La FAQ.
6. Le dernier appel à l’action.

Chaque section est traitée séparément.

Votre page se construit au fur et à mesure.

Continuez à lui parler comme à une personne qui travaille avec vous

Vous n’avez pas besoin de maîtriser tout le vocabulaire de WordPress, Elementor ou Webflow.

Vous pouvez dire :

Le texte est trop proche de l’image.

Ou :

Cette partie prend trop de place sur téléphone.

Ou encore :

Je préfère que les cartes soient les unes sous les autres sur tablette.

Votre agent peut regarder l’écran et comprendre ce que vous lui montrez.

Votre rôle est de lui donner une direction.

Puis de regarder son travail.

À partir d’une première section, vous pouvez créer toute la page d’accueil.

À partir de la page d’accueil, vous pouvez créer le reste du site.

Vous pouvez changer une phrase, une couleur, une image ou toute une page sans devoir connaître chaque réglage avant de commencer.

C’est là que cette méthode prend tout son sens.

Vous ne demandez pas à l’IA de vous livrer un site au hasard.

Vous construisez le site avec lui.

Une section après l’autre.

Avant de publier votre site : faites un dernier tour avec votre agent IA

Votre site commence à prendre forme.

• Les pages sont créées.
• Les textes sont en place.
• Les images ont été ajoutées.
• Le menu fonctionne.
• Le site est agréable à regarder.

À ce moment-là, on a souvent envie de cliquer directement sur Publier.

Mais avant, je vous conseille de faire une dernière vérification avec votre agent IA.

Le but n’est pas de modifier tout le site une nouvelle fois.

Le but est de repérer les petits problèmes que nous n’avons pas vus pendant la création.

• Un lien qui ne fonctionne pas.
• Une ancienne image encore présente.
• Un bouton qui ne mène nulle part.
• Un titre trop grand sur mobile.
• Un formulaire qui n’envoie pas les messages.

Ces détails peuvent sembler petits.

Mais une fois le site en ligne, ce sont eux que les visiteurs vont rencontrer.

Nous allons donc demander à notre agent de parcourir le site comme une personne qui le découvre pour la première fois.

Commencez par vérifier toutes les pages

Ouvrez les pages principales du site.

• La page d’accueil.
• Les pages de services.
• La page À propos.
• La page Contact.
• Le blog, si vous en avez un.

Les mentions légales et la politique de confidentialité.

Demandez à l’agent de vérifier que chaque page existe et qu’elle s’ouvre correctement.

Il doit aussi regarder si certaines pages sont encore vides ou incomplètes.

Parcours toutes les pages visibles dans le menu de mon site.

Pour chaque page, vérifie :

• qu’elle s’ouvre correctement ;
• que son contenu est terminé ;
• qu’aucune section vide n’est présente ;
• qu’aucun texte temporaire n’est encore visible ;
• que les images s’affichent correctement.

Donne-moi d’abord la liste des problèmes trouvés.
Ne modifie rien avant mon accord.

Cette première vérification permet de voir rapidement si une page a été oubliée.

Votre agent peut aussi repérer des textes comme :

Lorem ipsum.
Texte à remplacer.
Ajouter une image ici.

Ou encore une ancienne phrase récupérée depuis le site d’inspiration.

Retirez tout ce qui vient encore du site source

Pendant la création, nous avons utilisé d’autres sites comme inspiration.

Nous avons analysé leurs sections, leurs espacements et leur structure.

Mais notre site final doit avoir sa propre identité.

Il ne doit pas rester :

• le nom d’une autre entreprise ;
• un ancien logo ;
• une image récupérée depuis le site source ;
• un bouton avec le mauvais texte ;
• un lien qui mène vers le site d’origine ;
• un avis client qui ne nous appartient pas ;
• un faux chiffre ajouté pour remplir une section.

Demandez à l’agent de rechercher ces éléments sur toutes les pages.

Vérifie que mon site ne contient plus aucun élément appartenant au site d’inspiration.

Contrôle les textes, les logos, les images, les liens, les noms d’entreprises, les témoignages et les chiffres.

Signale-moi chaque élément qui semble encore venir de la source.
Ne le remplace pas sans me demander quoi mettre à la place.

C’est une étape importante.

Nous pouvons reprendre une organisation visuelle.

Mais le contenu doit correspondre à notre propre projet.

Vérifiez les textes une dernière fois

Relisez chaque page.

Les textes doivent être clairs. ils doivent expliquer ce que vous faites sans obliger la personne à chercher pendant plusieurs minutes.

Regardez surtout le haut de la page d’accueil.

En arrivant sur le site, une personne doit comprendre :

• ce que vous proposez ;
• à qui vous vous adressez ;
• ce qu’elle peut faire ensuite.

Votre agent peut vérifier les fautes, les répétitions et les phrases trop longues.

Mais demandez-lui de garder votre façon de parler.

Relis tous les textes de mon site.

Corrige uniquement les fautes d’orthographe, les mots répétés et les phrases difficiles à comprendre.

Garde mon ton naturel.
N’ajoute pas de mots commerciaux.
Ne rallonge pas les textes.

Présente-moi les changements proposés avant de les appliquer.

Vous pouvez aussi lui demander de vérifier la cohérence des boutons.

Par exemple, évitez d’avoir :

• Découvrir.
• En savoir plus.
• Commencer maintenant.
• Réserver.
• Nous contacter.

Si tous ces boutons mènent au même endroit, choisissez un texte principal et gardez-le sur tout le site.

Cela aide le visiteur à savoir ce qu’il doit faire.

Testez chaque bouton et chaque lien

Un site peut être très beau et perdre toute son utilité à cause d’un mauvais lien.

Cliquez sur tout.

• Le logo.
• Le menu.
• Les boutons.
• Les liens dans le footer.
• Les réseaux sociaux.
• Les adresses email.
• Les numéros de téléphone.
• Les liens vers les pages légales.

Demandez aussi à l’agent de le faire.

Teste tous les liens présents sur le site.

Vérifie le menu principal, le logo, les boutons, le footer, les liens internes, les liens externes, les adresses email et les numéros de téléphone.

Pour chaque problème, indique :

• la page concernée ;
• le texte du lien ;
• l’adresse actuelle ;
• l’adresse attendue si tu peux l’identifier.

Ne remplace aucun lien incertain sans me demander.

Faites attention aux boutons copiés depuis une section d’inspiration.

Ils peuvent encore pointer vers une ancienne page ou vers #.

Un lien # peut donner l’impression que le bouton fonctionne, mais il ne mène nulle part.

Vérifiez le site sur ordinateur, tablette et mobile

Nous avons déjà vérifié chaque section pendant la création. Mais il faut maintenant regarder les pages complètes. Une section peut être correcte seule et créer un problème lorsqu’elle est placée avec les autres.

Par exemple, deux sections peuvent avoir trop d’espace entre elles.

Un menu peut recouvrir le titre.
Une image peut créer un défilement horizontal.
Un bouton peut sortir de l’écran.

Demandez à l’agent de vérifier les trois formats que nous avons utilisés pendant tout le projet :

• 1440 pixels pour l’ordinateur ;
• 768 pixels pour la tablette ;
• 390 pixels pour le mobile.

Fais un audit responsive complet de toutes les pages du site.

Vérifie le rendu en :

• 1440 px ;
• 768 px ;
• 390 px.

Recherche les textes qui dépassent, les images coupées, les boutons trop petits, les espaces trop grands, les cartes mal alignées, les formulaires difficiles à utiliser et les défilements horizontaux.

Commence par me donner la liste des problèmes classés par page et par priorité.

Regardez aussi le site vous-même sur votre téléphone.

Ne vous contentez pas de réduire la fenêtre de votre ordinateur.

Ouvrez le site sur un vrai téléphone.

Faites défiler les pages.

Cliquez sur le menu.

Appuyez sur les boutons.

Remplissez le formulaire.

L’agent peut vous aider à trouver les problèmes.

Mais la dernière impression doit venir de vous.

Testez vraiment le formulaire de contact

Voir un formulaire à l’écran ne veut pas dire qu’il fonctionne.

Remplissez-le.
Utilisez une vraie adresse email.
Envoyez un message.
Vérifiez ensuite votre boîte de réception.

Regardez aussi les courriers indésirables.

Le message doit arriver à la bonne adresse.

Vous devez également vérifier ce que voit le visiteur après l’envoi.

Est-ce qu’un message de confirmation apparaît ?
Est-ce que la page reste bloquée ?
Est-ce que le bouton fonctionne ?

Demandez à l’agent de vérifier la partie visuelle.

Vérifie le formulaire de contact sur ordinateur et mobile.

Contrôle les champs, les textes, les erreurs, le bouton d’envoi et le message de confirmation.

Ne saisis aucune information sensible.
Laisse-moi faire l’envoi réel du formulaire.

L’envoi doit rester sous votre contrôle.

C’est vous qui vérifiez que le message arrive bien.

Regardez le menu et le footer

Le menu doit aider la personne à circuler sur le site.

Il ne doit pas contenir quinze liens.
Gardez les pages importantes.

Vérifiez aussi le menu mobile.

Le bouton hamburger doit s’ouvrir.
Les liens doivent être lisibles.
Le menu doit se refermer après un clic.

Dans le footer, vérifiez :

• les coordonnées ;
• les pages légales ;
• les liens vers les réseaux sociaux ;
• l’année affichée ;
• le nom de l’entreprise ;
• le logo.

Vérifie la navigation globale du site.

Teste le menu sur ordinateur, tablette et mobile.
Contrôle également tous les liens du footer.

Signale les liens cassés, les pages manquantes et les éléments difficiles à utiliser sur téléphone.

Faites une vérification SEO

Nous ne cherchons pas à faire un audit SEO complet dans cette partie.

Nous voulons seulement éviter les erreurs visibles. Chaque page doit avoir un titre principal. Ce titre doit expliquer le sujet de la page. Les images importantes doivent avoir un texte alternatif. Les adresses des pages doivent rester lisibles.

Par exemple :

monsite.fr/creation-site-wordpress

est plus clair que :

monsite.fr/page-id-4587

Vous pouvez demander à l’agent de vérifier :

• le H1 de chaque page ;
• les titres H2 et H3 ;
• le titre SEO ;
• la description ;
• l’URL ;
• les textes alternatifs des images ;
• les liens entre les pages.

Fais une vérification SEO de base sur toutes les pages.

Contrôle le H1, les H2, les URL, les titres SEO, les descriptions et les textes alternatifs des images.

Ne réécris pas tout le contenu.
Signale uniquement les éléments absents, dupliqués ou mal placés.

Le but n’est pas de remplir le site de mots-clés.

Les textes doivent rester naturels.

Vérifiez la vitesse sans tout modifier

Les grandes images peuvent ralentir le site.

Les animations peuvent aussi demander beaucoup de ressources.

Il peut également rester des plugins inutilisés dans WordPress.

Demandez à l’agent de repérer les éléments qui semblent trop lourds.

Mais ne le laissez pas supprimer des extensions ou modifier la configuration sans votre accord.

Vérifie les éléments qui peuvent ralentir le site : images trop lourdes, vidéos, animations, scripts et plugins inutilisés.

Donne-moi une liste de recommandations.
Ne supprime aucun fichier, plugin ou réglage sans mon accord.

Vous pouvez ensuite compresser les images les plus lourdes.

Gardez une bonne qualité.

Une image de présentation n’a pas besoin de peser plusieurs mégaoctets.

Ouvrez le site en navigation privée

Votre navigateur garde parfois des informations en mémoire.

Il peut aussi vous montrer une page parce que vous êtes connecté à WordPress ou Webflow.

• Ouvrez donc une fenêtre de navigation privée.
• Entrez l’adresse du site comme le ferait un nouveau visiteur.
• Vérifiez que la bonne page d’accueil s’affiche.
• Regardez si certaines pages demandent une connexion.
• Testez le menu.
• Ouvrez la page Contact.

Cette vérification permet aussi de voir si le site fonctionne sans votre session administrateur.

Demandez un audit final à votre agent

Quand vous avez terminé toutes les vérifications précédentes, envoyez une dernière demande à votre agent.

Cette fois, demandez-lui de regarder le site dans son ensemble.

Fais un audit final de mon site avant sa publication.

Vérifie toutes les pages sur ordinateur, tablette et mobile.

Contrôle :

• les textes ;
• les images ;
• les boutons ;
• les liens ;
• le menu ;
• le footer ;
• les formulaires ;
• les pages légales ;
• les titres ;
• les URL ;
• la cohérence visuelle ;
• les éléments venant encore du site d’inspiration.

Donne-moi une liste courte des problèmes classés en trois groupes :

1. à corriger avant la publication ;
2. à améliorer après la publication ;
3. aucun changement nécessaire.

Ne modifie rien avant mon accord.

Cette classification vous aide à avancer.
Tout n’a pas la même importance.

Un formulaire qui ne fonctionne pas doit être corrigé avant la publication.

Un espace légèrement trop grand peut attendre.

Une animation supplémentaire n’empêche pas le site de remplir son rôle.

Publiez une version que vous pourrez améliorer

Votre site n’a pas besoin d’être figé.

Vous pourrez revenir sur un texte.

• Ajouter une réalisation.
• Créer une nouvelle page.
• Publier un article.
• Changer une image.

Votre agent sera toujours connecté à l’outil.

Vous pourrez donc continuer à travailler avec la même méthode.

Une demande précise.
Une modification.
Une vérification.
Puis une sauvegarde.

À la fin de cet article, vous n’avez pas seulement appris à créer un site avec WordPress, Elementor ou Webflow.

Vous avez appris à connecter un agent IA à un outil.

À lui montrer ce que vous voulez.
À lui donner une mission claire.
À regarder son travail.

Et à lui demander de corriger ce qui ne va pas.

Cette façon de travailler peut vous servir pour beaucoup d’autres outils.

Aujourd’hui, nous l’avons utilisée pour créer un site.

Demain, vous pourrez l’utiliser pour travailler dans un CRM, organiser des données, préparer des documents ou automatiser une partie de votre activité.

Le site sur lequel vous lisez cet article a été créé avec cette méthode.

Vous connaissez maintenant les étapes.

Il ne vous reste plus qu’à choisir votre première section et à commencer.