Whiteport Design Studio (WDS)
April 20, 2026 · View on GitHub
Strategic design methodology for creating products users love, powered by AI agents.
This is the BMAD expansion module version of WDS. For the standalone installer, see whiteport-design-studio.
What is WDS?
WDS is a structured design methodology that uses AI agents to guide you through product design, from initial strategy to developer-ready specifications.
- Strategic foundation - Connect every design decision to business goals and user psychology
- Complete specifications - Generate developer-ready page specs with all details defined
- AI-powered workflow - Two specialized agents guide you through each phase
- IDE-native - Works inside your AI coding tool (Claude Code, Cursor, Windsurf, and 16 more)
Agents
WDS uses two specialized AI agents (the Norse Pantheon):
| Agent | Role | What they do |
|---|---|---|
| Saga (Analyst) | Business & Product Analyst | Product Brief (Phase 1), Trigger Mapping (Phase 2). Start here. |
| Freya (Designer) | UX/UI Designer & Developer | UX Scenarios (Phase 3), UX Design (Phase 4), Agentic Development (Phase 5), Asset Generation (Phase 6), Design System (Phase 7), Product Evolution (Phase 8) |
Activating an agent
Tell your AI IDE:
Read and activate _bmad/wds/agents/saga-analyst.md
Saga will greet you by name and guide you through creating your Product Brief.
Design Phases
| Phase | Focus | Agent | Output folder |
|---|---|---|---|
| 0. Alignment & Signoff | Stakeholder alignment before starting | Saga | — |
| 1. Product Brief | Vision, positioning, success criteria | Saga | A-Product-Brief/ |
| 2. Trigger Mapping | User psychology, business goals | Saga | B-Trigger-Map/ |
| 3. UX Scenarios | Scenario outlines via 8-question dialog | Freya | C-UX-Scenarios/ |
| 4. UX Design | Page specifications, interactions | Freya | D-UX-Design/ |
| 5. Agentic Development | AI-assisted development & testing | Freya | G-Product-Development/ |
| 6. Asset Generation | Visual and text assets from specs | Freya | — |
| 7. Design System | Component library, design tokens | Freya | D-Design-System/ |
| 8. Product Evolution | Brownfield improvements | Freya | — |
Output folders are created inside your configured design artifacts directory (default: design-artifacts/).
Supported Design Tools
WDS offers agentic design capabilities with several visual design and prototyping services:
| Tool | What it does | MCP |
|---|---|---|
| Figma | Professional UI design, design system management | Figma MCP |
| Pencil (Penpot) | Open-source design tool, AI-assisted layout | Pencil MCP |
| Stitch | AI screen generation from text descriptions | Stitch MCP |
| Excalidraw | Wireframing and sketch analysis | — |
| html.to.design | Import HTML prototypes into Figma | Figma plugin |
| NanoBanana | AI image generation for brand exploration | — |
The design loop works with any combination: wireframe in Excalidraw, generate screens with Stitch or Pencil, refine in Figma, pull back via MCP.
Module Structure
wds/
├── src/
│ ├── agents/ # Agent YAML definitions
│ ├── workflows/ # Phase workflows
│ ├── data/ # Standards, frameworks, agent guides
│ ├── gems/ # Reusable prompt components
│ ├── skills/ # Agent activation skills
│ ├── templates/ # Document templates
│ ├── module.yaml # Module definition
│ └── module-help.csv # Workflow registry
├── docs/
│ ├── getting-started/ # Quick onboarding guides
│ ├── learn/ # 12-module training course
│ ├── method/ # Phase deep-dives
│ ├── models/ # Strategic frameworks
│ └── tools/ # Integration guides
└── test/ # Schema validation tests
Installation via BMAD
This module is installed as part of the BMad Method ecosystem. The BMAD installer handles placement at _bmad/wds/.
For standalone installation (without BMAD), use the npm package instead:
npx whiteport-design-studio install
Contributing
See CONTRIBUTING.md for guidelines.
Community
- Discord — Get help, share ideas, collaborate
- YouTube — Tutorials, master class, and more
- X / Twitter
- Website
Support BMad
BMad is free for everyone and always will be. Star this repo, buy me a coffee, or email contact@bmadcode.com for corporate sponsorship.
License
MIT - see LICENSE for details.
Built by Whiteport Collective | Part of the BMad ecosystem