# Whiteport Design Studio (WDS) Module

**Design-focused methodology for UX/UI product development**

## Overview

Whiteport Design Studio provides a complete design workflow from product exploration through detailed component specifications. WDS creates the design artifacts that feed into development modules like BMad Method (BMM).

## Module Structure

```
wds/
├── _module-installer/          # Installation configuration
├── agents/                     # WDS specialized agents (Norse Pantheon)
│   ├── saga-analyst.agent.yaml # Saga-Analyst - Business & Product Analyst
│   ├── idunn-pm.agent.yaml     # Idunn-WDS-PM - Product Manager
│   └── freya-ux.agent.yaml    # Freya-WDS-Designer - UX/UI Designer
├── workflows/                  # Phase-selectable design workflows
├── data/                       # Standards, frameworks, presentations
│   └── presentations/          # Agent introduction presentations
├── docs/                       # Module documentation
│   ├── method/                 # Methodology deep-dives
│   └── images/                 # Diagrams and visuals
├── examples/                   # Real-world usage examples
│   └── dog-week-patterns/      # Patterns from Dog Week project
├── reference/                  # Templates and checklists
│   ├── templates/              # Document templates
│   └── checklists/             # Phase completion checklists
├── teams/                      # Team configurations
└── README.md                   # This file (only README in module)
```

## Output Folder Structure

WDS creates an alphabetized folder structure in the user's `docs/` folder:

| Folder             | Phase | Purpose                            |
| ------------------ | ----- | ---------------------------------- |
| `A-Product-Brief/` | 1     | Strategic foundation & vision      |
| `B-Trigger-Map/`   | 2     | Business goals, personas, drivers  |
| `C-Scenarios/`     | 4     | Visual specifications & sketches   |
| `D-PRD/`           | 3     | Product requirements documentation |
| `D-Design-System/` | 5     | Component library & design tokens  |
| `E-UI-Roadmap/`    | 6     | Development integration bridge     |

## Phases

1. **Product Exploration** → `A-Product-Brief/`
2. **User Research** → `B-Trigger-Map/`
3. **Requirements** → `D-PRD/`
4. **Conceptual Design** → `C-Scenarios/` (with optional Figma visual refinement)
5. **Component Design** → `D-Design-System/` (grows organically via Figma integration)
6. **Dev Integration** → `E-UI-Roadmap/`

## Agents - The Norse Pantheon 🏔️

| Agent                   | File                      | Role                       | Norse Meaning                       |
| ----------------------- | ------------------------- | -------------------------- | ----------------------------------- |
| **Saga the Analyst**    | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom         |
| **Idunn the PM**        | `idunn-pm.agent.yaml`     | Product Manager            | Goddess of renewal & youth          |
| **Freya the Designer** | `freya-ux.agent.yaml`    | UX/UI Designer             | Goddess of beauty, magic & strategy |

## Conventions

- **One README rule:** Only this README.md; all other docs use `xxx-guide.md` naming
- **Alphabetized output:** A-B-C-D-E folder prefix in user projects
- **Design focus:** No development artifacts (handled by BMM)
- **Phase-selectable:** Users choose phases based on project scale

## Quick Start

```
# After installing BMad with WDS module
npx bmad-method@alpha install

# In your IDE, activate any WDS agent and run:
*workflow-init
```

## Integration with BMM

WDS outputs feed directly into BMad Method development workflows:

```
WDS → E-UI-Roadmap/ → BMM Architecture & Stories
```

---

<sub>Part of the BMad ecosystem • Contributed by Whiteport Collective</sub>