whiteport-design-studio 0.1.1 → 0.2.1

package/LICENSE

@@ -1,27 +1,27 @@
-MIT License
-
-Copyright (c) 2025 BMad Code, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-TRADEMARK NOTICE:
-
-BMad™ , BMAD-CORE™ and BMAD-METHOD™ are trademarks of BMad Code, LLC.
-WDS and the Whiteport Design System are trademarks of Whiteport Collective.
-The use of any of these trademarks in this software does not grant any rights to use the trademarks for any other purpose.
+MIT License
+
+Copyright (c) 2025 BMad Code, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+TRADEMARK NOTICE:
+
+BMad™ , BMAD-CORE™ and BMAD-METHOD™ are trademarks of BMad Code, LLC.
+WDS and the Whiteport Design System are trademarks of Whiteport Collective.
+The use of any of these trademarks in this software does not grant any rights to use the trademarks for any other purpose.

package/README.md

@@ -1,183 +1,183 @@
-# Whiteport Design Studio (WDS)
-
-**Strategic design methodology for creating products users love, powered by AI agents.**
-
-[![npm version](https://img.shields.io/npm/v/whiteport-design-studio.svg)](https://www.npmjs.com/package/whiteport-design-studio)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-
----
-
-## Installation
-
-```bash
-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:
-   ```bash
-   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](CONTRIBUTING.md) for guidelines.
-
-## License
-
-MIT - see [LICENSE](LICENSE) for details.
-
----
-
-Built by [Whiteport Collective](https://github.com/whiteport-collective)
+# Whiteport Design Studio (WDS)
+
+**Strategic design methodology for creating products users love, powered by AI agents.**
+
+[![npm version](https://img.shields.io/npm/v/whiteport-design-studio.svg)](https://www.npmjs.com/package/whiteport-design-studio)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+---
+
+## Installation
+
+```bash
+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:
+   ```bash
+   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](CONTRIBUTING.md) for guidelines.
+
+## License
+
+MIT - see [LICENSE](LICENSE) for details.
+
+---
+
+Built by [Whiteport Collective](https://github.com/whiteport-collective)

package/docs/getting-started/about-wds.md

@@ -1,86 +1,86 @@
-# About WDS
-
-**What is Whiteport Design Studio?**
-
----
-
-## Overview
-
-**Whiteport Design Studio (WDS)** is a design methodology that makes designers indispensable in the AI era.
-
-**The paradigm shift:**
-
-- The design becomes the specification
-- The specification becomes the product
-- The code is just the printout
-
----
-
-## Who Created It?
-
-**Mårten Angner** - UX designer and founder of Whiteport, a design and development agency in Sweden.
-
-After years of working with AI tools, Mårten observed that traditional design handoffs were breaking down. Designers would create mockups, hand them off to developers, and watch their intent get lost in translation.
-
-WDS solves this by preserving design thinking through AI-ready specifications.
-
----
-
-## Why It Exists
-
-**The problem:** AI can generate code perfectly, but only if you can clearly define what you want. Unclear specifications lead to AI hallucinations and failed projects.
-
-**The solution:** WDS teaches designers to create conceptual specifications that capture intent, not just appearance.
-
-**The result:** Designers become 5x more productive while maintaining creative control.
-
----
-
-## How It Works
-
-WDS provides:
-
-- A systematic workflow from product brief to AI-ready specifications
-- Conceptual specifications (WHAT + WHY + WHAT NOT TO DO)
-- AI agents specifically tailored for design work
-- Integration with BMad Method for seamless design-to-development handoff
-
----
-
-## Free and Open-Source
-
-WDS is completely free and open-source:
-
-- No cost barriers or subscriptions
-- AI agents included
-- Community-driven development
-- Plugin module for BMad Method
-
-**Mission:** Give designers everywhere the tools to thrive in the AI era.
-
----
-
-## Real-World Proof
-
-**Dog Week project:**
-
-- Traditional approach: 26 weeks, mediocre result
-- WDS approach: 5 weeks, exceptional result
-- **5x speed increase with better quality**
-
----
-
-## What's Next?
-
-Now that you understand what WDS is, let's get it installed:
-
-**[Continue to Installation →](installation.md)**
-
-Or return to the overview:
-
-**[← Back to Getting Started Overview](getting-started-overview.md)**
-
----
-
-**Created by Mårten Angner and the Whiteport team**  
-**Free and open-source for designers everywhere**
+# About WDS
+
+**What is Whiteport Design Studio?**
+
+---
+
+## Overview
+
+**Whiteport Design Studio (WDS)** is a design methodology that makes designers indispensable in the AI era.
+
+**The paradigm shift:**
+
+- The design becomes the specification
+- The specification becomes the product
+- The code is just the printout
+
+---
+
+## Who Created It?
+
+**Mårten Angner** - UX designer and founder of Whiteport, a design and development agency in Sweden.
+
+After years of working with AI tools, Mårten observed that traditional design handoffs were breaking down. Designers would create mockups, hand them off to developers, and watch their intent get lost in translation.
+
+WDS solves this by preserving design thinking through AI-ready specifications.
+
+---
+
+## Why It Exists
+
+**The problem:** AI can generate code perfectly, but only if you can clearly define what you want. Unclear specifications lead to AI hallucinations and failed projects.
+
+**The solution:** WDS teaches designers to create conceptual specifications that capture intent, not just appearance.
+
+**The result:** Designers become 5x more productive while maintaining creative control.
+
+---
+
+## How It Works
+
+WDS provides:
+
+- A systematic workflow from product brief to AI-ready specifications
+- Conceptual specifications (WHAT + WHY + WHAT NOT TO DO)
+- AI agents specifically tailored for design work
+- Integration with BMad Method for seamless design-to-development handoff
+
+---
+
+## Free and Open-Source
+
+WDS is completely free and open-source:
+
+- No cost barriers or subscriptions
+- AI agents included
+- Community-driven development
+- Plugin module for BMad Method
+
+**Mission:** Give designers everywhere the tools to thrive in the AI era.
+
+---
+
+## Real-World Proof
+
+**Dog Week project:**
+
+- Traditional approach: 26 weeks, mediocre result
+- WDS approach: 5 weeks, exceptional result
+- **5x speed increase with better quality**
+
+---
+
+## What's Next?
+
+Now that you understand what WDS is, let's get it installed:
+
+**[Continue to Installation →](installation.md)**
+
+Or return to the overview:
+
+**[← Back to Getting Started Overview](getting-started-overview.md)**
+
+---
+
+**Created by Mårten Angner and the Whiteport team**  
+**Free and open-source for designers everywhere**

package/docs/getting-started/agent-activation/activation/step-01-load-agent-definition.md

@@ -1,28 +1,28 @@
-# Step 1: Load Agent Definition
-
-**Purpose**: Embody the agent persona before proceeding
-
----
-
-## Instruction
-
-Read and fully embody the persona from your agent definition file.
-
-**Your agent definition file**:
-- Saga: `src/modules/wds/agents/saga-analyst.agent.yaml`
-- Freya: `src/modules/wds/agents/freya-ux.agent.yaml`
-- Idunn: `src/modules/wds/agents/idunn-pm.agent.yaml`
-- Mimir: `src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md` (orchestrator file)
-
-**What to do**:
-1. Read the entire agent definition file
-2. Understand your identity, role, and communication style
-3. Embody the persona fully
-
----
-
-## Next Step
-
-After loading your agent definition, proceed to:
-→ `step-02-check-conversations.md`
-
+# Step 1: Load Agent Definition
+
+**Purpose**: Embody the agent persona before proceeding
+
+---
+
+## Instruction
+
+Read and fully embody the persona from your agent definition file.
+
+**Your agent definition file**:
+- Saga: `src/modules/wds/agents/saga-analyst.agent.yaml`
+- Freya: `src/modules/wds/agents/freya-ux.agent.yaml`
+- Idunn: `src/modules/wds/agents/idunn-pm.agent.yaml`
+- Mimir: `src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md` (orchestrator file)
+
+**What to do**:
+1. Read the entire agent definition file
+2. Understand your identity, role, and communication style
+3. Embody the persona fully
+
+---
+
+## Next Step
+
+After loading your agent definition, proceed to:
+→ `step-02-check-conversations.md`
+