whiteport-design-studio 0.1.0

package/docs/learn-wds/00-course-overview.md

@@ -0,0 +1,211 @@
+# WDS Course: From Designer to Linchpin
+
+**Master the complete WDS methodology and become indispensable as a designer in the AI era**
+
+[Watch the Course Introduction Video](https://www.youtube.com/watch?v=CQ5Aai_r-uo)
+
+---
+
+## Welcome to the WDS Course
+
+This comprehensive course teaches you the complete WDS workflow through **practical modules** that transform how you design products.
+
+**The paradigm shift:**
+
+- The design becomes the specification
+- The specification becomes the product
+- The code is just the printout
+
+**What you'll become:**
+
+- The linchpin designer who makes things happen
+- The gatekeeper between business goals and user needs
+- The irreplaceable designer in the AI era
+
+**Time investment:** ~10 hours total
+**Result:** Complete mastery of WDS methodology from project brief to AI-ready specifications
+
+---
+
+## Who Created WDS?
+
+**Mårten Angner** is a UX designer and founder of Whiteport, a design and development agency based in Sweden. After years of working with AI tools, Mårten observed that traditional design handoffs were breaking down. Designers would create beautiful mockups, hand them off to developers, and watch their creative intent get lost in translation.
+
+Mårten developed WDS to solve this problem - a methodology where design thinking is preserved and amplified through AI implementation, not diluted and lost.
+
+**The Mission:** WDS is completely free and open-source. Mårten created it as a **plugin module for BMad Method** - an open-source AI-augmented development framework - to give designers everywhere the tools they need to thrive in the AI era.
+
+---
+
+## Before You Start
+
+**[→ Getting Started Guide](00-getting-started/overview.md)**
+
+Review prerequisites, choose your learning path, and get support:
+
+- **Prerequisites** - Skills, tools, time investment
+- **Learning Paths** - Full immersion, quick start, or self-paced
+- **Support** - Testimonials, FAQ, community
+
+**Reading time:** ~15 minutes
+
+---
+
+## Course Structure
+
+Each module contains:
+
+- **Lessons** - Theory and concepts (with NotebookLM audio support)
+- **Tutorial** - Step-by-step hands-on guide (for practical modules)
+- **Practice** - Apply to your own project
+
+**Learning format:**
+
+- **Lessons** - Read as documentation or generate audio with NotebookLM
+- **Tutorials** - Follow step-by-step guides with AI support
+- **Practice** - Apply to real projects as you learn
+- **Workshops** - Use for team training
+
+---
+
+## Course Modules
+
+### Foundation
+
+- [Module 01: Why WDS Matters](module-01-why-wds-matters/module-01-overview.md)
+- [Module 02: Installation & Setup](module-02-installation-setup/module-02-overview.md) • [Tutorial →](module-02-installation-setup/tutorial-02.md)
+
+### Pre-Phase 1: Alignment & Signoff (Optional)
+
+- [Module 03: Alignment & Signoff](module-03-alignment-signoff/module-03-overview.md) • [Tutorial →](module-03-alignment-signoff/tutorial-03.md)  
+  *Skip if doing it yourself - go straight to Project Brief*
+
+### Phase 1: Project Brief
+
+- [Module 04: Create Project Brief](module-04-project-brief/) • [Tutorial →](module-04-project-brief/tutorial-04.md)
+
+### Phase 2: Trigger Mapping
+
+- [Module 04: Identify Target Groups](module-04-identify-target-groups/)
+- [Module 05: Map Triggers & Outcomes](module-05-map-triggers-outcomes/) • [Tutorial →](module-05-map-triggers-outcomes/tutorial-05.md)
+- [Module 06: Prioritize Features](module-06-prioritize-features/)
+
+### Phase 3: Platform Requirements
+
+- [Module 07: Platform Requirements](module-07-platform-requirements/)
+- [Module 08: Functional Requirements](module-08-functional-requirements/)
+
+### Phase 4: Conceptual Design (UX Design)
+
+- [Module 09: Initialize Scenario](module-09-initialize-scenario/) • [Tutorial →](module-09-initialize-scenario/tutorial-09.md)
+- [Module 10: Sketch Interfaces](module-10-sketch-interfaces/)
+- [Module 11: Analyze with AI](module-11-analyze-with-ai/)
+- [Module 12: Decompose Components](module-12-decompose-components/)
+- [Module 13: Conceptual Specifications](module-13-conceptual-specs/) • [Tutorial →](module-13-conceptual-specs/tutorial-13.md)
+- [Module 14: Validate Specifications](module-14-validate-specifications/)
+
+### Phase 5: Design System
+
+- [Module 15: Extract Design Tokens](module-15-extract-design-tokens/)
+- [Module 16: Component Library](module-16-component-library/)
+
+### Phase 6: Development Integration
+
+- [Module 17: UI Roadmap](module-17-ui-roadmap/)
+
+---
+
+## Learning Paths
+
+**Complete Course:** All 17 modules (~12 hours)
+
+**Quick Start:** Modules 1, 2, 5, 9, 13 (~4 hours)
+
+**Phase-Specific:** Jump to any phase as needed
+
+---
+
+## NotebookLM Integration
+
+Each module has matching content for NotebookLM:
+
+- Feed module lessons to NotebookLM
+- Generate audio podcasts for learning on the go
+- Generate video presentations for team training
+- Create study guides and summaries
+
+**All modules are optimized for AI-assisted learning.**
+
+---
+
+## Module Structure
+
+Every module follows the same pattern:
+
+**1. Inspiration (10 min)**
+
+- Why this step matters
+- The transformation you'll experience
+- Real-world impact
+
+**2. Teaching (20 min)**
+
+- How to do it with confidence
+- AI support at each step
+- Dog Week example walkthrough
+
+**3. Practice (10 min)**
+
+- Apply to your own project
+- Step-by-step instructions
+- Success criteria
+
+**4. Tutorial (optional)**
+
+- Quick step-by-step guide
+- "Just show me how to do it"
+- For practical modules only
+
+---
+
+## After the Course
+
+Once you've completed the modules:
+
+1. **[Workflows Guide](../workflows/WDS-WORKFLOWS-GUIDE.md)** - Reference documentation
+2. **[Quick Start](../getting-started/quick-start.md)** - Try WDS with agent
+3. **[Community](https://discord.gg/whiteport)** - Get help and share your work
+
+---
+
+## Prerequisites
+
+**What you need:**
+
+- Basic design thinking and UX principles
+- Ability to sketch interfaces (hand-drawn or digital)
+- Understanding of user needs and business goals
+- Willingness to think deeply about WHY
+
+**What you DON'T need:**
+
+- ❌ Coding skills
+- ❌ Advanced technical knowledge
+- ❌ Experience with AI tools
+- ❌ Formal design education
+
+**If you can design interfaces and explain your thinking, you're ready to start.**
+
+---
+
+## Ready to Begin?
+
+Ten hours of learning. A lifetime of being indispensable.
+
+**[Start with Module 01: Why WDS Matters →](module-01-why-wds-matters/module-01-overview.md)**
+
+---
+
+**This course is free and open-source**
+**Created by Mårten Angner and the Whiteport team**
+**Integrated with BMad Method for seamless design-to-development workflow**

package/docs/learn-wds/Webinars/2024-12-22-WDS-Sessions-1-Say-Hello-to-WDS.md

@@ -0,0 +1,174 @@
+# WDS Jam #1: Say Hello to the New AI-Agent Framework for Designers!
+
+**Date:** December 22, 2024  
+**Time:** 17:00 – 18:00 CEST  
+**Host:** Mårten Angner, CX/UX/UI Designer and founder of WDS  
+**Video:** [Watch on YouTube](https://youtu.be/TdujvNYI-3g)
+
+---
+
+## 🎥 Webinar Preview
+
+[![WDS Jam #1 Thumbnail](https://img.youtube.com/vi/TdujvNYI-3g/maxresdefault.jpg)](https://youtu.be/TdujvNYI-3g)
+
+---
+
+## 📋 Session Overview
+
+Join Mårten Angner for an inspiring 60-minute session exploring the Whiteport Design Studio (WDS), a hands-on expansion for designers ready to move their craft into the development space and bring ideas to life directly in the IDE.
+
+Built on the shoulders of giants—the proven BMAD Method—this approach empowers designers to take control of their workflow and collaborate seamlessly with both developers and AI.
+
+### 🔍 Key Themes
+
+**From Feeling Behind to Leading the Edge**
+Like many designers, Mårten once felt lost in the AI revolution—unsure where designers fit in and quietly wondering if the profession was being replaced. After discovering the BMAD Method, he developed WDS as an expansion pack based on 25+ years of design experience, now supercharged by AI.
+
+**Beyond Vibe Coding**
+Great products are not created in 24 hours with a couple of prompts. Designers have years of experience understanding businesses and their needs, meeting users in research and usability studies. WDS ensures designers remain at the strategic center of product development, not pushed aside in the hunt for immediate satisfaction.
+
+---
+
+## 🎯 What You'll Learn
+
+- **Leverage WDS**: Use the AI Agent framework to structure your design process for strategy, project documents, alignment documents, and project contracts
+- **Collaborate with AI**: Partner with AI as a creative co-thinker to refine ideas and translate them into clear, actionable specifications
+- **Sketch to Code**: Turn your sketches, wireframes, and designs into functional design specifications that become the product
+- **Design Systems that Scale**: Build reusable, intelligent design components that integrate directly into developer workflows
+- **Elevate Your Role**: Step into a new era of design—where creativity meets technology, and your ideas become instantly actionable
+
+---
+
+## ⏱️ Timestamps
+
+| Time | Topic |
+|------|-------|
+| 00:00 | Welcome + quick intros (who's here, how people use AI today) |
+| 00:05 | The current AI reality: prototypes, hype, and the "Lovable code breakup" 💔 |
+| 00:10 | The big shift: BMAD and why documents beat prompting |
+| 00:13 | WDS workflow overview: IDE-first, visual thinking, and how the process flows |
+| 00:14 | Strategy foundation: Analyst agent + Trigger Mapping (goals, target groups, forces) |
+| 00:16 | From strategy to product: personas, scenarios, sketching, and envisioning |
+| 00:18 | From vision to build: specs, component IDs, design systems, "spec is the new code" ✨ |
+| 00:23 | When it works (and when it doesn't): fit, scale, feedback loops, iteration |
+| 00:25 | Working with clients + stakeholders: presenting, GitHub, and collaboration concerns |
+| 00:33 | Closing: tool limits, Excalidraw/BMAD v6 notes, and what's next |
+
+---
+
+## 🛠️ Resources & Links
+
+### Core Resources
+- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio)
+- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
+- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md)
+- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD)
+- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
+- [Whiteport Website](https://whiteport.com)
+
+---
+
+## 💡 Key Takeaways
+
+1. **Documents Beat Prompting**
+   - The BMAD Method shows why structured documentation is more powerful than endless prompting
+   - Your design specifications become the source of truth
+
+2. **Spec is the New Code**
+   - In the AI era, specifications become the product
+   - Code is just output—generated and regenerated from your design work
+
+3. **IDE-First Workflow**
+   - Working in the same environment as developers improves collaboration
+   - Visual thinking meets technical implementation seamlessly
+
+4. **Strategic Foundation Matters**
+   - Trigger mapping connects business goals to user needs
+   - Personas and scenarios ground your design decisions
+
+5. **Designers Lead, AI Amplifies**
+   - WDS positions designers at the strategic center
+   - AI becomes your co-pilot, not your replacement
+
+---
+
+## 👥 Who Should Attend
+
+This session is for:
+- **Digital Designers** who want to expand their skillset and collaborate fluently with AI and developers
+- **CX/UX/UI Professionals** ready to transform their workflow from static mockups to dynamic, living systems
+- **Design Leads** who want to lead the next generation of digital creativity
+- **Product Managers** seeking to understand how design drives innovation
+- **Creative Entrepreneurs** ready to take control of their product development
+
+---
+
+## 📝 Additional Notes
+
+- This was the inaugural WDS Jam session
+- All resources mentioned are available for free
+- WDS is built on 25+ years of CX/UX/UI design experience
+- Part of the BMAD Method for AI agent-driven development
+
+---
+
+## 📋 YouTube Show Notes (Copy-Paste Version)
+
+```
+Say hello to the new AI-Agent framework for designers! Join Mårten Angner for an inspiring session exploring Whiteport Design Studio (WDS).
+
+🔍 About WDS
+Whiteport Design Studio is a free and open-source expansion to the BMAD Method, designed to help designers work directly in the development environment. Built on 25+ years of design experience, WDS empowers you to take control of your workflow and collaborate seamlessly with both developers and AI.
+
+🎯 What You'll Learn
+- Leverage WDS to structure your design process for strategy, documents, and contracts
+- Collaborate with AI as a creative co-thinker
+- Turn sketches into functional design specifications that become the product
+- Build reusable design systems that integrate into developer workflows
+- Elevate your role where creativity meets technology
+
+⏱️ Timestamps
+00:00 Welcome + quick intros (who's here, how people use AI today)
+00:05 The current AI reality: prototypes, hype, and the "Lovable code breakup" 💔
+00:10 The big shift: BMAD and why documents beat prompting
+00:13 WDS workflow overview: IDE-first, visual thinking, and how the process flows
+00:14 Strategy foundation: Analyst agent + Trigger Mapping (goals, target groups, forces)
+00:16 From strategy to product: personas, scenarios, sketching, and envisioning
+00:18 From vision to build: specs, component IDs, design systems, "spec is the new code" ✨
+00:23 When it works (and when it doesn't): fit, scale, feedback loops, iteration
+00:25 Working with clients + stakeholders: presenting, GitHub, and collaboration concerns
+00:33 Closing: tool limits, Excalidraw/BMAD v6 notes, and what's next
+
+🔗 Resources
+
+📦 Get Started with WDS
+WDS Framework Repository - Download the complete framework, installation guides, and documentation
+https://github.com/whiteport-collective/whiteport-design-studio
+
+📖 Learn More About WDS
+WDS Presentation Page - Discover how WDS transforms designers into strategic leaders in the AI era
+https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
+
+WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
+https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md
+
+🛠️ Foundation & Related Tools
+BMAD Method - The open-source AI-augmented development framework that powers WDS
+https://github.com/bmad-code-org/BMAD-METHOD
+
+BMAD Masterclass - Comprehensive video guide to understanding the BMAD Method
+https://www.youtube.com/watch?v=LorEJPrALcg
+
+🌐 Connect with Whiteport
+Whiteport Website - Design and development agency behind WDS, based in Sweden
+https://whiteport.com
+
+💡 Final Note
+Designers do not need to stand on the sidelines in the AI era. With the right workflow, we can take the lead in how digital products are built.
+
+#WDS #DesignToCode #AIForDesigners #DesignWorkflow #BMAD #AIAgents #UIDesign #UXDesign #AIDesign #DesignSystems
+```
+
+---
+
+*Last updated: January 2, 2026*

package/docs/learn-wds/Webinars/2025-10-22-Webinar-WDS-v4.md

@@ -0,0 +1,181 @@
+# Webinar: Whiteport Design Studio v4 - From Sketch to Code with AI
+
+**Date:** October 22, 2025  
+**Duration:** 45 minutes  
+**Presenter:** Mårten Angner, Founder of Whiteport  
+**Video:** [Watch on YouTube](https://youtu.be/i1_aCbricG0)
+
+---
+
+## 🎥 Webinar Preview
+
+[![WDS v4 Webinar Thumbnail](https://img.youtube.com/vi/i1_aCbricG0/maxresdefault.jpg)](https://youtu.be/i1_aCbricG0)
+
+---
+
+## 🚀 About WPS2C Framework
+
+**Whiteport Sketch to Code (WPS2C)** is a free and open-source expansion to the BMAD Method, designed to help digital creatives work directly in the development environment. 
+
+### Key Features:
+- Work in the IDE and GitHub with AI agent support
+- Transform sketches into structured specifications
+- Generate components, content, and front-end structures
+- Maintain design integrity through the development process
+- Collaborate effectively with developers using shared tools
+
+---
+
+## 🎯 What You'll Learn
+
+- **Collaborate with AI** as a thinking partner
+- Create **specifications that generate better code** than prompts alone
+- Understand how **components, content, and behavior** connect from the first sketch
+- Work directly in **GitHub and the IDE** without complexity
+- Leverage **BMAD agent system** for design implementation
+
+---
+
+## 📋 Timestamps & Key Moments
+
+| Time | Topic |
+|------|-------|
+| 00:00 | Introduction |
+| 03:50 | Why designers need WPS2C |
+| 05:39 | BMAD agent roles |
+| 10:48 | Working in the IDE (Cursor) |
+| 16:09 | Trigger maps and discovery |
+| 21:58 | Personas and user grounding |
+| 25:39 | Sketch to specification |
+| 27:53 | Component thinking and design systems |
+| 29:53 | Early front-end output |
+| 36:28 | Making changes safely |
+| 41:00 | Why sketching still matters |
+| 42:34 | Wrap-up and next steps |
+
+---
+
+## 🛠️ Resources & Links
+
+### Core Resources
+- [BMAD Method (GitHub)](https://github.com/bmad-code-org/BMAD-METHOD)
+- [WPS2C Framework (GitHub)](https://github.com/whiteport-collective/whiteport-sketch-to-code-bmad-expansion)
+- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
+- [Whiteport Website](https://whiteport.com)
+
+### Related Learning
+- [WDS Documentation](https://github.com/whiteport-collective/whiteport-design-studio/tree/main/docs)
+- [BMAD Documentation](https://github.com/bmad-code-org/BMAD-METHOD/tree/main/docs)
+
+---
+
+## 💡 Key Takeaways
+
+1. **Designers Can Lead in the AI Era**
+   - WPS2C empowers designers to take an active role in the development process
+   - Move from being a design specialist to a design leader
+
+2. **The Power of Structured Specifications**
+   - Well-structured specifications generate better results than prompts alone
+   - Components and patterns create consistency across the product
+
+3. **IDE as a Design Tool**
+   - Working in the same environment as developers improves collaboration
+   - Real-time feedback on implementation feasibility
+
+4. **The Future of Design Workflows**
+   - AI agents handle repetitive tasks
+   - Designers focus on strategy and user experience
+   - Faster iteration and validation cycles
+
+---
+
+## 📅 What's Next?
+
+1. **Get Started**
+   - Install the WDS extension
+   - Set up your development environment
+   - Complete the getting started tutorial
+
+2. **Join the Community**
+   - [GitHub Discussions](https://github.com/whiteport-collective/whiteport-design-studio/discussions)
+   - [Discord Community](https://discord.gg/your-invite-link)
+
+3. **Upcoming Webinars**
+   - Advanced Component Design with WDS
+   - Collaborative Workflows for Design Teams
+   - From Design to Production: A Complete Walkthrough
+
+---
+
+## 📝 Additional Notes
+
+- This webinar is part of the WDS learning path
+- All resources mentioned are available for free
+- No prior coding experience required to get started
+
+---
+
+## 📋 YouTube Show Notes (Copy-Paste Version)
+
+```
+If you are a designer who wants to use AI in your workflow without becoming a developer, Whiteport Design Studio v4 is for you. 
+
+🔍 About Whiteport Design Studio v4
+Whiteport Design Studio v4 (WDS) is a free and open-source expansion to the BMAD Method, created to help digital creatives work directly in the development environment. The goal is simple: go from sketch, to specification, to usable front-end structure in the same workflow as developers.
+
+With WDS you work in the IDE and in GitHub, supported by AI agents that mirror an agile team. You still design, but now you also deliver structure, content, behavior, and documentation that both humans and AI can act on instantly.
+
+🎯 What You'll Learn
+- How to collaborate with AI as a thinking partner
+- How to create specifications that generate better code than prompts alone
+- How components, content, and behavior connect from the very first sketch
+- How to work directly in GitHub and the IDE without fear or complexity
+
+⏱️ Timestamps
+00:00 Introduction
+03:50 Why designers need WPS2C
+05:39 BMAD agent roles
+10:48 Working in the IDE (Cursor)
+16:09 Trigger maps and discovery
+21:58 Personas and user grounding
+25:39 Sketch to specification
+27:53 Component thinking and design systems
+29:53 Early front-end output
+36:28 Making changes safely
+41:00 Why sketching still matters
+42:34 Wrap-up and next steps
+
+🔗 Resources
+
+📦 Get Started with WDS
+WDS Framework Repository - Download the complete framework, installation guides, and documentation
+https://github.com/whiteport-collective/whiteport-design-studio
+
+📖 Learn More About WDS
+WDS Presentation Page - Discover how WDS transforms designers into strategic leaders in the AI era
+https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
+
+WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
+https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md
+
+🛠️ Foundation & Related Tools
+BMAD Method - The open-source AI-augmented development framework that powers WDS
+https://github.com/bmad-code-org/BMAD-METHOD
+
+BMAD Masterclass - Comprehensive video guide to understanding the BMAD Method
+https://www.youtube.com/watch?v=LorEJPrALcg
+
+🌐 Connect with Whiteport
+Whiteport Website - Design and development agency behind WDS, based in Sweden
+https://whiteport.com
+
+💡 Final Note
+If this session helps you, feel free to comment or reach out. Designers do not need to stand on the sidelines in the AI era. With the right workflow, we can take the lead in how digital products are built.
+
+#WDS #DesignToCode #AIForDesigners #DesignWorkflow #NoCode #LowCode #UIDesign #UXDesign #AIDesign #DesignSystems
+```
+
+---
+
+*Last updated: January 2, 2026*