Create & manage Agent Instructions

When you connect an agent to Webflow through the MCP server, it can see what’s on your site. But that doesn’t mean it knows how your team wants the site to be built. It won’t automatically know why we use certain components in certain situations, how our class naming works in practice, or what makes our brand voice sound like us.

In this video, we’ll talk about what skills and rules are, build both a skill and a rule, go over references, and look at how to organize, import, and export what you’ve built.

But first, what’s the difference between a rule and a skill? Nothing. Except, they’re completely different. Rules give the agent guidance that applies across different kinds of work, like your site’s accessibility or SEO standards. Skills describe how to handle a particular task or workflow, like building with your design system or writing in your brand voice. If this is confusing, it’s because it is. Rules apply to every task but skills are only referenced depending on that task.

And the two can work together. A skill for building with your design system might also reference a rule for naming classes.

Now, let’s build some instructions. There are a few ways you can do that. First, manually. If we click the plus button next to skills or rules, we see the option to start blank.

Skills, Rules, Skills, Rules, Skills, Rules, Skills, Rules.

We created a few rules manually already and you can see them here and you can make changes to these rules at any time. Behind the scenes, the editor uses markdown, but we can see and work with it intuitively in Preview mode.

Mark down, Preview mode, Mark down, Preview mode, Mark down, Preview mode.

And you can also start a new rule from a few simple templates here.

But with Skills, they can also be autogenerated from patterns that already exist on your site. When we click, we see options to generate Brand Guidelines, Design System, Asset Guidelines, and CMS guidelines… or all of those at once. And that is if our site has a CMS, which it does. We can even specify which collection we want the skill to be about. Just click Generate, and the skills appear, in draft, right here in the panel. And they can even reference our existing components, variables, and other site specific things.

And when we’re finished, we can make any needed edits, then toggle them On. That takes it from working draft to readable by agents on your site. 

And another option for creating or refining skills and rules: we can ask an agent we already use, like Claude connected to the Webflow MCP server, to inspect our site and any other resources we want to give it, like brand guidelines, and draft an instruction based on what it finds. And when it’s ready, most agents can draft the instructions for you, right in Webflow.

But before we move on, let’s talk about references. Our autogenerated skills already came with some from my site. But what are they? They connect a value or thing to the actual resource on the site, not just a text description of it. So instead of referring to something like a brand color as a hex code or color name, we can connect it to the actual color variable. That makes the guidance more precise and keeps the reference connected if the variable changes later. 

And we could add references to many other things in instructions, from other skills or rules to specific Pages or Locales.

Now let’s look at how to manage what you’ve built. We can organize our rules and skills into different categories. We have rules for AccessibilityAccessiblity, asset performance, Class naming, Forms, SEO — you and your team get to set Rules and Skills that work best for you. Making it easier for teammates to understand what is covered. We can delete an instruction. And we can organize them into folders or subfolders, which helps keep them organized as they grow. 

And as for sharing, we can export all the instructions as a zip file or a single instruction as a .md file. That works for one-off sharing, backups, or client handoffs. We can also import instructions in a batch or one by one. 

Agent Instructions work just like other library resources. What if we wanted to use these Agent instructions on another site. We can do that. Just install the shared library and manage updates from one place. This works especially well when you’re managing several client sites or keeping brand standards consistent across a portfolio.

References to resources in that same Shared Library stay connected to the design system pieces they reference, keeping the materials and the guidance together.

So that’s Agent Instructions. We went over skills and rules, created both a skill and a rule,, referenced real site resources in instructions, and looked at how to organize and share instructions.

And that’s how to create and manage Agent Instructions in Webflow.

‍