Design Swarm
Orchestrate 10 specialized design agents — each embodying a different skill/lens — to run holistic audits, ideation sessions, and implementations in parallel.
Orchestration Flow
When invoked, follow these steps exactly:
1. Parse Arguments
Extract from the invocation:
- Modes: One or more of
audit, ideate, implement (default: audit if none specified)
- Target: The thing to evaluate — one of:
- Screenshot path (
.png, .jpg, .webp)
- URL (
http:// or https://)
- File path (code file)
- Text brief (quoted description of an interface)
2. Detect Target Type
| Signal |
Type |
Notes |
.png, .jpg, .webp, .gif |
screenshot |
Read the image directly |
http://, https:// |
url |
Use browser tools to snapshot the page |
| Existing file path |
code |
Read the file(s) |
| Everything else |
brief |
Treat as text description |
3. Load Orchestration Context
Read these files:
modules/orchestrator.md — synthesis logic, conflict resolution, final report template
references/scoring-rubric.md — universal 1-10 scale
references/agent-weights.md — default weights for composite scoring
4. Create Team
TeamCreate(team_name: "design-swarm", description: "Holistic design audit/ideation/implementation")
5. Execute Phases
For each requested mode, in order (audit → ideate → implement):
Phase: Audit
Determine participating agents (see orchestrator.md Phase Gating):
- Screenshot-only: skip
baseline-ui
- Code-only: all 10
- URL: all 10 (snapshot first, then inspect code if accessible)
- Brief: all 10 (theoretical assessment)
Create tasks via TaskCreate — one per participating agent
Spawn agents in parallel via Task tool. For each agent:
a. Read the agent template: modules/agents/<agent-name>.md
b. Read the source knowledge file(s) listed in the template's "Source Knowledge" section
c. Construct the agent prompt by combining:
- The full agent template (structure + evaluation criteria)
- The full source knowledge content
- The target context (screenshot/URL snapshot/code/brief)
- Mode: "audit"
- The scoring rubric content
- Instructions to mark task complete and send report via SendMessage to "team-lead"
Task(
name: "<agent-name>",
team_name: "design-swarm",
subagent_type: "general-purpose",
run_in_background: true,
prompt: [constructed prompt above]
)
Wait for all agents to complete (they'll send reports via SendMessage)
Synthesize per orchestrator.md:
- Collect all reports
- Deduplicate findings
- Aggregate by severity
- Compute weighted composite score
- Identify and resolve conflicts
- Generate the final audit report
Present the synthesized audit report to the user
Phase: Ideate
Create tasks for each agent (blocked by audit synthesis if audit was run)
Spawn agents with the same process as audit, but:
- Mode: "ideate"
- Include the synthesized audit findings in each agent's prompt
- Each agent proposes improvements through their specific lens
Synthesize ideation proposals:
- Merge overlapping proposals
- Categorize by impact/effort matrix
- Produce prioritized improvement roadmap
Present the improvement roadmap to the user
Phase: Implement
Spawn a single general-purpose agent with:
- The full synthesized audit report
- The prioritized improvement roadmap
- References to all relevant source skill files
- Instructions to implement changes in priority order (critical → serious → moderate → minor)
Present implementation results to the user
6. Shutdown
After all phases complete:
- Send
shutdown_request to all active agents
- Call
TeamDelete to clean up
Agent Reference
| Agent |
Lens |
Weight |
Template |
Source Knowledge |
| craft-philosophy |
Principled reasoning, tiebreaker |
1.5 |
modules/agents/craft-philosophy.md |
~/.claude/skills/design-craft/modules/craft-philosophy.md, ~/.claude/skills/craft-philosophy/SKILL.md |
| foundations |
Color, type, spacing, tokens |
1.0 |
modules/agents/foundations.md |
~/.claude/skills/design-craft/modules/foundations.md |
| interaction |
Forms, gestures, physics, a11y |
1.0 |
modules/agents/interaction.md |
~/.claude/skills/design-craft/modules/interaction.md |
| composition |
Layout, IA, content strategy |
1.0 |
modules/agents/composition.md |
~/.claude/skills/design-craft/modules/composition.md |
| critique |
5-step systematic evaluation |
1.2 |
modules/agents/critique.md |
~/.claude/skills/design-craft/modules/critique.md |
| interface-craft |
Animation DSL, polish |
0.8 |
modules/agents/interface-craft.md |
~/.agents/skills/interface-craft/SKILL.md |
| baseline-ui |
Constraint enforcement |
1.0 |
modules/agents/baseline-ui.md |
~/.agents/skills/baseline-ui/SKILL.md |
| frontend-design |
Visual aesthetics |
1.0 |
modules/agents/frontend-design.md |
~/Documents/samos/.claude/skills/frontend-design/SKILL.md |
| accessibility |
WCAG, ARIA, focus |
1.2 |
modules/agents/accessibility.md |
~/.agents/skills/fixing-accessibility/SKILL.md, ~/.claude/skills/design-craft/modules/interaction.md |
| motion |
Motion principles + performance |
0.8 |
modules/agents/motion.md |
~/.local/share/claude-tools/design-motion-principles/skills/design-motion-principles/SKILL.md, ~/.agents/skills/fixing-motion-performance/SKILL.md |
Usage Examples
/design-swarm audit ~/Desktop/screenshot.png
/design-swarm audit ideate https://example.com
/design-swarm audit ideate implement ./src/components/Settings.tsx
/design-swarm ideate "dark mode settings panel with toggle, theme preview, and schedule"
/design-swarm audit implement ./src/pages/Dashboard.tsx
Important Notes
- Runtime knowledge loading: Agent templates are compact. Source knowledge is read fresh from canonical skill files at spawn time. This prevents knowledge duplication and ensures agents always use the latest skill content.
- Parallel execution: All agents within a phase run simultaneously. Phases run sequentially when chained.
- Conflict resolution: The craft-philosophy agent (weight 1.5) serves as tiebreaker. See orchestrator.md for the full protocol.
- Partial modes: Any combination of modes is valid.
ideate without prior audit uses the target directly (no findings context). implement without ideate applies audit findings directly.
1---2name: design-swarm3description: Orchestrate a team of 10 design agents for holistic UI audit, ideation, and implementation. Use when: "design swarm", "holistic audit", "design review with all lenses", "full design analysis". Modes: audit, ideate, implement (any combination). Targets: screenshots, URLs, file paths, or text briefs.4---56# Design Swarm78Orchestrate 10 specialized design agents — each embodying a different skill/lens — to run holistic audits, ideation sessions, and implementations in parallel.910---1112## Orchestration Flow1314When invoked, follow these steps exactly:1516### 1. Parse Arguments1718Extract from the invocation:19- **Modes**: One or more of `audit`, `ideate`, `implement` (default: `audit` if none specified)20- **Target**: The thing to evaluate — one of:21 - Screenshot path (`.png`, `.jpg`, `.webp`)22 - URL (`http://` or `https://`)23 - File path (code file)24 - Text brief (quoted description of an interface)2526### 2. Detect Target Type2728| Signal | Type | Notes |29|--------|------|-------|30| `.png`, `.jpg`, `.webp`, `.gif` | screenshot | Read the image directly |31| `http://`, `https://` | url | Use browser tools to snapshot the page |32| Existing file path | code | Read the file(s) |33| Everything else | brief | Treat as text description |3435### 3. Load Orchestration Context3637Read these files:38- `modules/orchestrator.md` — synthesis logic, conflict resolution, final report template39- `references/scoring-rubric.md` — universal 1-10 scale40- `references/agent-weights.md` — default weights for composite scoring4142### 4. Create Team4344```45TeamCreate(team_name: "design-swarm", description: "Holistic design audit/ideation/implementation")46```4748### 5. Execute Phases4950For each requested mode, in order (`audit` → `ideate` → `implement`):5152#### Phase: Audit53541. **Determine participating agents** (see orchestrator.md Phase Gating):55 - Screenshot-only: skip `baseline-ui`56 - Code-only: all 1057 - URL: all 10 (snapshot first, then inspect code if accessible)58 - Brief: all 10 (theoretical assessment)59602. **Create tasks** via TaskCreate — one per participating agent61623. **Spawn agents in parallel** via Task tool. For each agent:6364 a. Read the agent template: `modules/agents/<agent-name>.md`65 b. Read the source knowledge file(s) listed in the template's "Source Knowledge" section66 c. Construct the agent prompt by combining:67 - The full agent template (structure + evaluation criteria)68 - The full source knowledge content69 - The target context (screenshot/URL snapshot/code/brief)70 - Mode: "audit"71 - The scoring rubric content72 - Instructions to mark task complete and send report via SendMessage to "team-lead"7374 ```75 Task(76 name: "<agent-name>",77 team_name: "design-swarm",78 subagent_type: "general-purpose",79 run_in_background: true,80 prompt: [constructed prompt above]81 )82 ```83844. **Wait** for all agents to complete (they'll send reports via SendMessage)85865. **Synthesize** per orchestrator.md:87 - Collect all reports88 - Deduplicate findings89 - Aggregate by severity90 - Compute weighted composite score91 - Identify and resolve conflicts92 - Generate the final audit report93946. **Present** the synthesized audit report to the user9596#### Phase: Ideate97981. **Create tasks** for each agent (blocked by audit synthesis if audit was run)991002. **Spawn agents** with the same process as audit, but:101 - Mode: "ideate"102 - Include the synthesized audit findings in each agent's prompt103 - Each agent proposes improvements through their specific lens1041053. **Synthesize** ideation proposals:106 - Merge overlapping proposals107 - Categorize by impact/effort matrix108 - Produce prioritized improvement roadmap1091104. **Present** the improvement roadmap to the user111112#### Phase: Implement1131141. **Spawn a single `general-purpose` agent** with:115 - The full synthesized audit report116 - The prioritized improvement roadmap117 - References to all relevant source skill files118 - Instructions to implement changes in priority order (critical → serious → moderate → minor)1191202. **Present** implementation results to the user121122### 6. Shutdown123124After all phases complete:1251. Send `shutdown_request` to all active agents1262. Call `TeamDelete` to clean up127128---129130## Agent Reference131132| Agent | Lens | Weight | Template | Source Knowledge |133|-------|------|--------|----------|-----------------|134| craft-philosophy | Principled reasoning, tiebreaker | 1.5 | `modules/agents/craft-philosophy.md` | `~/.claude/skills/design-craft/modules/craft-philosophy.md`, `~/.claude/skills/craft-philosophy/SKILL.md` |135| foundations | Color, type, spacing, tokens | 1.0 | `modules/agents/foundations.md` | `~/.claude/skills/design-craft/modules/foundations.md` |136| interaction | Forms, gestures, physics, a11y | 1.0 | `modules/agents/interaction.md` | `~/.claude/skills/design-craft/modules/interaction.md` |137| composition | Layout, IA, content strategy | 1.0 | `modules/agents/composition.md` | `~/.claude/skills/design-craft/modules/composition.md` |138| critique | 5-step systematic evaluation | 1.2 | `modules/agents/critique.md` | `~/.claude/skills/design-craft/modules/critique.md` |139| interface-craft | Animation DSL, polish | 0.8 | `modules/agents/interface-craft.md` | `~/.agents/skills/interface-craft/SKILL.md` |140| baseline-ui | Constraint enforcement | 1.0 | `modules/agents/baseline-ui.md` | `~/.agents/skills/baseline-ui/SKILL.md` |141| frontend-design | Visual aesthetics | 1.0 | `modules/agents/frontend-design.md` | `~/Documents/samos/.claude/skills/frontend-design/SKILL.md` |142| accessibility | WCAG, ARIA, focus | 1.2 | `modules/agents/accessibility.md` | `~/.agents/skills/fixing-accessibility/SKILL.md`, `~/.claude/skills/design-craft/modules/interaction.md` |143| motion | Motion principles + performance | 0.8 | `modules/agents/motion.md` | `~/.local/share/claude-tools/design-motion-principles/skills/design-motion-principles/SKILL.md`, `~/.agents/skills/fixing-motion-performance/SKILL.md` |144145---146147## Usage Examples148149```150/design-swarm audit ~/Desktop/screenshot.png151/design-swarm audit ideate https://example.com152/design-swarm audit ideate implement ./src/components/Settings.tsx153/design-swarm ideate "dark mode settings panel with toggle, theme preview, and schedule"154/design-swarm audit implement ./src/pages/Dashboard.tsx155```156157---158159## Important Notes160161- **Runtime knowledge loading**: Agent templates are compact. Source knowledge is read fresh from canonical skill files at spawn time. This prevents knowledge duplication and ensures agents always use the latest skill content.162- **Parallel execution**: All agents within a phase run simultaneously. Phases run sequentially when chained.163- **Conflict resolution**: The craft-philosophy agent (weight 1.5) serves as tiebreaker. See orchestrator.md for the full protocol.164- **Partial modes**: Any combination of modes is valid. `ideate` without prior `audit` uses the target directly (no findings context). `implement` without `ideate` applies audit findings directly.