/designer-extension-command

name: webflow-cli:designer-extension
description: Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.

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

4. **List templates** (if user asks or before init): Run `webflow extension list` 5. **Show available templates**:

• `default` - Basic HTML/CSS/JavaScript template
• `react` - React-based template
• `typescript-alt` - Alternative TypeScript template

6. **Ask user to select template** if initializing new extension

Phase 3: Extension Initialization

7. **Choose project name**: Ask user for project directory name 8. **Run init command**: Execute `webflow extension init <project-name> <template>` 9. **Read generated schema**: Use Read tool to examine webflow.json 10. **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

11. **Install dependencies**: Run `npm install` in project directory

Phase 4: Local Development

12. **Start dev server**: Execute `webflow extension serve [port]` 13. **Show dev server info**:

• Default port: 1337 (unless user specifies different port)
• Local URL: http://localhost:[port]
• How to load in Designer

14. **Provide loading instructions**:

• Open Webflow Designer
• Load extension from local URL
• Test functionality

Phase 5: Bundling for Upload

15. **Run bundle command**: Execute `webflow extension bundle` 16. **Show bundle output**: Display bundle.zip location and size 17. **Provide upload instructions**: Guide for uploading to Webflow 18. **Document next steps**: Testing and distribution guidance

Examples

Example 1: List Available Templates

**User prompt:**

Show me the available Designer Extension templates

**Response:**

🔍 Designer Extension Templates

Listing available templates...
Executing: webflow extension list

Output:
Available templates:
1. default        - Basic HTML, CSS, and JavaScript
2. react          - React-based extension
3. typescript-alt - Alternative TypeScript template

To create a new extension:
webflow extension init <project-name> <template>

Example:
webflow extension init my-extension react

Example 2: Initialize New Extension

**User prompt:**

Create a new Designer Extension called gallery-manager using React

**Step 1: Initialize Project**

📋 Initialize Designer Extension

Project name: gallery-manager
Template: react

Executing: webflow extension init gallery-manager react

Output:
✓ Created extension project at ./gallery-manager
✓ Generated project structure
✓ Created webflow.json with extension schema
✓ Set up React template

📁 Project Structure:
./gallery-manager/
├── webflow.json         # Extension schema
├── package.json         # Dependencies
├── src/
│   ├── index.html
│   ├── index.tsx
│   └── styles.css
├── dist/                # Build output
└── README.md

Installing dependencies...
Executing: cd gallery-manager && npm install

✓ Dependencies installed (45 packages)

**Step 2: Show Schema**

📋 Extension Schema (webflow.json)

Reading webflow.json...

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

Schema Fields:
✓ name (required)      - Extension name in Webflow
✓ apiVersion (required) - API version: 2
✓ publicDir (required)  - Build directory: dist
  appIntents (optional) - Element connection types
  appConnections (optional) - Connection configs

Extension ready for development!

Example 3: Serve Extension Locally

**User prompt:**

Run the extension on my local dev server

**Default Port (1337):**

🚀 Starting Development Server

Executing: webflow extension serve

Output:
✓ Building extension
✓ Starting dev server
✓ Extension ready

📋 Development Server Running

Local URL: http://localhost:1337
Status: ✓ Active

How to Load in Designer:
1. Open Webflow Designer
2. Open any site
3. Load extension from URL: http://localhost:1337

Press Ctrl+C to stop server

**Custom Port:**

User: "Run on port 3000 instead"

🚀 Starting Development Server

Executing: webflow extension serve 3000

Output:
✓ Building extension
✓ Starting dev server on port 3000
✓ Extension ready

📋 Development Server Runn