# Design First

Guides the creation of technical design documents before writing code, producing...

- Repository: https://github.com/rohitg00/skillkit (1568 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-06-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/skillkit --skill design-first -g -a claude-code -y`
Codex: `npx skills add rohitg00/skillkit --skill design-first -g -a codex -y`
Cursor: `npx skills add rohitg00/skillkit --skill design-first -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/skillkit --skill design-first -g -a gemini-cli -y`

## Description

Guides the creation of technical design documents before writing code, producing architecture diagrams, data models, API interface definitions, implementation plans, and multi-option trade-off analyses. Use when the user asks to plan a feature, architect a system, design an API, explore implementation approaches, or requests a technical design or spec before coding, especially for complex features involving multiple components, ambiguous requirements, or significant architectural changes.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

```markdown
## 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
```typescript
interface Order {
  id: string;
  customerId: string;
  items: OrderItem[];
  status: OrderStatus;
  createdAt: Date;
  total: Money;
}
```

The rest: https://github.com/rohitg00/skillkit/blob/HEAD/packages/core/src/methodology/packs/planning/design-first/SKILL.md