Webflow Agentic Starter — Claude Code + MCP

A plug-and-play starting point for giving Claude Code direct access to your Webflow site. Claude can build elements, manage styles, audit the site, update CMS content, and more — all driven by your design system and framework conventions.

Skills come from the official webflow/webflow-skills repository and are fetched live, so you always have the latest capabilities without maintaining a local copy.

Who this is for

Persona	What you get from this repo
Marketer	Ask Claude to build landing pages, update CMS content, and audit site health — no code required
Designer	Describe or screenshot a UI and have Claude build it in Webflow, precisely following your variables and class system
Developer	Automate Webflow workflows, manage components at scale, and let Claude handle repetitive DOM and style work
Content Manager	Bulk-create or update CMS collections, set up new collection schemas, and get architectural guidance on content structure
SEO	Audit assets for missing alt text and non-SEO-friendly filenames, scan for broken or HTTP-only links, and score overall site health
QA / Reviewer	Run accessibility audits, catch broken links across pages and CMS content, and review custom code before it ships

How to use this repo

1. Clone or fork this repo into your working directory
2. Connect your Webflow site via OAuth — see Connecting to a Webflow Site
3. Populate your context files — add your CSS variables to context/style-guide.md and your framework rules to context/framework-principles.md — see Context Files
4. Open Claude Code in this directory — it automatically loads CLAUDE.md as project-level instructions
5. Start prompting — describe a UI, paste a screenshot, or invoke a skill (e.g. /site-audit)

Claude Code automatically picks up CLAUDE.md when you open a session in this directory. No extra configuration needed beyond the OAuth connection.

Connecting to a Webflow Site

This project uses the Webflow connector for Claude Code to authenticate via OAuth. The connection grants Claude access to one site at a time, scoped to whichever site you selected during the OAuth flow.

Initial setup

1. Open Claude Code and navigate to Settings → Connectors
2. Find the Webflow connector and click Connect
3. You'll be redirected to Webflow's OAuth page — log in and select the target site
4. After authorizing, you'll be redirected back to Claude Code with the connection active

Switching to a different site

1. Go to Settings → Connectors → find Webflow → Disconnect
2. Click Connect and repeat the OAuth flow, selecting the new site
3. Restart your Claude Code session to pick up the new site context

Plugin Marketplace Architecture

All skills in this project originate from the official Webflow skills repository: webflow/webflow-skills. Claude Code's plugin marketplace system connects directly to this GitHub repo — you're always running the latest skill definitions without manually updating anything.

How it's wired up

Important: Editing settings.json alone is not enough — plugins must be installed first via Claude Desktop or the CLI. The settings.json entries activate and configure plugins that are already installed. See Installing plugins below.

Once installed, three settings in .claude/settings.json work together:

{
  "extraKnownMarketplaces": {
    "webflow-skills": {
      "source": "github",
      "repo": "webflow/webflow-skills"
    }
  },
  "enabledPlugins": {
    "webflow-designer-tools@webflow-skills": true,
    "webflow-skills@webflow-skills": true
  },
  "permissions": {
    "allow": ["mcp__webflow__*"]
  }
}

Setting	What it does
extraKnownMarketplaces	Registers the webflow/webflow-skills GitHub repo as a named marketplace called webflow-skills
enabledPlugins	Activates specific installed plugins for this project
permissions.allow	Pre-approves all Webflow MCP tool calls so Claude doesn't prompt you on every action

Because extraKnownMarketplaces points to the live GitHub repo, Claude Code fetches skill definitions directly from webflow/webflow-skills each time. There is no local copy to maintain — any update Webflow ships to the skills repo is automatically available on next use.

Two types of plugins

There are two distinct plugin types, and they work differently:

Type 1 — Core plugins: one enabledPlugins entry per plugin

"webflow-designer-tools@webflow-skills": true

These are standalone plugins that each provide a single skill. Installing one is as simple as adding its entry to enabledPlugins. Removing it means setting the value to false or deleting the entry.

Example — enabling the CLI skills plugin:

"enabledPlugins": {
  "webflow-designer-tools@webflow-skills": true,
  "webflow-cli-skills@webflow-skills": true
}

Available core plugins from webflow/webflow-skills:

Plugin key	Description
webflow-designer-tools@webflow-skills	Build and manage page structure, elements, components, and styles
webflow-cli-skills@webflow-skills	CLI workflows: DevLink, Cloud deployments, Designer Extensions
webflow-code-component-skills@webflow-skills	Build and deploy Webflow Code Components

Type 2 — Skills bundle: one entry, granular control via CLAUDE.md

"webflow-skills@webflow-skills": true

This single entry installs a bundle of many skills at once. Rather than toggling individual enabledPlugins entries, you control which skills Claude actually uses via the Use column in the skills table in CLAUDE.md:

| Skill          | Plugin                          | Description         | Use     |
| -------------- | ------------------------------- | ------------------- | ------- |
| `site-audit`   | `webflow-skills@webflow-skills` | Site health audit   | `true`  |
| `link-checker` | `webflow-skills@webflow-skills` | Broken link scanner | `false` |

Setting Use to false tells Claude never to invoke that skill, even though it's technically installed. This lets you enable the whole bundle in one line while only exposing the skills that are relevant to your project.

To enable an additional skill from the bundle:

1. Browse the full list in the webflow/webflow-skills README
2. Add a row to the skills table in CLAUDE.md with Use set to true

Example — enabling the link checker:

| `link-checker` | `webflow-skills@webflow-skills` | Scans pages for broken or HTTP-only links | `true` |

Note: Changes to CLAUDE.md take effect at the start of a new session. If you're already in an active session, either start a new one or explicitly tell Claude to re-read CLAUDE.md — for example: "Re-read CLAUDE.md and apply the updated skill configuration."

Restricting MCP tool permissions

The default wildcard "mcp__webflow__*" pre-approves every Webflow MCP tool. If you want to lock down access to specific tools only, replace it with individual entries:

{
  "permissions": {
    "allow": [
      "mcp__webflow__data_sites_tool",
      "mcp__webflow__element_tool",
      "mcp__webflow__style_tool"
    ]
  }
}

.claude/settings.local.json is gitignored — Claude Code creates it locally for per-machine approvals outside the wildcard. Do not commit it.

Installing plugins

Plugins must be installed before settings.json entries can activate them. There are two ways to do this:

Via Claude Desktop

1. Click Customize in the left sidebar
2. Under Personal plugins, click the + button
3. Select Browse plugins
4. Search for Webflow skills and install it

The plugin will appear under Personal plugins once installed.

Via CLI

# Register the marketplace (if not already in settings.json)
claude plugin marketplace add webflow/webflow-skills

# Install a specific plugin
claude plugin install webflow-designer-tools@webflow-skills

Context Files

Claude uses two files in context/ as its operating memory for your specific project. These are not generic — they need to be tailored to your site before Claude can work efficiently. Claude reads them at the start of each session and uses them to make every style and class decision.

Note: The context files that ship with this repo — style-guide.md and framework-principles.md — are scoped to the designer-tools skill. As you enable additional skills (e.g. site-audit, link-checker, accessibility-audit), consider adding dedicated context files in context/ for each one. For example, an SEO-focused skill might benefit from a context/seo-guidelines.md capturing your metadata conventions, redirect rules, or URL structure. Reference any new files in CLAUDE.md so Claude knows when to read them.

context/style-guide.md — CSS Variables

This file contains only your site's CSS variable definitions: semantic tokens, brand color primitives, and system/status colors.

Why keep it minimal?

The file intentionally omits utility classes, component structure, and spacing tables. Here's why:

• Framework utility classes (typography, spacing, layout) are documented in context/framework-principles.md — no need to duplicate them here
• Component structure (nav, buttons, forms) changes as you build. Claude fetches this live from Webflow using element_tool and style_tool rather than relying on a static snapshot that goes stale
• CSS variables are the one thing MCP tools can't fully resolve in a single call — variable_tool returns references like var(--base-color-brand--blue) but not the resolved hex value. The semantic → primitive → hex chain is small and stable enough to document once here and avoid chained MCP calls on every build

How to populate it:

Option A — manually in Webflow Designer, open your CSS variables panel and copy token names and values into the table format.

Option B — ask Claude to do it:

"Populate context/style-guide.md with my CSS variables. Use variable_tool → get_variable_collections then get_variables for each collection."

How to keep it up to date:

When you change a CSS variable in Webflow, tell Claude:

"Update context/style-guide.md — I changed --base-color-brand--blue to #1a4fff"

CLAUDE.md also instructs Claude to update the file automatically after any build session where a token value changes.

---

context/framework-principles.md — CSS Framework Rules

This file contains the naming conventions, class structure rules, and utility class system for your CSS framework. Claude reads it only when using the designer-tools skill for DOM and style work — not for read-only queries, CMS operations, or site audits.

Why it exists:

Claude needs to know your framework's class naming patterns to avoid inventing class names or breaking your existing system. Without this file, Claude would either guess incorrectly or ask for clarification on every element it builds.

Which framework to document here:

This repo ships with a Client-First v2.1 example. Replace the contents with the documentation for your own framework. Common choices:

• Client-First
• Mast
• Lumos

How to populate it from your framework's docs — three steps:

1. Find the relevant documentation pages — focus on naming conventions, class structure rules, utility class tables, and spacing/typography systems. Skip marketing copy and video tutorials.
2. Convert to Markdown using AI tool of choice:

   "Convert these documentation pages into a clean Markdown reference file. Focus on naming conventions, utility class tables, structural rules, and page structure guidelines. Remove any marketing language." Paste the raw doc content and let Claude format it.

3. Replace the contents of context/framework-principles.md with the output.

If you're building without a formal framework, document your own naming conventions here. A simple rule like "component classes use component-name_element-name format" is enough for Claude to stay consistent across your project.

Context Optimization

This repo is structured to minimize how much context Claude consumes per session — keeping responses fast, accurate, and cost-efficient.

Optimization	How it works
style-guide.md is token-only	Framework utilities live in framework-principles.md. Live component structure is fetched via MCP. Only the CSS variable resolution chain — which MCP can't resolve in one call — is stored statically.
framework-principles.md loads conditionally	Claude only reads this file when using designer-tools for DOM and style work. CMS tasks, site audits, and read-only queries skip it entirely, saving ~500 lines of context per turn (based on file shipped with repo).
Only enabled skills appear in CLAUDE.md	Disabled skills are not listed in the skills table. Their descriptions don't consume context every turn.
MCP fetches live component data	Element trees, existing styles, and component lists are fetched fresh from Webflow rather than maintained as static files that drift out of sync.
Context files load from disk, not history	CLAUDE.md, style-guide.md, and framework-principles.md are re-read from disk at the start of each session. Running /clear never loses your project configuration.

---

When to /clear

The /clear command resets the conversation context without closing your session. Claude Code also compresses older messages automatically as context grows, but proactive clearing keeps things lean and responses sharp.

Clear when switching tasks:

• Finished building a section → starting a new component or page
• Finished a site audit → starting to build something
• Switching from CMS work to visual design work
• Starting a fresh request that has no relation to what you just did

Clear after large MCP responses you're done using:

Webflow MCP calls can return large payloads. Once you've acted on the data, retaining them wastes context:

• After query_elements returned a full element tree
• After list_components or query_styles returned a long list
• After element_snapshot_tool output you've already finished working from

Clear after failed attempts:

If a build attempt didn't work and you're restarting from scratch, the failed tool calls and responses are noise. Clear and give Claude a clean starting point.

Don't clear mid-task:

• While Claude is actively building something across multiple steps
• When a previous tool result is still directly informing the next step (e.g. you just queried styles and are about to create a class based on the result)
• Immediately after loading context files but before using them

A good rule of thumb: if you can summarize the prior conversation as "we finished X", it's safe to clear before starting Y.