Whiteport Design Studio (WDS)

Strategic design methodology for creating products users love, powered by AI agents.

Installation

npx whiteport-design-studio install

The installer will guide you through setup: project type, experience level, and IDE configuration. Everything gets installed into a _wds/ folder in your project.

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 - Four specialized agents guide you through each phase
• IDE-native - Works inside your AI coding tool (Claude Code, Cursor, Windsurf, and 14 more)

Agents

WDS uses four specialized AI agents (the Norse Pantheon):

| Agent | Role | What they do | |-------|------|-------------| | Mimir (Orchestrator) | Coach & Guide | Greets you, assesses your level, guides you through the entire process. Start here. | | Saga (Analyst) | Business & Product Analyst | Product Brief (Phase 1) and Trigger Mapping (Phase 2) | | Idunn (Product Manager) | Platform Requirements | Platform architecture (Phase 3) and design deliveries (Phase 6) | | Freya (Designer) | UX/UI Designer | UX Design (Phase 4), Design System (Phase 5), and testing (Phases 7-8) |

Activating an agent

Tell your AI IDE:

Read and activate the agent in _wds/agents/mimir-orchestrator.md

Mimir will greet you, assess your situation, and guide you to the right specialist.

Design Phases

| Phase | Focus | Output folder | |-------|-------|--------------| | 1. Product Exploration | Vision, positioning, success criteria | docs/A-Product-Brief/ | | 2. Trigger Mapping | User psychology, business goals | docs/B-Trigger-Map/ | | 3. Platform Architecture | Technical requirements (optional) | docs/C-Platform-Requirements/ | | 4. UX Design | Scenarios, interactions, content structure | docs/C-Scenarios/ | | 5. Visual Design | Brand identity, design system, components | docs/D-Design-System/ | | 6. Design Delivery | Developer handoff, PRD finalization | docs/E-PRD/Design-Deliveries/ |

Agent dialogs and conversation logs are saved to docs/F-Agent-Dialogs/.

Project Structure

After installation, your project will have:

your-project/
├── _wds/                    # WDS system files
│   ├── agents/              # Compiled agent files (.md)
│   ├── workflows/           # Phase workflows
│   ├── data/                # Standards, frameworks, agent guides
│   ├── gems/                # Reusable prompt components
│   ├── templates/           # Document templates
│   ├── config.yaml          # Your project configuration
│   └── module.yaml          # Module definition
├── _wds-learn/              # Learning material (optional, safe to delete)
│   ├── getting-started/
│   ├── learn-wds/
│   ├── method/
│   ├── models/
│   └── tools/
├── docs/                    # Design output (created by agents)
│   ├── A-Product-Brief/
│   ├── B-Trigger-Map/
│   ├── C-Platform-Requirements/
│   ├── C-Scenarios/
│   ├── D-Design-System/
│   ├── E-PRD/Design-Deliveries/
│   └── F-Agent-Dialogs/
└── .claude/instructions.md  # IDE configuration (varies by IDE)

Getting Started

1. Install WDS in your project directory:

   npx whiteport-design-studio install

2. Open your project in your AI IDE (Claude Code, Cursor, Windsurf, etc.)

3. Activate Mimir - tell the AI:

   Read and activate the agent in _wds/agents/mimir-orchestrator.md

4. Follow Mimir's guidance - Mimir will greet you, assess your experience level, and walk you through project setup. When you're ready for specific work, Mimir connects you to the right specialist agent.

Supported IDEs

WDS works with any AI-powered IDE or coding tool:

Claude Code, Cursor, Windsurf, Cline, GitHub Copilot, Roo Code, Codex, Gemini, Qwen, Trae, Kiro CLI, Rovo Dev, Crush, Auggie, Antigravity, iFlow, OpenCode

The installer configures your selected IDE(s) automatically.

Tools Integration

WDS integrates with design and prototyping tools:

• Figma MCP - Bidirectional sync between AI-generated designs and Figma
• html.to.design - Import HTML prototypes into Figma
• NanoBanana/Eira - AI-powered image generation for brand exploration
• Excalidraw - Sketch analysis and wireframing

Key Concepts

UX vs Visual Design

Phase 4 (UX Design) defines how it works - functionality, interactions, content structure. Phase 5 (Visual Design) defines how it looks - brand expression, design tokens, component library.

Visual design can start at any time - brand identity is independent of product strategy.

Adaptive Teaching

Mimir adapts to your experience level:

• Beginner - Detailed guidance, one step at a time
• Intermediate - Balanced approach, builds on existing knowledge
• Expert - Direct and efficient, respects your time

Learning Material

The installer can optionally include learning and reference material in _wds-learn/. This includes:

• Getting Started - Quick onboarding guides
• Course modules - Complete 12-module training course (Module 00-13)
• Method guides - Deep-dive into each design phase
• Models - Strategic frameworks (Golden Circle, Customer Awareness, etc.)
• Tool guides - Integration guides for Figma, Git, and more

You can safely delete _wds-learn/ at any time without affecting the agents or workflows.

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT - see LICENSE for details.

Built by Whiteport Collective