277 lines
12 KiB
Markdown
277 lines
12 KiB
Markdown
# Whiteport Design Studio (WDS) - BMad Method Module
|
||
|
||
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
||
[]()
|
||
[](LICENSE)
|
||
|
||
---
|
||
|
||
## 🎯 About This Fork
|
||
|
||
This repository is a **fork of [BMad-METHOD](https://github.com/bmad-code-org/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
|
||
|
||
```bash
|
||
# 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:
|
||
|
||
```bash
|
||
# 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](https://github.com/bmad-code-org/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](https://github.com/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:
|
||
|
||
```bash
|
||
# 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](https://github.com/bmad-code-org/BMAD-METHOD)** - Main documentation
|
||
- **[BMM Module Docs](./src/modules/bmm/docs/README.md)** - Development workflows
|
||
- **[Agent Customization](./docs/agent-customization-guide.md)** - Customize agents
|
||
- **[Quick Start Guide](./src/modules/bmm/docs/quick-start.md)** - Get started
|
||
|
||
---
|
||
|
||
## 📄 License
|
||
|
||
MIT License - See [LICENSE](LICENSE) for details.
|
||
|
||
**BMad Method** is a trademark of BMad Code, LLC.
|
||
**Whiteport Design Studio** is contributed by Whiteport Collective.
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
<sub>Building the design bridge for human-AI collaboration 🎨</sub>
|
||
</p>
|