Brainstorming Designs

Interactive design exploration and ideation sessions.

Usage

code

/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

bash

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

markdown

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

markdown

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

markdown

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

markdown

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

code

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

How Might We

Reframe problems as opportunities:

code

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

Constraint Removal

What if we removed a constraint?

code

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?

code

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

ASCII Mockups

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

code

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

Session Output

markdown

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