# Claude Design System 🎨

> Building an app without a design system is like trying to cook a five-star meal by throwing random ingredients together and hoping something pops out the other side.

**The brutal truth:** Professional designs are make-or-break for user retention. Amateur UIs kill even great products.

This toolkit transforms your random design attempts into **systematic professional UIs** using proven patterns from apps that actually work.

## The Problem Most Developers Face

❌ **Your UIs look amateur** despite solid code
❌ **Users don't stick** because the design feels unprofessional
❌ **You copy random designs** without understanding why they work
❌ **No design system** leads to inconsistent, confusing interfaces

## Complete 4-Step Workflow

### Step 1: Setup Your Project
```bash
npm install claude-design-system
npx claude-design-system
```

This creates:
- `/inspiration` folder for your reference images
- `/generated` folder for AI-created files
- `/.claude/commands` with all design commands
- `DESIGN-SYSTEM.md` with instructions

### Step 2: Mine Inspiration (Like Pros Do)
Add 5-10 screenshots from successful apps to `/inspiration` folder:
- Focus on **feeling** over features (Airbnb's warmth, Stripe's trust)
- Mix different verticals for unique combinations (social + productivity + finance)
- Group similar apps: `airbnb-1.png`, `airbnb-2.png`, `notion-1.png`

### Step 3: Extract Design Psychology
```bash
/extract-it "I'm building a fitness app for busy professionals. I want users to feel motivated and organized. I like Airbnb's warm welcoming feeling and Notion's clean organized interface."
```

**What it does:** AI analyzes your images and creates `/generated/competitor-analysis.md` with:
- 🎨 Color palettes from each app group
- 📝 Typography systems and why they work
- 🔲 Component patterns and user psychology
- 🧠 Design principles wrapped in `<pondering>` tags

### Step 4A: Expand the Analysis (Optional)
```bash
/expand-it
```

**When to use:** You want deeper understanding of design philosophy
**What it does:** Reads competitor analysis and adds:
- **Philosophy sections** - Core design beliefs and emotional targets
- **How To Leverage** - Actionable implementation guidance
- **Appends to** `/generated/competitor-analysis.md` (doesn't create new file)

### Step 4B: Merge with Your App (Recommended)
```bash
/merge-it "We're building a social fitness app for Gen Z users who want to stay motivated through community challenges"
```

**When to use:** You want a unified design system adapted for your specific app
**What it does:**
- Combines insights from competitor analysis
- Adapts colors, typography, components for YOUR app concept
- Creates `/generated/styles.md` - your custom style guide

### Step 5: Generate UI Components
```bash
/design-it "onboarding welcome screen"
/design-it "empty state when user has no workouts"
/design-it "upgrade paywall with social proof"
```

**What you get:** 3 professional variations of each screen:
- ✅ Production-ready React + Tailwind components
- ✅ Following your established design system
- ✅ Multiple states (loading, error, success)
- ✅ Accessibility and mobile-first design

## Why This System Works

Instead of **randomly copying designs**, you're:

1. **Borrowing patterns** from apps users already love
2. **Understanding psychology** of why certain designs work
3. **Adapting systematically** for your specific users and app
4. **Generating consistently** across all your screens

## Command Reference

| Command | When To Use | What It Creates |
|---------|-------------|----------------|
| `/extract-it "app description"` | After adding inspiration images | `/generated/competitor-analysis.md` |
| `/expand-it` | Want deeper design philosophy | Appends to `/generated/competitor-analysis.md` |
| `/merge-it "specific app concept"` | Ready to create unified system | `/generated/styles.md` |
| `/design-it "screen description"` | Need actual UI components | React components in `/generated/screens/` |

## Typical Workflows

**Quick Start (Minimum):**
1. Add images → `/extract-it` → `/design-it`

**Professional (Recommended):**
1. Add images → `/extract-it` → `/merge-it` → `/design-it`

**Deep Understanding:**
1. Add images → `/extract-it` → `/expand-it` → `/merge-it` → `/design-it`

## Example: Real Results

**Before:** Generic login screen that users bounce from
**After:** 3 professional variations using patterns from Airbnb (trust) + Stripe (simplicity)

**Before:** Confusing empty states that leave users stuck
**After:** Inspiring empty states that guide users to their next action

**Before:** Inconsistent components across your app
**After:** Cohesive design system that feels professionally crafted

## Perfect For

✅ **Developers** who code well but design poorly
✅ **Solo founders** building MVPs without design resources
✅ **Teams** who need consistent UI patterns fast
✅ **Anyone** who wants users to actually stick around

## The Bottom Line

Your product deserves professional design. Users judge quality in seconds, not minutes.

**Stop hoping random design attempts work. Start using proven patterns systematically.**

---

**Ready to build UIs that make users stick?**

`npm install claude-design-system` 🚀