From webflow-agent-skills
Build Designer Extensions (iframes inside the Webflow Designer) or generate code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns.
How this skill is triggered — by the user, by Claude, or both
Slash command
/webflow-agent-skills:webflow-designer-apiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
assets/install-playground-prompt.mdassets/webflow-variables.cssreferences/app-submission-and-listing.mdreferences/assets-api.mdreferences/code-examples.mdreferences/components-api.mdreferences/create-webflow-extension-reference.mdreferences/design-guidelines.mdreferences/designer-apis-reference.mdreferences/designer-extension-workflow.mdreferences/elements-api.mdreferences/error-handling.mdreferences/extension-utilities.mdreferences/faq.mdreferences/marketplace-guidelines.mdreferences/pages-api.mdreferences/playground-workflow.mdreferences/register-app.mdreferences/styles-api.mdreferences/variables-api.mdThis 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.
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
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
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.
Both workflows use the same webflow.* Designer API. Once you know the workflow, use these references to write the actual code:
webflow.* methods in one table (start here)# 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/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 ExtensionCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub 224-industries/webflow-skills --plugin webflow-agent-skills