Claude Sub-Agents Workflow (Full Demo)

Instead of one overworked AI, imagine having a whole team of specialized agents working together. Dedicated code reviewers, designers, test writers, documentation agents, all vibing together. So check this out. Join me as we explore Anthropik's new sub-agent workflows that have just been announced. So this is actually perfect for those who are beginners or those who are experienced developers as well. I'm a solo engineer and I'm trying to use AI and I'm always not in the code all the time. I'm pretty much going to be following this guide to get us started. From what I've been able to see right now is that like these sub agents can be either called if you tell them like specifically in the chat or anthropic as it's going through things it can figure out that saying oh i should use a sub agent for this here's one that ray already has for design review the other positive is that it actually has its own context window so what that means is if you have like like 200k tokens for a context window once you reach about 50 you'll start to get a lot of degradation in your actual outputs so you want to always either start new chats or start new conversations or try to like separate your concerns now we can separate our concerns over these different sub agents a code reviewer someone who's going to do a design review someone's going to order me a pizza and those types of things are going to have their own context window to basically think about like a big old room you can be able to stretch out and you're going to be able to do more things and that's basically what they're going to be able to do on our behalf getting into the anthropic agents thing here it's going to say create a new agent so we're just going to open up cloud code and i'm just going to create a new session here if i type in slash agent we should be able to see manage or configure agents this is really cool So it's going to allow us to now create a new agent, create a specialized subagents that Claude can delegate to. Each agent has its own context window, custom system prompt, specific details. So try creating a code reviewer, a code simplifier, a tech lead or UX reviewer. So we're going to do one that's basically like a UX reviewer based off my guidelines here. OK, so I'm going to say create new agent. OK. And so we have a couple of options. Looks like you can choose either to have it in the project or for personal. I'm going to go ahead and select project. I like having maybe project specific agents. The design one is something that I use in all of my projects. New agent creation method. So generate with Claude recommended or manual configuration. In the actual documentation, Claude says that if you want to create your own agent, you would actually kind of follow this file format. So you can easily give this to Claude code and have it generate more sub agents. Describe what the agent should be do when it. should be used, be comprehensive for the best results. I want this to be an expert designer that's going to go through and use some design principles. Some of the design principles will involve color rules, typography systems, clean visual structure, and try to make sure that whatever code was generated follows our foundation of the Tailwind v4 integration. I'm just curious to see how Claude is going to generate this type of description for us. and see if it actually expands upon what I said here. Because that'd be really interesting, right? Because a lot of the times it's generating agent configuration. So I think it actually is using some type of model, probably Opus or probably, you know, Sonnet to generate an agent based off of these instructions. So I'm a really, really big fan of having AI models write instructions for themselves. I think that's what it's doing here. And it's really, really cool to see. So the name is the design system enforcer. Okay. Okay. Use this agent when you need to review or refactor UI code to ensure it adheres to the established design principles, ensuring color harmony, typography, consistency, and the clean visual structure. Yo, I'm not going to lie. This is very hot for a couple of reasons. one i sort of described in plain english what i was thinking about but then it kind of took that and added it a little bit further i'm wanting to learn here and see how these like sub agents are created from anthropic and maybe we can kind of make my own custom blend of rules using my existing principles and so i'm really curious to see i'm pretty sure they've tightened everything up and made it more efficient here and about these rules because literally these were in my design format and it put them in here i don't know what type of drugs you're smoking anthropic but damn you're good like it went through my code base and somehow probably found that file about my design reviews and these key terms and it slid them right into its own agent be like yo i got you fam this is how i'm gonna be a solo engineer with a team of agents oh my god this is too good man wow wow wow look at the way it describes even like the type system and like the visual structure i didn't give it the eight point grid system okay now it has two agents it has a design system enforcer and then the built-in general agents which are always available and then now we can go through and create a new agent if we want to go ahead we can go back or enter to escape man this is crazy so now that i have this enforcer i'm just going to go ahead and check this into my code i want to see if maybe we can even fix some bugs and see if the agent either it should kick off it should just basically figure out the design system i mean so these agents can also call mcps and they can also call specific tools as we can see there explicit invocation so to request a specific sub agent by mentioning it in your command so use test runner sub agent to fix the failing tasks oh so i can say hey use our god this name's horrible design system enforcer all right so let me show you real quick on my app i'm not really proud of this moment but it is what it is i think i was valuing shipping over anything and so in here i want to fix like some of this layout so there are these types of things i'm just going to give it a screenshot basically this is a screenshot of our app and then i'm going to see if i can use the design system enforcer hello mr claude i'm going to use you and see if i can have it do some design system enforcing Please use the design system enforcer to help me fix the UI here when I hit all transcriptions. This also needs to work for mobile as well as desktop view. So that's we will have the appropriate design system for viewing all of my transcriptions. It's currently reading the image, but I was hoping it was going to kick off a sub agent for it. Yes. OK, so now what we're seeing is it's kicking off my design system enforcer, which is all of this prompting stuff like 73 lines. which is cool because that's my my regular design system prompt is like several hundred lines it's gonna have its own context window has its own dedicated agent with these specific instructions and so i'm curious to see what code changes start rolling through so that i can go ahead and review them and see if it actually makes a difference because we're just trying to fix this like janky ui that i just tried to ship as fast as possible And we're also trying to see if it can actually work on mobile a lot better because you can see on mobile you have to do the sideways scroll thing. So this is the file that it generated and it's asking me to do the edit. I'm just going to do a quick cursory glance at this and it is doing the whole divisible by the eight point grid system because previously you could see PY4, PY3 and now it's doing four and six. And it's actually adjusting for the actual mobile views and stuff as well. OK, OK, OK. so now we have one of the code changes landing and let's just see if i can actually see this live right now okay a lot better a lot better okay yeah but you see all these now icons are now like the right size where previously like one would be smaller and then if the the file name was too long it would basically work like not do the right word wrapping oh we're seeing this change in real time which is pretty fun So it's getting better for the mobile view because you can see it actually takes out some of the stuff. And that's probably the second iteration that I'm going to do, which is nice. You know, it just gives you the information you need to kind of wrap some of the things here. And that's probably has not accounted for that. But for the desktop view, it's kind of nice. It's very reactive. And I like this a lot. You can kind of see it kind of adjusting itself. What's happening right now is Claude is actually going through and doing a secondary pass on the output and reviewing. am i done yet is everything solved from what the user was originally asking and then it's thinking by itself it's like oh if this has changed now this needs to change let me go ahead and see if i could find it in the code and that's kind of the advantage of using some of these sub agents because now it has more token windows because it only used 50k tokens to continue through and actually kind of making a better pass at it and that to me saves me prompting time as a solo engineer this is super duper helpful and super duper resourceful and i'm glad it's kind of doing this on its own without me really telling it to do what it needs to do so now it's actually checking to see if it can run the server and it did a second pass and now it's basically kind of fixed that so it's like it fixed the table layout view it fixed the file name display and removed the truncation in favor of break words to show the full file names nice in that couple of iterations like Claude code by itself. Figure that out. That's my favorite thing about Claude code right now compared to a lot of other agents is that fact that it's using that output. It's thinking it's coming back out. Oh, my gosh, Iran linting on everything. Oh, no. OK, that's a different problem for a different day. This is working really great so far. And I want you to do the iteration on the mobile view right now, because in the mobile view, we need that same type of treatment for the titles, because as you can see, they're very long as well. I noticed you ran linting. And it ran linting on files that we didn't touch in the code base. I want you to go ahead and review and discard the changes for the files that don't require linting right now. I don't want to check in all that code. I just want to check in code that we have specifically modified. And well, look at that on mobile. It's already fixed. Wow, this is this is clean. I like this. Yo, I'm not going to lie. This is nice. So if I go the sheesh, let's go. Man, this is now looking like a professional app one day at a time, right? This is all this is all I have time to do. It's like one day at a time. I'll work on one feature. But setting these types of sub agents are so helpful because now we're going to start to leverage the AI for future tasks. Claude can run when you have GitHub issues on the web. So when you tell it, I want you to go do this. I want you to fix my design. This exact prompt that I had to go fix my design prompt. I don't maybe. I don't even have to give it a screenshot. Sometimes I could just say, go fix it. It's going to run that agent in a container and it's going to kick off some of these sub agents as well to help you solve that issue. So by preparing yourself to use these in your app, just as you do as like a human being, eventually you're going to automate that away so that later on you're now sitting in GitHub issues, you're sitting in a Slack command, you're sitting in somewhere else. that will go write the issue in and then Claude will kick off and start solving those problems. And this is the workflow that I'm trying to get into that the Claude Code team currently does and all the folks at Anthropic. I think it's like over 80% of their code is written by AI and more specifically by Claude Code. So by leveraging that and their workflows, we get to bring that into our thing. I'm a solo developer, so can you actually be solo and be a designer, be an engineer, be a project manager? Yes, you can, right? Because we start to define them slowly, right? And this is how you can leverage those workflows to do that type of thing. Okay, so it did the linting thing. It did this thing. I'm going to check in this code. This is fire. Almost in one prompt, right? Like I really just said, do this. Here's a screenshot. Okay, make sure we do the same treatment for mobile. Cooked. Absolutely cooked. Shipping my app is probably better than me waiting for it to be this perfect. Is a user going to care that much? No, they just want the transcriptions. They came in here for a job. They're going to get this stuff and get out. real fast. In here, I can take a live stream. I can start to generate the transcripts. And what's nice about it is now kicks off its own process so I can review the other transcripts. I can come back to it and it still has its progress. I can go into here, view the other transcripts and do other types of work. So it starts to actually feel like a solid web app versus like, you know, just the straight up. static page one of the things i'm really excited about is that you can just tell it in plain english what you want i didn't have to go and generate these crazy long documents i didn't have to go and like figure out these other things just in plain english i can actually describe what i want this agent to do and it writes its own instructions and it's really really really good at following them which i'm really impressed by so don't be afraid all you have to do is hit slash agents start the conversation and then you can put it into your project and that'll be a good way so that in the future, you can kick them off with a GitHub workflow, probably get into a little bit later.

Complete demonstration of Claude's sub-agent workflow, from setup to production. Watch as I configure a specialized AI agent for (design, code review, testing) that can work in parallel, each with their own 200K token context window.

After watching, you'll be able to create your own specialized agents and run them in parallel. Start with one agent, then scale to a full AI development team.

Note: This feature has been available for ~1 month at time of recording. Workflow demonstrated on real production code.

Join 150+ builders in our private Discord where we ship AI apps together: https://rfer.me/community


⏱️ Timestamps:
00:00 Introducing specialized AI agents
00:45 How sub-agent context windows work
01:24 Creating a new design review agent
02:35 Defining the agent's design principles
04:28 Claude auto-discovers his design system
05:56 Testing the agent on a real UI
06:51 Kicking off the "Design System Enforcer"
07:55 Applying the first set of UI fixes
08:34 Claude's autonomous second-pass review
10:24 Final UI reveal after agent fixes
11:01 Automating agents with GitHub issues


🔬 Full Workflow Demonstrated:
- Initial project setup and agent planning
- Sub-agent creation (project vs personal scope)
- Design system rules extraction from existing code
- Parallel agent execution and context management
- Real-time debugging and iteration
- Production deployment considerations

Technical Details:
- Each agent: 200K token context window
- Agent types: Code reviewer, designer, test writer, documentation
- Platform: Claude Code with Opus 4
- Framework: Tailwind v4 integration
- Result: Janky UI → professional app in one session

Who This Is For:
- Solo developers wanting to scale their productivity
- Teams exploring AI-assisted development workflows
- Engineers interested in Claude's latest capabilities
- Anyone curious about practical AI agent orchestration

Key Takeaways:
- Agents can discover and apply your existing design patterns
- Separate context windows prevent token limit degradation
- Natural language agent creation (no complex configs)
- Agents can be triggered automatically or explicitly

Resources & Links:
- Claude Code documentation: https://docs.anthropic.com/en/docs/claude-code/sub-agents
- My design system template: https://rfer.me/design-reviews
- Original livestream (3+ hours): https://www.youtube.com/live/8w_HY0mkn94?si=O761FKojS7_nE555

This video was transcribed and captioned with my own tool, Ray Transcribes, which helps my videos get discovered by YouTube's AI. Check it out: https://raytranscribes.com


#ClaudeSubAgents #ClaudeCode #ClaudeWorkflow #AIAgents #ClaudeOpus #ClaudeSonnet #Claude4 #AICodeReview #SoloDeveloper #AIDevelopment #Anthropic #MultiAgentAI #ClaudeDemo #AIWorkflow #CodeWithClaude