Webflow MCP 2.0 + Cursor : ce qui change vraiment

Le plugin Webflow pour Cursor était déjà intéressant pour gérer un CMS ou lancer quelques audits depuis l’éditeur. Avec Webflow MCP 2.0, le périmètre change nettement : Cursor peut désormais construire et modifier une grande partie d’un site Webflow sans garder le Designer ouvert.

Mise à jour août 2026 : MCP 2.0 donne à l’agent accès aux éléments, composants, styles, variables, assets, pages, code personnalisé, formulaires, sitemap, Agent Instructions et données Webflow Analyze. Le Bridge App n’est plus requis pour la majorité de ces opérations.

Pour un développeur Webflow, c’est probablement la différence la plus importante : Cursor ne sert plus seulement à écrire du code autour de Webflow, il peut intervenir directement dans le système de production.

Pourquoi MCP 2.0 change le workflow dans Cursor

Le Model Context Protocol permet à Cursor d’utiliser des outils externes depuis la conversation. Webflow expose ses API à travers un serveur MCP officiel, et le plugin Cursor simplifie l’installation et l’authentification.

Dans l’ancien workflow, les opérations visuelles dépendaient souvent d’une session Designer active via le Bridge App. Avec MCP 2.0, la majorité des actions sur les éléments, composants, styles et variables sont désormais indépendantes du Designer.

Cela permet à l’agent de travailler sur plusieurs pages, voire plusieurs sites autorisés, sans être bloqué par ce qui est actuellement ouvert dans le navigateur.

Installation dans Cursor

La méthode la plus simple consiste à utiliser le plugin Webflow officiel depuis le Cursor Marketplace. Après l’installation, la première utilisation déclenche l’authentification OAuth Webflow et vous permet de choisir les sites et le workspace accessibles.

Il est aussi possible de configurer le serveur manuellement dans .cursor/mcp.json avec l’URL officielle https://mcp.webflow.com/mcp.

Un premier test simple :

« Liste toutes les collections de mon site Webflow et montre-moi leurs champs. »

1. Construire directement dans Webflow depuis Cursor

MCP 2.0 permet à Cursor d’interroger et de modifier l’arbre d’éléments d’une page. L’agent peut créer des sections, containers, grilles, textes, liens, images, formulaires et autres éléments pris en charge, puis les organiser et les styliser.

Il peut aussi créer des éléments à partir de HTML et CSS ou utiliser un schéma structuré pour construire une arborescence complète.

C’est un changement important pour les workflows de prototypage : un prompt peut produire une vraie structure Webflow réutilisant les styles existants, et pas seulement un snippet HTML à recréer ensuite dans le Designer.

2. Créer et maintenir des composants

Cursor peut créer des composants Webflow, gérer leurs instances et travailler avec les props, variants, slots et métadonnées. Il peut également connecter certains composants aux données du CMS.

Un cas d’usage particulièrement efficace consiste à fournir une capture d’écran comme référence, puis demander à l’agent de construire un composant en s’appuyant sur le design system déjà présent dans le site.

Le snapshot visuel utilisé pour vérifier le rendu final nécessite encore le Designer et le Bridge App, mais la construction elle-même peut être réalisée sans session Designer active.

3. Piloter un design system avec les variables Webflow

Cursor peut lire les collections de variables, créer ou renommer des variables, gérer les modes et modifier les valeurs utilisées dans le site. Il peut également travailler sur les classes et combo classes, y compris leurs propriétés CSS selon les breakpoints.

Concrètement, vous pouvez lui demander d’auditer les couleurs, espacements ou tailles typographiques, de repérer les valeurs incohérentes et de proposer un refactoring basé sur les tokens existants.

Pour un site Client-First ou un design system bien structuré, c’est beaucoup plus intéressant qu’une simple génération de CSS : l’agent comprend le système et peut le faire évoluer.

4. CMS, pages, assets et code personnalisé

Le CMS reste un des usages les plus efficaces : bulk updates, création de collections, contrôle des champs, publication et dépublication d’items, nettoyage de données ou préparation de contenu.

MCP 2.0 ajoute ou approfondit aussi plusieurs opérations utiles pour un développeur :

• création et mise à jour de pages ;
• gestion du schema markup et de certains paramètres SEO ;
• organisation des assets et dossiers ;
• compression d’images en WebP ou AVIF ;
• lecture et écriture du code head/footer au niveau du site ou d’une page ;
• gestion des scripts enregistrés ;
• gestion des fichiers de polices personnalisées ;
• lecture et modification de l’inclusion sitemap.

5. Interroger Webflow Analyze depuis Cursor

Pour les sites qui utilisent Webflow Analyze, Cursor peut maintenant interroger les données de trafic directement dans la conversation : sessions, utilisateurs, pages vues, pages les plus performantes, sources, événements d’engagement et temps passé.

Le workflow devient particulièrement intéressant lorsqu’on combine analyse et exécution :

« Identifie les pages avec beaucoup de trafic mais un faible temps moyen, analyse leur structure et propose trois changements que tu peux appliquer dans Webflow. »

Le même agent peut donc passer de la donnée au diagnostic, puis du diagnostic à l’action.

6. Agent Instructions : donner des règles permanentes à Cursor

Les Agent Instructions permettent d’enregistrer dans Webflow des règles et des skills adaptés au site. Les règles servent de contexte permanent, tandis que les skills décrivent des workflows plus spécialisés.

Vous pouvez par exemple demander que Cursor :

• réutilise toujours les variables existantes ;
• respecte une convention de nommage précise ;
• utilise un composant existant avant d’en créer un nouveau ;
• demande une confirmation avant publication ;
• applique une structure donnée aux nouvelles sections ;
• suive des consignes éditoriales pour les contenus CMS.

Ces instructions peuvent faire référence aux composants, variables, styles, pages, collections et locales réels du site. C’est ce qui rend le comportement de l’agent beaucoup plus stable sur un projet long.

7. Branches, permissions et audit

MCP 2.0 respecte les rôles et permissions définis dans Webflow. Si un utilisateur n’a pas accès à une action ou à une partie du site, l’agent ne l’obtient pas non plus.

Les agents peuvent aussi travailler avec les branches de pages lorsque cette fonctionnalité est disponible, ce qui permet d’isoler certaines modifications avant de les intégrer au site principal. Les actions MCP s’inscrivent également dans la logique d’activité et d’audit de Webflow.

Pour des workflows de production, cette gouvernance est plus importante que le simple gain de temps : elle permet d’automatiser sans supprimer les garde-fous du projet.

Le Bridge App sert encore à quoi ?

Il reste utile uniquement pour les tâches qui dépendent du contexte visuel ou du canvas actuel :

• capturer un snapshot visuel ;
• lire ou sélectionner l’élément actuellement actif ;
• naviguer dans le canvas ou entre les vues de composants ;
• lire la page, le mode, la branche ou les breakpoints actuellement ouverts ;
• exécuter une consigne ambiguë comme « modifie ce heading » qui fait référence à l’élément visible.

Pour le reste, le Designer n’a généralement pas besoin d’être ouvert.

Les skills Webflow

Webflow continue de proposer des skills prêts à l’emploi pour des workflows courants comme les mises à jour CMS en masse, la création de collections ou les audits. Les skills combinent plusieurs outils MCP, ajoutent des validations et peuvent présenter un aperçu des changements avant exécution.

Avec MCP 2.0, l’intérêt des skills augmente parce qu’ils peuvent maintenant orchestrer un périmètre beaucoup plus large. Il est important de garder les skills à jour, car certains noms d’outils et certaines actions ont été déplacés entre les versions précédentes et MCP 2.0/2.0.1.

Exemples de prompts utiles dans Cursor

• « Analyse les variables du site et remplace les valeurs de couleur isolées par les tokens les plus proches. »
• « Crée un composant FAQ avec question, réponse et variant compact. »
• « Trouve les pages qui n’ont pas de meta description et prépare une correction cohérente avec leur contenu. »
• « Vérifie les assets les plus lourds et compresse ceux qui peuvent passer en AVIF sans problème. »
• « Lis les données Analyze des 30 derniers jours et identifie les pages à optimiser en priorité. »
• « Ajoute une règle Webflow indiquant que toute nouvelle section doit utiliser les variables de spacing existantes. »

Les limites actuelles

• Les Interactions IX3 ne peuvent pas encore être créées ou modifiées via MCP.
• Les snapshots et opérations liées au canvas nécessitent encore le Bridge App.
• La création de nouveaux items CMS localisés dans une langue secondaire n’est pas encore supportée.
• Une autorisation MCP correspond à un workspace, il faut se réauthentifier pour en changer.
• Certaines capacités dépendent du plan ou des fonctionnalités activées sur le site, par exemple Webflow Analyze.

MCP 2.0 est-il gratuit ?

Webflow indique que MCP 2.0 est disponible pour tous les utilisateurs sans coût additionnel. En revanche, l’agent ne peut utiliser que les fonctionnalités auxquelles le site a déjà accès. Par exemple, les requêtes Analyze nécessitent que Webflow Analyze soit disponible sur le site concerné.

Le parcours officiel Cursor utilise OAuth, donc vous n’avez pas besoin de générer une clé API manuellement pour utiliser le plugin.

Ce qui change vraiment au quotidien

Le gain principal n’est plus seulement de gagner quelques minutes sur des tâches CMS. MCP 2.0 permet de confier à Cursor des opérations plus complètes : analyser un design system, créer un composant, modifier plusieurs pages, vérifier des données de performance et appliquer des changements cohérents avec les règles du site.

Pour un développeur Webflow, Cursor devient donc un véritable poste de contrôle : le code, le CMS, la structure et une partie importante du design system peuvent être pilotés dans la même conversation.