Claude Code Agent Teams: Build a 5-Page Website with 3 Parallel Sub-Agents Running Simultaneously

Three Agents Building Simultaneously While You Watch

Claude Code can spin up a manager agent that delegates to three parallel employee agents — one for the homepage, one for the about page, one for the contact page — and all three build at the same time. A five-page website that would take a single sequential agent maybe 20 minutes gets done in roughly a third of that. The output is better too, because each agent carries less context weight and stays focused on its slice of the work.

That’s the pitch. Here’s how it actually works, and what you need to set up before the first prompt.

---

What You Actually Get from Parallel Agents

Sequential is the default. You send Claude Code “build me a five-page website,” and it builds page one, then page two, then page three. Each page inherits the full context of everything that came before it. By page four, the context window is getting heavy, quality starts degrading, and you’re burning tokens on re-sending the entire prior conversation as input on every message.

The exponential token cost problem is real: in a long sequential session, every new message re-sends all prior messages as input tokens. A 200-message conversation means message 201 costs you 201 messages worth of input tokens. That’s why sessions balloon at the end.

Agent teams sidestep this. The manager agent receives the task, breaks it into parallel workstreams, and hands each sub-agent a focused scope. Each sub-agent runs in its own context. The homepage agent doesn’t know or care what the contact page agent is doing. This means three things: faster completion, lower per-agent context costs, and better output quality because no individual agent is overloaded.

The practical result is that you can build a five-page site with three simultaneous agents — homepage, about, and contact pages in one batch, then the remaining pages in a second — and the whole thing runs faster than a single sequential build would have gotten through page two.

If you’re building more complex multi-agent architectures and want a visual way to wire them together, MindStudio offers a no-code path: 200+ models, 1,000+ integrations, and a visual builder for composing agent workflows without writing orchestration code. But for Claude Code specifically, the parallel agent setup is native and requires no external tooling.

---

What You Need Before You Start

Claude Code installed and running. Claude Code is an extension for VS Code, Cursor, and Anti-gravity (Google’s free IDE, available at anti-gravity.google). If you haven’t installed it yet, open your IDE’s extension marketplace, search for Claude Code, and install it. Anti-gravity is the easiest starting point if you’re new — it’s free and purpose-built for this kind of work.

A Claude account with sufficient limits. Agent teams use Opus 4.7 by default (the most capable model), which burns through session and weekly limits faster than Haiku or Sonnet. Check your current usage before starting a long parallel build. If you’re close to your session limit, switch to Sonnet for the sub-agents — you’ll get slightly less polish but won’t hit a wall mid-build.

A project folder open in your IDE. Claude Code operates on a file system. You need a folder open as your workspace before you can run agents that write files. Create a new folder for your project, open it in your IDE, and make sure Claude Code can see it.

A claude.md file (optional but strongly recommended). This is the instruction document that tells Claude how to behave across all conversations in the project. For a website build, you’d put things like “use Tailwind CSS,” “all pages should share the same navigation component,” “don’t create a file if it already exists.” Without this, each sub-agent makes its own assumptions, and you end up with three pages that look like they were built by three different people — because they were.

Plan mode enabled for the initial prompt. Plan mode makes Claude think and plan first, then wait for your approval before executing. For any multi-agent build, you want to review the delegation plan before agents start writing files. Enable it from the permissions dropdown in the Claude Code interface.

---

Setting Up Your First Agent Team

Step 1: Open Claude Code and set permissions to Plan mode.

Click the permissions button in the Claude Code interface. Select Plan mode. This ensures Claude will present its delegation strategy before any files get written. You’ll see the plan, approve it, and then execution begins.

Now you have a Claude Code session in Plan mode, ready to receive a complex task.

Step 2: Write a specific prompt that names the pages and their purpose.

Generic prompts produce generic results. Instead of “build me a website,” write something like:

“You are a web designer. Build a five-page website for a wedding DJ business in Toronto. The pages are: homepage (lead generation, with a hero section and contact form), about page (bio and story), services page (three service tiers with pricing), gallery page (photo grid placeholder), and contact page (full contact form with map embed). Use Tailwind CSS. All pages share the same navigation and footer. Mobile responsive.”

The specificity matters. Each sub-agent will receive a slice of this brief, and the more concrete the original prompt, the less each agent has to invent.

Now you have a prompt that gives the manager agent enough information to delegate meaningfully.

Step 3: Review the plan Claude presents.

In Plan mode, Claude will respond with its proposed approach before touching any files. For a five-page site, you should see it propose something like: delegate homepage to Agent 1, about and services pages to Agent 2, gallery and contact pages to Agent 3. Review this. If the split doesn’t make sense — say, it’s putting two form-heavy pages on the same agent — you can push back before execution starts.

This is the moment to catch structural problems. Once agents start building, unwinding mistakes requires checkpoints (the backwards arrow on any message that lets you rewind to a prior state).

Now you have an approved delegation plan and can proceed to execution.

Step 4: Approve the plan and watch the parallel execution.

Once you approve, Claude Code spins up the sub-agents. You’ll see multiple agents running simultaneously in the interface. Each one is working on its assigned pages, writing files to your project folder as it goes.

You don’t need to do anything here. The manager agent coordinates. Sub-agents complete their work and return results. The manager assembles the final output.

Now you have a multi-page website built by parallel agents, with each page in its own file in your project folder.

Step 5: Review output and use checkpoints if anything went wrong.

Open the files. Check that navigation is consistent across pages. Verify the Tailwind classes are being used correctly. If a sub-agent went off-script — say, it invented a color scheme that doesn’t match the others — use the backwards arrow checkpoint on that agent’s messages to rewind to before it made that decision, then re-prompt with a correction.

Checkpoints are per-message, so you can be surgical. You don’t have to restart the whole build to fix one agent’s mistake.

Now you have a reviewed, corrected five-page website ready for deployment.

Step 6: Push to GitHub and deploy.

Sign up for a free GitHub account if you don’t have one. Create a new private repository. GitHub will give you a code snippet — paste it into Claude Code and tell it to push your project. From there, connect the repository to Vercel for deployment. Vercel handles the hosting; your site goes live at a public URL.

Now you have a deployed website with version control and a backup of all your code.

---

What Goes Wrong (and How to Fix It)

The agents produce inconsistent styling. This is the most common failure mode. Three agents building simultaneously means three agents making independent decisions about spacing, typography, and component structure. The fix is a strong claude.md file that specifies your design system before the build starts. “Use Tailwind CSS utility classes only, no custom CSS. Navigation component lives in components/nav.js and must be imported on every page. Color palette: slate-900 background, white text, indigo-600 accent.” The more specific, the more consistent.

The manager agent doesn’t actually parallelize. Sometimes Claude Code runs agents sequentially even when you’ve asked for parallel execution. This usually happens when the task dependencies are ambiguous — if the manager thinks Agent 2 needs Agent 1’s output before it can start, it’ll wait. Make the pages explicitly independent in your prompt: “Each page is a standalone HTML file. No page depends on another page’s output.”

Context window fills up mid-build on a large project. If you’re building something bigger than five pages, watch the context usage with the /context slash command. When you hit around 50% full, run /compact manually. Don’t wait for automatic compaction at 100% — context quality degrades well before that, and you’ll get worse output from the agents in the second half of the session. The /compact command compresses the conversation while preserving the key information.

Sub-agents lose track of the original brief. This happens in longer builds when the manager agent’s instructions get diluted through the delegation chain. The solution is the orchestrator/chief-of-staff pattern: load one agent with the full roles, responsibilities, and scopes of all sub-agents before the build starts. This prevents cold-start mismatches where a sub-agent doesn’t know what another sub-agent already handled.

You run out of session tokens partway through. Opus 4.7 is expensive. If you’re building something large, consider running the planning phase on Opus and switching sub-agents to Sonnet for execution. You can switch models mid-session using the / slash command to access model selection. Haiku is fast and cheap but will produce noticeably lower-quality code for complex layouts — Sonnet is the better tradeoff for most builds.

For teams doing parallel work across multiple feature branches simultaneously, the Claude Code Git worktrees approach is worth understanding alongside agent teams — they solve related but distinct problems.

---

Taking This Further

The five-page website example is a proof of concept. The real leverage is in more complex delegation patterns.

Skills as agent instructions. You can write a skill — a pre-written markdown instruction file, callable via slash command — that defines exactly how each type of sub-agent should behave. A /homepage-agent skill might specify the hero section structure, the CTA placement, the lead capture form requirements. When the manager agent delegates to the homepage sub-agent, it calls the skill and the sub-agent has a complete brief. This is how you get consistent output across many builds, not just one.

Hooks for post-build actions. Claude Code has 18+ lifecycle events where you can attach automated actions. A post-build hook could automatically run a quality check on every file the agents produced, or push to GitHub, or send a Slack notification. Most people never touch hooks — they’re described as the most underutilized feature in Claude Code — but for agent teams doing repeated builds, they’re how you add reliability without manual oversight.

MCP servers for data-connected agents. If your sub-agents need to pull real data — product inventory, client information, existing content — connect Claude Code to your data sources via MCP servers. You configure these at claude.ai/settings under connectors. Airtable, Notion, Google Drive, Slack, Gmail all have MCP connectors. An agent team building a client website can pull the client’s actual content from Notion rather than generating placeholder text.

Scheduled agent teams. Claude Code can create a local script that runs at defined intervals — every 15 minutes, every hour, every day. Combine this with an agent team and you have a recurring automated workflow: a manager agent that wakes up on a schedule, delegates to sub-agents, and produces output without you initiating anything. The agentic workflow patterns post covers five patterns that extend well beyond single-session builds.

When the output of your agent team is a full application rather than a website, the abstraction question becomes interesting. Tools like Remy take a different approach to the same problem: you write a spec — annotated markdown — and a complete full-stack application gets compiled from it, including a TypeScript backend, SQLite database, auth, and deployment configuration. The spec is the source of truth; the generated code is derived output. It’s a different point on the same spectrum of “how much of the implementation do you want to hand-write.”

For teams that want to go beyond Claude Code’s native agent capabilities and build more sophisticated multi-agent systems, the Paperclip and Claude Code multi-agent setup is a natural next step — it covers spinning up a CEO, marketer, designer, and researcher agent team with more explicit role separation than Claude Code’s native delegation.

The parallel agent pattern works because it matches how real work gets done: specialists working simultaneously on independent pieces, coordinated by someone whose job is delegation and integration, not execution. Claude Code’s agent teams implement that pattern natively. You don’t need to configure anything exotic to use it — you just need to ask for it explicitly and give the manager agent enough information to delegate well.

The bottleneck, as with most things in this space, is the quality of the brief you start with.