webflow-designer-extension

What This Skill Does

The webflow-designer-extension skill provides an integrated environment for building, debugging, and maintaining custom Webflow Designer Extensions. By bridging the gap between local development and the Webflow canvas, this skill allows developers to create iframes that interact directly with the Webflow Designer API. It streamlines the lifecycle of extension development—from scaffolding project architecture using the official CLI to implementing complex logic like element manipulation, style management, component handling, and variable integration.

Installation

To integrate this skill, use the ClawHub CLI command: clawhub install openclaw/skills/skills/bensabic/webflow-designer-extension. Once installed, ensure you have the necessary Webflow Workspace permissions and a registered app in your Webflow developer portal to enable the test environment.

Use Cases

This skill is ideal for:

• Building custom design system panels that allow team members to insert standardized pre-built UI components.
• Automating repetitive styling tasks by creating helper panels that apply brand-specific styles to selected elements.
• Creating data-binding extensions that sync Webflow variables with external CMS or design token sources.
• Building workflow-enhancing tools that perform bulk operations, such as renaming classes, optimizing assets, or validating accessibility patterns across pages.

Example Prompts

1. "I need to build a new Webflow extension that adds a button to the Designer UI. When clicked, it should grab the currently selected element and apply a specific primary style class. Can you guide me through the Styles API implementation?"
2. "I am getting a 'Permission Denied' error when trying to fetch the current page structure via the Webflow Designer API in my local dev environment. How do I debug my extension's scope and error handling?"
3. "Show me how to scaffold a new extension project with Rspack and integrate a react component that lists all existing design variables from my site."

Tips & Limitations

• Permissions: Always verify your Workspace app configuration; the extension will fail to communicate with the Designer API if the App Scopes aren't correctly defined in the Webflow Developer dashboard.
• Performance: Since extensions run in iframes, keep heavy computations off the main UI thread to prevent Designer lag.
• Error Handling: Utilize the specific error handling patterns defined in the references to ensure your extension recovers gracefully if the user selects an incompatible element type.
• Updates: Keep your project dependencies synced with the latest create-webflow-extension template to leverage new Designer API capabilities as they are released.