BMAD-METHOD/src/modules/wds/README.md

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

---

_{Part of the BMad ecosystem • Contributed by Whiteport Collective}