If Claude Code is the engine, Agent Architecture Designer is the dashboard - design the team, watch it work before you spend a single token, then export exactly what Claude Code needs to run it for real.
Looking for the visual designer? Open
index.htmldirectly in your browser, or use the live version on GitHub Pages - no install, no build step. Everything below also documents the Claude Code plugin (60 subagents + 62 orchestration presets) generated from that same app - see Claude Code integration.
Agent Architecture Designer is primarily an educational and developmental tool. It is not a production orchestrator - it is a place where you can slow down and study multi-agent systems the way you would study a complex machine: one moving part at a time.
The goal is that after using it, you should be able to:
- Understand what every single agent actually does - its role, inputs, outputs, anti-patterns, and failure modes
- Understand how agents talk to each other - who hands off to whom, which phases they live in, where the friction is
- Understand why a given preset looks the way it does - why it has 6 agents and not 12, why a Five Minds debate sits in the middle, why the HITL gate lives where it lives
- Recognize the architecture patterns behind the scenes - ReAct, Orchestrator-Worker, Blackboard, Routing, and seven others, with real examples pulled from the agents on the canvas
- Understand exactly when Claude Code will run your own hooks, across all 27 documented lifecycle events, before you write a single line of hook config
- Understand the cost and context budget of a multi-agent system before you ever spend a token
You can use it as a visual designer, but the real value is the Encyclopedia behind every agent and every preset. Each entry is structured like a short lesson: who it is, how it works in phases, what it does, what it does NOT do, anti-patterns, real-world examples, when it fails, and fun facts.
The project has grown a lot since the first public release (v32, still available at v32/). Between v33 and v41 it went from 35 agents / 42 presets to 60 agents / 62 presets, and three new teaching modules were added on top of the original canvas + encyclopedia:
- Guided tutorial - a 5-step in-app tour that lights up one UI element at a time, auto-starts on first visit, fully bilingual. Entry point: the flashlight icon in the header.
- Hooks Playground - an interactive map of all 27 Claude Code lifecycle hook events across 4 lanes (session / turn / tool / async), with cadence, trigger, matcher syntax, and blocking behavior for each one.
- Architecture Patterns - a reference for 10 canonical multi-agent patterns (ReAct, Prompt Chaining, Orchestrator-Worker, Routing, Map-Reduce, Reflection, Debate/Ensemble, Human-in-the-Loop, Blackboard, Guardrails), each one linked back to the real agents on the canvas that implement it.
Plus a full pass on performance (smoother canvas dragging and panning, a faster encyclopedia scroll) and accessibility (WCAG-aligned contrast, focus order, and target sizes across the header and canvas controls). See Versioning below for the version-by-version story.
- Learn. Click any of the 60 agents or 62 presets and read a full encyclopedia entry. This is the main use case.
- Design. Drag agents onto a canvas, connect them, assign models (Opus / Sonnet / Haiku / Fable), and generate a ready-to-use system prompt for Claude Code.
- Simulate. Run a live simulation where agents exchange animated messages and pass through HITL decision gates, so you can see the flow before you commit to it.
- Budget. Open the Cost Command Center to see per-agent / per-phase cost estimates, context window pressure, and what-if scenarios (all Opus, all Sonnet, all Haiku).
- Study the hooks system. Open Hooks and scan all 27 lifecycle events without touching a settings file.
- Study the patterns behind the agents. Open Patterns and see which of the 10 canonical multi-agent architectures each preset is actually built from.
- Export. Copy a system prompt, a Mermaid diagram of the team, a Markdown report, CSV, or JSON.
No installation. No npm. No build step. It is a single HTML file that works offline.
The interface is fully bilingual with a one-click language toggle. Polish is more comprehensive than English - because the author is Polish and because a larger Polish knowledge base was available during research. Specifically:
- All 60 agent + 62 preset encyclopedia entries exist in both languages
- The Hooks and Patterns modules are fully bilingual, including every hook's cadence/trigger/matcher description
- Polish is the default authoring language; English translations are technical/direct US English with no em/en-dashes
If you are an English-speaking user and feel something is missing, please open an issue - we want to know which parts you would like to see expanded.
Open Agent Architecture Designer on GitHub Pages.
Start with the preset Deep Five Minds for the full experience (27 agents, two Five Minds debates, three HITL gates), click any agent to open its encyclopedia, then press Simulation to watch the team run.
- Visual canvas - drag and drop 60 agents, draw connections, marquee-select groups, auto-place with smart suggestions, right-click context menu
- Agent encyclopedia - every one of the 60 agents and 62 presets has a bento-grid entry: who I am, analogy, how I work (phase-by-phase), what I do, what I do NOT do, real-world scenario, when I fail, facts, deep dive, team composition
- Preset encyclopedia - every one of the 62 presets has a dual-column green-light / red-light verdict panel, a phase-flow bar (agent count per phase, in every preset), and an agent roster with model hints
- Guided tutorial - 5-step interactive tour, auto-starts on first visit, PL/EN
- Hooks Playground - all 27 Claude Code lifecycle events across 4 lanes, cadence/trigger/matcher/blocking behavior for each
- Architecture Patterns - 10 canonical multi-agent patterns, each tied to real agents and presets on the canvas
- Five Minds Protocol - structured adversarial debate with 4 domain experts + a Devil's Advocate ("Shadow") producing a Gold Solution
- HITL decision gates - human checkpoints between phases, countdown, auto-decide fallback, Decision Presenter agent
- Live simulation - agents exchange animated speech bubbles and data packets along their connections; Dialog Timeline logs everything
- Mission Control - fullscreen cinematic simulation dashboard with real-time metrics, phase timeline, and communications log
- Cost Command Center - per-agent / per-phase cost estimates, context window usage, model mix, what-if sliders, export to Markdown / CSV / JSON
- Custom Agent Creator Pro - 7-feature builder (clone, live preview with quality score, icon picker, color swatches, MD export/import, wizard mode, mock testing playground)
- Dark / Light theme - complete CSS variable system, contrast-aware ink tokens, color-vision-safe phase palette
- Bilingual PL/EN - every UI string, every encyclopedia entry, every cost modal label, every hook and pattern
- Accessibility - WCAG-aligned contrast and target sizes, keyboard navigation, focus-visible, skip link, reduced-motion support
- Zero dependencies - no npm, no CDN, no build step. One HTML file
| Category | Agents | Model mix |
|---|---|---|
| Orchestration & Strategy | Orchestrator, Synthesizer, Synthesizer Lean, Decision Advisor | Opus for orchestration, Sonnet for synthesis |
| Planning | Analyst, Planner | Sonnet |
| Research | Researcher Tech, UX, Reddit, X, GitHub, Forums, Docs, Research Critic, Extractor, Recipe Scout | Haiku for scanning, Sonnet for synthesis-heavy roles |
| Build | Backend Dev, Frontend Dev, Feature Dev, Designer, Integrator, Writer, DB Architect, Observability Engineer, Mobile Developer, Technical Writer + 7 more (voice, career, content, and recipe specialists) | Sonnet, with Haiku for lightweight guardians |
| QA / Audit | QA Security, QA Quality, QA Performance, QA Manager, Accessibility Tester | Haiku for the light checks, Sonnet for QA Manager |
| Five Minds | Pragmatist, Innovator, Data Analyst, User Advocate, Shadow (Devil's Advocate) | Opus |
| HITL | Decision Presenter | Haiku |
| Data & AI | ML Engineer, Data Engineer, AI Engineer, Prompt Engineer, Statistician, EDA Analyst | Sonnet |
| Infra / Ops | DevOps Engineer, Cloud Architect, SRE Engineer, Kubernetes Specialist, Telemetry Surfer | Sonnet |
| Product | Product Manager, UX Researcher, GTM Strategist | Sonnet |
| Compliance | Control Mapper | Sonnet |
Across the full catalog: 42 Sonnet, 11 Haiku, 7 Opus - Fable is available as a fourth model tier but has no default assignment yet.
Every agent ships with a research-backed prompt following ROLE / INPUT / OUTPUT / RESPONSIBILITIES / RULES / ANTI-PATTERNS / WHAT YOU DO NOT DO / REPORT FORMAT. Prompts are self-contained so an isolated subagent can execute without additional context. See docs/SKILLS_ARCHITECTURE.md for the full format.
- Minimal (2-3 agents, 7 presets) - Solo + Validator, Quick Fix, Recon Squad, Classic Trio, Reflective Loop, Voice, Master Chef
- Core (4-6 agents, 28 presets) - Bug Hunter, Content Pipeline, Plan & Execute, Performance Boost, Content Social, Career, Decision Research, Accessibility Audit, Codebase Onboarding, Growth Campaign, Pitch Deck, Startup MVP, Cascade Cost, Testing Suite, Accessibility Sprint, MLOps Pipeline, RAG / AI App Build, DevOps CI/CD Setup, Cloud / K8s Deploy, Product Discovery, Documentation Portal, Mobile App, Observability & SLO, Landing Page, Security Hardening, Code Review, Design System, API Modernization
- Advanced (7-11 agents, 20 presets) - UI/UX Overhaul, Feature Sprint, A/B Test Lab, Bento Redesign, Standard Dev, Data Pipeline, Performance Squad, Tech Writing Pipeline, Research Swarm, Legacy Refactor, Multi-Vector Security, SOC2 Sweep, Data Analysis Pipeline, Full-Stack SaaS, Deep Research Swarm Pro, Migration Crew, KB Constructor, Incident War Room, Microservices, PRD to Launch
- Enterprise / flagship (12-27 agents, 7 presets) - Full-Stack Premium, Full Hierarchy, Five Minds Strategic, Five Minds Protocol, Deep Research v2, Deep Research+Build, and the flagship Deep Five Minds (27 agents, 2 Five Minds debates, 3 HITL gates)
Claude Code exposes 27 lifecycle hook events, grouped into 4 lanes:
| Lane | What it covers | Example events |
|---|---|---|
| Session | Once per session | SessionStart, SessionEnd |
| Turn | Once per assistant turn | UserPromptSubmit, Stop, StopFailure |
| Tool | Per tool call | PreToolUse, PostToolUse, PostToolUseFailure |
| Async | Alongside the main flow | background/notification-style events |
For each of the 27 events, the Playground shows cadence, exact trigger condition, matcher syntax (tool name patterns, startup|resume|clear|compact, etc.), whether it can block execution, and typical uses (inject context, redact secrets, block a dangerous command, enforce "keep working until tests pass", flush metrics on exit). Nothing here is invented - it mirrors Claude Code's actual hook contract.
A reference card for the 10 patterns that show up again and again in multi-agent systems:
ReAct - Prompt Chaining - Orchestrator-Worker - Routing - Map-Reduce - Reflection - Debate (Ensemble) - Human-in-the-Loop - Blackboard - Guardrails
Each pattern entry explains the idea, when to reach for it, when NOT to, and which agents/presets on the canvas actually implement it - so instead of a textbook diagram, you get a working example one click away.
Agent Architecture Designer includes a complete orchestration layer: 60 agent skills, 62 team presets, and a routing catalog that work directly inside Claude Code.
Full walkthrough: INSTALL.md - covers installation, updating after a new version, troubleshooting, and how to add your own agent to the catalog.
The repo itself is a valid Claude Code plugin (.claude-plugin/plugin.json, 60 bundled agents, 62 bundled presets) - no clone, no generator scripts:
/plugin marketplace add TheJacksonCode/Agent-Architecture
/plugin install agent-architecture-designer@Agent-Architecture
Use this path if you want to regenerate the agents/presets yourself after editing the HTML, or add your own agent to the catalog:
git clone https://github.com/TheJacksonCode/Agent-Architecture.git
cd Agent-Architecture
# 1. Generate agent skills (60 files -> ~/.claude/skills/)
node generate_skills.js
# 2. Generate team presets (62 files -> ~/.claude/commands/)
node generate_commands.js
# 3. (optional) Generate the routing catalog, for task-description auto-routing
node generate_catalog.jsOnce generated, presets are global - they work in every project, not just this repo. Steps 1-2
are enough for explicit /preset-name commands; step 3 adds the routing snippet you paste into
your own ~/.claude/CLAUDE.md to unlock auto-routing (details in INSTALL.md).
Type / in Claude Code and pick a preset, or describe your task and let Claude auto-route to the best one:
| Tier | Example presets | Agents |
|---|---|---|
| Minimal | /solo, /quick-fix, /trio |
2-3 |
| Core | /bug-hunt, /test-suite, /startup |
4-6 |
| Advanced | /security, /design-sys, /research |
7-11 |
| Enterprise | /saas, /full, /five-minds, /deep-five-minds |
12-27 |
Each preset orchestrates a team of agents across phases (Strategy -> Research -> Build -> QA -> HITL) with decision gates between them. See docs/ROUTING_SYSTEM.md for the full catalog and auto-routing architecture.
.claude-plugin/plugin.json # Plugin manifest (what the marketplace install reads)
agents/*.md # 60 agent prompts, bundled in-repo for the plugin install
commands/*.md # 62 preset files, bundled in-repo for the plugin install
~/.claude/skills/*.md # Same 60 agent prompts, generated locally (source-from-clone path)
~/.claude/commands/*.md # Same 62 preset files, generated locally (source-from-clone path)
~/.claude/PRESET_CATALOG.md # Routing catalog (task -> best preset)
generate_skills.js # Regenerate skills from HTML source (v41); --out for the agents/ copy
generate_commands.js # Regenerate commands from HTML source (v41); --out --plugin for commands/
generate_catalog.js # Regenerate the routing catalog from HTML source (v41)
The agents/ and commands/ folders are generated the same way as their ~/.claude/ counterparts -
just pointed at a different --out directory - so both installation paths always match.
See docs/SKILLS_ARCHITECTURE.md for the full skill format, model routing, and how to add new agents.
- Format - single HTML file, ~3.5 MB (includes all encyclopedia content in PL + EN, inline SVG icons)
- Dependencies - zero. No npm, no CDN, no build step
- Stack - Vanilla JS (ES2022) + inline SVG + CSS transitions + Canvas 2D + container queries
- State - localStorage persistence (canvas, theme, icon mode, language preference, custom agents), with a versioned migration chain
- Rendering - hybrid architecture: Canvas 2D for particles/starfield, SVG for connections and icons, CSS transforms for agent-node dragging (rAF-batched, layout-free)
- Accessibility - WCAG-aligned contrast and target sizes, focus-visible, prefers-reduced-motion, keyboard navigation, skip link
- Models - Opus 5 ($5/$25 per MTok in/out) for orchestration and debate, Sonnet 5 ($2/$10) for most agents, Haiku 4.5 ($1/$5) for light research and HITL gating, Fable 5.1 ($10/$50) available as a fourth tier
- Security - HTML-escaping sweep across all
innerHTMLsinks, CSV formula-injection guard, Mermaid label sanitization, safe localStorage read/write with quota handling - Bilingual engine - flat
I18N_EN.uilookup plus dedicated namespaces for the encyclopedia, Hooks Playground, and Architecture Patterns modules
Each major version is saved in its own folder as a single HTML file. v32/ was the first public release; v41/ is the current one and the one the root index.html mirrors for GitHub Pages. Development versions between the two (v33-v40) stay local - only the published milestones are pushed.
See VERSIONS.md for the detailed v1-v32 changelog.
| Version | Key addition |
|---|---|
| v32 | First public release - 35 agents, 42 presets, full bilingual encyclopedia, Cost Command Center, Custom Agent Creator Pro |
| v33 | Scope widened beyond software tasks - research, career, and lifestyle presets added alongside the original dev-focused catalog |
| v34 | Hooks Playground shipped - all 27 Claude Code lifecycle events, effort-per-agent as a second routing dimension, larger Data & AI / Infra agent roster |
| v35 | Accessibility and Product agent categories added; catalog grows to 58 agents / 55 presets |
| v36 | Canvas node polish - uniform node sizing across the board, category-based color coding |
| v37 | Preset icon set, right-panel cleanup, token pricing filled in for every agent |
| v38 | Stabilization pass - held as the working baseline before the Patterns module build |
| v39 | Hooks Playground finalized and approved; frozen as a fallback build |
| v40 | Architecture Patterns module shipped - 10 canonical multi-agent patterns, each linked to real agents and presets |
| v41 | Guided tutorial (5-step in-app tour), full cosmetics and accessibility pass, canvas and encyclopedia performance tuning, catalog reaches 60 agents / 62 presets |
This project is still growing and we actively want your feedback - especially on the educational side:
- Did the encyclopedia help you understand a specific agent you were confused about? Which one?
- Is there an agent role or pattern missing from the 60 / 62 catalog?
- Did the Hooks Playground or Architecture Patterns module change how you think about your own Claude Code setup?
Please open a GitHub issue or start a discussion. Short comments and screenshots are very welcome.
MIT - Copyright (c) 2026 TheJacksonCode
Built by TheJacksonCode.
Interface languages: Polish (more comprehensive) and English (full parity for the core encyclopedia, Hooks, and Patterns modules) | Documentation language: English | Primary purpose: education and development - understanding how multi-agent systems think