Level 10 Practice: Have Claude Design the Agent Architecture for Your Next Product
About This Tutorial
Section titled “About This Tutorial”If you want to understand the concepts and mechanics first, see the Level 10 concept guide.
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.”
Who this is for: Anyone who has completed up to Level 9 and has hands-on experience with agents, workflows, and automation.
Estimated time: 20 min read + 90 min hands-on
Carrying Over from the Previous Level
Section titled “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
Section titled “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 botStep 2: Ask Claude to Design the Agent Architecture
Section titled “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
Section titled “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 automaticallyStep 4: Implement the Design
Section titled “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
Section titled “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
Section titled “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)
Section titled “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 accumulatingCongratulations — Level 10 complete.