Whiteport Design Studio (WDS) - BMad Method Module

---

🎯 About This Fork

This repository is a fork of BMad-METHOD with the purpose of contributing the Whiteport Design Studio (WDS) module to the BMad ecosystem.

What is Whiteport Design Studio?

WDS is a design-focused methodology module that provides a complete UX/UI design workflow for product development—from initial product exploration through detailed component specifications. It complements the development-focused BMad Method (BMM) module by providing the design artifacts that feed into development.

┌─────────────────────────────────────────────────────────────────────┐
│                         BMad Ecosystem                              │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌─────────────────┐      ┌─────────────────┐                     │
│   │  Whiteport      │      │  BMad Method    │                     │
│   │  Design Studio  │ ───► │  (BMM)          │                     │
│   │  (WDS)          │      │                 │                     │
│   │                 │      │                 │                     │
│   │  • Product Brief│      │  • Architecture │                     │
│   │  • Trigger Map  │      │  • Epics/Stories│                     │
│   │  • Scenarios    │      │  • Development  │                     │
│   │  • PRD          │      │  • Testing      │                     │
│   │  • Design System│      │  • Deployment   │                     │
│   │  • UI Roadmap   │      │                 │                     │
│   │                 │      │                 │                     │
│   │  DESIGN ────────┼──────┼► DEVELOPMENT    │                     │
│   └─────────────────┘      └─────────────────┘                     │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

---

🏗️ WDS Module Structure

The WDS module will be located at src/modules/wds/ and follows BMad v6 module conventions:

src/modules/wds/
├── _module-installer/          # Installation configuration
│   └── installer.js
├── agents/                     # WDS specialized agents
│   ├── saga-analyst.agent.yaml # Saga - WDS Analyst
│   ├── idunn-pm.agent.yaml     # Idunn - WDS PM
│   └── freya-ux.agent.yaml    # Freya - WDS Designer
├── workflows/                  # Phase-selectable workflows
├── data/                       # Standards, frameworks, presentations
├── docs/                       # Module documentation (xxx-guide.md)
├── examples/                   # Real-world usage examples
├── reference/                  # Templates and checklists
├── teams/                      # Team configurations
└── README.md                   # Module entry point (only README)

---

📁 WDS Output Folder Structure

WDS creates a distinctive alphabetized folder structure in the user's project docs/ folder:

docs/
├── A-Product-Brief/            # Phase 1: Product Exploration
├── B-Trigger-Map/              # Phase 2: Trigger Mapping
├── C-Platform-Requirements/    # Phase 3: PRD Platform (technical foundation)
├── C-Scenarios/                # Phase 4: UX Design (scenarios & specifications)
├── D-Design-System/            # Phase 5: Design System (component library)
├── E-PRD/                      # Phase 6: PRD & Design Deliveries
├── F-Testing/                  # Phase 7: Testing validation
└── G-Product-Development/      # Phase 8: Ongoing product development

Why alphabetical? The A-B-C-D-E prefix creates a clear visual namespace that:

• Groups WDS artifacts together in file explorers
• Distinguishes from other project documentation
• Provides natural sort order matching workflow progression
• Becomes a recognizable WDS brand signature

---

🔄 The WDS Phases

WDS provides 8 design phases that can be selected based on project scale:

Phase	Name	Output Folder	Description
1️⃣	Product Exploration	A-Product-Brief/	Vision, positioning, ICP framework
2️⃣	Trigger Mapping	B-Trigger-Map/	Personas, business goals, Feature Impact Analysis
3️⃣	PRD Platform	C-Platform-Requirements/	Technical foundation (parallel with Phase 4)
4️⃣	UX Design	C-Scenarios/	User scenarios, sketches, specifications
5️⃣	Design System	D-Design-System/	Design tokens, component library (optional)
6️⃣	PRD & Design Deliveries	E-PRD/	Complete PRD + packaged flows for BMM
7️⃣	Testing	F-Testing/	Designer validation of implementation
8️⃣	Product Development	G-Product-Development/	Ongoing improvements (existing products)

Phase-Selectable Workflow

Unlike rigid tracks, WDS allows users to select individual phases based on project needs:

• Landing page? → Phases 1, 4, 5
• Full product? → All 6 phases
• Existing product enhancement? → Phases 2, 4, 5, 6
• Design system only? → Phases 4, 5

---

🤖 WDS Agents - The Norse Pantheon 🏔️

WDS introduces 3 specialized design agents named after Norse mythology:

Agent	Role	Norse Meaning
Saga the WDS Analyst	Business & Product Analyst	Goddess of stories & wisdom - uncovers your business story
Idunn the WDS PM	Product Manager	Goddess of renewal & youth - keeps projects vital and thriving
Freya the WDS Designer	UX/UI Designer	Goddess of beauty, magic & strategy - creates experiences users love

---

🔗 Integration with BMad Method (BMM)

WDS is designed to hand off to BMM for development:

WDS Design Phases                    BMM Development Phases
─────────────────                    ─────────────────────
A-Product-Brief/    ──────────────►  Architecture Context
B-Trigger-Map/      ──────────────►  User Story Personas
C-Platform-Requirements/ ─────────►  Technical Foundation
C-Scenarios/        ──────────────►  Story Specifications
D-Design-System/    ──────────────►  Component Implementation
E-PRD/              ──────────────►  PRD + Design Deliveries

The E-PRD/ folder serves as the integration bridge, containing:

• Complete PRD (00-PRD.md) with functional requirements
• Design Deliveries (DD-XXX.yaml) - packaged flows for BMM handoff
• Scenario-to-epic mapping
• Component references
• Test scenarios

---

🚀 Installation

Prerequisites

• Node.js 18+ installed
• BMad Method CLI installed (npm install -g @bmad/cli)

Install WDS Module

# Clone this repository
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
cd whiteport-design-studio

# Install dependencies
npm install

# Install WDS module to your project
cd /path/to/your/project
bmad install wds

What Gets Installed

The WDS installer creates:

• ✅ docs/ directory structure with alphabetized folders (A-G)
• ✅ All 8 phase folders ready for your design work
• ✅ .gitkeep files to preserve empty directories
• ✅ E-PRD/Design-Deliveries/ subfolder for BMM handoff

Getting Started

After installation, activate any WDS agent:

# Start with Product Brief
bmad agent saga-wds-analyst

# Or jump to Platform Requirements
bmad agent idunn-wds-pm

# Or begin with UX Design
bmad agent freya-wds-designer

---

📋 Development Status

✅ Complete

• ✅ Module folder structure (src/modules/wds/)
• ✅ Installation system (_module-installer/installer.js)
• ✅ All 3 agents converted to v6 YAML (Saga, Idunn, Freya)
• ✅ Agent presentations and personas
• ✅ All 8 phase workflows complete
• ✅ Team configurations
• ✅ Complete documentation (method guides)
• ✅ Workflow architecture (step-file system)

🔄 Optional Enhancements

• Dog Week example patterns
• Conversation examples
• WDS Trigger Map example

Conventions

• One README: Only README.md at module root; all other docs use xxx-guide.md naming
• Folder structure: Alphabetized A-B-C-D-E prefix for user project output
• Design focus: No development/backlog artifacts (handled by BMM)
• Phase-selectable: Users choose phases based on project scale

---

🙏 Acknowledgments

BMad Method

This module is built on the excellent BMad Method framework created by the BMad community. WDS leverages BMad Core's modular architecture to provide design-focused workflows.

Whiteport Collective

WDS is contributed by Whiteport Collective, evolving from the earlier "Whiteport Sketch-to-Code" methodology into a proper BMad v6 module.

---

🔄 Keeping This Fork Updated

This fork is regularly synchronized with upstream BMad-METHOD:

# Sync with upstream
git fetch upstream
git merge upstream/main
git push origin main

---

📚 Original BMad Method Documentation

For complete BMad Method documentation, see:

• BMad Method README - Main documentation
• BMM Module Docs - Development workflows
• Agent Customization - Customize agents
• Quick Start Guide - Get started

---

📄 License

MIT License - See LICENSE for details.

BMad Method is a trademark of BMad Code, LLC.
Whiteport Design Studio is contributed by Whiteport Collective.

---

_{Building the design bridge for human-AI collaboration 🎨}