webflow-cli:designer-extension

Designer Extension

Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.

Important Note

ALWAYS use Bash tool for all Webflow CLI operations:

• Execute webflow extension commands via Bash tool
• Use Read tool to examine generated files and schema (never modify)
• Use Glob tool to discover project files
• Verify CLI installation: webflow --version
• Check authentication: webflow auth login (if needed)
• 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 project state: Check if already in an extension project (look for webflow.json with extension schema)
3. Identify operation type: Determine if user wants to:
   • List available templates
   • Initialize new extension
   • Bundle existing extension
   • Serve extension locally

Phase 2: Template Listing & Selection

1. List templates (if user asks or before init): Run webflow extension list
2. Show available templates:
   • default - Basic HTML/CSS/JavaScript template
   • react - React-based template
   • typescript-alt - Alternative TypeScript template
3. Ask user to select template if initializing new extension

Phase 3: Extension Initialization

1. Choose project name: Ask user for project directory name
2. Run init command: Execute webflow extension init <project-name> <template>
3. Read generated schema: Use Read tool to examine webflow.json
4. Show schema structure: Display the 5 schema fields:
   • name (required) - Extension name as it appears in Webflow
   • apiVersion (required) - API version (2)
   • publicDir (required) - Directory to build from (dist)
   • appIntents (optional) - Element types that can create connections
   • appConnections (optional) - Connection configurations
5. Install dependencies: Run npm install in project directory