Based on the YouTube Video by Magnaem @ Memberstack
TL;DR: Webflow now lets you give AI agents like Claude ongoing instructions about your site through Skills and Rules. Skills guide how an agent should approach a task, such as writing style or design system use. Rules are fixed, non-negotiable criteria that apply to every action, such as SEO or accessibility standards. Once set up, you can connect Claude to Webflow and have it reference these instructions automatically, whether it is updating variables, and editing or writing components.
If you have ever had to re-explain your brand guidelines to an AI tool every time you start a new session, Webflow's Agent Instructions solve that problem. In this walkthrough, Magnaem from Memberstack shows how to set up Skills and Rules inside Webflow, then connect Claude so it can audit and update a live site using that context.
Skills vs. Rules
Before building anything, it helps to understand the two types of instructions Webflow supports.
Skills are free form guidance that describe how an agent should work. This might include your writing style, how to use your design system, or the general approach you want an agent to take for a certain kind of task.
Rules are short, fixed criteria that apply to every single action an agent takes on your site. These are the non-negotiables, things like SEO formatting or accessibility standards that should never be skipped.
Where to Find Agent Instructions
Inside Webflow, open the left panel and look for the Instructions toggle. This is where Skills and Rules live, and where you will add your own. Once you clone this site, you will have access to them so that you are able to edit them according to your brand.
Building Out the Skills
Magnaem starts with two Skills.
The first is a Brand Guidelines skill. After clearing the default template, she pastes in a brand guideline skill she had already created in Claude, then saves and switches it on so the agent can reference it going forward.
The second is a Design System skill. This one is more detailed and includes variable collections, color schemes, typography, classing conventions, components, shadows, and imagery guidance. Her setup leans on Finsweet's Client First naming convention, though she notes you can swap that out if your site uses a different system.
Building Out the Rules
With the Skills in place, we move on to four Rules.
An SEO rule that tells the agent how to handle meta titles, meta descriptions, and image alt text.
An AEO rule with instructions related to how engines should work with the site.
A Naming rule, which is tied closely to Client First class structures. If you are not using Client First, this is the document you would need to rewrite for your own conventions.
An Accessibility rule to keep every agent action aligned with accessibility standards.
She also adds one custom rule specific to her own Webflow build, which is not based on a template.
Each Skill and Rule is switched on individually after it is added, so the agent actually has access to it.
Connecting Claude and Verifying the Setup
Once everything is in place, Magnaem connects her Webflow site to Claude through the connector and asks it to check whether the Agent Instructions and Skills are properly set up. Claude is able to reference the Skills and Rules, confirming the setup worked.
Updating Site Variables with Claude
With the connection confirmed, the real test begins: using Claude to update the site's default variables to match the brand's actual design system.
Claude audits the site and finds that variable collections already exist, so those are simple to update. Colors, however, have some conflicts. Claude matches the existing colors row by row and renames the variables so they align with the brand documentation.
A few issues still need manual attention, including a color mix used for borders and the font upload. The font has already been uploaded to Webflow, so that part is handled separately. She also manually changes the neutral darkest color for the borders.The typography is already bound to the base mode, while the default colors and color schemes have also been updated.
Verifying Light, Dark, and Base Modes
To confirm everything works correctly, we check a style guide section built specifically to test light mode, dark mode, and the brand's base mode. Contrast looks correct in both light and dark mode, and the base mode, while still editable, works fine as is.
Updating Button and Eyebrow Components
The final step is updating the button and eyebrow components to match the new design system. If you have not defined these yet, Claude can help set them up by referencing the components section of the Design System skill, which includes guidance for buttons, eyebrows, inputs, feature cards, and more.
Why This Matters
Once you have created your AI Agent Instructions, you can use them when working with an agent to edit your site, update variables, or add meta descriptions, meta titles, and image alt text. The Skills and Rules give the agent a clearer understanding of how your website works and how you want it to be managed.
FAQ
Q. What is the difference between a Skill and a Rule in Webflow?
A. A Skill is flexible guidance describing how an agent should approach a task, like writing style or design system usage. A Rule is a fixed, non-negotiable requirement that applies to every action, like SEO formatting or accessibility standards.
Q. Do I need to use Client First naming to use these Skills and Rules?
A. No. The example setup uses Finsweet's Client First convention, but the Naming rule can be rewritten to match whatever class structure your site uses.
Q. Can Claude use the Skills and Rules after they are created?
A. Yes. In the video, Claude is connected to the Webflow site and is able to reference the Skills and Rules that were created in Webflow.
Written by
Neal
Content Writer
