refactor(wds): Restructure Module 02 with separate lesson folders
Major restructure for better organization and navigation: New Structure: - module-02-overview.md (minimal, just links to lessons) - lesson-01-github-account/tutorial.md - lesson-02-create-repository/tutorial.md - lesson-03-install-ide/tutorial.md - lesson-04-git-setup/tutorial.md - lesson-05-clone-and-wds/tutorial.md - lesson-06-initiate-mimir/tutorial.md Each Lesson Contains: - Focused tutorial on one specific task - Clear time estimate - Step-by-step instructions - Troubleshooting section - Navigation to next lesson Overview Benefits: - Minimal and scannable - Easy to navigate between lessons - See progress through module - Jump to specific lesson easily Lesson Benefits: - Self-contained tutorials - Focused on single topic - Can be referenced individually - Progressive complexity - Clear completion criteria Old tutorial-02.md kept for reference until verified working.
This commit is contained in:
Mårten Angner
parent
d9954cce51
commit
c7b9793d5a
|
|
@ -0,0 +1,94 @@
|
|||
# Lesson 01: Create Your GitHub Account
|
||||
|
||||
**Get your professional GitHub account set up**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Create GitHub account
|
||||
- Choose professional username
|
||||
- Verify your email
|
||||
- Log in successfully
|
||||
|
||||
**Time:** 5-10 minutes
|
||||
|
||||
---
|
||||
|
||||
## What is GitHub?
|
||||
|
||||
Think of GitHub as:
|
||||
- **Professional cloud storage** for your project files
|
||||
- **Time machine** - every change saved, can go back to any version
|
||||
- **Collaboration tool** - work with others seamlessly
|
||||
|
||||
**For designers:** GitHub is where your WDS specifications will live, backed up and version-controlled.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Sign Up
|
||||
|
||||
1. Go to **https://github.com**
|
||||
2. Click the green **"Sign up"** button (top right)
|
||||
3. Enter your email address
|
||||
4. Create a password (make it strong!)
|
||||
5. Choose a username
|
||||
|
||||
---
|
||||
|
||||
## Choosing Your Username
|
||||
|
||||
**Username Tips:**
|
||||
|
||||
✅ **Professional** - You might share this with clients
|
||||
✅ **Simple** - Easy to remember and spell
|
||||
✅ **Memorable** - Represents you or your work
|
||||
|
||||
**Good Examples:**
|
||||
- `john-designer`
|
||||
- `sarahux`
|
||||
- `mike-creates`
|
||||
- `[yourname]-design`
|
||||
|
||||
**Avoid:**
|
||||
- `xXcooldesigner420Xx` (not professional)
|
||||
- `temporary12345` (not memorable)
|
||||
- Very long complicated names
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Verify Account
|
||||
|
||||
6. Verify you're human (solve the puzzle)
|
||||
7. Check your email inbox
|
||||
8. Click the verification link from GitHub
|
||||
9. You'll be redirected back to GitHub
|
||||
|
||||
**✅ Checkpoint:** You can log in to GitHub!
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** Didn't receive verification email
|
||||
**Solution:** Check spam folder, or click "Resend verification email"
|
||||
|
||||
**Issue:** Username already taken
|
||||
**Solution:** Try variations with hyphens or numbers (`john-ux-designer`, `sarah-designs-2`)
|
||||
|
||||
**Issue:** Password requirements
|
||||
**Solution:** Use at least 8 characters, mix of letters and numbers
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Now that you have a GitHub account, you're ready to create your first repository!
|
||||
|
||||
**[Continue to Lesson 02: Create Repository →](../lesson-02-create-repository/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
# Lesson 02: Create Your Project Repository
|
||||
|
||||
**Set up your project repository or join an existing one**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Understand three common scenarios
|
||||
- Create a new repository (Scenario A)
|
||||
- OR join an existing project (Scenario B)
|
||||
- Decide: Single repo or separate specs repo
|
||||
- Name your repository correctly
|
||||
|
||||
**Time:** 10-15 minutes
|
||||
|
||||
---
|
||||
|
||||
## Three Scenarios
|
||||
|
||||
**Before creating a repository, determine which applies to you:**
|
||||
|
||||
### Scenario A: Starting a New Project
|
||||
- You're starting fresh
|
||||
- No existing repository
|
||||
- You control the setup
|
||||
- **→ Continue reading below**
|
||||
|
||||
### Scenario B: Joining an Existing Project
|
||||
- Team project already exists
|
||||
- Client has existing repository
|
||||
- Contributing to ongoing work
|
||||
- **→ Skip to "Joining Existing Repository" section below**
|
||||
|
||||
### Scenario C: Just Learning WDS
|
||||
- You're just learning WDS methodology
|
||||
- Not starting a project yet
|
||||
- Following along with tutorial
|
||||
- **→ Skip to [Lesson 03: Install IDE](../lesson-03-install-ide/tutorial.md)**
|
||||
|
||||
**Most beginners: Use Scenario A**
|
||||
|
||||
---
|
||||
|
||||
## Scenario A: Create New Repository
|
||||
|
||||
### Step 1: Navigate to Repositories
|
||||
|
||||
1. Log in to GitHub
|
||||
2. Click your **profile icon** (top right)
|
||||
3. Click **"Your repositories"**
|
||||
4. Click the green **"New"** button
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Choose Your Repository Structure
|
||||
|
||||
**IMPORTANT: Your naming choice determines your structure!**
|
||||
|
||||
#### Option A: Single Repository
|
||||
|
||||
**Name it simply:**
|
||||
- `dog-walker-app`
|
||||
- `recipe-platform`
|
||||
- `fitness-tracker`
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
dog-walker-app/
|
||||
├── docs/ ← Your WDS specifications
|
||||
└── src/ ← Code
|
||||
```
|
||||
|
||||
**Use when:**
|
||||
- ✅ You're close to the development team
|
||||
- ✅ You want simple, direct communication
|
||||
- ✅ You're building the whole project yourself
|
||||
- ✅ Working closely with other designers
|
||||
- ✅ Small team with full ownership
|
||||
- ✅ Rapid iteration and feedback
|
||||
|
||||
---
|
||||
|
||||
#### Option B: Separate Specifications Repository
|
||||
|
||||
**Name with `-specs` suffix:**
|
||||
- `dog-walker-app-specs`
|
||||
- `recipe-platform-specs`
|
||||
- `fitness-tracker-specs`
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
dog-walker-app-specs/ ← This repo (specifications only)
|
||||
dog-walker-app/ ← Separate code repo (create later)
|
||||
```
|
||||
|
||||
**Use when:**
|
||||
- ✅ Corporate or enterprise environment
|
||||
- ✅ Specifications serve multiple products/platforms
|
||||
- ✅ Development team has many developers
|
||||
- ✅ Extensive or complex codebase
|
||||
- ✅ Clear handoff boundaries needed
|
||||
- ✅ Design and dev have separate workflows
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Repository Settings
|
||||
|
||||
**Repository Name:**
|
||||
- Use lowercase with hyphens
|
||||
- Descriptive and specific
|
||||
- Examples: `dog-walker-app` OR `dog-walker-app-specs`
|
||||
|
||||
**Description:**
|
||||
- Short one-liner about your project
|
||||
- Example: "UX specifications for Dog Week family coordination app"
|
||||
|
||||
**Public vs Private:**
|
||||
- **Public:** Anyone can see (good for portfolio projects)
|
||||
- **Private:** Only you and invited collaborators (good for client work)
|
||||
|
||||
**Initialize with README:**
|
||||
- ☑️ **Check this box!** It creates a starter file
|
||||
|
||||
**DO NOT** add .gitignore or license yet (we'll do this later)
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Create Repository
|
||||
|
||||
Click the green **"Create repository"** button
|
||||
|
||||
**✅ Checkpoint:** You see your new repository with a README file
|
||||
|
||||
**Remember your choice:**
|
||||
- Single repo (`my-project`)? Specs and code together
|
||||
- Separate repo (`my-project-specs`)? You'll create a second repo for code later
|
||||
|
||||
**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
## Scenario B: Joining Existing Repository
|
||||
|
||||
**If you're joining a team project or client repository:**
|
||||
|
||||
### Step 1: Request Repository Access
|
||||
|
||||
**Email template for repository owner or team lead:**
|
||||
|
||||
```
|
||||
Hi [Name],
|
||||
|
||||
I'd like to contribute to [project-name] using WDS methodology.
|
||||
Could you add me as a collaborator to the repository?
|
||||
|
||||
My GitHub username: [your-username]
|
||||
|
||||
Thank you!
|
||||
```
|
||||
|
||||
**They will:**
|
||||
1. Go to repository settings
|
||||
2. Click "Collaborators"
|
||||
3. Add your GitHub username
|
||||
4. You'll receive an email invitation
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Accept the Invitation
|
||||
|
||||
1. Check your email for GitHub invitation
|
||||
2. Click **"Accept invitation"**
|
||||
3. Or go to the repository URL directly
|
||||
4. You'll see an invitation banner → Click **"Accept"**
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Understand the Existing Structure
|
||||
|
||||
**Before cloning, check what structure they're using:**
|
||||
|
||||
**Look at the repository name:**
|
||||
- `project-name` → Likely single repo (specs + code together)
|
||||
- `project-name-specs` → Separate specs repo (code elsewhere)
|
||||
|
||||
**Browse the repository:**
|
||||
- Has `docs/` folder? → Probably already using WDS!
|
||||
- Has `src/` or `app/` folder? → Code lives here too (single repo)
|
||||
- Only documentation? → Separate specs repo
|
||||
|
||||
**When in doubt:** Ask the team lead!
|
||||
|
||||
**✅ Checkpoint:** Invitation accepted, you understand the structure
|
||||
|
||||
**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** Repository name already taken
|
||||
**Solution:** Add your username or team name: `yourname-project-name`
|
||||
|
||||
**Issue:** Don't know which structure to use
|
||||
**Solution:** Ask your team lead, or use single repo (simpler)
|
||||
|
||||
**Issue:** Invitation expired
|
||||
**Solution:** Ask repository owner to resend invitation
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Now that your repository is set up, it's time to install your IDE!
|
||||
|
||||
**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
# Lesson 03: Install Your IDE
|
||||
|
||||
**Get your workspace set up with Cursor or VS Code**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Choose between Cursor and VS Code
|
||||
- Download and install your IDE
|
||||
- Complete first-launch setup
|
||||
- Sign in with GitHub
|
||||
|
||||
**Time:** 10 minutes
|
||||
|
||||
---
|
||||
|
||||
## What is an IDE?
|
||||
|
||||
**IDE = Integrated Development Environment**
|
||||
|
||||
Think of it as your workspace for creating specifications. Like Microsoft Word, but designed for:
|
||||
- Writing markdown specifications
|
||||
- Managing project files
|
||||
- Working with AI assistants
|
||||
- Version control integration
|
||||
|
||||
---
|
||||
|
||||
## Choose Your IDE
|
||||
|
||||
### Cursor (Recommended for WDS)
|
||||
|
||||
**Why Cursor:**
|
||||
- ✅ Built specifically for AI-augmented work
|
||||
- ✅ Modern, clean interface
|
||||
- ✅ Perfect for WDS methodology
|
||||
- ✅ Excellent AI chat integration
|
||||
|
||||
**Download:** https://cursor.sh
|
||||
|
||||
---
|
||||
|
||||
### VS Code (Solid Alternative)
|
||||
|
||||
**Why VS Code:**
|
||||
- ✅ Industry standard
|
||||
- ✅ Huge extension marketplace
|
||||
- ✅ Works great with WDS
|
||||
- ✅ What many developers use
|
||||
|
||||
**Download:** https://code.visualstudio.com
|
||||
|
||||
---
|
||||
|
||||
**For complete beginners:** Choose **Cursor**. It's designed for the way you'll work with WDS.
|
||||
|
||||
---
|
||||
|
||||
## Install Cursor
|
||||
|
||||
### Step 1: Download
|
||||
|
||||
1. Go to **https://cursor.sh**
|
||||
2. Click the download button for your platform
|
||||
3. Wait for download to complete
|
||||
|
||||
### Step 2: Install
|
||||
|
||||
**Windows:**
|
||||
1. Double-click the `.exe` file
|
||||
2. Follow installer prompts
|
||||
3. Use default settings (just click "Next")
|
||||
4. Click "Finish"
|
||||
|
||||
**Mac:**
|
||||
1. Open the `.dmg` file
|
||||
2. Drag Cursor to Applications folder
|
||||
3. Open Applications folder
|
||||
4. Double-click Cursor to launch
|
||||
|
||||
**Linux:**
|
||||
1. Follow the installation instructions for your distribution
|
||||
2. Usually involves extracting and running an installer
|
||||
|
||||
---
|
||||
|
||||
### Step 3: First Launch
|
||||
|
||||
1. Open Cursor for the first time
|
||||
2. Choose your theme:
|
||||
- **Light** - Bright background
|
||||
- **Dark** - Dark background (easier on eyes)
|
||||
- You can change this later!
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Sign In with GitHub
|
||||
|
||||
**This is important!** Signing in makes cloning repositories much easier.
|
||||
|
||||
1. Cursor will prompt: **"Sign in with GitHub?"**
|
||||
2. Click **"Yes"** or **"Sign in"**
|
||||
3. Your browser will open
|
||||
4. Click **"Authorize Cursor"**
|
||||
5. Return to Cursor (should be signed in)
|
||||
|
||||
**✅ Checkpoint:** Cursor is open, you're signed into GitHub
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Install Recommended Extensions (Optional)
|
||||
|
||||
Cursor may ask: **"Install recommended extensions?"**
|
||||
|
||||
**Click "Yes"** - These extensions are helpful for:
|
||||
- Markdown previews
|
||||
- File icons
|
||||
- Git integration
|
||||
|
||||
---
|
||||
|
||||
## Install VS Code (Alternative)
|
||||
|
||||
If you chose VS Code instead:
|
||||
|
||||
### Step 1: Download
|
||||
|
||||
1. Go to **https://code.visualstudio.com**
|
||||
2. Download for your platform
|
||||
3. Wait for download
|
||||
|
||||
### Step 2: Install
|
||||
|
||||
Follow the same installation steps as Cursor above.
|
||||
|
||||
### Step 3: First Launch & Setup
|
||||
|
||||
1. Choose theme (Light/Dark)
|
||||
2. Sign in with GitHub when prompted
|
||||
3. Install recommended extensions
|
||||
|
||||
---
|
||||
|
||||
## Verify Installation
|
||||
|
||||
### Open the Terminal
|
||||
|
||||
This is important for upcoming steps!
|
||||
|
||||
**Windows / Linux:**
|
||||
- Press **Ctrl + `** (backtick key, usually above Tab)
|
||||
|
||||
**Mac:**
|
||||
- Press **Cmd + `** (backtick key)
|
||||
|
||||
**You should see a terminal panel appear at the bottom!**
|
||||
|
||||
**✅ Checkpoint:** Terminal opens successfully
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** Can't find download
|
||||
**Solution:** Check your Downloads folder
|
||||
|
||||
**Issue:** Mac says "Cannot open - unidentified developer"
|
||||
**Solution:** Right-click Cursor → Click "Open" → Click "Open" again
|
||||
|
||||
**Issue:** Terminal won't open
|
||||
**Solution:** View menu → Terminal → New Terminal
|
||||
|
||||
**Issue:** GitHub sign-in fails
|
||||
**Solution:** You can skip for now, we'll handle it in Lesson 05
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Your IDE is ready! Now let's understand Git and how your IDE handles it automatically.
|
||||
|
||||
**[Continue to Lesson 04: Git Setup →](../lesson-04-git-setup/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
# Lesson 04: Git Setup
|
||||
|
||||
**Let your IDE handle Git automatically**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Understand what Git does
|
||||
- Recap your repository structure decision
|
||||
- Let Cursor install Git automatically
|
||||
- OR use GitHub Desktop (visual alternative)
|
||||
|
||||
**Time:** 5 minutes
|
||||
|
||||
---
|
||||
|
||||
## What is Git?
|
||||
|
||||
**Git** is the behind-the-scenes tool that syncs your computer with GitHub.
|
||||
|
||||
**Think of it as:**
|
||||
- The sync engine between your computer and GitHub
|
||||
- Like Dropbox, but smarter (tracks every change)
|
||||
- Built into most modern IDEs
|
||||
|
||||
**Good news:** You don't need to install it manually!
|
||||
|
||||
---
|
||||
|
||||
## Recap: Your Repository Structure
|
||||
|
||||
**You already decided this in Lesson 02 when naming your repo!**
|
||||
|
||||
### Single Repo (named `my-project`)
|
||||
```
|
||||
my-project/
|
||||
├── docs/ ← Your WDS specifications
|
||||
└── src/ ← Code lives here too
|
||||
```
|
||||
|
||||
### Separate Repo (named `my-project-specs`)
|
||||
```
|
||||
my-project-specs/ ← This repo (specifications only)
|
||||
← Code repo created separately
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Option 1: Let Cursor Handle It (Recommended)
|
||||
|
||||
**The easiest way:** Do nothing!
|
||||
|
||||
When you try to clone a repository in Lesson 05, Cursor will:
|
||||
|
||||
1. Check if Git is installed
|
||||
2. If not, **automatically prompt you**: "Install Git?"
|
||||
3. You click **"Install"**
|
||||
4. Done!
|
||||
|
||||
**That's it.** No command line needed.
|
||||
|
||||
**✅ This is the recommended path for beginners**
|
||||
|
||||
---
|
||||
|
||||
## Option 2: GitHub Desktop (Visual Alternative)
|
||||
|
||||
**For designers who prefer visual tools:**
|
||||
|
||||
### Why GitHub Desktop?
|
||||
|
||||
- ✅ No terminal commands needed
|
||||
- ✅ Visual interface for everything
|
||||
- ✅ See changes side-by-side
|
||||
- ✅ Many professional designers use it
|
||||
- ✅ Works perfectly with Cursor
|
||||
|
||||
### Install GitHub Desktop
|
||||
|
||||
1. Download from **https://desktop.github.com**
|
||||
2. Install it (follow standard installer)
|
||||
3. Open GitHub Desktop
|
||||
4. Sign in with your GitHub account
|
||||
5. Done!
|
||||
|
||||
### How it Works
|
||||
|
||||
- Use GitHub Desktop to **clone** repositories
|
||||
- Use GitHub Desktop to **commit** and **push** changes
|
||||
- Use Cursor to **edit** specifications
|
||||
- They work together perfectly!
|
||||
|
||||
**This is a perfectly valid professional workflow.**
|
||||
|
||||
---
|
||||
|
||||
## Option 3: Already Comfortable with Terminal?
|
||||
|
||||
**Optional check for those who want to know:**
|
||||
|
||||
In Cursor terminal (press **Ctrl+`** or **Cmd+`**):
|
||||
|
||||
```bash
|
||||
git --version
|
||||
```
|
||||
|
||||
**If you see a version number:**
|
||||
```
|
||||
git version 2.x.x
|
||||
```
|
||||
✅ Git is installed!
|
||||
|
||||
**If you see "command not found":**
|
||||
No problem! Continue to Lesson 05, Cursor will prompt you.
|
||||
|
||||
---
|
||||
|
||||
## Which Option Should You Choose?
|
||||
|
||||
**Choose Option 1 (Let Cursor Handle It) if:**
|
||||
- You're a complete beginner
|
||||
- You want the simplest path
|
||||
- You're comfortable with terminal appearing in Lesson 05
|
||||
|
||||
**Choose Option 2 (GitHub Desktop) if:**
|
||||
- You prefer visual interfaces
|
||||
- You want to see changes graphically
|
||||
- You're nervous about terminal commands
|
||||
- You want a tool you'll keep using
|
||||
|
||||
**Both are great!** Many professionals use GitHub Desktop daily.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** Not sure which option to choose
|
||||
**Solution:** Use Option 1 (Let Cursor handle it) - simplest for beginners
|
||||
|
||||
**Issue:** GitHub Desktop won't sign in
|
||||
**Solution:** Make sure you completed Lesson 01 (GitHub account created)
|
||||
|
||||
**Issue:** Worried about making mistakes
|
||||
**Solution:** Git saves everything - you can always undo!
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Git will be ready when you need it! Now it's time to clone your repository and add WDS to your workspace.
|
||||
|
||||
**[Continue to Lesson 05: Clone & Add WDS →](../lesson-05-clone-and-wds/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
# Lesson 05: Clone Your Project & Add WDS
|
||||
|
||||
**Get your project and WDS onto your computer**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Clone your project repository
|
||||
- Add WDS to your workspace
|
||||
- Create docs folder structure
|
||||
|
||||
**Time:** 15-20 minutes
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Choose Where to Store Projects
|
||||
|
||||
**Create a Projects folder:**
|
||||
|
||||
**Windows:** `C:\Users\YourName\Projects\`
|
||||
**Mac/Linux:** `/Users/YourName/Projects/` or `~/Projects/`
|
||||
|
||||
### Create the Folder
|
||||
|
||||
In Cursor terminal (**Ctrl+`** or **Cmd+`**):
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
mkdir C:\Projects
|
||||
cd C:\Projects
|
||||
|
||||
# Mac/Linux
|
||||
mkdir ~/Projects
|
||||
cd ~/Projects
|
||||
```
|
||||
|
||||
**✅ Checkpoint:** Projects folder created
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Clone Your Project Repository
|
||||
|
||||
### Get Your Repository URL
|
||||
|
||||
1. Go to your repository on GitHub
|
||||
2. Click the green **"Code"** button
|
||||
3. Make sure **"HTTPS"** is selected
|
||||
4. Click the **copy icon** (📋)
|
||||
|
||||
**Your URL looks like:** `https://github.com/your-username/your-project.git`
|
||||
|
||||
### Clone the Repository
|
||||
|
||||
In Cursor terminal:
|
||||
|
||||
```bash
|
||||
git clone [paste your URL here]
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```bash
|
||||
git clone https://github.com/john-designer/dog-walker-app.git
|
||||
```
|
||||
|
||||
**If Cursor prompts "Install Git?"** → Click **"Install"** and wait, then try again.
|
||||
|
||||
**✅ Checkpoint:** You see "Cloning into..." and then "done"
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Open Your Project in Cursor
|
||||
|
||||
1. In Cursor: **File** → **Open Folder**
|
||||
2. Navigate to your Projects folder
|
||||
3. Select your project folder (e.g., `dog-walker-app`)
|
||||
4. Click **"Select Folder"** or **"Open"**
|
||||
|
||||
**✅ Checkpoint:** You see your project name in the left sidebar with README.md
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Clone WDS Repository
|
||||
|
||||
**WDS lives separately from your project.**
|
||||
|
||||
In Cursor terminal (make sure you're in Projects folder):
|
||||
|
||||
```bash
|
||||
# Navigate back to Projects folder
|
||||
cd ~/Projects # Mac/Linux
|
||||
cd C:\Projects # Windows
|
||||
|
||||
# Clone WDS
|
||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
||||
```
|
||||
|
||||
**✅ Checkpoint:** WDS cloned successfully
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Add WDS to Your Workspace
|
||||
|
||||
1. In Cursor: **File** → **Add Folder to Workspace**
|
||||
2. Navigate to your Projects folder
|
||||
3. Select the `whiteport-design-studio` folder
|
||||
4. Click **"Add"**
|
||||
|
||||
**✅ Checkpoint:** You see both folders in your Cursor sidebar:
|
||||
- your-project
|
||||
- whiteport-design-studio
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Create Docs Folder Structure
|
||||
|
||||
**Navigate to YOUR project (not WDS):**
|
||||
|
||||
```bash
|
||||
# Change to your project
|
||||
cd ~/Projects/dog-walker-app # Mac/Linux (use YOUR project name!)
|
||||
cd C:\Projects\dog-walker-app # Windows (use YOUR project name!)
|
||||
```
|
||||
|
||||
**Create the 8-phase structure:**
|
||||
|
||||
```bash
|
||||
# Mac/Linux (works in most terminals)
|
||||
mkdir -p docs/1-project-brief
|
||||
mkdir -p docs/2-trigger-mapping
|
||||
mkdir -p docs/3-prd-platform
|
||||
mkdir -p docs/4-ux-design
|
||||
mkdir -p docs/5-design-system
|
||||
mkdir -p docs/6-design-deliveries
|
||||
mkdir -p docs/7-testing
|
||||
mkdir -p docs/8-ongoing-development
|
||||
```
|
||||
|
||||
**Windows alternative (if above doesn't work):**
|
||||
```bash
|
||||
mkdir docs
|
||||
cd docs
|
||||
mkdir 1-project-brief
|
||||
mkdir 2-trigger-mapping
|
||||
mkdir 3-prd-platform
|
||||
mkdir 4-ux-design
|
||||
mkdir 5-design-system
|
||||
mkdir 6-design-deliveries
|
||||
mkdir 7-testing
|
||||
mkdir 8-ongoing-development
|
||||
cd ..
|
||||
```
|
||||
|
||||
**✅ Checkpoint:** You see a `docs/` folder with 8 numbered subfolders in your project
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: What Lives Where
|
||||
|
||||
```
|
||||
Your Computer/
|
||||
└── Projects/
|
||||
├── your-project/ ← YOUR PROJECT
|
||||
│ ├── docs/ ← Your specifications
|
||||
│ │ ├── 1-project-brief/
|
||||
│ │ ├── 2-trigger-mapping/
|
||||
│ │ ├── 3-prd-platform/
|
||||
│ │ ├── 4-ux-design/
|
||||
│ │ ├── 5-design-system/
|
||||
│ │ ├── 6-design-deliveries/
|
||||
│ │ ├── 7-testing/
|
||||
│ │ └── 8-ongoing-development/
|
||||
│ ├── src/ ← Code (if single repo)
|
||||
│ └── README.md
|
||||
│
|
||||
└── whiteport-design-studio/ ← WDS METHODOLOGY
|
||||
└── src/modules/wds/
|
||||
├── agents/
|
||||
├── workflows/
|
||||
├── course/
|
||||
└── MIMIR-WDS-ORCHESTRATOR.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** "Git command not found"
|
||||
**Solution:** Let Cursor install Git when prompted, then try again
|
||||
|
||||
**Issue:** "Permission denied" when cloning
|
||||
**Solution:** Make sure you're signed into GitHub in Cursor
|
||||
|
||||
**Issue:** "Can't find MIMIR file"
|
||||
**Solution:** Make sure you added `whiteport-design-studio` folder to workspace
|
||||
|
||||
**Issue:** "mkdir: cannot create directory"
|
||||
**Solution:** Make sure you're in your project folder: `cd ~/Projects/your-project`
|
||||
|
||||
---
|
||||
|
||||
## What's Next?
|
||||
|
||||
Everything is set up! Now let's activate Mimir and begin your WDS journey.
|
||||
|
||||
**[Continue to Lesson 06: Initiate Mimir →](../lesson-06-initiate-mimir/tutorial.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
# Lesson 06: Initiate Mimir
|
||||
|
||||
**Activate your WDS guide and begin your journey**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Do
|
||||
|
||||
- Find the Mimir orchestrator file
|
||||
- Drag it to AI chat
|
||||
- Have your first conversation with Mimir
|
||||
- Begin guided WDS workflow
|
||||
|
||||
**Time:** 5 minutes
|
||||
|
||||
---
|
||||
|
||||
## What is Mimir?
|
||||
|
||||
**Mimir** is your WDS guide and orchestrator.
|
||||
|
||||
Think of Mimir as:
|
||||
- Your coach through WDS methodology
|
||||
- Your trainer for each workflow
|
||||
- Your psychologist when things feel overwhelming
|
||||
- Your strategist for project decisions
|
||||
|
||||
**Mimir's role:** Assess your needs, understand your skill level, and connect you with the right specialist agents (Freyja, Saga, Idunn) when appropriate.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Find the Mimir File
|
||||
|
||||
In Cursor sidebar:
|
||||
|
||||
1. Expand **`whiteport-design-studio`**
|
||||
2. Expand **`src`** → **`modules`** → **`wds`**
|
||||
3. Find **`MIMIR-WDS-ORCHESTRATOR.md`**
|
||||
|
||||
**✅ Checkpoint:** You can see the Mimir file
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Open AI Chat
|
||||
|
||||
In Cursor:
|
||||
|
||||
- **Windows/Linux:** Press **Ctrl+L**
|
||||
- **Mac:** Press **Cmd+L**
|
||||
- Or click the **chat icon** in the sidebar
|
||||
|
||||
**The AI chat panel will appear!**
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Drag Mimir to Chat
|
||||
|
||||
1. Click and hold **`MIMIR-WDS-ORCHESTRATOR.md`** in the sidebar
|
||||
2. Drag it into the AI chat input area
|
||||
3. Release
|
||||
|
||||
**You should see the file attached to your message!**
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Send Your First Message
|
||||
|
||||
**Type your first message:**
|
||||
|
||||
```
|
||||
Hello Mimir! I just completed the installation setup and I'm ready to start.
|
||||
```
|
||||
|
||||
**Press Enter or click Send**
|
||||
|
||||
---
|
||||
|
||||
## What Mimir Will Do
|
||||
|
||||
Mimir will:
|
||||
|
||||
1. **Welcome you warmly** 🌊
|
||||
2. **Assess your situation:**
|
||||
- Technical skill level (beginner → experienced)
|
||||
- Emotional state (excited, nervous, ready)
|
||||
- Familiarity with WDS
|
||||
3. **Check your environment:**
|
||||
- Is WDS repository present?
|
||||
- Is your project set up correctly?
|
||||
- Do you have the docs structure?
|
||||
4. **Understand your project:**
|
||||
- What are you building?
|
||||
- What phase are you in?
|
||||
- Do you need to start from Project Brief?
|
||||
5. **Guide your next steps:**
|
||||
- Route you to appropriate agent if needed
|
||||
- Suggest which workflow to start with
|
||||
- Offer training if you want to learn first
|
||||
|
||||
---
|
||||
|
||||
## Be Honest with Mimir
|
||||
|
||||
**Mimir adapts to YOU.**
|
||||
|
||||
If you're nervous → Mimir will be extra patient
|
||||
If you're experienced → Mimir will be concise
|
||||
If you're confused → Mimir will slow down
|
||||
|
||||
**There are no wrong answers!**
|
||||
|
||||
---
|
||||
|
||||
## Example First Conversation
|
||||
|
||||
**You:**
|
||||
> Hello Mimir! I just completed setup and I'm ready to start.
|
||||
|
||||
**Mimir:**
|
||||
> Welcome! 🌊 I'm Mimir, your guide through Whiteport Design Studio.
|
||||
>
|
||||
> I can see you've completed the installation - that's fantastic work!
|
||||
>
|
||||
> Let me understand your situation:
|
||||
> 1. How comfortable are you with design tools and AI assistants? (Complete beginner / Learning / Comfortable / Experienced)
|
||||
> 2. What project are you working on?
|
||||
> 3. How are you feeling about starting this journey?
|
||||
|
||||
**Just answer honestly!** Mimir will adapt to your needs.
|
||||
|
||||
---
|
||||
|
||||
## Alternative: Type Instead of Drag
|
||||
|
||||
**If dragging doesn't work:**
|
||||
|
||||
In the AI chat, type:
|
||||
|
||||
```
|
||||
@MIMIR-WDS-ORCHESTRATOR.md
|
||||
|
||||
Hello Mimir! I just completed the installation setup and I'm ready to start.
|
||||
```
|
||||
|
||||
This references the file and sends your message.
|
||||
|
||||
---
|
||||
|
||||
## What Happens Next?
|
||||
|
||||
**After your conversation with Mimir, you'll either:**
|
||||
|
||||
1. **Start WDS Training** - If you want to learn methodology first
|
||||
2. **Begin Project Brief** - If you're ready to dive into your project
|
||||
3. **Meet Specialist Agents** - Freyja (UX), Saga (Analyst), or Idunn (PM)
|
||||
|
||||
**Mimir will guide you to the right path based on your situation.**
|
||||
|
||||
---
|
||||
|
||||
## Whenever You Need Help
|
||||
|
||||
**Remember this simple command:**
|
||||
|
||||
```
|
||||
@wds-mimir [your question]
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
- `@wds-mimir I'm stuck on trigger mapping, can you help?`
|
||||
- `@wds-mimir Which agent should I work with for UX design?`
|
||||
- `@wds-mimir I feel overwhelmed, where should I start?`
|
||||
- `@wds-mimir Can you walk me through the WDS training?`
|
||||
|
||||
**No question is too small. Mimir is always here to guide you.**
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Issue:** Can't find MIMIR file
|
||||
**Solution:** Make sure you added `whiteport-design-studio` to workspace (Lesson 05, Step 5)
|
||||
|
||||
**Issue:** Drag doesn't work
|
||||
**Solution:** Use `@MIMIR-WDS-ORCHESTRATOR.md` instead
|
||||
|
||||
**Issue:** AI doesn't respond
|
||||
**Solution:** Make sure you're connected to internet, wait a moment, try again
|
||||
|
||||
**Issue:** Not sure what to say
|
||||
**Solution:** Just say "Hello! I'm new and ready to start" - Mimir will guide you from there
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Congratulations!
|
||||
|
||||
### You Did It!
|
||||
|
||||
You've completed the entire Module 02: Installation & Setup!
|
||||
|
||||
**What you accomplished:**
|
||||
- ✅ Created GitHub account
|
||||
- ✅ Set up project repository
|
||||
- ✅ Installed IDE (Cursor or VS Code)
|
||||
- ✅ Cloned your project
|
||||
- ✅ Added WDS to workspace
|
||||
- ✅ Created docs structure
|
||||
- ✅ Activated Mimir
|
||||
|
||||
**This is HUGE!** Many designers never get past this point. You're ready to design with WDS.
|
||||
|
||||
---
|
||||
|
||||
## Your Journey Continues
|
||||
|
||||
**Next steps (Mimir will guide you):**
|
||||
|
||||
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)** - If starting a new project
|
||||
- **[WDS Training Course](../../00-course-overview.md)** - If you want to learn methodology first
|
||||
- **Ask Mimir** - "What should I do next?"
|
||||
|
||||
---
|
||||
|
||||
## Remember
|
||||
|
||||
**Whenever in doubt:**
|
||||
|
||||
```
|
||||
@wds-mimir [your question]
|
||||
```
|
||||
|
||||
**Mimir believes in you. You can do this. Welcome to WDS.** 🌊
|
||||
|
||||
---
|
||||
|
||||
*Part of Module 02: Installation & Setup*
|
||||
*[← Back to Module Overview](../module-02-overview.md)*
|
||||
|
||||
|
|
@ -1,154 +1,85 @@
|
|||
# Module 02: Installation & Setup
|
||||
|
||||
**From zero to WDS-ready in one session - even if you've never used GitHub or an IDE before**
|
||||
**From zero to WDS-ready - complete beginner friendly**
|
||||
|
||||
---
|
||||
|
||||
## What You'll Learn
|
||||
## Overview
|
||||
|
||||
In this module, you'll:
|
||||
This module takes you from having nothing to being fully set up with WDS, even if you've never used GitHub or an IDE before.
|
||||
|
||||
1. **Create Your GitHub Account** - Set up your professional home for projects
|
||||
2. **Create Your Project Repository** - Decide on naming and structure
|
||||
3. **Install Your IDE** - Get Cursor or VS Code running
|
||||
4. **Clone Your Project** - Bring your repository to your computer
|
||||
5. **Install WDS** - Add the methodology to your workspace
|
||||
6. **Initiate with Mimir** - Drag the starter file and begin
|
||||
|
||||
**Time investment:** 45-60 minutes (first time)
|
||||
**Result:** Complete professional setup, ready to design
|
||||
|
||||
**Target audience:** Complete beginners welcome! No prior experience needed.
|
||||
**Time:** 45-60 minutes total
|
||||
**Difficulty:** Beginner
|
||||
**Prerequisites:** Computer + Internet + Email
|
||||
|
||||
---
|
||||
|
||||
## Why This Matters
|
||||
## Lessons
|
||||
|
||||
Before you can design with WDS, you need a solid foundation:
|
||||
### [Lesson 01: Create GitHub Account](lesson-01-github-account/tutorial.md)
|
||||
**5-10 minutes**
|
||||
|
||||
- **Proper installation** ensures everything works smoothly
|
||||
- **Understanding the structure** helps you navigate with confidence
|
||||
- **Project setup** creates the right folders and files
|
||||
- **Agent familiarity** prepares you for guided workflows
|
||||
|
||||
**This module removes all friction so you can focus on designing.**
|
||||
Sign up for GitHub, choose a professional username, verify your account.
|
||||
|
||||
---
|
||||
|
||||
## Module Contents
|
||||
### [Lesson 02: Create Repository](lesson-02-create-repository/tutorial.md)
|
||||
**10-15 minutes**
|
||||
|
||||
### Lesson 1: Create Your GitHub Account
|
||||
**Reading time:** 5 minutes
|
||||
|
||||
- Why GitHub for designers
|
||||
- Creating your account
|
||||
- Choosing a username
|
||||
- Setting up your profile
|
||||
|
||||
### Lesson 2: Create Your Project Repository
|
||||
**Reading time:** 10 minutes
|
||||
|
||||
- Three scenarios: New project, joining existing, or learning only
|
||||
- Repository naming conventions (determines structure!)
|
||||
- One repo vs. separate repos (specs + code)
|
||||
- Public vs. private repositories
|
||||
- Joining existing repositories: Request access and understand structure
|
||||
- Initial repository setup
|
||||
- README basics
|
||||
|
||||
### Lesson 3: Install Your IDE
|
||||
**Reading time:** 5 minutes
|
||||
|
||||
- Cursor vs. VS Code - which to choose
|
||||
- Download and installation
|
||||
- Basic IDE orientation
|
||||
- Essential settings for designers
|
||||
|
||||
### Lesson 4: Clone Your Project (Git Handled Automatically!)
|
||||
**Reading time:** 10 minutes
|
||||
|
||||
- Understanding "cloning"
|
||||
- The IDE handles Git installation for you
|
||||
- Visual alternative: GitHub Desktop
|
||||
- Clone your project repository
|
||||
- Add WDS to your workspace
|
||||
- Create docs folder structure
|
||||
|
||||
### Lesson 5: Initiate with Mimir
|
||||
**Reading time:** 5 minutes
|
||||
|
||||
- The Mimir orchestrator file
|
||||
- Drag-to-chat initialization
|
||||
- What Mimir will ask you
|
||||
- Your first guided session
|
||||
Create your project repository or join an existing one. Learn single vs separate repo structure.
|
||||
|
||||
---
|
||||
|
||||
## Tutorial: Complete Beginner Setup
|
||||
### [Lesson 03: Install IDE](lesson-03-install-ide/tutorial.md)
|
||||
**10 minutes**
|
||||
|
||||
**For hands-on learners who want step-by-step instructions:**
|
||||
Install Cursor or VS Code and do first-launch setup.
|
||||
|
||||
[→ Tutorial 02: Complete Beginner Setup](tutorial-02.md)
|
||||
---
|
||||
|
||||
**8 detailed steps** from GitHub account creation to Mimir activation, with screenshots-worthy instructions and platform-specific commands.
|
||||
### [Lesson 04: Git Setup](lesson-04-git-setup/tutorial.md)
|
||||
**5 minutes**
|
||||
|
||||
Let your IDE handle Git automatically or use GitHub Desktop.
|
||||
|
||||
---
|
||||
|
||||
### [Lesson 05: Clone & Add WDS](lesson-05-clone-and-wds/tutorial.md)
|
||||
**15-20 minutes**
|
||||
|
||||
Clone your repository, add WDS to workspace, create docs structure.
|
||||
|
||||
---
|
||||
|
||||
### [Lesson 06: Initiate Mimir](lesson-06-initiate-mimir/tutorial.md)
|
||||
**5 minutes**
|
||||
|
||||
Drag Mimir file to AI chat and begin your guided journey.
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
**Want to dive right in?**
|
||||
|
||||
Follow lessons in order: [Start with Lesson 01 →](lesson-01-github-account/tutorial.md)
|
||||
|
||||
---
|
||||
|
||||
## After This Module
|
||||
|
||||
Once you've completed Module 02:
|
||||
Once complete, you'll have:
|
||||
|
||||
- ✅ GitHub account created and repository set up
|
||||
- ✅ IDE installed (Cursor or VS Code)
|
||||
- ✅ Your project cloned to your computer
|
||||
- ✅ WDS added to your workspace
|
||||
- ✅ GitHub account and repository
|
||||
- ✅ IDE installed and configured
|
||||
- ✅ Project cloned to your computer
|
||||
- ✅ WDS integrated in workspace
|
||||
- ✅ Docs folder structure created
|
||||
- ✅ Mimir activated and ready to guide you
|
||||
- ✅ Mimir activated and ready
|
||||
|
||||
**Next:** [Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md)
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
**Absolute minimum to start this module:**
|
||||
|
||||
- ✅ A computer (Windows, Mac, or Linux)
|
||||
- ✅ Internet connection
|
||||
- ✅ Email address for GitHub account
|
||||
- ✅ Willingness to learn (we'll guide you through everything else!)
|
||||
|
||||
**You DON'T need:**
|
||||
- ❌ Prior GitHub experience
|
||||
- ❌ Command line knowledge
|
||||
- ❌ Technical background
|
||||
- ❌ Coding skills
|
||||
|
||||
**New to all of this?** Perfect! This module is designed for you.
|
||||
|
||||
---
|
||||
|
||||
## Learning Options
|
||||
|
||||
**🎧 Audio Learning:**
|
||||
Generate an audio podcast using NotebookLM ([see guide](../00-getting-started/00-getting-started-NOTEBOOKLM-PROMPT.md))
|
||||
|
||||
**📖 Reading:**
|
||||
Follow the lessons in order for comprehensive understanding
|
||||
|
||||
**⚡ Quick Start:**
|
||||
Jump straight to the tutorial for immediate hands-on experience
|
||||
|
||||
---
|
||||
|
||||
## Ready to Install?
|
||||
|
||||
**[Start with Lesson 1: Installing WDS →](lesson-01-installing-wds.md)**
|
||||
|
||||
Or jump to: **[Tutorial 02 →](tutorial-02.md)**
|
||||
|
||||
---
|
||||
|
||||
*Part of the WDS Course: From Designer to Linchpin*
|
||||
*[← Back to Course Overview](../00-course-overview.md)*
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue