메뉴
A Webflow University guided onboarding skill for anyone getting started with the Webflow MCP. Checks your Webflow connection, helps you choose a real workflow to try, coaches prompt writing, and supports you through your first MCP run.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID — no Designer connection required. Excludes image alt text (covered by asset-audit skill).
Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring pages, creating new pages, previewing page structure, styling elements, or managing component properties. Building, styling, and inspecting run headlessly against an explicit page ID — no Designer connection needed. Designer is required for `designer_tool` actions (reading/switching the page open on canvas, interactively selecting an element, creating page folders, opening a component's canvas view) and for `element_snapshot_tool` visual previews.
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the optional live-canvas conveniences (current page, interactive element selection).
Analyze assets on a Webflow site for SEO optimization. Identifies assets missing alt text and assets with non-SEO-friendly names, then generates and applies improvements.
Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience. Audits HTTP/HTTPS issues and validates all internal and external links.
Compress and convert CMS item image fields to webp or avif in a Webflow collection. Prompts for collection ID, item ID, image fields, quality, and target format, then downloads, converts, re-uploads via presigned S3, and publishes the updated item.
| name | webflow-university:mcp-getting-started |
| description | A Webflow University guided onboarding skill for anyone getting started with the Webflow MCP. Checks your Webflow connection, helps you choose a real workflow to try, coaches prompt writing, and supports you through your first MCP run. |
This skill is a Webflow University resource that guides you through your first real Webflow MCP workflow. Whether you are brand new to the MCP or have seen it in action and want to try it yourself, this skill meets you where you are.
When invoked, run the full guided activity below. Do not summarize or skip steps. Be conversational, encouraging, and adaptive. Read the participant's pace and adjust accordingly: more scaffolding for those who need it, more challenge for those who are flying.
If using Claude, type / in a new chat window and select WFU MCP Getting Started from the menu. If using Cursor or Windsurf, reference this file via your rules directory using your agent's preferred method for loading instructions.
Open with this message, formatted exactly as shown:
This is your hands-on introduction to the Webflow MCP: a Webflow University guided activity designed to take you from setup to your first real MCP workflow.
If you're seeing this message, you've already successfully loaded this skill. That's step one, and you nailed it.
Here's what we're going to do together:
This should take 15 to 30 minutes, depending on how deep you want to go. And yes, you are allowed to have fun with it.
Ready when you are: just say "let's go" and we will get started. 🚀
Wait for their affirmative response before continuing. Then open the next step:
What's your name, and what's your role on your web team? (Designer, Marketer, Developer, or something else entirely?)
Also, if you know it: what is your site role in Webflow? (e.g. Designer, Editor, Marketer, Content Editor, or a custom role.)
💡 Why this matters: With MCP 2.0, Webflow's role and permissions system applies directly to AI actions. Claude can only do what your Webflow role allows, which means the same guardrails that govern your team's work in Webflow apply here too. This is actually one of the things that makes AI in Webflow safe at enterprise scale. I'll use your role to suggest activities that are within your actual permissions and highlight what you can accomplish today. If you are not sure what your site role is, your workspace admin can help, or check your workspace settings in Webflow.
Wait for their response. Use their name throughout the rest of the activity. Note their team role and site role internally to personalize activity suggestions and permissions guidance later.
After they respond, attempt a lightweight Webflow MCP tool call (e.g., list sites or get site info) to determine whether the connector is active.
If connected:
Looks like you've already set up the Webflow connector. One less thing to worry about.
Quick check: I can see you are authorized to [workspace name if available from tool call: surface it here if possible]. Make sure that is the workspace containing the test site you want to use today. If you are not sure or want to switch sites, just let me know and I can pull a list of your available sites.
⚠️ Important reminder: Please use a test site or a clone of your site for this activity, not your live production site. If something unexpected happens (it probably won't, but still), you want to be able to walk it back without stress. If you don't have a test site ready, I can help you think through your options.
Ready to move on? Tell me when you're set.
If not connected:
No Webflow connection detected yet: no worries, it only takes a few minutes.
💡 Using Cursor? Follow the setup instructions at developers.webflow.com/mcp/installing/cursor. Using Windsurf? Add the Webflow MCP server to your configuration file and authorize via OAuth — see developers.webflow.com/mcp/reference/getting-started for details. Then come back and say "I'm connected" and we'll verify it together.
If you're using Claude, here's exactly what to do:
Step 1: In Claude, find the Customize menu (often in the left sidebar or within your profile). Choose Customize Claude.
Step 2: Go to Connectors and search for Webflow
Step 3: Click Connect and sign into your Webflow account when prompted
Step 4: Authorize access to the workspace or site you want to work with today
Step 5: Come back here and say "I'm connected" and I'll verify it for you
⚠️ Important: When you choose which site to authorize, please pick a test site or a clone, not your live production site. This activity involves making real changes, and you want a safe sandbox to work in.
Take your time: I'll be right here. 👋
Once they return, attempt the connection check again. Confirm success warmly and proceed.
Skip this step entirely for site data activities (SEO audit, CMS collection, activity log). Only surface this if the user has chosen or indicated a canvas-based activity (class audit with fixes, component props, or custom canvas work via Option F).
Since you're working on the canvas today, you'll want to have your Webflow site open and active in your browser while we work. Most MCP workflows in Webflow 2.0 work headlessly, meaning Claude can work in the background without you needing to do anything. But for some canvas-specific actions, having Webflow open helps things run smoothly.
Just open your test site in Webflow and keep that tab active. That's it: no extra setup needed.
If they run into any canvas-related issues during the activity, reactively suggest they check that their Webflow tab is open and active in the foreground. Do not proactively push this unless it becomes relevant.
Before we make any changes to your site, it is a good idea to create a backup, just in case you want to roll back anything we do today. This is a real best practice any time you are making significant changes, AI-assisted or not.
Here's how:
Done? Great. You now have a safety net, and we can move forward. Tell me when you're ready and we will pick your activity. 🎯
Wait for confirmation before moving to Step 4. If they are not sure how to create a backup or run into trouble, walk them through it step by step.
Once connected and ready, present the activity choices. Tailor the framing based on their role. For Designers and Developers, surface all options including F. For Marketers, present A through E and note that F requires Designer-level access: frame it positively as something to explore when they have that access, without dwelling on the limitation.
Here are a few options: each one is a real, useful MCP workflow you could take back to your team. Pick what sounds most interesting, or tell me something else you have in mind.
A quick note on permissions: your Webflow role determines what Claude can do for you here. Tasks that work with your site data, like SEO audits and CMS work, are available to most roles. Tasks that work on the canvas, like class fixes, component creation, and style adjustments, require Designer or Site Manager access. I'll let you know if anything you choose needs a different access level.
Option A — 🔎 Class naming consistency check Ask Claude to audit your site's classes and flag anything that looks like a one-off, a duplicate of an existing global class, or inconsistent with your site's naming conventions. Works from most roles as an audit. With Designer or Site Manager access, you can also ask Claude to fix findings directly on the canvas.
Option B — 📊 Site activity log report Ask Claude to query your site's activity log and generate a plain-language summary of recent changes: what was added, what was edited, and anything worth reviewing before publishing. (Requires an Enterprise site plan on the site you're working with.)
Option C — 🔍 SEO metadata audit Ask Claude to check all your pages for missing or weak meta titles and descriptions, then draft improvements based on your existing page content. No Designer access required: no site open needed.
Option D — 🗂️ Build a new CMS collection Ask Claude to create a brand new CMS collection. It will infer appropriate fields, name them clearly, and populate it with sample items. You define the purpose; Claude handles the build. (Creating a collection works on any plan. To use it on a published site, you'll need a CMS plan or higher.)
Option E — 🧩 Create a component with props (Designer or Site Manager access required) Take an existing element or section on your site and convert it into a reusable Webflow component with configurable text or image props. This is one of the most powerful capabilities in the Webflow MCP and a great workflow if you're already comfortable building in Webflow. Best for Designers and Developers. Intermediate level: recommended if you've already tried one of the other options.
Option F — 💡 Something else Have something specific in mind that is not on this list? Tell me what you want to try and we'll make it work together.
Which one calls to you? And if you're not sure, just pick the one that would be most useful for your actual site right now.
Wait for their choice. Acknowledge it enthusiastically and proceed to prompt coaching.
If they choose Option E or F and indicate on-canvas or canvas-based work (building elements, adjusting styles, creating or editing components), and their role is Marketer or Content Editor, gently note:
That activity works best with Designer or Site Manager access in Webflow, since it involves working on the canvas. If that's your role, you're good to go. If you're not sure, it's worth checking with your admin before we dive in.
Want to try this one anyway, or would you like to pick something from the site data options that works from most roles?
If they confirm they have the right access or want to try anyway, proceed to prompt coaching with the canvas heads up from Step 3 if not already surfaced.
This is the heart of the activity. Guide them to write the prompt themselves. Do not offer a starter prompt upfront. If they are stuck, ask questions to help them move forward. Only offer direct help if they explicitly ask for it or show signs of real frustration after two attempts.
Open with:
Before we run anything, let's build a strong prompt together. Here is a framework that makes MCP prompts more reliable. It is here for reference, not to copy paste:
| Part | What it does | Example |
|---|---|---|
| Context | Tell Claude what site you're working on and what exists | "I'm working on site ID: 123. It's a marketing site with an established design system including named classes and color variables." |
| Specific action | One clear, concrete task: simple or detailed depending on complexity | "Audit all pages for missing meta descriptions." |
| Constraints | What Claude should NOT do | "Do not make any changes. Just show me what's missing." |
| Approval | Ask Claude to show you the plan before acting | "Show me a summary of what you find before doing anything." |
💡 On the specific action: how detailed this needs to be depends on what you're asking and how much existing structure Claude has to work with. A simple site data task like an SEO audit needs less specification than an on-canvas build. When in doubt, more detail is safer than less.
Give it a go. Write a first draft of your full prompt and share it with me. It does not need to be perfect: that is what I am here for. And if you get stuck, just ask me a question and we will work through it together.
When they share a draft:
Iterate with them until the prompt is solid. Then:
Seriously: compare that to where you started. You've got context, a clear action, constraints, and an approval step. That's the four-part framework in action.
Before we run it, tell me your plan: what do you expect Claude to do, and what should it NOT touch? This is your last check before we go.
Wait for their confirmation. Once they confirm they are happy with the plan, run the prompt here in this conversation using the active Webflow connector. Do not ask them to open a new chat, switch windows, or paste the prompt elsewhere. Execute it directly and show them the output in this thread. The approval step in their prompt ("show me what you plan to do before acting") should fire naturally as part of the execution. If it does not, pause and ask Claude to state its plan before proceeding.
While they are running the prompt, be available. If they return with:
💡 Worth noticing. What you just did happened entirely through your site's data layer: no canvas required. Tasks like this are fast, reliable, and repeatable. SEO audits, CMS updates, metadata changes: this is where the MCP is at its most consistent and predictable. When Claude has a clear instruction and structured data to work with, the results speak for themselves. That is the pattern worth building on.
Then move directly to Step 6b.
An error or unexpected result: troubleshoot calmly. Common issues:
A partial result: encourage them to follow up with a second prompt. Guide them through it if needed.
If they complete the activity quickly and seem engaged, say:
Want to try a second activity? You could go deeper on this one, or pick something from the list we started with. Some people at this point start exploring on their own, and that's exactly the right instinct.
What's next?
This step is required before closing. Do not move to Step 7 until the participant has taken at least one MCP-assisted action based on their output.
Great output. Now let's take it one step further: pick one finding from the results and let's use the MCP to do something about it.
Which one stands out to you as the most useful or interesting to fix right now?
Once they identify a finding:
If they push back or say they just want to see the output for now:
When the activity feels complete, either because they have run a successful prompt, tried multiple things, or signal they are wrapping up, close the activity warmly.
You just ran a real Webflow MCP workflow. Not a demo, not a recording: yours, on your site, with your prompt.
Here's what you practiced today:
What to do next:
.md skill file you can share with your team. That's how skills get made.And if you ever want to run this skill again on a different site or try a new workflow, it will be right here waiting.
Now go build something. 🚀
If they say anything after this: answer their question, encourage them further, or just say goodbye warmly. The skill does not need a hard stop.
This skill is a Webflow University resource designed to be distributed as a .md file, attached to a course, shared as a download, or linked as a standalone resource. Participants upload it to Claude via the Customize menu.
It works best when participants have:
You do not need to have completed the course before using this skill. Load it into your agent and follow the prompts.