91 lines
3.9 KiB
Markdown
91 lines
3.9 KiB
Markdown
# 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>
|