Extension Designer

Créez et développez des Extensions Designer pour Webflow avec sélection de template, serveur de développement local et bundling pour la distribution.

Important Note

TOUJOURS utiliser l'outil Bash pour toutes les opérations Webflow CLI :

Exécuter les commandes webflow extension via l'outil Bash
Utiliser l'outil Read pour examiner les fichiers générés et le schéma (ne jamais modifier)
Utiliser l'outil Glob pour découvrir les fichiers du projet
Vérifier l'installation CLI : webflow --version
Vérifier l'authentification : webflow auth login (si nécessaire)
NE PAS utiliser les outils Webflow MCP pour les workflows CLI
Toutes les commandes CLI requièrent des descriptions appropriées (pas de paramètres de contexte)

Détection du gestionnaire de paquets :

Vérifier les fichiers de verrous : package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)
Si aucun fichier de verrou trouvé, demander à l'utilisateur quel gestionnaire utiliser (npm/pnpm/yarn)
Utiliser le gestionnaire de paquets détecté pour toutes les commandes install/build

Instructions

Phase 1 : Vérification de l'environnement

Vérifier CLI installé : Exécuter webflow --version pour confirmer que CLI est installé
Vérifier l'état du projet : Vérifier si vous êtes déjà dans un projet d'extension (chercher webflow.json avec schéma d'extension)
Identifier le type d'opération : Déterminer si l'utilisateur veut :
- Lister les templates disponibles
- Initialiser une nouvelle extension
- Bundler une extension existante
- Servir l'extension localement

Phase 2 : Listing et sélection de templates

Lister les templates (si l'utilisateur le demande ou avant init) : Exécuter webflow extension list
Afficher les templates disponibles :
- default - Template HTML/CSS/JavaScript de base
- react - Template basé sur React
- typescript-alt - Template TypeScript alternatif
Demander à l'utilisateur de sélectionner un template si initialisation d'une nouvelle extension

Phase 3 : Initialisation de l'extension

Choisir le nom du projet : Demander à l'utilisateur le nom du répertoire du projet
Exécuter la commande init : Exécuter webflow extension init <project-name> <template>
Lire le schéma généré : Utiliser l'outil Read pour examiner webflow.json
Afficher la structure du schéma : Afficher les 5 champs du schéma :
- name (obligatoire) - Nom de l'extension tel qu'il apparaît dans Webflow
- apiVersion (obligatoire) - Version de l'API (2)
- publicDir (obligatoire) - Répertoire de build (dist)
- appIntents (optionnel) - Types d'éléments pouvant créer des connexions
- appConnections (optionnel) - Configurations de connexion
Installer les dépendances : Exécuter npm install dans le répertoire du projet

Phase 4 : Développement local

Démarrer le serveur de dev : Exécuter webflow extension serve [port]
Afficher les infos du serveur de dev :
- Port par défaut : 1337 (sauf si l'utilisateur spécifie un port différent)
- URL locale : http://localhost:[port]
- Comment charger dans Designer
Fournir les instructions de chargement :
- Ouvrir Webflow Designer
- Charger l'extension depuis l'URL locale
- Tester la fonctionnalité

Phase 5 : Bundling pour upload

Exécuter la commande bundle : Exécuter webflow extension bundle
Afficher la sortie du bundle : Afficher l'emplacement et la taille de bundle.zip
Fournir les instructions d'upload : Guide pour uploader vers Webflow
Documenter les prochaines étapes : Guidance pour les tests et la distribution

Exemples

Exemple 1 : Lister les templates disponibles

Invite utilisateur :

Montrez-moi les templates d'Extension Designer disponibles

Réponse :

🔍 Templates d'Extension Designer

Listing des templates disponibles...
Exécution : webflow extension list

Résultat :
Templates disponibles :
1. default        - HTML, CSS et JavaScript de base
2. react          - Extension basée sur React
3. typescript-alt - Template TypeScript alternatif

Pour créer une nouvelle extension :
webflow extension init <project-name> <template>

Exemple :
webflow extension init my-extension react

Exemple 2 : Initialiser une nouvelle extension

Invite utilisateur :

Créer une nouvelle Extension Designer appelée gallery-manager avec React

Étape 1 : Initialiser le projet

📋 Initialiser l'Extension Designer

Nom du projet : gallery-manager
Template : react

Exécution : webflow extension init gallery-manager react

Résultat :
✓ Projet d'extension créé dans ./gallery-manager
✓ Structure de projet générée
✓ webflow.json créé avec schéma d'extension
✓ Template React configuré

📁 Structure du projet :
./gallery-manager/
├── webflow.json         # Schéma d'extension
├── package.json         # Dépendances
├── src/
│   ├── index.html
│   ├── index.tsx
│   └── styles.css
├── dist/                # Sortie de build
└── README.md

Installation des dépendances...
Exécution : cd gallery-manager && npm install

✓ Dépendances installées (45 packages)

Étape 2 : Afficher le schéma

📋 Schéma d'extension (webflow.json)

Lecture de webflow.json...

{
  "name": "Gallery Manager",
  "apiVersion": "2",
  "publicDir": "dist",
  "appIntents": {},
  "appConnections": []
}

Champs du schéma :
✓ name (obligatoire)      - Nom de l'extension dans Webflow
✓ apiVersion (obligatoire) - Version de l'API : 2
✓ publicDir (obligatoire)  - Répertoire de build : dist
  appIntents (optionnel) - Types de connexion d'éléments
  appConnections (optionnel) - Configs de connexion

Extension prête pour le développement !

Exemple 3 : Servir l'extension localement

Invite utilisateur :

Lancer l'extension sur mon serveur de dev local

Port par défaut (1337) :

🚀 Démarrage du serveur de développement

Exécution : webflow extension serve

Résultat :
✓ Extension en cours de build
✓ Serveur de dev démarré
✓ Extension prête

📋 Serveur de développement en cours d'exécution

URL locale : http://localhost:1337
Statut : ✓ Actif

Comment charger dans Designer :
1. Ouvrir Webflow Designer
2. Ouvrir un site
3. Charger l'extension depuis l'URL : http://localhost:1337

Appuyez sur Ctrl+C pour arrêter le serveur

Port personnalisé :

Utilisateur : "Lancer sur le port 3000 à la place"

🚀 Démarrage du serveur de développement

Exécution : webflow extension serve 3000

Résultat :
✓ Extension en cours de build
✓ Serveur de dev démarré sur le port 3000
✓ Extension prête

📋 Serveur de développement en cours d'exécution

URL locale : http://localhost:3000
Statut : ✓ Actif

Charger dans Designer : http://localhost:3000

Exemple 4 : Bundler l'extension

Invite utilisateur :

Bundler mon extension pour upload

Étape 1 : Bundle

📦 Bundling de l'extension

Exécution : webflow extension bundle

Résultat :
✓ Build du bundle de production en cours
✓ Création de bundle.zip
✓ Bundle créé avec succès

Détails du bundle :
- Fichier : bundle.zip
- Localisation : ./dist/bundle.zip
- Taille : 245 KB

✅ Bundle prêt pour upload !

Étape 2 : Instructions d'upload

📤 Instructions d'upload

Votre extension est bundlée et prête pour l'upload.

Étapes d'upload :
1. Aller au tableau de bord Webflow Designer Extensions
2. Uploader bundle.zip
3. Tester l'extension
4. Soumettre pour examen (si distribution)

Localisation du bundle : ./dist/bundle.zip

Exemple 5 : Workflow complet

Invite utilisateur :

Créer une nouvelle Extension Designer pour gérer les couleurs

Étape 1 : Lister les templates

🔍 Workflow d'Extension Designer

Laissez-moi d'abord montrer les templates disponibles.

Exécution : webflow extension list

Templates disponibles :
1. default        - HTML/CSS/JavaScript de base
2. react          - Basé sur React (recommandé)
3. typescript-alt - Alternative TypeScript

Quel template voulez-vous utiliser ? (default/react/typescript-alt)

L'utilisateur sélectionne : react

Étape 2 : Initialiser

📋 Création de l'extension

Nom du projet : color-manager
Template : react

Exécution : webflow extension init color-manager react

✓ Projet créé dans ./color-manager
✓ webflow.json généré
✓ Template React configuré

Installation des dépendances...
✓ npm install terminé

📋 Schéma d'extension :
{
  "name": "Color Manager",
  "apiVersion": "2",
  "publicDir": "dist",
  "appIntents": {},
  "appConnections": []
}

Étape 3 : Démarrer le développement

🚀 Démarrage du serveur de dev

Exécution : webflow extension serve

✓ Serveur en cours d'exécution sur http://localhost:1337

Charger dans Designer :
1. Ouvrir Webflow Designer
2. Charger l'extension depuis : http://localhost:1337
3. Commencer à développer !

Serveur en cours d'exécution... (Appuyez sur Ctrl+C pour arrêter)

Guidelines

Phase 1 : Vérification CLI

Vérification de l'installation :

# Vérifier si CLI est installé
webflow --version

# Si non installé, guider l'utilisateur :
npm install -g @webflow/cli

Authentification (si nécessaire) :

# Authentification du site si requise
webflow auth login

Phase 2 : Gestion des templates

Commande de listing des templates :

webflow extension list

Templates disponibles :

default - Template HTML, CSS et JavaScript de base
react - Extension basée sur React avec outils modernes
typescript-alt - Template TypeScript alternatif

Phase 3 : Initialisation

Commande init :

webflow extension init <project-name> <template>

Arguments :

<project-name> (obligatoire) - Nom du nouveau répertoire du projet
<template> (obligatoire) - L'un de : default, react, typescript-alt

Exemples de commandes :

# Initialiser avec template par défaut
webflow extension init my-extension default

# Initialiser avec template React
webflow extension init my-extension react

# Initialiser avec template TypeScript
webflow extension init my-extension typescript-alt

Structure du projet après init :

/project-name/
├── webflow.json         # Schéma d'extension (obligatoire)
├── package.json         # Dépendances
├── src/                 # Fichiers source
│   ├── index.html
│   ├── index.tsx (ou .js)
│   └── styles.css
├── dist/                # Répertoire de sortie du build
└── README.md

Phase 4 : Schéma d'extension

Schéma dans webflow.json :

{
  "name": "<Nom de votre extension>",
  "apiVersion": "2",
  "publicDir": "dist",
  "appIntents": {
    "image": ["manage"],
    "form": ["manage"]
  },
  "appConnections": [
    "myAppImageConnection",
    "myAppFormConnection"
  ]
}

Champs du schéma :

Champ	Description	Défaut	Obligatoire
`name`	Nom de l'extension tel qu'il apparaît dans Webflow	-	Oui
`apiVersion`	Version de l'API à utiliser pour l'extension	`2`	Oui
`publicDir`	Répertoire de build et de service de l'extension	`dist`	Oui
`appIntents`	Types d'éléments pouvant créer des connexions	`{}`	Non
`appConnections`	Configurations de connexion pour l'extension	`[]`	Non

Champs obligatoires :

name - Doit être unique et descriptif
apiVersion - Actuellement doit être « 2 »
publicDir - Répertoire où les fichiers built sont placés (défaut : « dist »)

Champs optionnels :

appIntents - Définit quels types d'éléments peuvent se connecter à votre extension
- Exemple : {"image": ["manage"], "form": ["manage"]}
appConnections - Tableau d'identifiants de connexion
- Exemple : ["myAppImageConnection", "myAppFormConnection"]

Phase 5 : Développement local

Commande serve :

# Servir sur le port par défaut (1337)
webflow extension serve

# Servir sur un port personnalisé
webflow extension serve 3000

Arguments :

[port] (optionnel) - Numéro de port pour servir (défaut : 1337)

Serveur de développement :

URL par défaut : http://localhost:1337
Port personnalisé : http://localhost:[port]
Rebuild automatique au changement des fichiers
Hot reload pour un développement plus rapide

Chargement dans Designer :

Ouvrir Webflow Designer
Ouvrir un site
Aller au menu Extensions
Charger l'extension depuis l'URL locale : http://localhost:[port]
L'extension apparaît dans Designer

Phase 6 : Bundling

Commande bundle :

webflow extension bundle

Sortie :

Crée le fichier bundle.zip dans le répertoire du projet
Contient tous les fichiers built depuis publicDir
Prêt pour upload vers Webflow

Contenu du bundle :

Fichiers JavaScript et CSS built
Points d'entrée HTML
Assets depuis publicDir
Schéma d'extension

Gestion des erreurs

CLI non installé :

❌ Webflow CLI non trouvé

Designer Extensions nécessite Webflow CLI.

Installation :
npm install -g @webflow/cli

Après installation, vérifier :
webflow --version

Documentation : https://developers.webflow.com/cli

Template invalide :

❌ Template invalide

Erreur : Template « vue » non trouvé

Templates disponibles :
- default
- react
- typescript-alt

Réessayer avec un template valide :
webflow extension init my-extension react

Port déjà utilisé :

❌ Échec du démarrage du serveur de développement

Erreur : Le port 1337 est déjà utilisé

Solutions :
1. Arrêter un autre processus sur le port 1337
2. Utiliser un port différent :
   webflow extension serve 3000

Trouver le processus utilisant le port :
lsof -ti:1337 | xargs kill -9

webflow.json manquant :

❌ Schéma d'extension non trouvé

Erreur : webflow.json non trouvé dans le répertoire actuel

Ce répertoire n'est pas un projet d'extension.

Solutions :
1. Initialiser une nouvelle extension :
   webflow extension init <name> <template>
2. Naviguer vers le répertoire d'extension existant
3. Créer webflow.json avec le schéma requis

Échec du bundle :

❌ Création du bundle échouée

Erreur : Build échoué avec des erreurs

Causes courantes :
- Dépendances manquantes (exécuter : npm install)
- Erreurs de build dans les fichiers source
- Schéma webflow.json invalide
- Répertoire publicDir manquant

Corriger les erreurs et réessayer :
webflow extension bundle

Opérations sur fichiers

Lecture de fichiers d'extension : Toujours utiliser l'outil Read (ne jamais modifier) :

# Voir le schéma d'extension
Read: webflow.json

# Voir les dépendances du package
Read: package.json

# Voir les fichiers source
Read: src/index.html
Read: src/index.tsx

Découverte de fichiers du projet : Utiliser l'outil Glob pour trouver les fichiers :

# Trouver tous les fichiers source
Glob: src/**/*

# Trouver les fichiers de configuration
Glob: *.json

# Trouver les fichiers built
Glob: dist/**/*

Ne jamais utiliser les outils Write/Edit :

Ne pas créer ou modifier webflow.json avec l'outil Write
Ne pas éditer les fichiers générés
Laisser CLI générer tous les fichiers du projet
Seulement lire les fichiers pour afficher le contenu

Indicateurs de progression

Pour init :

📋 Création de l'extension...

[████████████████████████] 100%

✓ Projet créé
✓ Dépendances installées
Durée : 12s

Pour bundle :

📦 Bundling de l'extension...

[████████████████████████] 100%

✓ Bundle créé : bundle.zip
Durée : 5s

Pour serve :

🚀 Démarrage du serveur...

[████████████████████████] 100%

✓ Serveur prêt sur http://localhost:1337
Durée : 3s

Bonnes pratiques

Sélection de template :

Utiliser le template react pour le développement moderne basé sur les composants
Utiliser le template default pour les extensions simples ou l'apprentissage
Utiliser typescript-alt pour les projets basés sur TypeScript

Workflow de développement :

Lister les templates disponibles
Initialiser le projet avec le template choisi
Installer les dépendances
Servir localement pour le développement
Tester dans Designer
Bundler pour upload
Uploader vers Webflow

Configuration du schéma :

Toujours inclure les champs obligatoires : name, apiVersion, publicDir
Définir les appIntents appropriés si votre extension se connecte à des éléments
Définir appConnections pour les intégrations d'éléments
Garder le nom descriptif et unique

Développement local :

Utiliser le port par défaut 1337 pour la cohérence
Garder le serveur de dev en cours d'exécution durant le développement
Tester fréquemment dans Designer
Vérifier la console pour les erreurs

Bundling :

Bundler seulement quand prêt pour upload ou distribution
Vérifier que le build se termine sans erreurs
Vérifier la taille de bundle.zip
Tester la version bundlée avant upload

Quick Reference

Workflow : lister les templates → init → serve → développer → bundler → uploader

Commandes clés :

webflow extension list - Afficher les templates disponibles
webflow extension init <project-name> <template> - Créer une nouvelle extension
webflow extension serve [port] - Démarrer serveur de dev (défaut : 1337)
webflow extension bundle - Créer bundle.zip pour upload

Templates : default, react, typescript-alt

Champs du schéma (webflow.json) :

name (obligatoire) - Nom de l'extension
apiVersion (obligatoire) - Version de l'API (2)
publicDir (obligatoire) - Répertoire de build
appIntents (optionnel) - Types de connexion d'éléments
appConnections (optionnel) - Configs de connexion

Serveur de dev : http://localhost:1337 (ou port personnalisé)

Sortie du bundle : bundle.zip dans le répertoire du projet

Documentation : https://developers.webflow.com/designer/reference/introduction

webflow-cli:designer-extension

Extension Designer

Important Note

Instructions

Phase 1 : Vérification de l'environnement

Phase 2 : Listing et sélection de templates

Phase 3 : Initialisation de l'extension

Phase 4 : Développement local

Phase 5 : Bundling pour upload

Exemples

Exemple 1 : Lister les templates disponibles

Exemple 2 : Initialiser une nouvelle extension

Exemple 3 : Servir l'extension localement

Exemple 4 : Bundler l'extension

Exemple 5 : Workflow complet

Guidelines

Phase 1 : Vérification CLI

Phase 2 : Gestion des templates

Phase 3 : Initialisation

Phase 4 : Schéma d'extension

Phase 5 : Développement local

Phase 6 : Bundling

Gestion des erreurs

Opérations sur fichiers

Indicateurs de progression

Bonnes pratiques

Quick Reference

Skills similaires