Design Agents Kit for Claude Code

4 specialized design agents that work as a collaborative team: Brand Strategist, UX Designer, Visual Designer, and UI Architect. They analyze, propose, and implement design decisions with WCAG compliance, structured briefs, and quality gates.

Read the full guide and see it in action

What's included

design-agents-kit/
  agents/
    brand-agent.md      - Brand strategy, voice, tone, copy generation
    ux-agent.md         - User flows, WCAG 2.2, interaction patterns
    visual-agent.md     - Typography, color, spacing, motion design
    ui-agent.md         - Component architecture, semantic HTML, tokens
  rules/
    design-team.md      - Orchestration protocol (how agents collaborate)
  claude-md-snippet.md  - Content to add to your CLAUDE.md

Setup (5 minutes)

Step 1: Copy agent files

Copy all 4 files from agents/ to your Claude Code agents directory:

cp agents/*.md ~/.claude/agents/

Step 2: Copy the orchestration rule

Copy the design team protocol to your rules directory:

cp rules/design-team.md ~/.claude/rules/

Step 3: Add to your CLAUDE.md

Open your ~/.claude/CLAUDE.md (or create one if it doesn't exist) and add the content from claude-md-snippet.md. This tells Claude Code about the design agents and where to find the protocol.

Step 4: Done

Start a new Claude Code session. The agents are ready.

How to use

Activate the design team

Say: design team: [your task]

Examples:

• design team: create a landing page for my SaaS product
• design team: improve the visual design of this page
• design team: fix accessibility issues on this form
• design team: redesign the hero section

The team also activates automatically when your task involves layout, interaction, or visual decisions.

First use

On first activation, Claude will ask your role (Designer / Developer / PM). This determines how agents behave:

• Designer Mode: You lead creative direction. Agents analyze, present options, and execute your decisions.
• Autonomous Mode: Visual Agent leads creative direction. You approve at checkpoints.

Task types

What you say	What happens
"create", "build", "new"	Full pipeline: Brand discovery, UX flow spec, Visual creative brief, implementation
"redesign", "beautify", "upgrade"	Transform: Visual leads new direction within existing constraints
"improve", "polish", "refine"	Roundtable: All agents collaborate equally
"fix contrast", "fix a11y"	Targeted fix: Relevant agent(s) only

What the team produces

• BRIEF.md in your project directory (brand brief + creative brief + agent positions + decisions)
• Approval checkpoints before implementation (clickable options, not typing)
• WCAG-compliant output (Level AA minimum)
• Real copy from Brand Agent (no Lorem ipsum)

How it works

The design team follows a structured protocol:

1. Project State Assessment - checks if BRIEF.md exists, what's built, what phase you're in
2. Authority Mode - determines who leads (you or Visual Agent)
3. Task Ambition - classifies as Fix / Improve / Transform / Create
4. Agent Coordination - launches relevant agents based on task type
5. Quality Gate - coordinator validates brief before showing you
6. Approval Checkpoint - you approve before implementation begins
7. Implementation - agents build according to approved spec

Customization

Adding your own brand defaults

If your team has a design system or brand guidelines, you can:

1. Create a brand guide file (JSON, YAML, or Markdown) with your tokens
2. Tell the design team: "use this brand guide: [path]"
3. Brand Agent switches to Executor mode (applies your brand, no discovery needed)
4. All tokens become protected (agents use them, never modify them)

Modifying agent behavior

Each agent file in ~/.claude/agents/ is self-contained. You can edit them to:

• Change the Reference Library in visual-agent.md
• Adjust WCAG target level
• Add your own design principles
• Modify the discovery questions in brand-agent.md