refactor: update README to reflect the new Whiteport Design Studio (WDS) module
- Renamed the project from BMad Method to Whiteport Design Studio (WDS) - Added new badges for WDS and updated project status - Introduced WDS as a design-focused methodology module complementing BMad Method - Detailed the folder structure and workflow phases for WDS - Included information about specialized design agents and their roles - Enhanced documentation for clarity and organization This update aligns the README with the current project structure and goals, emphasizing the integration of design workflows into the BMad ecosystem.
This commit is contained in:
Mårten Angner
parent
fe0817f590
commit
47ee5a45cc
357
README.md
357
README.md
|
|
@ -1,214 +1,215 @@
|
|||
# BMad Method & BMad Core
|
||||
# Whiteport Design Studio (WDS) - BMad Method Module
|
||||
|
||||
[](https://www.npmjs.com/package/bmad-method)
|
||||
[](https://www.npmjs.com/package/bmad-method)
|
||||
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
||||
[]()
|
||||
[](LICENSE)
|
||||
[](https://nodejs.org)
|
||||
[](https://discord.gg/gk8jAdXWmj)
|
||||
|
||||
## AI-Driven Agile Development That Scales From Bug Fixes to Enterprise
|
||||
---
|
||||
|
||||
**Build More, Architect Dreams** (BMAD) with **19 specialized AI agents** and **50+ guided workflows** that adapt to your project's complexity—from quick bug fixes to enterprise platforms.
|
||||
## 🎯 About This Fork
|
||||
|
||||
> **🚀 v6 is a MASSIVE upgrade from v4!** Complete architectural overhaul, scale-adaptive intelligence, visual workflows, and the powerful BMad Core framework. v4 users: this changes everything. [See what's new →](#whats-new-in-v6)
|
||||
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.
|
||||
|
||||
> **📌 v6 Alpha Status:** Near-beta quality with vastly improved stability. Documentation is being finalized. New videos coming soon to [BMadCode YouTube](https://www.youtube.com/@BMadCode).
|
||||
### What is Whiteport Design Studio?
|
||||
|
||||
## 🎯 Why BMad Method?
|
||||
**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.
|
||||
|
||||
Unlike generic AI coding assistants, BMad Method provides **structured, battle-tested workflows** powered by specialized agents who understand agile development. Each agent has deep domain expertise—from product management to architecture to testing—working together seamlessly.
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 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 │ │
|
||||
│ └─────────────────┘ └─────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**✨ Key Benefits:**
|
||||
---
|
||||
|
||||
- **Scale-Adaptive Intelligence** - Automatically adjusts planning depth from bug fixes to enterprise systems
|
||||
- **Complete Development Lifecycle** - Analysis → Planning → Architecture → Implementation
|
||||
- **Specialized Expertise** - 19 agents with specific roles (PM, Architect, Developer, UX Designer, etc.)
|
||||
- **Proven Methodologies** - Built on agile best practices with AI amplification
|
||||
- **IDE Integration** - Works with Claude Code, Cursor, Windsurf, VS Code
|
||||
## 🏗️ WDS Module Structure
|
||||
|
||||
## 🏗️ The Power of BMad Core
|
||||
The WDS module will be located at `src/modules/wds/` and follows BMad v6 module conventions:
|
||||
|
||||
**BMad Method** is actually a sophisticated module built on top of **BMad Core** (**C**ollaboration **O**ptimized **R**eflection **E**ngine). This revolutionary architecture means:
|
||||
```
|
||||
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)
|
||||
```
|
||||
|
||||
- **BMad Core** provides the universal framework for human-AI collaboration
|
||||
- **BMad Method** leverages Core to deliver agile development workflows
|
||||
- **BMad Builder** lets YOU create custom modules as powerful as BMad Method itself
|
||||
---
|
||||
|
||||
With **BMad Builder**, you can architect both simple agents and vastly complex domain-specific modules (legal, medical, finance, education, creative) that will soon be sharable in an **official community marketplace**. Imagine building and sharing your own specialized AI team!
|
||||
## 📁 WDS Output Folder Structure
|
||||
|
||||
## 📊 See It In Action
|
||||
WDS creates a distinctive **alphabetized folder structure** in the user's project `docs/` folder:
|
||||
|
||||
<p align="center">
|
||||
<img src="./src/modules/bmm/docs/images/workflow-method-greenfield.svg" alt="BMad Method Workflow" width="100%">
|
||||
</p>
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
<p align="center">
|
||||
<em>Complete BMad Method workflow showing all phases, agents, and decision points</em>
|
||||
</p>
|
||||
**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
|
||||
|
||||
## 🚀 Get Started in 3 Steps
|
||||
---
|
||||
|
||||
### 1. Install BMad Method
|
||||
## 🔄 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-Analyst** | Business & Product Analyst | Goddess of stories & wisdom - uncovers your business story |
|
||||
| **Freyja-PM** | Product Manager | Goddess of love, war & strategy - leads with heart and mind |
|
||||
| **Baldr-UX** | 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](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
|
||||
# Install v6 Alpha (recommended)
|
||||
npx bmad-method@alpha install
|
||||
|
||||
# Or stable v4 for production
|
||||
npx bmad-method install
|
||||
# Sync with upstream
|
||||
git fetch upstream
|
||||
git merge upstream/main
|
||||
git push origin main
|
||||
```
|
||||
|
||||
### 2. Initialize Your Project
|
||||
---
|
||||
|
||||
Load any agent in your IDE and run:
|
||||
## 📚 Original BMad Method Documentation
|
||||
|
||||
```
|
||||
*workflow-init
|
||||
```
|
||||
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
|
||||
|
||||
This analyzes your project and recommends the right workflow track.
|
||||
|
||||
### 3. Choose Your Track
|
||||
|
||||
BMad Method adapts to your needs with three intelligent tracks:
|
||||
|
||||
| Track | Use For | Planning | Time to Start |
|
||||
| ------------------ | ------------------------- | ----------------------- | ------------- |
|
||||
| **⚡ Quick Flow** | Bug fixes, small features | Tech spec only | < 5 minutes |
|
||||
| **📋 BMad Method** | Products, platforms | PRD + Architecture + UX | < 15 minutes |
|
||||
| **🏢 Enterprise** | Compliance, scale | Full governance suite | < 30 minutes |
|
||||
|
||||
> **Not sure?** Run `*workflow-init` and let BMad analyze your project goal.
|
||||
|
||||
## 🔄 How It Works: 4-Phase Methodology
|
||||
|
||||
BMad Method guides you through a proven development lifecycle:
|
||||
|
||||
1. **📊 Analysis** (Optional) - Brainstorm, research, and explore solutions
|
||||
2. **📝 Planning** - Create PRDs, tech specs, or game design documents
|
||||
3. **🏗️ Solutioning** - Design architecture, UX, and technical approach
|
||||
4. **⚡ Implementation** - Story-driven development with continuous validation
|
||||
|
||||
Each phase has specialized workflows and agents working together to deliver exceptional results.
|
||||
|
||||
## 🤖 Meet Your Team
|
||||
|
||||
**12 Specialized Agents** working in concert:
|
||||
|
||||
| Development | Architecture | Product | Leadership |
|
||||
| ----------- | -------------- | ------------- | -------------- |
|
||||
| Developer | Architect | PM | Scrum Master |
|
||||
| UX Designer | Test Architect | Analyst | BMad Master |
|
||||
| Tech Writer | Game Architect | Game Designer | Game Developer |
|
||||
|
||||
**Test Architect** integrates with `@seontechnologies/playwright-utils` for production-ready fixture-based utilities.
|
||||
|
||||
Each agent brings deep expertise and can be customized to match your team's style.
|
||||
|
||||
## 📦 What's Included
|
||||
|
||||
### Core Modules
|
||||
|
||||
- **BMad Method (BMM)** - Complete agile development framework
|
||||
- 12 specialized agents
|
||||
- 34 workflows across 4 phases
|
||||
- Scale-adaptive planning
|
||||
- [→ Documentation Hub](./src/modules/bmm/docs/README.md)
|
||||
|
||||
- **BMad Builder (BMB)** - Create custom agents and workflows
|
||||
- Build anything from simple agents to complex modules
|
||||
- Create domain-specific solutions (legal, medical, finance, education)
|
||||
- Share your creations in the upcoming community marketplace
|
||||
- [→ Builder Guide](./src/modules/bmb/README.md)
|
||||
|
||||
- **Creative Intelligence Suite (CIS)** - Innovation & problem-solving
|
||||
- Brainstorming, design thinking, storytelling
|
||||
- 5 creative facilitation workflows
|
||||
- [→ Creative Workflows](./src/modules/cis/README.md)
|
||||
|
||||
### Key Features
|
||||
|
||||
- **🎨 Customizable Agents** - Modify personalities, expertise, and communication styles
|
||||
- **🌐 Multi-Language Support** - Separate settings for communication and code output
|
||||
- **📄 Document Sharding** - 90% token savings for large projects
|
||||
- **🔄 Update-Safe** - Your customizations persist through updates
|
||||
- **🚀 Web Bundles** - Use in ChatGPT, Claude Projects, or Gemini Gems
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
### Quick Links
|
||||
|
||||
- **[Quick Start Guide](./src/modules/bmm/docs/quick-start.md)** - 15-minute introduction
|
||||
- **[Complete BMM Documentation](./src/modules/bmm/docs/README.md)** - All guides and references
|
||||
- **[Agent Customization](./docs/agent-customization-guide.md)** - Personalize your agents
|
||||
- **[All Documentation](./docs/index.md)** - Complete documentation index
|
||||
|
||||
### For v4 Users
|
||||
|
||||
- **[v4 Documentation](https://github.com/bmad-code-org/BMAD-METHOD/tree/V4)**
|
||||
- **[v4 to v6 Upgrade Guide](./docs/v4-to-v6-upgrade.md)**
|
||||
|
||||
## 💬 Community & Support
|
||||
|
||||
- **[Discord Community](https://discord.gg/gk8jAdXWmj)** - Get help, share projects
|
||||
- **[GitHub Issues](https://github.com/bmad-code-org/BMAD-METHOD/issues)** - Report bugs, request features
|
||||
- **[YouTube Channel](https://www.youtube.com/@BMadCode)** - Video tutorials and demos
|
||||
- **[Web Bundles](https://bmad-code-org.github.io/bmad-bundles/)** - Pre-built agent bundles
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
For contributors working on the BMad codebase:
|
||||
|
||||
```bash
|
||||
# Run all quality checks
|
||||
npm test
|
||||
|
||||
# Development commands
|
||||
npm run lint:fix # Fix code style
|
||||
npm run format:fix # Auto-format code
|
||||
npm run bundle # Build web bundles
|
||||
```
|
||||
|
||||
See [CONTRIBUTING.md](CONTRIBUTING.md) for full development guidelines.
|
||||
|
||||
## What's New in v6
|
||||
|
||||
**v6 represents a complete architectural revolution from v4:**
|
||||
|
||||
### 🚀 Major Upgrades
|
||||
|
||||
- **BMad Core Framework** - Modular architecture enabling custom domain solutions
|
||||
- **Scale-Adaptive Intelligence** - Automatic adjustment from bug fixes to enterprise
|
||||
- **Visual Workflows** - Beautiful SVG diagrams showing complete methodology
|
||||
- **BMad Builder Module** - Create and share your own AI agent teams
|
||||
- **50+ Workflows** - Up from 20 in v4, covering every development scenario
|
||||
- **19 Specialized Agents** - Enhanced with customizable personalities and expertise
|
||||
- **Update-Safe Customization** - Your configs persist through all updates
|
||||
- **Web Bundles** - Use agents in ChatGPT, Claude, and Gemini
|
||||
- **Multi-Language Support** - Separate settings for communication and code
|
||||
- **Document Sharding** - 90% token savings for large projects
|
||||
|
||||
### 🔄 For v4 Users
|
||||
|
||||
- **[Comprehensive Upgrade Guide](./docs/v4-to-v6-upgrade.md)** - Step-by-step migration
|
||||
- **[v4 Documentation Archive](https://github.com/bmad-code-org/BMAD-METHOD/tree/V4)** - Legacy reference
|
||||
- Backwards compatibility where possible
|
||||
- Smooth migration path with installer detection
|
||||
---
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT License - See [LICENSE](LICENSE) for details.
|
||||
|
||||
**Trademarks:** BMAD™ and BMAD-METHOD™ are trademarks of BMad Code, LLC.
|
||||
**BMad Method** is a trademark of BMad Code, LLC.
|
||||
**Whiteport Design Studio** is contributed by Whiteport Collective.
|
||||
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/bmad-code-org/BMAD-METHOD/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=bmad-code-org/BMAD-METHOD" alt="Contributors">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<sub>Built with ❤️ for the human-AI collaboration community</sub>
|
||||
<sub>Building the design bridge for human-AI collaboration 🎨</sub>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,622 @@
|
|||
# WDS v6 Conversion Roadmap
|
||||
|
||||
**Document Purpose:** Complete record of all decisions, context, and progress for converting Whiteport Design Studio to BMad Method v6 format. This document allows continuation of work if the conversation is lost.
|
||||
|
||||
**Created:** December 2, 2025
|
||||
**Last Updated:** December 2, 2025
|
||||
**Status:** In Progress - Foundation Phase
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Project Overview](#1-project-overview)
|
||||
2. [Key Decisions Made](#2-key-decisions-made)
|
||||
3. [Repository Setup](#3-repository-setup)
|
||||
4. [Module Architecture](#4-module-architecture)
|
||||
5. [Output Folder Structure](#5-output-folder-structure)
|
||||
6. [Design Philosophy](#6-design-philosophy)
|
||||
7. [Development Order](#7-development-order)
|
||||
8. [Files Created So Far](#8-files-created-so-far)
|
||||
9. [Next Steps](#9-next-steps)
|
||||
10. [Reference Information](#10-reference-information)
|
||||
|
||||
---
|
||||
|
||||
## 1. Project Overview
|
||||
|
||||
### What is WDS?
|
||||
|
||||
**Whiteport Design Studio (WDS)** is a design-focused methodology module for the BMad Method ecosystem. It provides a complete UX/UI design workflow from product exploration through detailed component specifications.
|
||||
|
||||
### Origin
|
||||
|
||||
WDS evolves from **Whiteport Sketch-to-Code (WPS2C)**, a BMad v4 "expansion pack." The v6 conversion transforms it into a proper BMad module following v6 architecture.
|
||||
|
||||
### Core Purpose
|
||||
|
||||
WDS focuses **exclusively on design** - it creates the design artifacts that feed into development modules like BMad Method (BMM). WDS does NOT include development/backlog functionality.
|
||||
|
||||
### Integration Model
|
||||
|
||||
```
|
||||
WDS (Design) ────────► E-UI-Roadmap/ ────────► BMM (Development)
|
||||
│ │ │
|
||||
│ Creates: │ Bridge: │ Consumes:
|
||||
│ • Product Brief │ • Priority mapping │ • Architecture
|
||||
│ • Trigger Map │ • Technical notes │ • Stories
|
||||
│ • Scenarios │ • Handoff checklist │ • Implementation
|
||||
│ • PRD │ │
|
||||
│ • Design System │ │
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Key Decisions Made
|
||||
|
||||
### 2.1 Module Name
|
||||
|
||||
**Decision:** Whiteport Design Studio (WDS)
|
||||
|
||||
**Alternatives Considered:**
|
||||
- BMad Design Studio
|
||||
- BMad UX
|
||||
|
||||
**Reasoning:** Preserve brand identity, acknowledge contribution origin, maintain "Whiteport" recognition.
|
||||
|
||||
### 2.2 Repository Approach
|
||||
|
||||
**Decision:** Fork BMad-METHOD repository
|
||||
|
||||
**Alternatives Considered:**
|
||||
- Standalone repository
|
||||
- Rename existing WPS2C repo
|
||||
|
||||
**Reasoning:**
|
||||
- Maximum adoption through BMad ecosystem
|
||||
- Path to official module status via PR
|
||||
- Shared core infrastructure
|
||||
- Automatic ecosystem integration
|
||||
|
||||
**Fork Details:**
|
||||
- Origin: `https://github.com/whiteport-collective/whiteport-design-studio.git`
|
||||
- Upstream: `https://github.com/bmad-code-org/BMAD-METHOD.git`
|
||||
|
||||
### 2.3 Working Branch
|
||||
|
||||
**Decision:** Work directly on `main` branch
|
||||
|
||||
**Reasoning:**
|
||||
- Simpler workflow during development
|
||||
- WDS is substantial addition, not small tweak
|
||||
- Fork effectively becomes WDS home
|
||||
- Will switch to feature branches after official adoption
|
||||
|
||||
### 2.4 Workflow Approach
|
||||
|
||||
**Decision:** Phase-selectable (not rigid tracks)
|
||||
|
||||
**Description:** Users select individual phases based on project needs rather than choosing from predefined tracks.
|
||||
|
||||
**Examples:**
|
||||
- Landing page → Phases 1, 4, 5
|
||||
- Full product → All 6 phases
|
||||
- Design system only → Phases 4, 5
|
||||
|
||||
### 2.5 Development Handoff
|
||||
|
||||
**Decision:** No development artifacts in WDS
|
||||
|
||||
**Description:** WDS creates design artifacts only. Development (backlog, stories, architecture) handled by BMM. `E-UI-Roadmap/` serves as the integration bridge.
|
||||
|
||||
### 2.6 README Convention
|
||||
|
||||
**Decision:** One README.md per repository
|
||||
|
||||
**Convention:** Only `README.md` at module root; all other documentation uses `xxx-guide.md` naming pattern.
|
||||
|
||||
**Examples:**
|
||||
- ✅ `wds/README.md` (only one)
|
||||
- ✅ `wds/docs/method/wds-method-guide.md`
|
||||
- ✅ `wds/docs/quick-start-guide.md`
|
||||
- ❌ `wds/docs/README.md` (not allowed)
|
||||
- ❌ `wds/examples/README.md` (not allowed)
|
||||
|
||||
---
|
||||
|
||||
## 3. Repository Setup
|
||||
|
||||
### 3.1 Local Path
|
||||
|
||||
```
|
||||
C:\dev\WDS\whiteport-design-studio
|
||||
```
|
||||
|
||||
### 3.2 Git Remotes
|
||||
|
||||
```
|
||||
origin → https://github.com/whiteport-collective/whiteport-design-studio.git
|
||||
upstream → https://github.com/bmad-code-org/BMAD-METHOD.git
|
||||
```
|
||||
|
||||
### 3.3 Syncing with Upstream
|
||||
|
||||
```bash
|
||||
git fetch upstream
|
||||
git merge upstream/main
|
||||
git push origin main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Module Architecture
|
||||
|
||||
### 4.1 Module Location
|
||||
|
||||
```
|
||||
src/modules/wds/
|
||||
```
|
||||
|
||||
### 4.2 Folder Structure
|
||||
|
||||
```
|
||||
src/modules/wds/
|
||||
├── _module-installer/ # Installation configuration
|
||||
│ └── install-config.yaml # TO CREATE
|
||||
│
|
||||
├── agents/ # WDS agents (v6 YAML format) - Norse Pantheon
|
||||
│ ├── saga-analyst.agent.yaml # Saga-Analyst - TO CREATE
|
||||
│ ├── freyja-pm.agent.yaml # Freyja-PM - TO CREATE
|
||||
│ └── baldr-ux.agent.yaml # Baldr-UX - TO CREATE
|
||||
│
|
||||
├── workflows/ # Phase workflows
|
||||
│ ├── 0-init/ # Entry point - TO CREATE
|
||||
│ ├── 1-product-exploration/ # Phase 1 - TO CREATE
|
||||
│ ├── 2-user-research/ # Phase 2 - TO CREATE
|
||||
│ ├── 3-requirements/ # Phase 3 - TO CREATE
|
||||
│ ├── 4-conceptual-design/ # Phase 4 - TO CREATE
|
||||
│ ├── 5-component-design/ # Phase 5 - TO CREATE
|
||||
│ └── 6-dev-integration/ # Phase 6 - TO CREATE
|
||||
│
|
||||
├── data/ # Standards, frameworks
|
||||
│ ├── presentations/ # Agent intro presentations
|
||||
│ ├── positioning-framework.md # ICP framework - TO CREATE
|
||||
│ └── ...
|
||||
│
|
||||
├── docs/ # Documentation (xxx-guide.md)
|
||||
│ ├── method/ # Methodology guides
|
||||
│ │ ├── wds-method-guide.md # Main overview - TO CREATE
|
||||
│ │ └── phase-guides/ # Per-phase guides - TO CREATE
|
||||
│ └── images/ # Diagrams, visuals
|
||||
│
|
||||
├── examples/ # Example projects
|
||||
│ ├── dog-week-patterns/ # Full reference implementation
|
||||
│ ├── conversation-examples/ # Dialog flow examples
|
||||
│ └── starter-project/ # Try-it-yourself project
|
||||
│
|
||||
├── reference/ # Templates, checklists
|
||||
│ ├── templates/ # Document templates
|
||||
│ └── checklists/ # Phase completion checklists
|
||||
│
|
||||
├── teams/ # Team configurations
|
||||
│
|
||||
└── README.md # Module entry point ✅ CREATED
|
||||
```
|
||||
|
||||
### 4.3 Agents - The Norse Pantheon 🏔️
|
||||
|
||||
| Agent | File | Role | Norse Meaning | Status |
|
||||
|-------|------|------|---------------|--------|
|
||||
| **Saga-Analyst** | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom | TO CREATE |
|
||||
| **Freyja-PM** | `freyja-pm.agent.yaml` | Product Manager | Goddess of love, war & strategy | TO CREATE |
|
||||
| **Baldr-UX** | `baldr-ux.agent.yaml` | UX/UI Designer | God of light & beauty | TO CREATE |
|
||||
|
||||
**Why Norse Mythology + Role Suffix?**
|
||||
- Distinctive and memorable mythology names
|
||||
- Role suffix makes function immediately clear
|
||||
- Not too obvious (avoided Thor, Odin)
|
||||
- Creates unique WDS brand identity
|
||||
|
||||
---
|
||||
|
||||
## 5. Output Folder Structure
|
||||
|
||||
### 5.1 The A-B-C-D-E Convention
|
||||
|
||||
WDS creates an alphabetized folder structure in the user's project `docs/` folder:
|
||||
|
||||
```
|
||||
docs/
|
||||
├── A-Product-Brief/ # Phase 1 outputs
|
||||
├── B-Trigger-Map/ # Phase 2 outputs
|
||||
├── C-Scenarios/ # Phase 4 outputs
|
||||
├── D-PRD/ # Phase 3 outputs
|
||||
├── D-Design-System/ # Phase 5 outputs
|
||||
└── E-UI-Roadmap/ # Phase 6 outputs (dev bridge)
|
||||
```
|
||||
|
||||
### 5.2 Why Alphabetical Prefix?
|
||||
|
||||
| Reason | Benefit |
|
||||
|--------|---------|
|
||||
| Visual namespace | Clearly grouped in file explorers |
|
||||
| Brand signature | "A-B-C-D-E = WDS" recognition |
|
||||
| Non-conflicting | Won't clash with other docs folders |
|
||||
| Natural sort | Always grouped together |
|
||||
| Professional | Enterprise documentation feel |
|
||||
|
||||
### 5.3 Phase-to-Folder Mapping
|
||||
|
||||
| Phase | # | Name | Output Folder |
|
||||
|-------|---|------|---------------|
|
||||
| 1 | Product Exploration | Strategic foundation | `A-Product-Brief/` |
|
||||
| 2 | User Research | Personas, business goals | `B-Trigger-Map/` |
|
||||
| 3 | Requirements | Functional & technical | `D-PRD/` |
|
||||
| 4 | Conceptual Design | Scenarios, sketches | `C-Scenarios/` |
|
||||
| 5 | Component Design | Design system | `D-Design-System/` |
|
||||
| 6 | Dev Integration | Handoff bridge | `E-UI-Roadmap/` |
|
||||
|
||||
### 5.4 E-UI-Roadmap Contents
|
||||
|
||||
The integration bridge folder contains:
|
||||
|
||||
```
|
||||
E-UI-Roadmap/
|
||||
├── ui-roadmap-guide.md # Overview
|
||||
├── priority-sequence.md # What to build first
|
||||
├── scenario-mapping.md # Scenarios → Dev order
|
||||
├── component-inventory.md # All components needed
|
||||
├── technical-notes.md # Design constraints
|
||||
└── open-questions.md # For dev team to decide
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Design Philosophy
|
||||
|
||||
### 6.1 Core Principles
|
||||
|
||||
#### Principle 1: Soft Language
|
||||
|
||||
**Instead of:** "MUST", "FORBIDDEN", "NEVER", "SYSTEM FAILURE"
|
||||
|
||||
**Use:** Collaborative, identity-based guidance
|
||||
|
||||
**Reasoning:** User experience shows that harsh enforcement language makes agents MORE likely to ignore instructions, not less.
|
||||
|
||||
**Example - Before:**
|
||||
```markdown
|
||||
## MANDATORY RULES
|
||||
- 🛑 NEVER generate without input
|
||||
- 🚫 FORBIDDEN: Multiple questions
|
||||
- ❌ SYSTEM FAILURE if you skip
|
||||
```
|
||||
|
||||
**Example - After:**
|
||||
```markdown
|
||||
## How We Work Together
|
||||
|
||||
You're a thoughtful guide who helps designers create great products.
|
||||
|
||||
Your rhythm:
|
||||
- Ask one question, then listen
|
||||
- Reflect back what you heard
|
||||
- Build the document together
|
||||
```
|
||||
|
||||
#### Principle 2: Show, Don't Tell
|
||||
|
||||
**Instead of:** Explaining rules
|
||||
|
||||
**Use:** Concrete examples
|
||||
|
||||
**Reasoning:** People (and LLMs) learn better from examples than abstract rules.
|
||||
|
||||
**Implementation:**
|
||||
- Complete artifacts as examples (not rule descriptions)
|
||||
- Conversation flow examples
|
||||
- Dog Week as reference implementation
|
||||
|
||||
#### Principle 3: Example Projects for Adoption
|
||||
|
||||
**Purpose:**
|
||||
- Let people try before adopting
|
||||
- Show what success looks like
|
||||
- Lower barrier to entry
|
||||
- Build credibility
|
||||
|
||||
**Implementation:**
|
||||
- Dog Week patterns as full reference
|
||||
- Starter project for practice
|
||||
- Conversation examples showing dialog flow
|
||||
|
||||
### 6.2 Known Problems to Mitigate
|
||||
|
||||
| Problem | Observed Behavior | WDS Solution |
|
||||
|---------|-------------------|--------------|
|
||||
| Agents ignore instructions | Generate without thinking | Identity-based personas + examples |
|
||||
| Inconsistent output formats | Specs look different each time | Complete template examples |
|
||||
| Question dumping | 20 questions at once | Conversation examples showing one-at-a-time |
|
||||
|
||||
### 6.3 Instruction Style
|
||||
|
||||
**Identity-First:**
|
||||
```markdown
|
||||
## Who You Are
|
||||
|
||||
You're Mary, a thoughtful business analyst who genuinely cares
|
||||
about understanding the product before documenting it.
|
||||
|
||||
You prefer deep conversations over quick surveys. You ask one
|
||||
thing at a time because you're actually listening.
|
||||
```
|
||||
|
||||
**Experience-Focused:**
|
||||
```markdown
|
||||
## The Conversation Style
|
||||
|
||||
A good session feels like coffee with a wise mentor:
|
||||
- They ask something interesting
|
||||
- You share your thinking
|
||||
- They reflect it back
|
||||
- Together you discover something new
|
||||
```
|
||||
|
||||
**Gentle Reminders:**
|
||||
```markdown
|
||||
## Helpful Patterns
|
||||
|
||||
What works well:
|
||||
- One question at a time keeps things focused
|
||||
- Reflecting back shows you're listening
|
||||
|
||||
What to avoid:
|
||||
- Listing many questions (feels like a survey)
|
||||
- Generating without checking in
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Development Order
|
||||
|
||||
### 7.1 Chosen Approach: Methodology-First
|
||||
|
||||
**Order:**
|
||||
1. Define the methodology (phases, outputs, connections)
|
||||
2. Create workflows that implement the methodology
|
||||
3. Create agents that guide users through workflows
|
||||
4. Create examples that demonstrate the methodology
|
||||
|
||||
**Reasoning:**
|
||||
- The methodology IS the product
|
||||
- Agents serve the methodology, not vice versa
|
||||
- User is crystal clear on the workflow (already proven in WPS2C v4)
|
||||
- Not inventing new process, porting existing one
|
||||
|
||||
### 7.2 Detailed Order
|
||||
|
||||
#### Phase 1: Define the Methodology
|
||||
| Order | Component | File | Status |
|
||||
|-------|-----------|------|--------|
|
||||
| 1 | Method Overview | `docs/method/wds-method-guide.md` | ✅ CREATED |
|
||||
| 2 | Phase 1 Guide | `docs/method/phase-1-exploration-guide.md` | TO CREATE |
|
||||
| 3 | Phase 2 Guide | `docs/method/phase-2-research-guide.md` | TO CREATE |
|
||||
| 4 | Phase 3 Guide | `docs/method/phase-3-requirements-guide.md` | TO CREATE |
|
||||
| 5 | Phase 4 Guide | `docs/method/phase-4-conceptual-guide.md` | TO CREATE |
|
||||
| 6 | Phase 5 Guide | `docs/method/phase-5-components-guide.md` | TO CREATE |
|
||||
| 7 | Phase 6 Guide | `docs/method/phase-6-integration-guide.md` | TO CREATE |
|
||||
|
||||
#### Phase 2: Create Examples
|
||||
| Order | Component | Location | Status |
|
||||
|-------|-----------|----------|--------|
|
||||
| 8 | Dog Week Examples | `examples/dog-week-patterns/` | TO CREATE |
|
||||
| 9 | Conversation Examples | `examples/conversation-examples/` | TO CREATE |
|
||||
| 10 | Starter Project | `examples/starter-project/` | TO CREATE |
|
||||
|
||||
#### Phase 3: Create Workflows
|
||||
| Order | Component | Location | Status |
|
||||
|-------|-----------|----------|--------|
|
||||
| 11 | workflow-init | `workflows/0-init/` | TO CREATE |
|
||||
| 12 | Phase Workflows | `workflows/1-6/` | TO CREATE |
|
||||
|
||||
#### Phase 4: Create Agents (The Norse Pantheon)
|
||||
| Order | Component | File | Status |
|
||||
|-------|-----------|------|--------|
|
||||
| 13 | Saga-Analyst | `agents/saga-analyst.agent.yaml` | TO CREATE |
|
||||
| 14 | Freyja-PM | `agents/freyja-pm.agent.yaml` | TO CREATE |
|
||||
| 15 | Baldr-UX | `agents/baldr-ux.agent.yaml` | TO CREATE |
|
||||
|
||||
#### Phase 5: Finalize
|
||||
| Order | Component | File | Status |
|
||||
|-------|-----------|------|--------|
|
||||
| 16 | Install Config | `_module-installer/install-config.yaml` | TO CREATE |
|
||||
| 17 | Teams | `teams/` | TO CREATE |
|
||||
|
||||
---
|
||||
|
||||
## 8. Files Created So Far
|
||||
|
||||
### 8.1 Repository Root
|
||||
|
||||
| File | Purpose | Status |
|
||||
|------|---------|--------|
|
||||
| `README.md` | Fork overview, WDS contribution explanation | ✅ CREATED |
|
||||
| `WDS-V6-CONVERSION-ROADMAP.md` | This document | ✅ CREATED |
|
||||
|
||||
### 8.2 Module Structure
|
||||
|
||||
| Path | Purpose | Status |
|
||||
|------|---------|--------|
|
||||
| `src/modules/wds/` | Module root | ✅ CREATED |
|
||||
| `src/modules/wds/README.md` | Module entry point | ✅ CREATED |
|
||||
| `src/modules/wds/_module-installer/` | Install config folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/agents/` | Agents folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/workflows/` | Workflows folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/data/` | Data folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/data/presentations/` | Agent presentations | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/docs/` | Documentation folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/docs/method/` | Methodology guides | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/docs/images/` | Images folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/examples/` | Examples folder | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/examples/dog-week-patterns/` | Dog Week examples | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/reference/` | Reference materials | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/reference/templates/` | Templates | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/reference/checklists/` | Checklists | ✅ CREATED (empty) |
|
||||
| `src/modules/wds/teams/` | Team configs | ✅ CREATED (empty) |
|
||||
|
||||
---
|
||||
|
||||
## 9. Next Steps
|
||||
|
||||
### Immediate Next Action
|
||||
|
||||
**Create `wds-method-guide.md`** - The methodology overview document
|
||||
|
||||
This will include:
|
||||
- Overview of the 6 phases
|
||||
- What each phase produces
|
||||
- When to use each phase
|
||||
- How phases connect
|
||||
- The A-B-C-D-E folder structure
|
||||
- Links to examples (not rules)
|
||||
|
||||
### Short-term Roadmap
|
||||
|
||||
1. [x] Create `wds-method-guide.md`
|
||||
2. [ ] Create phase guide for each phase (6 files)
|
||||
3. [ ] Port Dog Week examples to `examples/dog-week-patterns/`
|
||||
4. [ ] Create conversation examples
|
||||
5. [ ] Create workflow-init workflow
|
||||
6. [ ] Create first phase workflow (Phase 1)
|
||||
7. [ ] Create first agent (Saga-Analyst)
|
||||
|
||||
### Commit Checkpoint
|
||||
|
||||
After creating methodology docs, commit with message:
|
||||
```
|
||||
feat(wds): Add WDS methodology documentation
|
||||
|
||||
- Add wds-method-guide.md with 6-phase overview
|
||||
- Add phase-specific guides
|
||||
- Establish show-don't-tell documentation approach
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Reference Information
|
||||
|
||||
### 10.1 Open Design Decisions
|
||||
|
||||
**To resolve during porting Phase 1 & 2:**
|
||||
|
||||
| Decision | Options | Resolve When |
|
||||
|----------|---------|--------------|
|
||||
| **ICP/Positioning placement** | Phase 1 as hypothesis → Phase 2 validates, OR fully in Phase 2 | Porting Phase 1-2 |
|
||||
| **Prioritization Reasoning** | Formal step with output, OR internal thinking process | Porting Phase 2 |
|
||||
| **Business Goals flow** | Initial in Brief → Refined in Trigger Map, OR single location | Porting Phase 1-2 |
|
||||
|
||||
**Context:** The Trigger Mapping (Effect Mapping) methodology is very strong. The prioritization reasoning step (column-by-column) is specifically valuable for generating product ideas but may not need formal documentation.
|
||||
|
||||
---
|
||||
|
||||
### 10.2 Product Positioning Framework
|
||||
|
||||
To be included in WDS workflows (stored in memory, ID: 11785915):
|
||||
|
||||
**Positioning Statement Format:**
|
||||
```
|
||||
For (target customer)
|
||||
Who (statement of need or opportunity)
|
||||
And want (statement of experience expectations)
|
||||
The (product/service name)
|
||||
Is (product category)
|
||||
That (statement of key benefits)
|
||||
Unlike (primary competitive alternative)
|
||||
Our product (statement of primary differentiators)
|
||||
```
|
||||
|
||||
**ICP Framework (8 Components):**
|
||||
1. My ICP (Who I Serve Best)
|
||||
2. My Positioning (How I'm Different)
|
||||
3. The Outcomes I Drive
|
||||
4. My Offerings (What I Sell)
|
||||
5. Social Proof (Who Can Vouch)
|
||||
6. My Frameworks/Models/Tools (How I Work)
|
||||
7. The Pains My ICP Articulates (Triggers/Frustrations)
|
||||
8. Pricing Anchoring (Cost of Inaction, Bad Hire, % Revenue, Speed)
|
||||
|
||||
**CTA Elements:**
|
||||
- Website link
|
||||
- Discovery call link
|
||||
- Newsletter subscription
|
||||
- Social follows
|
||||
- Events attending
|
||||
|
||||
### 10.2 BMad v6 Resources
|
||||
|
||||
| Resource | Location |
|
||||
|----------|----------|
|
||||
| BMM Module | `src/modules/bmm/` |
|
||||
| BMB Builder | `src/modules/bmb/` |
|
||||
| CIS Module | `src/modules/cis/` |
|
||||
| Agent Schema | `src/modules/bmb/docs/agents/` |
|
||||
| Workflow Docs | `src/modules/bmb/docs/workflows/` |
|
||||
|
||||
### 10.3 Original WPS2C
|
||||
|
||||
| Resource | Location |
|
||||
|----------|----------|
|
||||
| WPS2C Repo | `C:\dev\whiteport-sketch-to-code-bmad-expansion` |
|
||||
| Method Overview | `Method/00-Whiteport-Method.md` |
|
||||
| Agents (v4 format) | `bmad-whiteport-sketch/agents/` |
|
||||
|
||||
### 10.4 Dog Week Project
|
||||
|
||||
| Resource | Location |
|
||||
|----------|----------|
|
||||
| Project Root | `C:\dev\dogweek\dogweek-dev` |
|
||||
| Product Brief | `docs/A-Product-Brief/` |
|
||||
| Trigger Map | `docs/B-Trigger-Map/` |
|
||||
| Scenarios | `docs/C-Scenarios/` |
|
||||
| PRD | `docs/D-PRD/` |
|
||||
|
||||
---
|
||||
|
||||
## Conversation Summary
|
||||
|
||||
### Key Discussion Points
|
||||
|
||||
1. **Fork vs Standalone:** Decided on fork for maximum adoption
|
||||
2. **Module Name:** Whiteport Design Studio (WDS) to preserve brand
|
||||
3. **Branch Strategy:** Work on main, switch to feature branches after adoption
|
||||
4. **Folder Structure:** A-B-C-D-E alphabetical prefix for visual namespace
|
||||
5. **Phase Approach:** Phase-selectable (not rigid tracks)
|
||||
6. **Scope:** Design only, no development/backlog (handled by BMM)
|
||||
7. **E-UI-Roadmap:** Integration bridge to development modules
|
||||
8. **Development Order:** Methodology-first approach
|
||||
9. **Language Style:** Soft, collaborative (not MUST/FORBIDDEN)
|
||||
10. **Teaching Style:** Show, don't tell (examples over rules)
|
||||
|
||||
### User's Stated Experience
|
||||
|
||||
- WPS2C v4 works well, proven methodology
|
||||
- Strong language (MUST/FORBIDDEN) makes agents ignore instructions
|
||||
- Softer language gets better compliance
|
||||
- Examples work better than rules
|
||||
- Agents tend to question-dump (20 questions at once)
|
||||
- Output format inconsistency is a problem
|
||||
|
||||
### Design Philosophy Established
|
||||
|
||||
1. Soft language by design
|
||||
2. Show, don't tell (examples over explanations)
|
||||
3. Example projects for adoption/training
|
||||
4. Identity-based agent personas
|
||||
5. Conversation examples showing dialog flow
|
||||
|
||||
---
|
||||
|
||||
**End of Roadmap Document**
|
||||
|
||||
*To continue: Open this document, review "Next Steps" section, and proceed with creating `wds-method-guide.md`*
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
# 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
|
||||
│ ├── freyja-pm.agent.yaml # Freyja-PM - Product Manager
|
||||
│ └── baldr-ux.agent.yaml # Baldr-UX - 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/`
|
||||
5. **Component Design** → `D-Design-System/`
|
||||
6. **Dev Integration** → `E-UI-Roadmap/`
|
||||
|
||||
## Agents - The Norse Pantheon 🏔️
|
||||
|
||||
| Agent | File | Role | Norse Meaning |
|
||||
|-------|------|------|---------------|
|
||||
| **Saga-Analyst** | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom |
|
||||
| **Freyja-PM** | `freyja-pm.agent.yaml` | Product Manager | Goddess of love, war & strategy |
|
||||
| **Baldr-UX** | `baldr-ux.agent.yaml` | UX/UI Designer | God of light & beauty |
|
||||
|
||||
## 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>
|
||||
|
||||
|
|
@ -0,0 +1,356 @@
|
|||
# Whiteport Design Studio Method
|
||||
|
||||
**A design-first methodology for creating software that people love**
|
||||
|
||||
---
|
||||
|
||||
## The WDS Philosophy
|
||||
|
||||
**Providing a thinking partner to every designer on the planet** - enabling designers everywhere to give more of what is valuable to the world. With deep understanding of users, technology, and what drives people, we provide functionality, beauty, simplicity, and make software endlessly successful by giving people both what they want and what they need.
|
||||
|
||||
---
|
||||
|
||||
## What is WDS?
|
||||
|
||||
Whiteport Design Studio is a **design-focused methodology** that supports designers in their design process and help create detailed specifications through collaborative workshops, visual thinking, and systematic documentation perfect for development by AI and humans alike.
|
||||
|
||||
WDS creates the **design artifacts** that development teams need to build exceptional products - from initial vision through detailed component specifications.
|
||||
|
||||
### The Core Idea
|
||||
|
||||
```
|
||||
Vision → Clarity → UX Design → Design System → Handoff
|
||||
│ │ │ │ │
|
||||
│ │ │ │ └── Dev teams get
|
||||
│ │ │ │ everything
|
||||
│ │ │ │
|
||||
│ │ │ └── Components,
|
||||
│ │ │ tokens, patterns
|
||||
│ │ │
|
||||
│ │ └── Conceptualizing, Sketching,
|
||||
│ │ create specifications
|
||||
│ │
|
||||
│ └── User research,
|
||||
│ trigger mapping
|
||||
│
|
||||
└── Strategic foundation,
|
||||
positioning, ICP
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## The Six Phases
|
||||
|
||||
WDS follows six phases, each producing artifacts in your project's `docs/` folder:
|
||||
|
||||
### Phase 1: Product Exploration
|
||||
**Output:** `A-Product-Brief/`
|
||||
**Agent:** Saga-Analyst
|
||||
|
||||
Establish your strategic foundation through conversational discovery. Instead of filling out questionnaires, you have a conversation that builds understanding organically.
|
||||
|
||||
**What you create:**
|
||||
- Product vision and problem statement
|
||||
- Market positioning and differentiation
|
||||
- Success criteria and metrics
|
||||
- Strategic context for everything that follows
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: User Research
|
||||
**Output:** `B-Trigger-Map/`
|
||||
**Agent:** Saga-Analyst
|
||||
|
||||
Connect business goals to user psychology through Effect Mapping. Discover not just WHO your users are, but WHY they act and WHAT triggers their decisions.
|
||||
|
||||
**What you create:**
|
||||
- Business goals with clear priorities
|
||||
- Target groups connected to business outcomes
|
||||
- Detailed personas with psychological depth
|
||||
- Usage goals (what users want vs what they fear)
|
||||
- Visual trigger map showing the strategic connections
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Requirements
|
||||
**Output:** `D-PRD/`
|
||||
**Agent:** Freyja-PM
|
||||
|
||||
Define the technical foundation and functional requirements. Bridge the gap between strategic vision and implementation details.
|
||||
|
||||
**What you create:**
|
||||
- Platform architecture decisions
|
||||
- Infrastructure specifications
|
||||
- Integration requirements
|
||||
- Security and performance needs
|
||||
- Functional feature specifications
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Conceptual Design
|
||||
**Output:** `C-Scenarios/`
|
||||
**Agent:** Baldr-UX
|
||||
|
||||
Transform ideas into detailed visual specifications. Your agent helps you think out the design, assists in sketching, then specifies and pressure-tests every detail.
|
||||
|
||||
**The key insight:** Designs that can be logically explained without gaps are easy to develop. The specification process reveals holes in your thinking before they become expensive development problems.
|
||||
|
||||
**What you create:**
|
||||
- Scenario folder structure (numbered hierarchy)
|
||||
- Page specifications with full detail
|
||||
- Component definitions with Object IDs
|
||||
- Interaction behaviors and states
|
||||
- Multilingual content
|
||||
- HTML previews for validation
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: Component Design
|
||||
**Output:** `D-Design-System/`
|
||||
**Agent:** Baldr-UX
|
||||
|
||||
Build your component library following atomic design principles. Create reusable patterns that serve user psychology.
|
||||
|
||||
**What you create:**
|
||||
- Design tokens (colors, typography, spacing)
|
||||
- Atomic components (buttons, inputs, labels)
|
||||
- Molecular components (form groups, cards)
|
||||
- Organism components (headers, complex sections)
|
||||
- Usage guidelines and variants
|
||||
|
||||
---
|
||||
|
||||
### Phase 6: Dev Integration
|
||||
**Output:** `E-UI-Roadmap/`
|
||||
**Agent:** Freyja-PM
|
||||
|
||||
Prepare everything development teams need. Create the bridge between design and implementation.
|
||||
|
||||
**What you create:**
|
||||
- Priority sequence (what to build first)
|
||||
- Scenario-to-development mapping
|
||||
- Component inventory
|
||||
- Technical notes and constraints
|
||||
- Object ID inventory for testing
|
||||
- Handoff checklist
|
||||
|
||||
---
|
||||
|
||||
## Folder Structure
|
||||
|
||||
WDS creates an organized folder structure in your project's `docs/` folder. During setup, you make two choices:
|
||||
|
||||
### Your 4 Options
|
||||
|
||||
| Choice | Option A | Option B |
|
||||
|--------|----------|----------|
|
||||
| **Prefix** | Letters (A, B, C...) | Numbers (01, 02, 03...) |
|
||||
| **Case** | Title-Case | lowercase |
|
||||
|
||||
### Examples
|
||||
|
||||
**Letters + Title-Case** (default):
|
||||
```
|
||||
docs/
|
||||
├── A-Product-Brief/
|
||||
├── B-Trigger-Map/
|
||||
├── C-Scenarios/
|
||||
├── D-PRD/
|
||||
├── D-Design-System/
|
||||
└── E-UI-Roadmap/
|
||||
```
|
||||
|
||||
**Letters + lowercase**:
|
||||
```
|
||||
docs/
|
||||
├── A-product-brief/
|
||||
├── B-trigger-map/
|
||||
├── C-scenarios/
|
||||
├── D-prd/
|
||||
├── D-design-system/
|
||||
└── E-ui-roadmap/
|
||||
```
|
||||
|
||||
**Numbers + Title-Case**:
|
||||
```
|
||||
docs/
|
||||
├── 01-Product-Brief/
|
||||
├── 02-Trigger-Map/
|
||||
├── 03-Scenarios/
|
||||
├── 04-PRD/
|
||||
├── 05-Design-System/
|
||||
└── 06-UI-Roadmap/
|
||||
```
|
||||
|
||||
**Numbers + lowercase**:
|
||||
```
|
||||
docs/
|
||||
├── 01-product-brief/
|
||||
├── 02-trigger-map/
|
||||
├── 03-scenarios/
|
||||
├── 04-prd/
|
||||
├── 05-design-system/
|
||||
└── 06-ui-roadmap/
|
||||
```
|
||||
|
||||
**Default (Letters + Title-Case) is recommended because:**
|
||||
- Title-Case is easier for non-technical people to read
|
||||
- Letters create distinctive WDS branding
|
||||
- Distinguishes WDS folders from other docs
|
||||
|
||||
---
|
||||
|
||||
## Phase-Selectable Workflow
|
||||
|
||||
Not every project needs all six phases. Select what you need based on your situation:
|
||||
|
||||
| Project Type | Recommended Phases |
|
||||
|--------------|-------------------|
|
||||
| **Landing page** | 1, 4, 5 |
|
||||
| **Full product (greenfield)** | All six |
|
||||
| **Feature enhancement** | 2, 4, 5, 6 |
|
||||
| **Design system only** | 4, 5 |
|
||||
| **Strategic planning** | 1, 2 |
|
||||
|
||||
Your agents will help you identify which phases fit your project.
|
||||
|
||||
---
|
||||
|
||||
## Your Agents
|
||||
|
||||
Three specialized agents guide you through WDS:
|
||||
|
||||
### Saga-Analyst 📚
|
||||
*"The one who tells your business story"*
|
||||
|
||||
Saga guides you through discovery and research. She's curious, patient, and helps you uncover insights you might not have seen yourself.
|
||||
|
||||
**Works with you on:**
|
||||
- Phase 1: Product Exploration
|
||||
- Phase 2: User Research (Trigger Mapping)
|
||||
|
||||
### Freyja-PM ⚔️
|
||||
*"The strategic leader who sees what must be done"*
|
||||
|
||||
Freyja helps you define requirements and prepare for development. She balances passion with strategy, knowing when to be fierce and when to be patient.
|
||||
|
||||
**Works with you on:**
|
||||
- Phase 3: Requirements
|
||||
- Phase 6: Dev Integration
|
||||
|
||||
### Baldr-UX ✨
|
||||
*"The one who brings light and beauty"*
|
||||
|
||||
Baldr transforms your ideas into beautiful, detailed specifications. He cares deeply about craft and ensures every detail serves the user experience.
|
||||
|
||||
**Works with you on:**
|
||||
- Phase 4: Conceptual Design
|
||||
- Phase 5: Component Design
|
||||
|
||||
---
|
||||
|
||||
## How Sessions Work
|
||||
|
||||
WDS sessions are **conversations, not interrogations**.
|
||||
|
||||
### The Rhythm
|
||||
|
||||
A good WDS session feels like coffee with a wise mentor:
|
||||
- They ask something interesting
|
||||
- You share your thinking
|
||||
- They reflect it back, maybe adding a new angle
|
||||
- Together you discover something neither saw alone
|
||||
|
||||
It never feels like filling out a form.
|
||||
|
||||
### What to Expect
|
||||
|
||||
**Your agent will:**
|
||||
- Ask one question at a time, then listen
|
||||
- Reflect back what they heard before moving on
|
||||
- Build documents together with you, piece by piece
|
||||
- Check in to make sure they understood correctly
|
||||
|
||||
**You'll leave with:**
|
||||
- Clear documentation you helped create
|
||||
- Deeper understanding of your own product
|
||||
- Ready-to-use artifacts for the next phase
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
1. BMad Method installed with WDS module
|
||||
2. Project workspace ready
|
||||
3. Stakeholders available for workshop phases
|
||||
|
||||
### Quick Start
|
||||
|
||||
```
|
||||
# Install BMad with WDS
|
||||
npx bmad-method@alpha install
|
||||
|
||||
# Activate any WDS agent
|
||||
# They'll guide you from there
|
||||
|
||||
# Or run workflow-init for phase selection
|
||||
*workflow-init
|
||||
```
|
||||
|
||||
### First Steps
|
||||
|
||||
1. **Start with Phase 1** if you're building something new
|
||||
2. **Start with Phase 2** if you have existing vision but need user clarity
|
||||
3. **Start with Phase 4** if you have sketches ready to specify
|
||||
4. **Ask your agent** if you're not sure where to begin
|
||||
|
||||
---
|
||||
|
||||
## The WDS Difference
|
||||
|
||||
### Traditional Approach
|
||||
- 47-question requirements spreadsheet
|
||||
- Generic persona templates
|
||||
- Designers work alone, then throw specs "over the wall"
|
||||
- Developers interpret and guess
|
||||
- Everyone argues about what was meant
|
||||
|
||||
### WDS Approach
|
||||
- Conversations that build understanding
|
||||
- Personas with psychological depth connected to business goals
|
||||
- Collaborative workshops building shared understanding
|
||||
- Specifications so clear they eliminate guesswork
|
||||
- Everyone aligned because they built it together
|
||||
|
||||
---
|
||||
|
||||
## Integration with Development
|
||||
|
||||
WDS focuses on **design** - creating the artifacts that guide development. The actual development process is handled by BMad Method (BMM) or your preferred development workflow.
|
||||
|
||||
```
|
||||
WDS Design Phases Handoff Development
|
||||
───────────────── ────── ───────────
|
||||
A-Product-Brief ────┐
|
||||
B-Trigger-Map ────┼────► E-UI-Roadmap ────────► BMM or your
|
||||
D-PRD ────┤ (bridge) development
|
||||
C-Scenarios ────┤ process
|
||||
D-Design-System ────┘
|
||||
```
|
||||
|
||||
The `E-UI-Roadmap/` folder contains everything development teams need to begin implementation without additional discovery work.
|
||||
|
||||
---
|
||||
|
||||
## Learn More
|
||||
|
||||
- **Phase guides:** Detailed documentation for each phase
|
||||
- **Examples:** Dog Week patterns showing real artifacts
|
||||
- **Conversation examples:** See how agent sessions flow
|
||||
|
||||
---
|
||||
|
||||
*Whiteport Design Studio - Part of the BMad ecosystem*
|
||||
|
||||
Loading…
Reference in New Issue