designagents

KO | EN

gitlite — search

#javascript #android #machine-learning #linux #docker #nodejs #macos #java #awesome #cli #kubernetes #awesome-list #pytorch #open-source

(★ 10)

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.

designagents 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://ctrlship.dev/blog/design-agents-for-claude-code)**

## 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:

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

### Step 2: Copy the orchestration rule

Copy the design team protocol to your rules directory:

```bash
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

designagents

designagents 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

designagents

designagents 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README