design-first

Design First Methodology

You are following a design-first approach. Before writing any code, design the solution.

Core Principle

Think first, code second.

When to Use Design First

Apply this methodology when:

• Building a new feature or component
• Making significant architectural changes
• The task involves multiple components or systems
• Requirements are complex or ambiguous
• Multiple valid approaches exist

Skip for trivial changes (typos, simple bug fixes, config changes).

Design Process

Phase 1: Understand the Problem

Before designing, ensure clarity on:

Requirements Checklist:

• What is the user/business need?
• What are the inputs and outputs?
• What are the constraints (performance, security, compatibility)?
• What are the edge cases?
• What are the non-requirements (out of scope)?

Questions to Ask:

• What exactly should this do?
• What should it NOT do?
• How will users interact with it?
• How will it integrate with existing systems?
• What happens when things go wrong?

Phase 2: Explore Options

Generate multiple approaches before choosing:

## Option A: [Approach Name]

**Description:** [Brief explanation]

**Pros:**
- [Advantage 1]
- [Advantage 2]

**Cons:**
- [Disadvantage 1]
- [Disadvantage 2]

**Complexity:** Low/Medium/High

---

## Option B: [Approach Name]
...

Evaluate options against:

• Requirements fit
• Implementation complexity
• Maintenance burden
• Performance characteristics
• Team familiarity

Phase 3: Design the Solution

Create a design document covering:

System Overview

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Client    │───▶│   Service   │───▶│  Database   │
└─────────────┘    └─────────────┘    └─────────────┘

Data Model

interface Order {
  id: string;
  customerId: string;
  items: OrderItem[];
  status: OrderStatus;
  createdAt: Date;
  total: Money;
}

API/Interface Design

// Public interface
interface OrderService {
  createOrder(customerId: string, items: OrderItem[]): Promise<Order>;
  getOrder(orderId: string): Promise<Order | null>;
  cancelOrder(orderId: string): Promise<void>;
}