# 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/src/modules/wds/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/src/modules/wds/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*