webflow-designer-api_skill

Overview

This skill helps you build and debug integrations with the Webflow Designer API. Start by choosing whether you want to create a Designer Extension (iframe app) or run code snippets in the Designer API Playground. It consolidates API methods, UI patterns, assets, and error-handling guidance so you can move from prototype to production faster.

How this skill works

I guide you through two workflows: authoring Designer Extensions that run as iframes inside the Webflow Designer, or composing and running Playground snippets for quick tests. The skill references consolidated API docs (elements, styles, components, variables, assets, pages) and practical examples, plus utilities for site info, auth, and error recovery. I can generate code snippets, project scaffolds, CLI commands, and UI pattern suggestions tailored to your chosen workflow.

When to use it

• You want to build a reusable Designer Extension with its own UI and lifecycle.
• You need to prototype or test Designer API calls quickly in the Playground.
• You are debugging element manipulation, styles, or component behavior in the Designer.
• You need code examples for asset upload, variables, or page operations.
• You are preparing an app for the Webflow Marketplace or team distribution.

Best practices

• Ask which workflow you prefer before generating code (Extension vs Playground).
• Use the elements and styles references together for safe DOM and style edits.
• Wrap Designer API calls with error-handling patterns from the error docs.
• Keep UI consistent with Webflow design guidelines when building extensions.
• Use the search script to locate reference snippets and copyable prompts quickly.

Example use cases

• Create a Designer Extension that inserts preset components and syncs site variables.
• Write a Playground script to batch-update styles across multiple pages.
• Prototype an asset uploader that validates files, uploads, and inserts elements.
• Generate component-editing logic that opens editing context and applies instances.
• Prepare a package and CLI commands for registering and testing a Marketplace app.