How Claude's Design Agents Work

Okay, so this video is not about how to use Claude Design. If you want a video like that, there's plenty of them out there on YouTube. In this video, I'm going to break down the patterns that the Claude Design agent is using to do some pretty impressive design work, but more importantly, so that you can use those same six patterns in your own vertical agent apps. So, when I first looked at Claude Design, I was pretty impressed by what it could do, but my first reaction was that it's kind of just running Claude code under the hood. But, the more that you actually look into this, you realize that there's actually a lot more going on here, and that this is a really well-designed example of a vertical agentic app. So, while everyone else has been making videos focusing on the design stuff and what you can do, what I want to focus on in here is actually how is this built? And what are the lessons that you can take away for your own agentic apps that you're building? Cuz I feel the big lesson here is that this is a really well-done agentic architecture that they've got here. And that architecture can work for pretty much any vertical agent you're building, whether that's a legal agent, a sales agent, a medical agent, a self-education agent, etc. So, obviously Claude Design is made to work with Opus 4. 7. My guess is that the app has actually been finished for a while, and they were just literally waiting on this particular version of Claude to be able to actually roll it out. But, I

really feel the key thing is it's not just the model here that's really impressive. It's the stack of agentic patterns wrapped around this model. And there are six of them here. And once you see them, you can see very clearly how you could use the same patterns for your own agentic apps, whether that be ones that you're going to run locally, or whether that's going to be multi-tenant agents that are running in a cloud, etc. All right, so let's go through these patterns one at a time. So, the first

one is agentic context grounding. And the idea here is that before the agent generates anything, it has to go off and read some kind of source of truth. And they do this really nicely in Claude Design, where they've tried to get you to make a whole design system before you actually start generating things with Claude Design. And that system is pretty detailed. It's got a lot of context in there, both from sort of generalized context about what your brand is, what it represents, those sorts of things. Right through to specific colors, specific fonts, HTML code for buttons, for cards, for all these sorts of things that are going to be used in lots of different kinds of design tasks. So, it goes out of its way to help you set up this context grounding. And then it makes use of that context grounding in whatever it's going to actually do. So, in some ways you can kind of think of this as a rag, but sort of like an agentic rag of where that full design system isn't just injected into a system prompt, like we probably would have done in the past. This is now basically using it in this full sort of sense of progressive disclosure, where the agent is deciding what to read and what to bring into its context window based on what it needs for the particular design task that you're getting it to do. So, I feel like this pattern should be obvious to most people that you could set up the same kinds of things for a legal system, for example, by having templated contracts before drafting. For a sales agent, you could do like a progressive disclosure rag across the CRM before writing any outreach. And the rule here is pretty simple. It's basically just never start generating stuff blindly until your agent has grounded itself on the user's actual

data. Now, the second pattern is actually an extension of this idea of context grounding, which is having a structured memory. And again, this aids in the progressive disclosure, right? The grounding phase doesn't just dump everything into context. It's basically pulling out the right bits at the right times, and it produces a structured artifact that gets reused multiple times in the current project, but also can be stored for future projects. This can be really seen clearly when you look at the Claude Design system. It's literally the agent's persistent memory of your brand and what it is that you're trying to do. Now, I think the lesson here is really fascinating, and it just sort of reinforces that the models have gotten a lot better, is that the way that this memory is actually formatted is not a proprietary format or some sort of weird schema or anything. It's often just using somethings like either markdown or HTML and CSS files. And because the model is really good in that markdown, understanding that HTML CSS, and I could imagine for certain agents you would perhaps use JSON. But, having it in simple formats like this means that this memory is portable to any downstream agent. So, for your vertical agent, the first output shouldn't be some sort of user-facing deliverable. It should be restructuring the context grounding that you're given from the user into this kind of memory artifact. Whether it's going to be style guides, whether that's going to be sales qualification scripts, whatever it is, have your agent build the memory first, and then every subsequent generation gets faster and better. All right, so

the third pattern really relates to what we see in Claude Design. And this is the pattern of having an iterative refinement loop, specifically in this case, a multimodal one. And this is where most sort of agent UX systems sort of fall apart. Most agents give you a chatbot, and that's kind of it. Claude Design has at least five different input modes going on here. You've got chat, you've got voice, you've got where you can hover over a DOM element and sort of describe it or select it. So, that's getting passed in with the voice. So, that gets serialized into a context and passed in with the voice. You can draw on the screen. So, you've got this other vision modality going on as you sort of scribble and edit instructions, etc. And of course, all of this is being done where the agent is actually taking screenshots of its own output. And I think the fact that we can sort of see here this ability to basically talk about something as you're mousing over it, or as you're marking down changes, etc., is really one of the killer functions that makes this thing so good. And I think that the agent here, how it basically is using the LLM to generate its own input UI, so the sliders and the things that you see sort of popping up, those aren't necessarily pre-built components. It's just that the model is generating them as tokens, and then the sort of wrapper for the model, which encompasses the UI of the agent, is able to render them as sliders and buttons and questions and stuff like that. So, for your own vertical agent, don't force everything through a chatbot. Let the model generate its own follow-up controls based on what it just produced. A sales agent, for example, could generate an aggressiveness slider after drafting an email. So, rather than the user having to go through and tell it what words to change, it can just slide the slider up and down, and suddenly the model can determine, "Oh, okay, I'll scale back the aggressiveness, etc. " So, things like that can be a much more natural UX than forcing the user to type something in a chatbot each time. Okay, so pattern

four is one of the ones I think is most underused, and this is a self-QA loop, or kind of like a reflection loop. After the agent generates something, it doesn't necessarily just hand it to you straight away. It renders its own input often. It even takes screenshots of that input, and feeds that screenshot back into the vision model to critique itself long before you get to actually feedback on it and do that kind of thing. It can then often iterate until the screenshot actually matches the intent that the model was going for. Now, obviously, this only works with a strong enough vision model, and that's probably one of the key reasons why they waited for Opus 4. 7. We know that this is a much stronger vision model than the previous open models, which in the past just really wasn't Anthropic's strength, but now they've really gotten on board with this. So, again, this pattern translates itself really well if your vertical agent generates anything that can be rendered in some way, shape, or form, whether that's like a contract, an email, a UI, a report, a PDF file, a website, get your agent to render it and critique it before human even sees it. And yes, you're going to be burning a lot more tokens for that, but the quality nowadays is probably going to be worth the trade-off that you're making there. All right, so the fifth pattern

is multi-variation generation. So, instead of the agent just giving you one answer, or making you one example of what you asked for, and then forcing you to ask for alternatives, or you to basically get changes, Claude Design proactively generates multiple versions for a lot of things, whether that's different layouts, different structures, perhaps even things like different colors and designs, etc. And what's smart about that is that the agent has learned the hierarchy of decisions that perhaps layout matters more than typography, which matters more than perhaps like an accent color or something. So, this is sort of forcing the agent to surface the big decisions and get user buying on those decisions first and then flesh out the details as it goes through. Now, again, for your vertical agent, figure out what's the axis of variation for your domain. For sales agent, it might be something like defining what kind of sales this actually is and what is going to be the tone. Is it going to be warm versus direct? And then generate a couple of options up front proactively and then allow the user to basically check out the uncertainty. So, this can be clarifying question. This gives the user both what they asked for, but options on that, which suddenly then they can realize, "Oh, yeah, actually like this way would be better. " And usually this is going to actually beat just asking purely clarifying questions. And it kind of makes sense for the design thing especially. You could imagine for Claude Code, yes, if we could generate tokens at 50,000 tokens a second, you could imagine it actually just running out and coding up multiple versions of an app and allowing the user to choose. Now, in that use case, currently we're just limited by the fact that we can't actually generate those tokens that fast or economically enough to make that viable. But you should definitely be thinking about sort of multi-variation generation for your particular agent. All right, so the

sixth and last pattern here is the handoff pattern. And this is the your agent's output needs to be designed so that it can be handed off either to other agents, in this case, Claude Design makes it so it can hand off to Claude Code, etc., or it can be handed off to other tools that can consume it. In this case, that would be things like being able to download of the PowerPoint if you're making slides, being able to pass it out to Figma for designs and stuff like that. Claude Design really does a good job here. It seems to store everything mostly in HTML and CSS, but then it can export to PDF, PowerPoint, Claude Code, Canva, etc. And I think going forward this agent-to-agent handoff, especially, is going to become really important for when we actually start to see proper multi-agent ecosystems working together. Now, that was proposed a year ago with A2A, hasn't really panned out like people thought it would. Now, for you, the particular vertical that you're building in here, don't trap your output in a proprietary format and try to store things into the markdown, JSON, HTML, etc. As those formats can really be read by pretty much all the models out there now. And make sure that your agent can then actually pass things to the actual tools that users currently use and currently very familiar with. All right, so if I'm going to leave you with one takeaway from all of the six of these, here it is. The reason Claude Design feels so qualitatively different, it isn't any one single pattern alone, it's the combination of these and especially the combination of the first two. That memory system with a grounding system being able to then inform all of the other patterns as well. This is a huge unlock here and this is exactly what's missing from most enterprise AI agent deployments at the moment. Most teams are still sort of writing these massive system prompts trying to describe the context rather than making the context extremely dynamic via the harness, via the memory system, via the grounding. And the models are probably good enough now that you just don't need to do that anymore. Make the agent build its own memory first and then generate from that. So, if you haven't tried it out, go and check out Claude Design. It's certainly worth checking out, not just if you're interested in design stuff, but just from looking at how it actually works as a agent system and really give some thought to how you could replicate the same things in the particular vertical or industry that you're building agents for as well. Anyway, if you found this useful, please share, like, and subscribe and I'll talk to you in the next video. Bye for now.