9.7 KiB

Raw Blame History

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
│   └── install-config.yaml
├── agents/                     # WDS specialized agents
│   ├── analyst.agent.yaml      # Mary - Business & Product Analyst
│   ├── pm.agent.yaml           # Sarah - Product Manager
│   └── designer.agent.yaml     # Sally - UX/UI 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: Strategic foundation & vision
├── B-Trigger-Map/              # Phase 2: Business goals, personas, drivers
├── C-Scenarios/                # Phase 4: Visual specifications & sketches
├── D-PRD/                      # Phase 3: Product requirements documentation
├── D-Design-System/            # Phase 5: Component library & design tokens
└── E-UI-Roadmap/               # Phase 6: Development integration bridge

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 6 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️⃣	User Research	`B-Trigger-Map/`	Personas, business goals, driving forces
3️⃣	Requirements	`D-PRD/`	Functional & technical requirements
4️⃣	Conceptual Design	`C-Scenarios/`	User scenarios, sketches, specifications
5️⃣	Component Design	`D-Design-System/`	Design tokens, component library
6️⃣	Dev Integration	`E-UI-Roadmap/`	Handoff artifacts for development

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 Analyst	Business & Product Analyst	Goddess of stories & wisdom - uncovers your business story
Freyja the PM	Product Manager	Goddess of love, war & strategy - leads with heart and mind
Baldr the UX Expert	UX/UI Designer	God of light & beauty - makes everything radiant

🔗 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
D-PRD/              ──────────────►  Epic Breakdown Source
C-Scenarios/        ──────────────►  Story Specifications
D-Design-System/    ──────────────►  Component Implementation
E-UI-Roadmap/       ──────────────►  Development Roadmap

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

Scenario-to-epic mapping
Priority recommendations
Technical constraints
Component implementation notes
Object ID inventory for testing

📋 Development Status

Current Phase: Module Structure Setup

Create src/modules/wds/ folder structure
Create _module-installer/install-config.yaml
Convert agents to v6 YAML format (Mary, Sarah, Sally)
Create phase-selectable workflow initialization
Build core workflows for each phase
Create documentation (xxx-guide.md format)
Add example content (Dog Week patterns)
Test integration with BMM

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 🎨}

9.7 KiB Raw Blame History Unescape Escape