Structure de page

Construisez, inspectez et gérez les éléments et composants de page dans le Webflow Designer.

Note importante

UTILISEZ TOUJOURS les outils Webflow MCP pour toutes les opérations :

Utilisez webflow_guide_tool de Webflow MCP pour obtenir les bonnes pratiques avant tout autre appel d'outil
Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour identifier le site cible
Utilisez de_page_tool de Webflow MCP pour obtenir la page actuelle, basculer entre les pages ou créer des pages/dossiers
Utilisez element_tool de Webflow MCP avec l'action get_all_elements pour récupérer les éléments de la page
Utilisez element_tool de Webflow MCP avec l'action select_element pour sélectionner un élément spécifique
Utilisez element_tool de Webflow MCP avec l'action add_or_update_attribute pour mettre à jour les attributs des éléments
Utilisez element_builder de Webflow MCP pour créer de nouveaux éléments
Utilisez element_snapshot_tool de Webflow MCP pour obtenir des aperçus visuels des éléments avant et après les modifications
Utilisez style_tool de Webflow MCP pour créer et mettre à jour les styles sur les éléments
Utilisez de_learn_more_about_styles de Webflow MCP pour vérifier les propriétés de style supportées
Utilisez data_components_tool de Webflow MCP avec l'action list_components pour lister tous les composants du site
Utilisez data_components_tool de Webflow MCP avec l'action get_component_content pour inspecter un composant
Utilisez data_components_tool de Webflow MCP avec l'action update_component_content pour mettre à jour le contenu d'un composant
Utilisez data_components_tool de Webflow MCP avec l'action get_component_properties pour obtenir les propriétés d'un composant
Utilisez data_components_tool de Webflow MCP avec l'action update_component_properties pour mettre à jour les propriétés d'un composant
Utilisez de_component_tool de Webflow MCP pour gérer les instances de composants dans le Designer
N'utilisez AUCUN autre outil ou méthode pour les opérations Webflow
Tous les appels d'outil doivent inclure le paramètre context obligatoire (15-25 mots, perspective à la troisième personne)
La connexion Designer est requise — l'utilisateur doit avoir le Webflow Designer ouvert et connecté

Instructions

Phase 1 : Découverte

Appelez webflow_guide_tool en premier — toujours le premier appel d'outil MCP dans n'importe quel workflow
Obtenez le site : Utilisez data_sites_tool avec l'action list_sites pour identifier le site cible. S'il n'existe qu'un seul site, utilisez-le automatiquement.
Obtenez la page actuelle : Utilisez de_page_tool pour identifier quelle page est active dans le Designer
Si l'utilisateur spécifie une page différente : Utilisez de_page_tool pour basculer vers elle avant de continuer
Identifiez le type de tâche :
- Inspecter : Lister les éléments, afficher la structure, obtenir un aperçu → aller à la Phase 2
- Construire/Modifier/Supprimer : Ajouter, mettre à jour, restructurer, supprimer → aller à la Phase 3
- Composants : Lister, inspecter, mettre à jour → aller à la Phase 2 ou Phase 3 selon lecture vs écriture

Phase 2 : Inspection (opérations en lecture seule)

Lister les éléments de la page : Utilisez de_page_tool puis element_tool avec get_all_elements pour récupérer la structure de la page. Présentez un résumé des sections, éléments et imbrications.
Obtenir un aperçu des éléments : Utilisez element_snapshot_tool pour obtenir des aperçus visuels de sections spécifiques
Lister les composants : Utilisez data_components_tool avec l'action list_components pour lister tous les composants du site
Inspecter un composant : Utilisez data_components_tool avec l'action get_component_content ou de_component_tool pour les instances du Designer

Phase 3 : Planification (avant toute mutation)

Avant de créer, mettre à jour ou supprimer quoi que ce soit : 10. Snapshot de l'état actuel : Utilisez element_snapshot_tool pour capturer la zone en cours de modification 11. Présentez le plan : Décrivez exactement ce qui sera créé, modifié ou supprimé 12. Demandez une confirmation explicite : Demandez à l'utilisateur avant de procéder :

« Souhaitez-vous que je procède avec ces modifications ? »
« Puis-je aller de l'avant et créer ceci ? »
« Voulez-vous que j'applique ces modifications ? »
« Avant d'apporter des modifications, voici ce que je vais faire : [plan]. Confirmez pour procéder. »

Pour les opérations destructrices (supprimer, restructurer) : Exigez « confirm » ou « delete », avertissez des éléments enfants qui seront également affectés

Phase 4 : Exécution (après confirmation seulement)

Construire des éléments : Utilisez element_builder pour créer de nouveaux éléments (max 3 niveaux de profondeur). Pour les structures plus profondes, construisez en plusieurs passes.
Appliquer des styles : Utilisez style_tool pour appliquer ou mettre à jour les styles sur les éléments créés ou existants
Modifier les éléments : Utilisez element_tool avec add_or_update_attribute pour mettre à jour les attributs, le texte ou les liens
Mettre à jour les composants : Utilisez data_components_tool avec update_component_content ou update_component_properties. Utilisez de_component_tool pour les modifications au niveau des instances du Designer.
Créer des pages : Utilisez de_page_tool pour créer de nouvelles pages ou des dossiers

Phase 5 : Vérification

Snapshot du résultat : Utilisez element_snapshot_tool pour capturer le nouvel état
Rapportez les modifications : Résumez les modifications apportées

Exemples

Exemple 1 : Lister les éléments de la page

Utilisateur : « Montrez-moi tous les éléments de la page d'accueil »

Appelez webflow_guide_tool pour les bonnes pratiques
Appelez data_sites_tool avec list_sites pour identifier le site
Appelez de_page_tool pour confirmer que la page actuelle est la page d'accueil (basculez si nécessaire)
Appelez element_tool avec get_all_elements pour récupérer la structure de la page
Présentez un résumé organisé des sections, éléments et imbrications

Exemple 2 : Construire une section hero

Utilisateur : « Ajoutez une section hero avec un titre et un bouton CTA »

Appelez webflow_guide_tool pour les bonnes pratiques
Appelez data_sites_tool avec list_sites pour identifier le site
Appelez de_page_tool pour obtenir la page actuelle
Appelez element_snapshot_tool pour capturer l'état actuel
Présentez le plan : « Je vais créer une Section avec un Titre et un Bouton. Souhaitez-vous que je procède ? »
Après confirmation : appelez element_builder avec la structure imbriquée
Appelez style_tool pour appliquer les styles (padding, arrière-plan, typographie)
Appelez element_snapshot_tool pour afficher le résultat

Exemple 3 : Mettre à jour un composant

Utilisateur : « Mettez à jour le texte du copyright du pied de page en 2026 »

Appelez webflow_guide_tool pour les bonnes pratiques
Appelez data_sites_tool avec list_sites pour identifier le site
Appelez data_components_tool avec list_components pour trouver le pied de page
Appelez data_components_tool avec get_component_content pour l'inspecter
Présentez : « Je vais mettre à jour le texte du copyright de '2025' en '2026'. Souhaitez-vous que je procède ? »
Après confirmation : appelez data_components_tool avec update_component_content
Rapportez la modification

Exemple 4 : Restructurer une section

Utilisateur : « Restructurez la mise en page de la section hero »

Appelez webflow_guide_tool pour les bonnes pratiques
Appelez data_sites_tool avec list_sites pour identifier le site
Appelez de_page_tool pour obtenir la page actuelle
Appelez element_snapshot_tool pour capturer la section hero actuelle
Appelez element_tool pour inspecter la structure actuelle
Présentez le plan de restructuration avec une description avant/après
Après confirmation : appliquez les modifications en utilisant element_tool et/ou element_builder
Appelez element_snapshot_tool pour afficher le résultat

Exemple 5 : Créer une mise en page à deux colonnes

Utilisateur : « Créez une mise en page à deux colonnes avec du texte à gauche et une image à droite »

Appelez webflow_guide_tool pour les bonnes pratiques
Appelez data_sites_tool avec list_sites pour identifier le site
Appelez de_page_tool pour obtenir la page actuelle
Appelez element_snapshot_tool pour capturer l'état actuel
Présentez le plan : « Je vais créer une Grid avec deux colonnes — bloc de texte à gauche, image à droite. Souhaitez-vous que je procède ? »
Après confirmation : appelez element_builder avec la structure de grille
Appelez style_tool pour définir les propriétés de mise en page de la grille
Appelez element_snapshot_tool pour afficher le résultat

Directives

webflow_guide_tool toujours en premier — avant tout autre outil MCP dans chaque workflow
Snapshot avant et après — utilisez element_snapshot_tool avant les mutations et après pour afficher les résultats
Ne mutez jamais silencieusement — chaque opération d'écriture nécessite une confirmation explicite de l'utilisateur
de_page_tool avant element_tool — confirmez/basculez toujours la page avant d'inspecter les éléments
Les modifications par lots nécessitent un aperçu détaillé — si vous modifiez plusieurs éléments, listez chaque modification
Préférez les outils de mise en page natifs de Webflow (Grid, Flexbox) au positionnement manuel
Les composants partagés entre les pages doivent être mis à jour via data_components_tool (les modifications se propagent)
Les instances de composants sur une page spécifique utilisent de_component_tool
element_builder supporte max 3 niveaux par appel — construisez les structures plus profondes par étapes
Vérifiez de_learn_more_about_styles pour les propriétés de style supportées en cas de doute

webflow-mcp:designer-tools