Webflow AI Agent Instructions: How to Set Up Skills and Rules That Keep AI On-Brand (2026)

AI agents can now build pages, write CMS content and edit styles inside Webflow. That’s a huge time saver, until an agent uses the wrong heading style, invents a brand tone or ships a page without alt text. The fix is Webflow AI agent instructions: a set of skills and rules stored with your site that tell every agent how your site should be built and written.

I build Webflow sites for businesses and agencies, like the Northman law firm website and the Selhono interior design studio. In this guide I explain what agent instructions are, how skills and rules differ, how to set them up step by step, and what I would put in them to keep AI work on-brand and SEO-ready.

Key takeaways

• Agent instructions are skills (detailed guides used when relevant) and rules (short non-negotiables applied to every action).
• They live inside your Webflow site, so the AI Assistant and any AI tool connected through the Webflow MCP server can read them.
• Webflow can generate skills from your site: brand guidelines, design system, asset guidelines and CMS guidelines.
• References link instructions to your real variables, components and CMS items, so they never go out of date.
• New skills and rules are off by default. Review them, then switch them on.
• Share one set of instructions across sites with a Shared Library.

What are AI agent instructions in Webflow?

Webflow AI agent instructions are guidance documents saved with your site that explain to AI agents how to work on it. They describe your design system, voice and tone, CMS structure and policies. Because they are stored in the site itself, they stay available between sessions and every connected agent reads the same source of truth.

Think of them as the onboarding document you would give a new designer or copywriter, written for AI. Without them, an agent guesses. With them, it follows your brand, your class naming and your SEO standards.

Instructions are written in Markdown. A skill is a folder with a main SKILL.md file, and a rule is a single document. You edit both in the Instructions panel in the Webflow Designer’s left toolbar, using the formatting toolbar or a code view for raw Markdown.

What is the difference between skills and rules?

Skills explain how to work, and an agent uses one when it is relevant to the request. Rules define what must always be true, and an agent applies them to every action in your site. Use skills for detailed, task-specific guidance and rules for short requirements that should never be broken.

Here is how the two work together when you give an agent a task:

Who can create and edit agent instructions?

Only Site managers and Designers can create, edit and delete agent instructions. Marketers and Content editors can read them, so agents working for them still follow the rules, but they cannot change them. Reviewers cannot read instructions at all.

Access for custom roles can’t currently be changed. For agencies this split works well: the design team owns the instructions, and the client’s content team benefits from them without being able to edit them by accident.

How do you generate skills from your Webflow site?

The fastest start is to let Webflow analyse your site and write the first skills for you. Open the Instructions panel, click the plus icon in the Skills section, pick the skill types under Autogenerate skills and click Generate. Webflow builds them in the background and notifies you as each one is ready.

Webflow can generate four types of skills:

1. Brand Guidelines: how to write and edit content in your brand voice, tone and messaging.
2. Design System: how to use your components, variables, colours and spacing.
3. Asset Guidelines: how to use your assets, logos, colours and visual style.
4. CMS Guidelines: how to create consistent content in a specific CMS Collection. You can pick up to five Collections at a time, and Webflow creates a separate skill for each.

Treat a generated skill as a first draft. Read it, fix anything the analysis got wrong, add the details only you know, then switch it On at the top of the SKILL.md document.

How do you create a skill or rule from scratch?

To create one manually, open the Instructions panel, click the plus icon in the Skills or Rules section and choose a blank skill, a blank rule or a rule template. Write your guidance in the editor, review it, then toggle it On. New skills and rules stay off until you do.

Rules come with three prewritten templates:

• SEO defaults: add meta titles, descriptions and alt text on every page.
• Naming: use kebab-case class names that follow a list of permitted and restricted words.
• Accessibility: follow guidance on contrast, focus states and screen readers.

The templates are based on common best practice, not on your site, so adapt them before you enable them. A skill can also include supporting files, such as images or extra Markdown files, for agents to reference.

To manage an instruction later, hover over it and click the more actions dots to edit its settings (name and description), export, rename or delete it. On sites created with the AI site builder you also get Edit with AIA to change it with the AI Assistant. You can delete supporting files inside a skill, but not its SKILL.md.

How do references keep instructions up to date?

References are links to real resources in your site, inserted into an instruction from the reference menu in the editor toolbar. Webflow stores a reference token and resolves it when an agent reads the instruction, so the agent always sees your current values instead of a copy that drifts out of date.

You can reference:

• Design system: variables, style selectors, components, assets and interactions
• Content: pages, CMS items and locales
• Other instructions: skills and rules

This is the feature that makes instructions practical. A rule can say “use our brand colours and heading styles” and point to the actual variables. If you change your primary colour next month, the instruction is still correct without anyone editing it.

How do you import and export instructions?

You can move instructions in and out of Webflow as a zip file. Import only reads .md and .mdc files, and skills and rules can sit in folders or at the zip root. Export works for all instructions at once from the top of the Instructions panel, or for one instruction from its more actions menu.

Webflow recommends a structure like this:

instructions.zip
├── skills/
│   └── skill-name/
│       ├── SKILL.md
│       └── references/
├── skill-name/
│   └── SKILL.md
├── rules/
│   └── rule.md
└── rule.mdc

To import, open the Instructions panel, click the import instructions icon, drop in your zip, click Import, review the files and click Done. This is handy if you already keep skills for tools like Claude Code or Cursor: the same SKILL.md approach carries over.

How do AI tools use instructions through the Webflow MCP server?

The Webflow MCP server connects outside AI tools, like Claude, to your Webflow site. Through it, an agent can list, read, create, update and delete your skills and rules. Agents should read your rules before any action and use skills when relevant, and you can name a skill to make sure an agent uses it.

Model Context Protocol (MCP) is an open standard that lets AI apps use outside tools and data. In practice you can ask your agent “list the agent instructions in my site” to check what it sees, or say “use the Brand Guidelines skill to draft this page” to point it at one skill.

Webflow notes that AI can make mistakes, and recommends starting every new agent session by asking the agent to read your site instructions first. It costs one sentence and prevents most off-brand output.

How do you share instructions across multiple sites?

Agent instructions are a Shared Library resource, like components and variables. Add them to a Shared Library, install them on other sites in your Workspace, and push updates from one place. A brand lead can maintain one set of instructions and roll it out to every site that needs it.

This matters most for agencies and companies with several sites: a main site, landing pages and regional sites. Instead of copying a brand voice skill into each one and letting them drift apart, you edit it once and push the update.

What should you put in your skills and rules?

Keep rules short and testable, and put the detail in skills. A good rule is something you could check with a yes or no (“every image has alt text”). A good skill reads like a briefing for a new team member, with examples of what good looks like.

Here are rules I would add to most business sites, because they protect SEO and AEO:

- Every page has a unique meta title (50–60 characters) and meta description (110–160 characters).
- Every image has descriptive alt text; decorative images have empty alt text.
- Use one H1 per page. Phrase H2s as the questions customers ask where it fits.
- Put a 40–60 word direct answer under each question heading.
- Use existing components and variables. Never hard-code colours or font sizes.
- Class names are kebab-case.

And skills worth writing first:

• Brand voice: tone, words you use and avoid, a short “good vs bad” example.
• Design system: which component to use for which job, spacing rules, how to build a new section.
• One CMS skill per Collection: required fields, length of summaries, how to write slugs and SEO fields.

If AI search matters to you, pair this with my guide to AEO for Webflow. Agent instructions are how you make those AEO habits automatic.

Common mistakes to avoid

Most problems with agent instructions come from a handful of avoidable mistakes:

• Forgetting to switch them on. New skills and rules are off by default.
• Rules that are really essays. Long rules get applied badly. Move detail into a skill.
• Pasting values instead of referencing them. Hard-coded colours go stale; references don’t.
• Enabling templates unread. Templates aren’t based on your site. Edit them first.
• Skipping the review of generated skills. They are a draft, not a finished guide.

Final thoughts

AI agents are only as good as the context you give them. Webflow AI agent instructions turn your brand guide, design system and SEO standards into something every agent reads before it touches your site. Start with the generated skills, add three or four tight rules, switch them on and test with a real task.

If you would like help setting up agent instructions, a design system or an AI-ready Webflow site, get in touch. Source: Webflow Help Center, Create and manage AI agent instructions.

Frequently Asked Questions