# Module 07: The Design Phase

**Time: 20 min | Agent: Freya | Phase: Design | Focus: Overview**

---

## Welcome to the Heart of WDS

You've completed Strategy. You have:
- A Product Brief (your North Star)
- Platform Requirements (your boundaries)
- A Trigger Map (user psychology mapped)

Now it's time to design.

---

## What This Phase Contains

8 modules covering UX design and visual design. This is where creative discipline becomes real.

| Module | What You'll Do | Focus |
|--------|---------------|-------|
| 08 | Outline Scenarios | UX |
| 09 | Conceptual Sketching | UX |
| 10 | Storyboarding | UX |
| 11 | Conceptual Specifications | UX |
| 12 | Functional Components | UX |
| 13 | Design System | Systems |
| 14 | Agentic Development | Build |
| 15 | Visual Design | Visual |
| 16 | Design Delivery | Delivery |

---

## The Flow

```
Outline → Sketch → Storyboard → Specify → Components → Visual → System → Deliver
```

It's not strictly linear. You'll loop back. That's the point.

---

## Meet Freya

Freya is your design partner. She:

- Thinks WITH you, not FOR you
- Asks "WHY?" before "WHAT?"
- Connects every decision to your Trigger Map
- Won't let you skip the hard thinking

She's not here to make pretty pictures. She's here to make **decisions visible**.

---

## Multiple Entry Points

Every step offers choices:

| Entry Point | How It Works |
|-------------|--------------|
| **I have a sketch** | You provide, AI refines |
| **I have inspiration** | You share, AI extracts patterns |
| **Dream it up** | AI creates options, you pick |
| **Let's discuss** | Conversation shapes the concept |

**Same step. Same output. Different starting points.**

---

## Creative Discipline in Action

> "Creative discipline enables creativity, not constrains it."

Each module is a discrete step with:
- Clear input (what you need to start)
- Clear output (what you'll produce)
- Clear purpose (why it matters)

This structure doesn't limit you. It focuses you.

---

## What You'll Create

By the end of this phase:

- **Scenario outlines** — The journeys you're designing
- **Conceptual sketches** — Visual explorations
- **Storyboards** — Sequenced flows
- **Detailed specifications** — Every decision documented
- **Component definitions** — Reusable patterns
- **Visual designs** — How it actually looks
- **Design system** — Your component library (if enabled)
- **Delivery package** — Ready for implementation

---

## Design System

Remember from setup:

| Mode | What Happens |
|------|--------------|
| **1. None** | Ad-hoc styling, no extraction |
| **2. Building** | System grows from your work |
| **3. Library** | Use external + your branding |
| **4. Existing** | Import from previous projects |

This affects how Freya works with you throughout the phase.

---

## The Principle

Every pixel has a reason.
Every interaction traces back to user psychology.
Every component connects to a business goal.

**Nothing is decoration. Everything is decision.**

---

## Lessons

### [Lesson 1: Entering Design Mode](lesson-01-entering-design.md)
The transition from strategy to creation

### [Lesson 2: Why Specifications Matter](lesson-02-why-specifications-matter.md)
The New Code: Specifications as the Foundation of Professional AI-Assisted Development

### [Lesson 3: Meet Freya](lesson-03-meet-freya.md)
Your UX design partner

---

## Ready?

**[Module 08: Outline Scenarios →](../module-08-outline-scenarios/module-08-outline-scenarios-overview.md)**

Let's start designing.

---

*Part of the WDS Course: From Designer to Linchpin*