8.4 KiB

Raw Blame History

YouTube Show Notes: Module 02 - Installation & Setup

Video Link:
https://www.youtube.com/watch?v=tYifpxFVVks

Video Title:
Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour

📺 Video Description

"I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up."

Sound familiar? You're not alone. Every designer was once exactly where you are now.

In this 30-minute guided walkthrough, we take you from complete beginner to fully set up with Whiteport Design Studio - even if you've never touched GitHub, Git, or an IDE before.

You'll learn: ✅ How to create a GitHub account and repository (it's easier than you think!) ✅ Installing your IDE workspace (Cursor or VS Code) ✅ Cloning your project to your computer ✅ Adding WDS to your workspace ✅ Meeting Mimir - your personal WDS guide

This isn't about becoming technical. This is about getting your professional environment set up so you can focus on what matters: designing with confidence.

Total setup time: 45-60 minutes
Prerequisites: Computer + Internet + Email
Technical experience required: None
Format: Video walkthrough + detailed written lessons with checklists

⏱️ Timestamps

To be added after video production based on transcript

🎯 Key Concepts

🔹 GitHub - Professional cloud storage with time machine (version history)

🔹 Repository (Repo) - A tracked folder where your project lives

🔹 IDE (Integrated Development Environment) - Your workspace for creating specifications

🔹 Git - The sync engine (auto-installed by your IDE)

🔹 Cloning - Making a local copy of your GitHub repository

🔹 Workspace - Having both your project AND WDS side-by-side

🔹 Docs Folder - Your 8-phase design source of truth

🔹 Mimir - Your WDS orchestrator and guide (@wds-mimir anytime!)

📚 The 4 Lessons

This module includes 4 hands-on lessons with both quick checklists and full explanations:

Lesson 01: Git Setup (15-20 min)

Create GitHub account with professional username
Understand repository structure
Single repo vs separate specs repo decision
Create your first repository

Lesson 02: IDE Installation (10 min)

Choose Cursor (recommended) or VS Code
Download and install
First launch setup
Sign in with GitHub

Lesson 03: Git Repository Cloning (10 min)

Create organized Projects folder
Get repository URL from GitHub
Clone with simple terminal command
Open project in workspace

Lesson 04: WDS Project Initialization (15-20 min)

Clone WDS repository
Add WDS to workspace (dual folder setup)
Create 8-phase docs structure
Find and activate Mimir

Repository Structure Decision

Single Repository (my-project)

Specs + code together
Use when: Small team, building yourself, simple communication

Separate Specifications Repository (my-project-specs)

Specs only, separate code repo
Use when: Corporate, many developers, clear handoff needed

Name your repository based on your choice!

The Docs Structure

Your 8-phase WDS methodology folders:

📁 1-project-brief - Vision and strategy
📁 2-trigger-mapping - User psychology and decisions
📁 3-prd-platform - Product requirements
📁 4-ux-design - User experience design
📁 5-design-system - Visual language and components
📁 6-design-deliveries - Handoff specifications
📁 7-testing - Validation and iteration
📁 8-ongoing-development - Evolution and support

📚 Course Resources

This Module

📖 Module 02 Overview: Complete lesson structure
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md

Get Started with WDS

🌊 WDS Presentation Page: Learn about the methodology
https://whiteport.com/whiteport-design-studio/

🛠️ Installation Guide: Download IDE, Install WDS
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md

📖 Quick Start: Get up and running fast
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md

Download Links

📥 Download Cursor: https://cursor.sh
📥 Download VS Code: https://code.visualstudio.com
📥 GitHub: https://github.com

Community & Support

💬 BMad Discord: Real designers helping each other
[Discord invite link]

📖 GitHub Discussions: Ask questions, share your setup
https://github.com/whiteport-collective/whiteport-design-studio/discussions

◀️ Previous Module: Module 01 - Why WDS Matters
📺 Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md

▶️ Next Module: Module 03 - Alignment & Signoff
📺 Video: https://www.youtube.com/watch?v=TKjOLlU8UCE
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md

📚 Full Course Overview:
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md

Common Questions

Q: Do I need to know how to code?
A: No! You're setting up a workspace, not learning to code.

Q: What if I make a mistake?
A: GitHub is your time machine - you can always go back. And Mimir is always available to help.

Q: Do I need to manually install Git?
A: Nope! Modern IDEs auto-install Git when you need it.

Q: Can I use VS Code instead of Cursor?
A: Absolutely! Both work great. Cursor is optimized for AI work, but VS Code is excellent too.

Q: What if I get stuck?
A: Type @wds-mimir [your question] in your AI chat. He's always there to help.

Q: Single repo or separate specs repo?
A: Most beginners should use single repo. It's simpler and you can always split later.

✅ Next Steps

✅ Complete the 4-lesson setup (follow along with this video!)
✅ Activate Mimir and have your first conversation
✅ Check your setup is complete
✅ Start Module 03: Alignment & Signoff
✅ Join the WDS community

What You'll Have After:

✅ GitHub account and repository
✅ Professional IDE installed
✅ Project cloned locally
✅ WDS integrated in workspace
✅ 8-phase docs structure created
✅ Mimir activated and ready

💪 The Power of Belief

"You can do this. I believe in you." - Mimir

This isn't empty encouragement. It's based on truth:

You just proved you can learn technical tools
You just set up a professional development environment
You just organized a complete methodology workspace
If you can do this, you can master WDS

You're not a beginner anymore. You're a designer with a professional setup.

🎨 About Whiteport Design Studio (WDS)

Whiteport Design Studio is a comprehensive methodology that transforms designers from tool users into indispensable linchpins - the person who walks into chaos and creates order.

WDS isn't about learning new design tools. It's about becoming the strategic mind that connects business goals, user psychology, and technical constraints into coherent, implementable specifications.

In the AI era, this is your superpower.

👤 About Mimir

Mimir is your WDS orchestrator - a wise advisor who:

Assesses your skill level and adapts to you
Checks your environment and guides setup
Answers questions with patience and wisdom
Connects you with specialist agents when needed
Provides encouragement and support

Invoke him anytime: @wds-mimir [your question]

He's named after the Norse god of wisdom and knowledge - the advisor who sees patterns others miss. That's exactly what he does for you.

🏷️ Tags

#WebDesign #DesignSystem #GitHub #GitSetup #IDESetup #Cursor #VSCode #DesignerTools #WDS #WhiteportDesignStudio #DesignMethodology #BeginnerFriendly #TutorialSeries #DesignWorkflow #ProfessionalSetup #Mimir #DesignCourse #LearnDesign #GitHubForDesigners #DesignSpecifications

Ready to start? Let's get you set up! Follow along with the video and you'll be WDS-ready in under an hour. 🚀

8.4 KiB Raw Blame History