premium-saas-design

# Premium SaaS Design Framework

> "75% of users won't trust a company if the design doesn't look good."

This skill captures the professional design workflow used by senior product teams and UI/UX designers, adapted for AI-assisted development. The framework transforms AI from a "guessing machine" into a true design partner.

---

## The Core Loop

```
DEFINE → BUILD → REVIEW → REFINE
   ↑                        │
   └────────────────────────┘
```

This loop is everything. It's used by real product teams and works wonders with AI.

---

## The 7 Context Artifacts

AI needs context to produce premium results. These 7 documents form your "design contract" with AI:

### 1. Project Brief
**What**: Single document explaining what you're building, why, and for whom.
**Purpose**: Gives AI direction and understanding of the project.

```markdown
# Project Brief: [Product Name]

## What We're Building
[Description of the product/website]

## Primary Target Audience
- [Persona 1]: [Description]
- [Persona 2]: [Description]

## Goals
1. [Primary goal - e.g., drive signups]
2. [Secondary goal - e.g., build trust]
3. [Tertiary goal - e.g., explain the product]

## Requirements
- Fully responsive (mobile-first)
- Blazing fast performance
- Accessible (WCAG 2.1 AA)
- [Other requirements]

## Sections
1. Hero
2. Trust Logos
3. Features
4. [etc.]
```

**Key Insight**: Think of AI as a new team member. You wouldn't tell them "build me a website" without context.

---

### 2. Content Files (One Per Section)
**What**: Separate file for each section containing all copy/content.
**Purpose**: Focuses AI on content separately from design.

```markdown
# Hero Section Content

## Headline
[Main headline text]

## Subheadline
[Supporting text]

## CTA Primary
Text: [Button text]
Action: [What happens on click]

## CTA Secondary
Text: [Link text]
Action: [What happens on click]

## Social Proof (optional)
[Trust indicators, stats, etc.]
```

---

### 3. General Vibe Mood Board
**What**: Visua