224-industries/webflow-designer-api
skills/webflow-designer-api/SKILL.md
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
$ install --global
skillsauthnpx skillsauth add 224-industries/webflow-skills webflow-designer-apiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 25, 2026, 3:24 AM164.8s22 files scanned
SKILL.md
- name:
- webflow-designer-api
- description:
- Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
- license:
- MIT
- compatibility:
- create-webflow-extension, @webflow/webflow-cli
- author:
- Ben Sabic
- repository:
- https://github.com/224-industries/webflow-skills
- url:
- https://skills.224ai.au/webflow-designer-api.skill
- version:
- 2.0.0
- keywords:
- ai, agent, skill, webflow, designer, extension, cli, element-manipulation, styles, components, pages, variables, assets, error-handling, ui-design-patterns
Webflow Designer API
This skill helps users work with the Webflow Designer API through two workflows. Start by asking the user which workflow they'd like to use, or infer from context if it's obvious.
Workflows
1. Designer Extensions
Build full extensions with a UI that run inside the Webflow Designer as iframes. Best for reusable tools, complex workflows, and apps you want to ship to a team or the Marketplace. → See references/designer-extension-workflow.md
2. Designer API Playground
Write and run standalone code snippets directly in the Playground app inside the Designer. Best for quick prototyping, testing API methods, learning the API, and one-off automations. → See references/playground-workflow.md
Reference Documentation
Each reference file includes YAML frontmatter with name, description, and tags for searchability. Use the search script available in scripts/search_references.py to quickly find relevant references by tag or keyword.
Designer API References
Both workflows use the same webflow.* Designer API. Once you know the workflow, use these references to write the actual code:
- references/designer-apis-reference.md — All
webflow.*methods in one table (start here) - references/elements-api.md — Element selection, insertion, presets, and the element builder
- references/styles-api.md — Creating styles, setting CSS properties, breakpoints, and pseudo-states
- references/components-api.md — Component definitions, instances, and editing context
- references/pages-api.md — Page and folder management
- references/variables-api.md — Design token variables and collections
- references/assets-api.md — Asset upload and management
- references/extension-utilities.md — Site info, events, notifications, app discovery, authentication
- references/error-handling.md — Error structure, cause tags, and recovery patterns
- references/code-examples.md — Cross-API workflow examples combining multiple APIs
Design & Marketplace References
- references/design-guidelines.md — UI design for native Webflow look
- references/register-app.md — Registering a Webflow App and configuring capabilities
- references/marketplace-guidelines.md — Marketplace review criteria
- references/app-submission-and-listing.md — Submitting your app and creating a listing
- references/faq.md — FAQ and troubleshooting
Searching References
# List all references with metadata
python scripts/search_references.py --list
# Search by tag (exact match)
python scripts/search_references.py --tag <tag>
# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>
Scripts and Assets
scripts/search_references.py: Search reference files by tag, keyword, or list all with metadataassets/webflow-variables.css— CSS variables for Webflow's design systemassets/install-playground-prompt.md— Copyable prompt for installing the Designer API Playground via Claude Cowork or the Claude Chrome Extension
Related Skills
224-industries/webflow-webhooks
development
VerifiedTrustedCommunity
Receive and verify Webflow webhooks. Use when setting up Webflow webhook handlers, debugging signature verification, or handling Webflow events like form_submission, site_publish, ecomm_new_order, or collection item changes.
6SKILL.mdUpdated Mar 25, 2026
224-industries/webflow-enterprise-api
development
VerifiedTrustedCommunity
Webflow Enterprise API endpoints for workspace management, audit logs, site activity, 301 redirects, robots.txt, and well-known files. Use when working with Enterprise-only Webflow API endpoints that require an Enterprise workspace.
6SKILL.mdUpdated Mar 25, 2026
224-industries/webflow-code-components
development
VerifiedTrustedCommunity
Build, define, and import React code components into Webflow via DevLink. Use when creating Webflow code components, configuring declareComponent definitions, working with prop types, styling within Shadow DOM, bundling with Webpack, or troubleshooting DevLink imports.
6SKILL.mdUpdated Mar 25, 2026
224-industries/webflow-browser-api
development
VerifiedTrustedCommunity
Control Webflow Analyze and Optimize from JavaScript via the Browser API. Use when managing tracking consent, integrating CMPs (OneTrust, TrustArc), tracking experiment variations, setting custom visitor attributes, or personalizing user experiences.
6SKILL.mdUpdated Mar 25, 2026