premium-saas-design

Premium SaaS Design Framework

In Stanford's large 2002 web credibility study (B.J. Fogg and colleagues), a site's visual design was the factor people mentioned most often when they judged whether to trust it.

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.

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

# 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.]