Agent Instructions in Action

Agent Instructions give your agent context about your site: how your team builds, what your brand sounds like, which components to use, and which standards to follow. Once they’re set up, an agent connected through MCP, like Claude, Cursor, or another supported agent can read those instructions and use them while it works.

In this video, we’ll see how those instructions shape a real task, what the agent does with them during a session, and how to troubleshoot the result when it doesn’t quite match what we expected.

We already have a few instructions in place. There’s a class naming rule that applies whenever the agent creates new classes. And there’s a design system skill that tells the agent how to work with our components and variables. Let’s put those instructions to work.

It can be successful too

We’ll open a session with our agent, Claude, and give it a realistic task: “On the homepage, add a feature section with three features below the hero. Use our existing design system components and variables, and use placeholder copy for the headings and descriptions.”

This is a normal, specific prompt. We’re telling the agent what to build and where to build it, while our instructions handle the component choices, variables, implementation details, and class naming.

Now let’s watch what happens. Before the agent builds anything, it calls the guide tool, which points it to our stored instructions. The agent then reads our instructions and builds the section.

It uses the Feature Card component, selects the correct variants, and names the classes according to our rule. 

And all of that happens without us repeating those requirements in the prompt.

And the important thing here is that the agent isn’t making those decisions by guessing. It reads our instructions at the start of the session and uses them alongside the prompt to decide how it should work.

That’s the value of Agent Instructions: they help the agent make better decisions without us repeating the same context every time.

Now, one thing to keep in mind: the agent may not always load our instructions automatically. The guide tool is designed to encourage that, but different agents can handle it differently.

This is a great example. Claude’s results don’t reflect our standards in this instance, maybe it uses the wrong component, ignores a naming convention, or writes copy that doesn’t sound like our brand, it’s worth taking a closer look.

We can start by asking the agent directly: “Did you use my Agent Instructions for this task?” If it didn't, we can ask it to reload them and try again. And we can always proactively ask the agent to use them in future prompts.

If we keep running into issues, we can go back to the instruction itself. Make the guidance more specific, point to the exact resource, or add an example. But even with solid guidance, the agent may still give us a different result. That’s just part of working with AI tools.

It can also help to ask the agent what it found on the site. If a component was renamed, a variable changed, or there are several similar patterns to choose from, the instruction may be accurate but out of date, or the site itself may be giving the agent mixed signals.

The best Agent Instructions aren’t written once and left alone. When the agent makes a choice we wouldn’t have made, we can use that as feedback and improve the instruction over time. The agent can even be a partner in this. We can ask, “What instruction would have helped you make a better decision here?”

The answer might be more insightful than we expect.

OK, we saw how Agent Instructions shape a real task, how the agent uses them during a session, and what to check when the result doesn’t match what we expected.

And that’s Agent Instructions in action in Webflow.

‍