DevLink

Exportez et synchronisez les composants Webflow Designer vers du code React/Next.js avec validation, diffs et conseils d'intégration.

Important Note

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

• Exécutez webflow devlink sync via l'outil Bash
• Utilisez l'outil Read pour examiner les fichiers synchronisés et webflow.json (ne jamais modifier)
• Utilisez l'outil Glob pour découvrir les composants générés
• Vérifiez l'installation CLI : webflow --version
• Vérifiez l'authentification : Utilisez webflow auth login pour l'authentification du site
• N'UTILISEZ PAS les outils Webflow MCP pour les workflows CLI
• Toutes les commandes CLI nécessitent des descriptions appropriées (pas de paramètres contextuels)

Détection du gestionnaire de paquets :

• Vérifiez les fichiers de verrouillage : package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)
• Si aucun fichier de verrouillage trouvé, demandez à l'utilisateur quel gestionnaire de paquets utiliser (npm/pnpm/yarn)
• Utilisez le gestionnaire de paquets détecté pour toutes les commandes install/build

Instructions

Phase 1 : Vérification de l'environnement

1. Vérifiez que CLI est installé : Exécutez webflow --version pour confirmer l'installation
2. Vérifiez l'authentification : Vérifiez l'authentification du site (créée via webflow auth login)
3. Découvrez l'état du projet : Vérifiez si webflow.json existe avec la configuration devlink
4. Identifiez le framework cible : Déterminez si c'est React, Next.js ou autre

Phase 2 : Configuration DevLink

5. Vérifiez la configuration existante : Cherchez webflow.json avec une section devlink
6. Lisez la configuration : Si elle existe, affichez les paramètres devlink actuels :
   • rootDir : Répertoire pour exporter les composants
   • cssModules : Utiliser les CSS modules
   • fileExtensions : Extensions de fichier pour les fichiers générés
   • Autres options de configuration
7. Demandez le type d'opération : Clarifiez ce que l'utilisateur souhaite faire :
   • Configurer DevLink pour la première fois
   • Synchroniser tous les composants
   • Synchroniser des composants spécifiques (utilisant le pattern regex components)
   • Mettre à jour la synchronisation existante
8. Enregistrez la référence (si mise à jour) : Utilisez l'outil Read pour capturer les fichiers actuels avant la synchronisation

Phase 3 : Exécution de la synchronisation

9. Exécutez la commande de synchronisation : Exécutez webflow devlink sync avec options :
   • --api-token ou -t : Remplacez le token API de .env
   • --site-id ou -s : Remplacez l'ID de site de .env
10. Suivez la progression de la synchronisation : Affichez la sortie CLI et l'état de la synchronisation
11. Capturez les résultats de la synchronisation : Enregistrez les fichiers créés/modifiés dans rootDir
12. Validez le code généré :
    • Vérifiez les erreurs TypeScript (si utilisation de TS)
    • Vérifiez les instructions import
    • Confirmez les exports de composants
    • Vérifiez les références des modules CSS

Phase 4 : Analyse et aperçu des diffs

13. Comparez avant/après : Affichez les changements :
    • Nouveaux fichiers créés dans rootDir
    • Fichiers existants modifiés
    • Composants ajoutés ou mis à jour
14. Affichez les diffs de fichiers : Montrez les changements clés pour les fichiers modifiés
15. Analysez la structure du composant :
    • Nombre de composants
    • Nouveaux composants ajoutés
    • Composants mis à jour
    • Fichiers CSS générés
16. Listez les dépendances : Montrez ce qui doit être importé

Phase 5 : Conseils d'intégration

17. Fournissez les instructions import : Affichez le code exact pour importer les composants
18. Montrez les exemples d'utilisation : Démontrez comment utiliser chaque composant
19. Documentez le timestamp de synchronisation : Enregistrez quand la synchronisation a eu lieu
20. Fournissez les prochaines étapes : Guidez l'utilisateur sur les tests et l'intégration

Exemples

Exemple 1 : Configuration DevLink pour la première fois

Demande utilisateur :

Sync my Webflow components to my Next.js project

Étape 1 : Vérification de l'environnement

🔍 DevLink Environment Check

Checking CLI installation...
✓ Webflow CLI installed: v1.5.2

Current directory: /Users/user/projects/my-nextjs-app
Framework detected: Next.js 14

Checking for DevLink configuration...
⚠️ No webflow.json with devlink configuration found

This appears to be your first DevLink sync.
Ready to configure? (yes/no)

L'utilisateur confirme : yes

Étape 2 : Configuration du paramétrage

📋 DevLink Configuration

DevLink syncs Webflow components to your local project as React code.

Configuration needed in webflow.json:

{
  "devlink": {
    "rootDir": "./devlink",           // Where to export components
    "cssModules": true,                // Use CSS modules
    "fileExtensions": {
      "js": "jsx"                      // or "tsx" for TypeScript
    }
  }
}

I'll help you create this configuration.

Questions:
1. Where should components be exported? (default: ./devlink)
2. Use TypeScript? (yes for tsx, no for jsx)
3. Use CSS modules? (recommended: yes)

L'utilisateur fournit : ./src/devlink, yes (TypeScript), yes (CSS modules)

Creating webflow.json configuration...

{
  "devlink": {
    "rootDir": "./src/devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "tsx"
    }
  }
}

✓ Configuration created

⚠️ Authentication Required:
DevLink needs your Webflow site ID and API token.

Run: webflow auth login
This will create a .env file with:
- WEBFLOW_SITE_ID
- WEBFLOW_SITE_API_TOKEN

After authentication, run sync again.

Exemple 2 : Première synchronisation après configuration

Demande utilisateur :

Run the DevLink sync

Étape 1 : Vérification

🔍 DevLink Sync Check

Checking configuration...
✓ webflow.json found with devlink config
✓ Root directory: ./src/devlink
✓ CSS modules: enabled
✓ File extensions: tsx

Checking authentication...
✓ .env found with WEBFLOW_SITE_ID and WEBFLOW_SITE_API_TOKEN

Ready to sync components from Webflow.

Étape 2 : Exécution de la synchronisation

🔄 Syncing Components

Executing: webflow devlink sync

Output:
✓ Connecting to Webflow site
✓ Fetching components
✓ Exporting components to ./src/devlink
✓ Generating React components
✓ Creating CSS module files
✓ Creating index file

Sync complete!

📁 Generated Files:
./src/devlink/
├── index.ts (module exports)
├── Navigation.tsx (component)
├── Navigation.module.css (styles)
├── Hero.tsx (component)
├── Hero.module.css (styles)
├── Footer.tsx (component)
├── Footer.module.css (styles)
└── _webflow-style.css (global styles)

📊 Sync Summary:
- Components synced: 3
- Files created: 8
- Total size: 45 KB

Étape 3 : Conseils d'intégration

✅ DevLink Sync Complete!

📋 Components Available:
1. Navigation
2. Hero
3. Footer

💡 How to Use:

Import components in your Next.js pages:
```tsx
import { Navigation, Hero, Footer } from './src/devlink'

export default function Home() {
  return (
    <>
      <Navigation />
      <Hero />
      <Footer />
    </>
  )
}

Global Styles: Import the global DevLink styles in your _app.tsx or layout:

import '../src/devlink/_webflow-style.css'

📦 No additional dependencies required! DevLink components use only React (already in your project).

🔄 Future Updates: Run webflow devlink sync again to pull latest design changes.

### Exemple 3 : Mise à jour de la synchronisation existante

**Demande utilisateur :**

Sync latest changes from Webflow

**Étape 1 : État pré-synchronisation**

🔍 DevLink Update Check

Current state: ✓ Configuration: ./src/devlink ✓ Existing components: 3 (Navigation, Hero, Footer) ✓ Last sync: 2 days ago

Capturing current state for comparison... ✓ Baseline captured

**Étape 2 : Synchronisation**

🔄 Syncing Updates

Executing: webflow devlink sync

Output: ✓ Connecting to Webflow site ✓ Fetching components ✓ Detecting changes ✓ Updating components ✓ Regenerating files

Sync complete!

**Étape 3 : Analyse des diffs**

📊 Sync Analysis

Changes detected:

Modified Components:

1. Navigation.tsx

   • Added new "Contact" link
   • Updated styles for mobile view

2. Hero.tsx

   • Changed heading text
   • Updated button styling

New Components: 3. CallToAction.tsx (new)

• New CTA section added

Unchanged:

• Footer.tsx

📁 Files Updated:

• ./src/devlink/Navigation.tsx (modified)
• ./src/devlink/Navigation.module.css (modified)
• ./src/devlink/Hero.tsx (modified)
• ./src/devlink/Hero.module.css (modified)
• ./src/devlink/CallToAction.tsx (new)
• ./src/devlink/CallToAction.module.css (new)
• ./src/devlink/index.ts (updated exports)

✅ 3 components updated, 1 new component added

💡 New Component Available:

import { CallToAction } from './src/devlink'

<CallToAction />

### Exemple 4 : Synchroniser des composants spécifiques

**Demande utilisateur :**

Only sync the navigation component from Webflow

**Mise à jour de la configuration :**

📋 Filtering Components

To sync only specific components, update webflow.json:

Current configuration: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" } } }

Add components regex pattern: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" }, "components": "Navigation" // Regex pattern to match } }

Pattern options:

• "Navigation" - Only Navigation component
• "Nav.*" - All components starting with "Nav"
• "Navigation|Footer" - Multiple specific components
• ".*" - All components (default)

Update webflow.json? (yes/no)

*L'utilisateur confirme : yes*

✓ Configuration updated

Syncing with filter: "Navigation"

Executing: webflow devlink sync

Output: ✓ Connecting to Webflow site ✓ Fetching components ✓ Applying filter: Navigation ✓ Exporting 1 component

📁 Generated: ./src/devlink/ ├── index.ts ├── Navigation.tsx └── Navigation.module.css

✅ Synced 1 component (Navigation only)

### Exemple 5 : Remplacer l'ID de site et le token

**Demande utilisateur :**

Sync from a different Webflow site

**Réponse :**

🔄 Sync from Different Site

To sync from a different site, use --site-id and --api-token options.

Get credentials:

1. Go to Webflow site settings
2. Get Site ID
3. Generate API token (if needed)

Sync command:

webflow devlink sync --site-id <SITE_ID> --api-token <API_TOKEN>

Example:

webflow devlink sync \
  --site-id 5f8a9b2c3d4e5f6g7h8i9j0k \
  --api-token wfp_1234567890abcdef

This overrides the .env file values for this sync only.

⚠️ Note: You can also:

1. Update .env file with new WEBFLOW_SITE_ID and WEBFLOW_SITE_API_TOKEN
2. Or maintain multiple .env files (.env.site1, .env.site2)
3. Then run: webflow devlink sync (uses .env)

Proceed with override? (yes/no)

### Exemple 6 : Configuration TypeScript

**Demande utilisateur :**

Set up DevLink with TypeScript

**Réponse :**

📋 DevLink TypeScript Configuration

For TypeScript projects, configure file extensions:

webflow.json: { "devlink": { "rootDir": "./src/devlink", "cssModules": true, "fileExtensions": { "js": "tsx" // Use .tsx for TypeScript } } }

Benefits: ✓ Type-safe components ✓ Better IDE support ✓ Auto-completion ✓ Compile-time error checking

After sync, components will be generated as:

• Navigation.tsx (instead of .jsx)
• Hero.tsx
• Footer.tsx

Usage with TypeScript:

import { Navigation } from '@/src/devlink'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Navigation />
      {children}
    </div>
  )
}

Ready to sync? (yes/no)

## Directives

### Phase 1 : Vérification CLI

**Vérification de l'installation :**
```bash
# Check if CLI is installed
webflow --version

# If not installed, guide user:
npm install -g @webflow/webflow-cli

Vérification de l'authentification :

# Site authentication creates .env file
# Check for:
cat .env

# Should contain:
# WEBFLOW_SITE_ID=your-site-id
# WEBFLOW_SITE_API_TOKEN=your-token

# If missing, authenticate:
webflow auth login

Phase 2 : Configuration

Schéma DevLink webflow.json :

{
  "devlink": {
    "rootDir": "./devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"
    }
  }
}

Toutes les options de configuration :

Configurations courantes :

React avec JavaScript :

{
  "devlink": {
    "rootDir": "./src/components/webflow",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"
    }
  }
}

Next.js avec TypeScript :

{
  "devlink": {
    "rootDir": "./src/devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "tsx"
    }
  }
}

Synchroniser des composants spécifiques :

{
  "devlink": {
    "rootDir": "./src/devlink",
    "cssModules": true,
    "components": "Navigation|Hero|Footer"
  }
}

Phase 3 : Commande de synchronisation

Synchronisation basique :

# Uses webflow.json config and .env credentials
webflow devlink sync

Synchronisation avec options :

# Override site ID
webflow devlink sync --site-id 5f8a9b2c3d4e5f6g7h8i9j0k

# Override API token
webflow devlink sync --api-token wfp_1234567890abcdef

# Override both
webflow devlink sync \
  --site-id 5f8a9b2c3d4e5f6g7h8i9j0k \
  --api-token wfp_1234567890abcdef

# Short flags
webflow devlink sync -s <site-id> -t <api-token>

Options de synchronisation :

• --api-token / -t : Le token API à utiliser, remplaçant le fichier .env
• --site-id / -s : L'ID de site à synchroniser, remplaçant le fichier .env

Phase 4 : Fichiers générés

Structure de répertoire : Après la synchronisation, rootDir contient :

./devlink/
├── index.ts                  // Module exports
├── ComponentName.tsx         // Component file
├── ComponentName.module.css  // Component styles (if cssModules: true)
├── AnotherComponent.tsx
├── AnotherComponent.module.css
└── _webflow-style.css        // Global Webflow styles

Structure des composants : Les composants générés sont des composants fonctionnels React :

import React from 'react'
import styles from './ComponentName.module.css'

export function ComponentName() {
  return (
    <div className={styles.container}>
      {/* Component markup */}
    </div>
  )
}

Fichier index : Exporte tous les composants pour une importation facile :

export { ComponentName } from './ComponentName'
export { AnotherComponent } from './AnotherComponent'

Gestion des erreurs

CLI non installée :

❌ Webflow CLI Not Found

The Webflow CLI is required for DevLink.

Installation:
npm install -g @webflow/webflow-cli

After installation, verify:
webflow --version

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

Non authentifié :

❌ Not Authenticated

DevLink needs authentication to access your Webflow site.

Steps:
1. Run: webflow auth login
2. Follow authentication prompts in browser
3. Select your site when prompted
4. Verify: .env file created with:
   - WEBFLOW_SITE_ID
   - WEBFLOW_SITE_API_TOKEN
5. Retry sync

Need help? https://developers.webflow.com/cli/authentication

Pas de configuration :

❌ DevLink Not Configured

No webflow.json with devlink configuration found.

Create webflow.json in project root:
{
  "devlink": {
    "rootDir": "./devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"  // or "tsx" for TypeScript
    }
  }
}

Required fields:
- rootDir: Where to export components

After configuration, run: webflow devlink sync

Échecs de synchronisation :

❌ Sync Failed

Error: [Specific error from CLI]

Common Causes:
- Network connection issues
- Invalid site ID or API token
- Insufficient permissions
- Site has no components to export

Solutions:
1. Check internet connection
2. Verify credentials in .env
3. Check site permissions in Webflow
4. Ensure site has published components
5. Try: webflow devlink sync --site-id <id> --api-token <token>

Retry sync? (yes/no)

ID de site invalide :

❌ Invalid Site ID

The provided site ID is invalid or inaccessible.

Check:
1. Verify WEBFLOW_SITE_ID in .env
2. Ensure you have access to the site
3. Check site ID in Webflow dashboard

Get site ID:
1. Open site in Webflow
2. Go to Site Settings
3. Find Site ID in General tab

Update .env and retry sync.

Opérations sur fichiers

Lecture de fichiers : Utilisez toujours l'outil Read (ne jamais modifier) :

# View DevLink configuration
Read: webflow.json

# View environment
Read: .env

# View generated component
Read: ./devlink/Navigation.tsx

# View generated styles
Read: ./devlink/Navigation.module.css

Découverte de fichiers : Utilisez l'outil Glob pour trouver des fichiers :

# Find all generated components
Glob: ./devlink/**/*.tsx

# Find all CSS modules
Glob: ./devlink/**/*.module.css

# Find configuration
Glob: webflow.json

Ne jamais utiliser les outils Write/Edit :

• Ne créez pas webflow.json avec Write (montrez la structure à l'utilisateur)
• Ne modifiez pas les composants générés
• Laissez le CLI gérer la génération de fichiers
• Lisez uniquement les fichiers pour montrer le contenu et les diffs

Indicateurs de progression

Pour la synchronisation :

🔄 Syncing Components...

Connecting to Webflow... ✓
Fetching components... ✓
Generating React code... ⏳
Creating CSS modules... ⏳

Processed: 3/5 components
Elapsed: 8s

Bonnes pratiques

Configuration :

• Gardez webflow.json à la racine du projet
• Utilisez TypeScript (.tsx) pour une meilleure sécurité de type
• Activez les CSS modules pour un style scopé
• Utilisez des patterns regex de composants spécifiques pour les sites volumineux

Workflow de développement :

1. Concevez dans Webflow Designer
2. Publiez les modifications
3. Exécutez webflow devlink sync
4. Examinez les diffs avant d'intégrer
5. Testez les composants dans votre application

Intégration :

• Importez les styles globaux (_webflow-style.css) dans le point d'entrée de l'application
• Importez les composants selon les besoins
• Ne modifiez pas les fichiers générés (seront écrasés)
• Enveloppez les composants DevLink si une personnalisation est nécessaire

Contrôle de version :

• Committez webflow.json
• Ajoutez .env à .gitignore
• Committez le répertoire devlink/ généré (ou ajoutez à .gitignore)
• Documentez le timestamp de la dernière synchronisation

Sites multiples :

• Utilisez un rootDir différent pour chaque site
• Ou utilisez le pattern components pour filtrer
• Remplacez les identifiants avec --site-id et --api-token
• Maintenez des fichiers .env séparés

Référence rapide

Workflow : configurer webflow.json → authentifier → synchroniser

Commandes clés :

• webflow devlink sync - Synchroniser les composants depuis Webflow
• webflow devlink sync -s <id> -t <token> - Synchroniser avec remplacements

Options de synchronisation :

• -s / --site-id - Remplacer l'ID de site
• -t / --api-token - Remplacer le token API

Configuration : webflow.json avec section devlink

Schéma (obligatoire) :

{
  "devlink": {
    "rootDir": "./devlink"  // Required
  }
}

Schéma (courant) :

{
  "devlink": {
    "rootDir": "./devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"  // or "tsx"
    }
  }
}

Authentification : Authentification du site via webflow auth login

Environnement : WEBFLOW_SITE_ID et WEBFLOW_SITE_API_TOKEN dans .env

Vérification : Vérifiez d'abord webflow --version et l'authentification du site

Fichiers générés : Composants React dans rootDir avec CSS modules

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