/devlink-command

name: webflow-cli:devlink
description: Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React/Next.js.

DevLink

Export and sync Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance.

Important Note

**ALWAYS use Bash tool for all Webflow CLI operations:**

• Execute `webflow devlink sync` via Bash tool
• Use Read tool to examine synced files and webflow.json (never modify)
• Use Glob tool to discover generated components
• Verify CLI installation: `webflow --version`
• Check authentication: Use `webflow auth login` for site authentication
• DO NOT use Webflow MCP tools for CLI workflows
• All CLI commands require proper descriptions (not context parameters)

**Package Manager Detection:**

• Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
• If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
• Use detected package manager for all install/build commands

Instructions

Phase 1: Environment Verification

1. **Verify CLI installed**: Run `webflow --version` to confirm CLI is installed 2. **Check authentication**: Verify site authentication (created via `webflow auth login`) 3. **Discover project state**: Check if webflow.json exists with devlink configuration 4. **Identify target framework**: Determine if React, Next.js, or other

Phase 2: DevLink Configuration

5. **Check for existing config**: Look for `webflow.json` with devlink section 6. **Read configuration**: If exists, show current devlink settings:

• `rootDir`: Directory to export components into
• `cssModules`: Whether to use CSS modules
• `fileExtensions`: File extensions for generated files
• Other configuration options

7. **Ask operation type**: Clarify what user wants to do:

• Configure DevLink for first time
• Sync all components
• Sync specific components (using `components` regex pattern)
• Update existing sync

8. **Store baseline** (if updating): Use Read tool to capture current files before sync

Phase 3: Sync Execution

9. **Run sync command**: Execute `webflow devlink sync` with options:

• `--api-token` or `-t`: Override API token from .env
• `--site-id` or `-s`: Override site ID from .env

10. **Monitor sync progress**: Show CLI output and sync status 11. **Capture sync results**: Record files created/modified in rootDir 12. **Validate generated code**:

• Check for TypeScript errors (if using TS)
• Verify import statements
• Confirm component exports
• Check CSS module references

Phase 4: Analysis & Diff Preview

13. **Compare before/after**: Show what changed:

• New files created in rootDir
• Existing files modified
• Components added or updated

14. **Show file diffs**: Display key changes for modified files 15. **Analyze component structure**:

• Component count
• New components added
• Updated components
• CSS files generated

16. **List dependencies**: Show what needs to be imported

Phase 5: Integration Guidance

17. **Provide import statements**: Show exact code to import components 18. **Show usage examples**: Demonstrate how to use each component 19. **Document sync timestamp**: Record when sync occurred 20. **Provide next steps**: Guide user on testing and integration

Examples

Example 1: First-Time DevLink Setup

**User prompt:**

Sync my Webflow components to my Next.js project

**Step 1: Environment Verification**

🔍 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)

*User confirms: yes*

**Step 2: Configuration Setup**

📋 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)

*User provides: ./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.

Example 2: First Sync After Configuration

**User prompt:**

Run the DevLink sync

**Step 1: Verification**

🔍 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.

**Step 2: Sync Execution**

🔄 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