Brainstorming Designs

Interactive design exploration and ideation sessions.

Usage

/brainstorming-designs [topic] [options]

Arguments

Topic (optional):

Design area to explore (e.g., "login flow", "dashboard layout")

Options:

--type TYPE: Design type (ui|ux|component|system)
--constraints: Add specific constraints
--output PATH: Save session output
--visual: Generate ASCII mockups

Examples

# General brainstorm
/brainstorming-designs "user onboarding"

# Component design
/brainstorming-designs "data table" --type component

# UX flow exploration
/brainstorming-designs "checkout process" --type ux

# With visual mockups
/brainstorming-designs "settings page" --visual

Session Types

UI Design

Focus on visual elements, layout, styling.

## UI Brainstorm: {topic}

### Layout Options
❓ What are the main content areas?
❓ How should they be arranged?
❓ What's the visual hierarchy?

### Visual Style
❓ What mood/feeling should it convey?
❓ Color palette considerations?
❓ Typography approach?

### Responsive Behavior
❓ How does it adapt to mobile?
❓ Breakpoint strategy?

UX Design

Focus on user flows, interactions, experience.

## UX Brainstorm: {topic}

### User Goals
❓ What is the user trying to accomplish?
❓ What's their mental model?
❓ What information do they need?

### Flow Mapping
❓ What are the key steps?
❓ What decisions do users make?
❓ Where might they get stuck?

### Interaction Design
❓ How do users navigate?
❓ What feedback do they get?
❓ How do errors surface?

Component Design

Focus on reusable UI components.

## Component Brainstorm: {topic}

### API Design
❓ What props does it need?
❓ What variations exist?
❓ How is it controlled?

### State Management
❓ What internal state?
❓ What external state?
❓ Event handling?

### Composition
❓ What sub-components?
❓ Slot/children patterns?
❓ Extension points?

System Design

Focus on design system, patterns, standards.

## System Brainstorm: {topic}

### Patterns
❓ What patterns apply?
❓ Consistency with existing system?
❓ New patterns needed?

### Tokens
❓ Colors, spacing, typography?
❓ Animation/motion?
❓ Iconography?

### Documentation
❓ How will it be documented?
❓ Usage guidelines?
❓ Do's and don'ts?

Brainstorming Techniques

Crazy 8s

Generate 8 quick ideas in 8 minutes:

Idea 1: ____
Idea 2: ____
...
Idea 8: ____

How Might We

Reframe problems as opportunities:

How might we make {problem} into {opportunity}?

Constraint Removal

What if we removed a constraint?

What if we had unlimited screen space?
What if loading was instant?
What if users had perfect knowledge?

Analogy Exploration

What does this remind us of?

This is like {analog} because...
We could apply {principle} from {domain}...

ASCII Mockups

When --visual is specified, generate text-based mockups:

┌────────────────────────────────────┐
│  Logo        Nav    Nav    [User] │
├────────────────────────────────────┤
│                                    │
│  ┌──────────┐  ┌──────────┐       │
│  │  Card 1  │  │  Card 2  │       │
│  │          │  │          │       │
│  └──────────┘  └──────────┘       │
│                                    │
│  ┌──────────────────────────┐     │
│  │                          │     │
│  │      Main Content        │     │
│  │                          │     │
│  └──────────────────────────┘     │
│                                    │
└────────────────────────────────────┘

Session Output

## Design Brainstorm: {topic}

### Session Summary
- Type: {type}
- Duration: {duration}
- Ideas generated: {count}

### Key Insights
1. {insight 1}
2. {insight 2}
3. {insight 3}

### Promising Directions
- **Direction A**: {description}
  - Pros: {pros}
  - Cons: {cons}

- **Direction B**: {description}
  - Pros: {pros}
  - Cons: {cons}

### Visual Concepts
{ASCII mockups if generated}

### Next Steps
- [ ] {action 1}
- [ ] {action 2}
- [ ] {action 3}

### Questions to Resolve
- {question 1}
- {question 2}

Integration

After brainstorming:

Create design tasks in PM tool
Save session for reference
Share with team for feedback
Iterate on promising directions