Level 10 Practice: Have Claude Design the Agent Architecture for Your Next Product

5 min read + 90 min hands-on

Anyone who has completed up to Level 9 and has hands-on experience with agents, workflows, and automation.

About This Tutorial

This tutorial focuses on the practice steps and completion checks for this level.

From Level 0 through Level 9, I have internalized how to use Claude Code through my-portfolio. In this final level, the shift is from “using Claude Code to develop” to “using Claude Code to design the development system itself.”

Carrying Over from the Previous Level

Level 9 brought my-portfolio to a state where it maintains itself 24/7.

The patterns I learned are universal:

Pattern	Level	Where it was used
Context setup	1	Define Claude’s behavior in CLAUDE.md
Slash commands	3	Collapse tasks into a single prompt with `/blog`
Memory	4	Persist style rules so Claude applies them consistently
Sub-agents	5–6	Parallelize Issue handling and PR reviews
MCP / tool integration	7	Collect information from external APIs
Git worktree parallel impl	8	Develop multiple features simultaneously
CI automation	9	Operate 24/7 with GitHub Actions

Step 1: Write Out the Requirements for the Next Product

Before asking Claude to design anything, I need to be clear about what I am building.

Here is a sample. Replace it with your own product.

Product name: DevMetrics Dashboard
Overview: An internal dashboard that visualizes team GitHub activity (PRs, Issues, commits)
Tech stack: Next.js 14 + TypeScript + Prisma + PostgreSQL
Team size: 3 developers
Core features:
  - Receive GitHub Webhook events and store them in the DB
  - Aggregate and display PR cycle time (creation to merge)
  - Send a weekly report by email
  - Deliver a "this week's PR summary" via a Slack bot

Step 2: Ask Claude to Design the Agent Architecture

Once the product requirements are clear, ask Claude for the design.

> Design an agent architecture for developing and operating the following product
> using Claude Code.

---
Product name: DevMetrics Dashboard
Overview: An internal dashboard that visualizes team GitHub activity
Tech stack: Next.js 14 + TypeScript + Prisma + PostgreSQL
Team size: 3 developers
Core features:
  - Receive GitHub Webhook events and store them in the DB
  - Aggregate and display PR cycle time (cycle time = time from creation to merge)
  - Send a weekly report by email
  - Deliver a "this week's PR summary" via a Slack bot
---

Design the following:
1. CLAUDE.md structure (project overview, development rules, prohibitions)
2. List of slash commands (/feature, /fix, /report, etc.)
3. List of GitHub Actions workflows (CI, automation, monitoring)
4. Sub-agent role assignments (implementation, review, test, deploy)
5. Automation design for the dev flow (Issue creation → implementation → review → merge → deploy)

For each item, explain why you chose that design.

Step 3: Receive and Evaluate the Design Document

Review what Claude returns. A typical output looks like this:

## DevMetrics Dashboard — Agent Architecture Design

### 1. CLAUDE.md Structure

Project overview section:
- Always generate a migration file when changing the DB schema (Prisma)
- Never skip GitHub Webhook secret verification
- Always add new environment variables to .env.example

Prohibitions:
- Never run `prisma db push` directly in production (migrations required)
- Never hardcode GitHub tokens in source code

### 2. Slash Commands

| Command | Description |
|---------|-------------|
| /feature [description] | Create Issue → branch → implementation → PR in one flow |
| /fix [issue-number] | Create a bug-fix branch and open a PR after fixing |
| /db-migrate [description] | Change Prisma schema → generate migration → request review |
| /weekly-report | Manually generate and preview the weekly report |

### 3. GitHub Actions

| Workflow | Trigger | Description |
|----------|---------|-------------|
| ci.yml | PR create/update | lint, typecheck, jest |
| preview.yml | PR create | Post Vercel preview URL as PR comment |
| weekly-report.yml | Every Monday 9:00 | Generate report → send email |
| db-backup.yml | Every day 3:00 | Dump PostgreSQL to S3 |
| security.yml | Every day 8:00 | npm audit + Prisma dependency check |

### 4. Sub-agent Role Assignments

- Implementation agent: Feature implementation and committing (parallelized via Git worktree)
- Review agent: Static analysis of PR diffs and code review
- Test agent: Generate and run jest tests
- Migration agent: Safety check for Prisma schema changes

### 5. Dev Flow

1. /feature command creates the Issue and branch
2. Implementation agent implements and commits on the feature branch
3. PR is created → review agent runs automatically
4. Test agent runs jest and posts results as a PR comment
5. After approval, merge to main → Vercel deploys automatically

Step 4: Implement the Design

Once the design document looks good, ask Claude to implement it:

> Based on the design document, please implement the following.

1. Create CLAUDE.md (based on item 1 in the design)
2. Create /feature, /fix, and /db-migrate commands under .claude/commands/
3. Create ci.yml, weekly-report.yml, and security.yml under .github/workflows/

Implement only items 1 and 2 today.
Show me the files after creating them so I can review.

Key point: Do not ask for design and implementation at the same time. Review the design first, then give implementation instructions in small increments.

Step 5: Grow CLAUDE.md as Development Progresses

As I develop the new product, I update CLAUDE.md based on feedback from Claude:

> Please add the following to CLAUDE.md based on what I learned today.

- Errors with Prisma relation definitions came up repeatedly. Add a note for future agents:
  "Use explicit join tables for many-to-many relations."
- I decided to put test files under src/ instead of __tests__/.
  Please add this rule too.

CLAUDE.md grows as a living document alongside the codebase.

Summary of the Tutorial

Skills built from Level 0 to Level 10:

Skill	Description
Passing context	Set context with CLAUDE.md, memory, and prompts
Automating repetition	Eliminate routine work with slash commands and GitHub Actions
Running in parallel	Speed up implementation with worktrees and sub-agents
Monitoring and alerting	Automatically watch vulnerabilities, quality, and deployments
Delegating design	Consult Claude even on architecture decisions

The final goal: Claude Code evolves from “a tool I use” to “a partner I design with.”

The my-portfolio at This Point (Tutorial Complete)

my-portfolio/
├── CLAUDE.md                    # Accumulated project knowledge
├── .claude/
│   └── commands/                # /blog, /review, and other commands
├── .github/
│   └── workflows/               # CI, weekly generation, vulnerability monitoring
├── scripts/
│   ├── parallel_features.sh     # Parallel implementation
│   ├── review_pr.sh             # Automated review
│   └── collect_and_blog.sh      # Trend collection
└── src/
    └── content/posts/           # Auto-generated articles accumulating

Congratulations — Level 10 complete.

The Claude Code usage assumptions follow Anthropic documentation, and the multi-agent design background follows related Anthropic documentation.[1][2]

References

Anthropic, Claude Code documentation
Anthropic, Claude API documentation

Quiz

Level 9 Practice: Automate Weekly Article Generation and Vulnerability Monitoring 24/7

Building a Claude Code Harness — Overview of Settings, Rules, and Skills