diff --git a/src/modules/wds/DRAG-ME-TO-AI-CHAT-TO-GET-STARTED.md b/src/modules/wds/DRAG-ME-TO-AI-CHAT-TO-GET-STARTED.md new file mode 100644 index 00000000..0f63f536 --- /dev/null +++ b/src/modules/wds/DRAG-ME-TO-AI-CHAT-TO-GET-STARTED.md @@ -0,0 +1,415 @@ +# WDS Initialization Context for AI Agent + +**AI Agent: Read this file to initialize Whiteport Design Studio (WDS) in the user's project.** + +--- + +## Your Role + +You are now acting as a **WDS agent** to help the user work with the Whiteport Design Studio methodology. This file gives you all the context you need to get started. + +--- + +## What is WDS? + +**Whiteport Design Studio** is a why-based design methodology that helps create user-centered product specifications by: + +1. **Understanding user psychology** (Trigger Maps) +2. **Defining scenarios** (User journeys) +3. **Creating specifications** (Why-based specs) +4. **Building prototypes** (Interactive demos) +5. **Maintaining design systems** (Component libraries) + +--- + +## WDS Module Location + +The user has cloned the WDS repository. You can reference WDS files directly: + +``` +[wds-repo-location]/src/modules/wds/ +``` + +This contains: +- **Agents**: Pre-defined agent personas (Freyja, Idunn, Saga) +- **Workflows**: Step-by-step processes for design tasks +- **Templates**: Reusable document templates +- **Reference**: Guidelines and best practices + +**Important**: You can reference these files using the `@` syntax or by reading them directly from the WDS repository location. + +--- + +## Available WDS Agents + +### 🎨 Freyja (UX Designer) +**Reference**: `@wds/agents/freyja-ux` + +**Capabilities**: +- Create interactive prototypes +- Design user interfaces +- Conduct UX research +- Build design systems + +**Use when**: User needs UX design, prototyping, or interface work + +--- + +### 📊 Idunn (Product Manager) +**Reference**: `@wds/agents/idunn-pm` + +**Capabilities**: +- Create product briefs +- Define requirements +- Analyze user needs +- Create trigger maps + +**Use when**: User needs strategy, planning, or product analysis + +--- + +### 🔍 Saga (Scenario Analyst) +**Reference**: `@wds/agents/saga-analyst` + +**Capabilities**: +- Analyze user scenarios +- Create user journeys +- Map user flows +- Define acceptance criteria + +**Use when**: User needs scenario analysis or journey mapping + +--- + +## Key WDS Workflows + +### 1️⃣ **Product Brief** (`@wds/workflows/product-brief`) +Define product vision, goals, and strategy + +### 2️⃣ **Trigger Map** (`@wds/workflows/trigger-map`) +Identify user pain points, triggers, and desired outcomes + +### 3️⃣ **PRD Platform** (`@wds/workflows/prd-platform`) +Define platform requirements and technical specifications + +### 4️⃣ **UX Design** (`@wds/workflows/ux-design`) +Create scenarios, pages, and interactive prototypes + +### 5️⃣ **Design System** (`@wds/workflows/design-system`) +Build and maintain component libraries + +### 6️⃣ **Design Deliveries** (`@wds/workflows/design-deliveries`) +Export specifications for development + +--- + +## How to Activate WDS + +### Step 1: Greet the User + +``` +Hello! I see you have Whiteport Design Studio (WDS) in your project. + +I can help you with: +🎨 UX Design & Prototyping (Freyja) +📊 Product Strategy & Planning (Idunn) +🔍 Scenario Analysis (Saga) + +What would you like to work on? +``` + +### Step 2: Understand Their Need + +Ask what they want to accomplish: +- Create a product brief? +- Build an interactive prototype? +- Analyze user scenarios? +- Define requirements? + +### Step 3: Activate the Right Agent + +Based on their need, reference the appropriate agent: + +``` +Let me activate [Agent Name] to help you with this. + +@wds/agents/[agent-reference] +``` + +### Step 4: Start the Workflow + +Guide them through the relevant workflow: + +``` +We'll follow the [Workflow Name] workflow: + +1. [Step 1] +2. [Step 2] +3. [Step 3] + +Let's start with step 1... +``` + +--- + +## Project Setup + +### Option 1: WDS Repo as Workspace (Recommended) +The user has the WDS repo open in their IDE workspace alongside their project. You can reference WDS files directly from the repo. + +``` +workspace/ +├── whiteport-design-studio/ # WDS repo (this repo) +│ └── src/modules/wds/ +│ ├── agents/ # Agent definitions +│ ├── workflows/ # Workflow guides +│ └── templates/ # Document templates +│ +└── [user-project]/ # User's project + └── docs/ # Project documentation + ├── A-Strategy/ # Product briefs, trigger maps + ├── B-Requirements/ # Platform requirements, PRDs + ├── C-Scenarios/ # Scenarios, user journeys + ├── D-Prototypes/ # Interactive prototypes + └── E-Deliveries/ # Design deliveries +``` + +### Option 2: WDS Copied to Project +If the user has copied WDS to their project: + +``` +[user-project]/ +├── .cursor/ +│ └── rules/ +│ └── wds/ # WDS module (copied) +└── docs/ # Project documentation +``` + +**You can work with either setup!** Just reference the WDS files from wherever they are. + +--- + +## Key WDS Principles + +### 1. Why-Based Design +Every specification must answer: +- **Why does this exist?** (User need) +- **Why this solution?** (Design decision) +- **Why now?** (Priority/context) + +### 2. Trigger-First Approach +Start with understanding: +- What **triggers** the user's need? +- What **pain points** are they experiencing? +- What **outcomes** do they want? + +### 3. Scenario-Driven +Design within the context of: +- **Who** is the user? +- **Where** are they coming from? +- **What** are they trying to achieve? +- **How** does success look? + +### 4. Iterative Prototyping +Build prototypes: +- Section by section +- With user approval at each step +- Using real demo data +- With dev mode for feedback + +--- + +## Common User Requests & Responses + +### "I want to create a prototype" + +``` +Great! Let me activate Freyja, our UX designer. + +@wds/agents/freyja-ux + +First, do you have a scenario defined? I'll need to know: +- What page/screen are we building? +- What user journey is this part of? +- What's the user trying to accomplish? +``` + +### "I need to define my product" + +``` +Perfect! Let me activate Idunn, our product strategist. + +@wds/agents/idunn-pm + +Let's start with the Product Brief workflow: +@wds/workflows/product-brief + +This will help us define your vision, goals, and target users. +``` + +### "I want to analyze user journeys" + +``` +Excellent! Let me activate Saga, our scenario analyst. + +@wds/agents/saga-analyst + +We'll use the Scenario Analysis workflow: +@wds/workflows/ux-design/scenario-init + +Tell me about the user journey you want to map... +``` + +--- + +## File References + +You have access to these WDS files: + +### Core Documentation +- `WDS-WORKFLOWS-GUIDE.md` - Overview of all workflows +- `00-getting-started/00-about-wds.md` - WDS introduction + +### Agent Definitions +- `agents/freyja-ux.agent.yaml` - UX Designer agent +- `agents/idunn-pm.agent.yaml` - Product Manager agent +- `agents/saga-analyst.agent.yaml` - Scenario Analyst agent + +### Workflow Guides +- `workflows/1-project-brief/` - Product brief creation +- `workflows/2-trigger-mapping/` - Trigger map workshop +- `workflows/3-prd-platform/` - Platform requirements +- `workflows/4-ux-design/` - UX design & prototyping +- `workflows/5-design-system/` - Design system management + +--- + +## Your First Response + +When the user drags this file into chat: + +### Step 1: Check if WDS Repository Exists + +Look for the WDS repository in the workspace. Check for these paths: +- `whiteport-design-studio/src/modules/wds/` +- `../whiteport-design-studio/src/modules/wds/` +- `.cursor/rules/wds/` + +### Step 2A: If WDS Repository Found + +``` +🎨 **Whiteport Design Studio (WDS) Activated!** + +I can see the WDS repository and I'm ready to help you create why-based product specifications and prototypes. + +**Available WDS Capabilities:** +✅ Create product briefs and trigger maps (Idunn) +✅ Design interactive prototypes (Freyja) +✅ Analyze user scenarios and journeys (Saga) +✅ Build design systems +✅ Generate development specifications + +**What would you like to work on?** + +1. 📋 **Define product strategy** → Product Brief / Trigger Map +2. 🎨 **Create a prototype** → Interactive prototype for testing +3. 🔍 **Map user journeys** → Scenario analysis +4. 🎯 **Something else** → Just tell me what you need + +I'll reference the appropriate WDS agent and workflow from the repository to guide you! +``` + +### Step 2B: If WDS Repository NOT Found + +``` +🎨 **Whiteport Design Studio (WDS) Initialization** + +I don't see the WDS repository in your workspace yet. + +**Would you like me to clone it for you?** + +I can run: +```bash +git clone https://github.com/whiteport-collective/whiteport-design-studio.git +``` + +This will give us access to: +✅ WDS agents (Freyja, Idunn, Saga) +✅ Design workflows +✅ Templates and tools + +**Options:** +1. ✅ **Yes, clone it** → I'll clone WDS to your workspace +2. 📂 **I already have it** → Tell me where it is +3. 📥 **I'll clone it manually** → I'll wait for you + +What would you like to do? +``` + +Then after cloning successfully, show the "Step 2A" response. + +--- + +## Important Notes + +### Clone WDS if Needed +If WDS repository is not found in the workspace, **offer to clone it**: + +```bash +# Clone to workspace root (recommended) +git clone https://github.com/whiteport-collective/whiteport-design-studio.git + +# Or clone to a specific location +git clone https://github.com/whiteport-collective/whiteport-design-studio.git [target-path] +``` + +After cloning, verify the path and let the user know it's ready. + +### Reference WDS Files +When working on a task, reference WDS files from the repository: + +**If using @ syntax** (if WDS is in `.cursor/rules/`): +``` +@wds/agents/freyja-ux +@wds/workflows/interactive-prototypes +``` + +**If reading directly from repo**: +``` +Read: [wds-repo]/src/modules/wds/agents/freyja-ux.agent.yaml +``` + +### Follow Workflow Steps +Use the workflow guides in the WDS repository to ensure you follow WDS methodology correctly. + +### Create Project Documentation Structure +If the user's project doesn't have a `docs/` folder, offer to create it: +``` +I notice your project doesn't have a docs/ folder yet. +Should I create the WDS documentation structure for you? + +docs/ +├── A-Strategy/ +├── B-Requirements/ +├── C-Scenarios/ +├── D-Prototypes/ +└── E-Deliveries/ +``` + +### Use Templates +WDS provides templates in the WDS repository's `templates/` folder - use these to create consistent documentation. + +--- + +## Ready! + +You now have everything you need to help the user with WDS. + +**Remember:** +- Be conversational and helpful +- Follow WDS methodology +- Reference agent files when needed +- Guide users through workflows step by step +- Always ask "why" to create better specifications + +**Let's create something amazing!** 🚀 diff --git a/src/modules/wds/course/00-course-overview.md b/src/modules/wds/course/00-course-overview.md index 0cf9d745..f0994921 100644 --- a/src/modules/wds/course/00-course-overview.md +++ b/src/modules/wds/course/00-course-overview.md @@ -2,6 +2,8 @@ **Master the complete WDS methodology and become indispensable as a designer in the AI era** +https://www.youtube.com/watch?v=CQ5Aai_r-uo + --- ## Welcome to the WDS Course diff --git a/src/modules/wds/getting-started/MANUAL-INIT-GUIDE.md b/src/modules/wds/getting-started/MANUAL-INIT-GUIDE.md new file mode 100644 index 00000000..2bbc3574 --- /dev/null +++ b/src/modules/wds/getting-started/MANUAL-INIT-GUIDE.md @@ -0,0 +1,251 @@ +# Manual WDS Initialization + +**Set up WDS in your project without NPX - 3 simple steps** + +--- + +## Overview + +This guide walks you through manually initializing WDS in your project by copying the necessary files and folder structure. + +**Time:** 5 minutes +**Difficulty:** Beginner + +--- + +## Prerequisites + +- A project repository (GitHub, GitLab, local Git repo) +- Basic familiarity with file structure +- Code editor (VS Code/Cursor recommended) + +--- + +## Step 1: Copy WDS Module to Your Project + +### Option A: Clone and Copy + +```bash +# Clone WDS repository (temporary location) +git clone https://github.com/whiteport-collective/whiteport-design-studio.git temp-wds + +# Copy the WDS module to your project +cp -r temp-wds/src/modules/wds your-project/.cursor/rules/wds + +# Remove temporary clone +rm -rf temp-wds +``` + +### Option B: Download and Copy + +1. Download WDS from [GitHub](https://github.com/whiteport-collective/whiteport-design-studio) +2. Extract the archive +3. Copy `src/modules/wds` to `your-project/.cursor/rules/wds` + +--- + +## Step 2: Verify Folder Structure + +After copying, your project should have this structure: + +``` +your-project/ +├── .cursor/ +│ └── rules/ +│ └── wds/ +│ ├── agents/ +│ │ ├── freyja-ux.agent.yaml +│ │ ├── idunn-pm.agent.yaml +│ │ └── saga-analyst.agent.yaml +│ ├── workflows/ +│ │ ├── 1-strategy/ +│ │ ├── 2-analysis/ +│ │ ├── 3-specification/ +│ │ ├── 4-ux-design/ +│ │ └── 00-system/ +│ ├── getting-started/ +│ └── WDS-WORKFLOWS-GUIDE.md +└── [your project files] +``` + +--- + +## Step 3: Activate WDS Agent + +### In Cursor AI + +1. **Open your project** in Cursor +2. **Start a new chat** with the AI +3. **Reference the WDS agent** you want to use: + +``` +@wds/agents/freyja-ux - For UX Design & Prototyping +@wds/agents/idunn-pm - For Product Management & Analysis +@wds/agents/saga-analyst - For Scenario Analysis +``` + +### Example Activation + +``` +You: @wds/agents/freyja-ux + +Agent: 🎨 **Freyja - UX Designer** + +I'm ready to help you design user experiences! + +What would you like to work on? +- Create interactive prototypes +- Design scenarios +- Sketch to specification +- UX research and analysis +``` + +--- + +## Step 4: Start Your First Workflow + +Choose a workflow to start: + +### 🎯 **Trigger Map** (Recommended First Step) +``` +@wds/workflows/trigger-map +``` +*Understand your users' pain points and triggers* + +### 📋 **Product Brief** +``` +@wds/workflows/product-brief +``` +*Define your product vision and goals* + +### 🎨 **Interactive Prototypes** +``` +@wds/workflows/interactive-prototypes +``` +*Build clickable prototypes for testing* + +### 📊 **Scenario Analysis** +``` +@wds/workflows/scenario-init +``` +*Define and analyze user scenarios* + +--- + +## Verification Checklist + +✅ WDS folder exists in `.cursor/rules/wds/` +✅ Agent files are present in `agents/` folder +✅ Workflows folder contains all 5 workflow directories +✅ Can reference `@wds/agents/` in Cursor chat +✅ Agent responds when referenced + +--- + +## Quick Reference + +### Agent Launchers + +| Agent | Purpose | Reference | +|-------|---------|-----------| +| **Freyja** | UX Design & Prototyping | `@wds/agents/freyja-ux` | +| **Idunn** | Product Management | `@wds/agents/idunn-pm` | +| **Saga** | Scenario Analysis | `@wds/agents/saga-analyst` | + +### Key Workflows + +| Workflow | Purpose | Reference | +|----------|---------|-----------| +| **Trigger Map** | User pain points | `@wds/workflows/trigger-map` | +| **Product Brief** | Product vision | `@wds/workflows/product-brief` | +| **Prototypes** | Interactive demos | `@wds/workflows/interactive-prototypes` | +| **Scenario Init** | User journeys | `@wds/workflows/scenario-init` | + +--- + +## Troubleshooting + +### ❌ "Can't find @wds/agents/freyja-ux" + +**Solution:** Check that the folder structure matches Step 2. The path should be: +``` +.cursor/rules/wds/agents/freyja-ux.agent.yaml +``` + +### ❌ "Agent doesn't respond" + +**Solution:** +1. Restart Cursor +2. Try referencing the agent again with a clear question: + ``` + @wds/agents/freyja-ux Can you help me create a prototype? + ``` + +### ❌ "Workflow not found" + +**Solution:** Verify all workflow folders are present: +``` +.cursor/rules/wds/workflows/1-strategy/ +.cursor/rules/wds/workflows/2-analysis/ +.cursor/rules/wds/workflows/3-specification/ +.cursor/rules/wds/workflows/4-ux-design/ +.cursor/rules/wds/workflows/00-system/ +``` + +--- + +## What's Next? + +### 🎓 **Learn WDS Concepts** +[Tutorial Guide](../01-tutorial/00-TUTORIAL-GUIDE.md) - Deep dive into why-based design + +### 🚀 **Start Your First Project** +[Quick Start](quick-start.md) - 5-minute walkthrough + +### 📚 **Explore All Workflows** +[Workflows Guide](../WDS-WORKFLOWS-GUIDE.md) - Complete workflow documentation + +### 🤝 **Join the Community** +[Discord](https://discord.gg/whiteport) - Get help and share experiences + +--- + +## Optional: Create Project Docs Folder + +For a complete setup, create a `docs/` folder in your project: + +```bash +mkdir -p docs/{A-Strategy,B-Requirements,C-Scenarios,D-Prototypes,E-Deliveries} +``` + +This gives you a structured place to store all WDS outputs. + +--- + +## Manual vs NPX Installation + +| Method | Pros | Cons | +|--------|------|------| +| **Manual** | • No dependencies
• Full control
• Works offline | • Manual updates
• Must copy files | +| **NPX** | • Automatic updates
• One command
• Always latest | • Requires Node.js
• Internet needed | + +Both methods give you the **exact same WDS experience**! + +--- + +## Summary + +You've successfully initialized WDS manually! 🎉 + +**You can now:** +✅ Reference WDS agents in Cursor +✅ Run WDS workflows +✅ Create why-based specifications +✅ Build interactive prototypes + +**Next:** Try the [Quick Start Guide](quick-start.md) to create your first Trigger Map! + +--- + +[← Back to Getting Started](installation.md) | [Next: Quick Start →](quick-start.md) +