| name | premium-saas-design |
| description | Professional framework for building premium $5k+ SaaS websites with AI - the Define, Build, Review, Refine loop used by real product teams |
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.
# 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.]
3. General Vibe Mood Board
What: Visual inspiration for the overall site aesthetic.
Purpose: Answers "What should the whole site FEEL like when we land on it?"
# General Vibe
## Overall Aesthetic
- Theme: [Dark/Light/Mixed]
- Feel: [Modern, Professional, Playful, etc.]
- Color Direction: [Primary color family and why]
## Inspiration References
### Reference 1: [Site Name]
- URL: [link]
- What I Like:
- [Specific element 1]
- [Specific element 2]
- Screenshot: [embedded image]
### Reference 2: [Site Name]
- URL: [link]
- What I Like:
- [Specific element 1]
- [Specific element 2]
- Screenshot: [embedded image]
## Color Psychology
- Primary Color: [Color] - [Why this color for this audience]
Example: Turquoise/blue evokes professionalism and trust (important for security products)
## Typography Direction
- Headlines: [Font family, weight, style]
- Body: [Font family, size range]
Research Sources:
- Dribbble (search "[industry] SaaS landing page")
- Awwwards
- SaaS Landing Page examples
- Competitor sites
4. Section-Specific Mood Boards
What: Detailed specs for each section - the "Frankenstein" approach.
Purpose: Gives AI precise visual direction for every section.
# Hero Section Specs
## Layout Reference
- URL: [Reference site]
- Screenshot: [embedded]
- What to Copy:
- Text alignment: [left/center/right]
- Font hierarchy
- Button placement
## Navigation Bar
### Components
- Logo: [Position, size]
- Menu Links: [Style, hover effects]
- CTA Button: [Shape, color, glow effects]
### Code Reference (from component library)
```tsx
// Include actual component code from shadcn/21st.dev
Hero Content Area
Layout
- [Left/Right/Center aligned]
- [Split layout description]
3D Element (if applicable)
- Source: [Three.js / Sketchfab link]
- Position: [Where in layout]
- Animation: [Type of movement]
- Code:
Components from Libraries
Primary Button
- Source: 21st.dev
- Style: [pill shaped, glow outline, etc.]
- Code:
Background Effects
- Type: [Gradient, particles, grid, etc.]
- Source: [Library link]
- Code:
Animations
- Scroll Effects: [Parallax, fade-in, etc.]
- Hover States: [What elements animate]
- Entrance Animations: [Staggered, sequential, etc.]
**Critical**: Be VERY granular. This is where premium separates from generic.
---
### 5. Style Guide (Living Document)
**What**: Single source of truth for all design specs.
**Purpose**: Ensures consistency across the entire project.
```markdown
# Style Guide
## Design Philosophy
[Brief statement about the visual approach]
## Target Audience
[Who this design serves]
## Color Palette
### Primary
- Main: #[hex] - [Usage: CTAs, key highlights]
- Light: #[hex] - [Usage: hover states]
- Dark: #[hex] - [Usage: pressed states]
### Neutral
- Background: #[hex]
- Surface: #[hex]
- Border: #[hex]
- Text Primary: #[hex]
- Text Secondary: #[hex]
### Accent
- Success: #[hex]
- Warning: #[hex]
- Error: #[hex]
### Do's and Don'ts
DO: [Guidance]
DON'T: [Anti-patterns]
## Typography
### Font Families
- Headlines: [Font name], [fallbacks]
- Body: [Font name], [fallbacks]
- Monospace: [Font name] (for code)
### Scale
- Display: [size]px / [line-height]
- H1: [size]px / [line-height]
- H2: [size]px / [line-height]
- H3: [size]px / [line-height]
- Body: [size]px / [line-height]
- Small: [size]px / [line-height]
## Spacing System
- xs: [value]
- sm: [value]
- md: [value]
- lg: [value]
- xl: [value]
- 2xl: [value]
## Border Radius
- sm: [value]
- md: [value]
- lg: [value]
- full: 9999px
## Shadows
[Shadow definitions]
## Animation
- Duration: [fast/medium/slow values]
- Easing: [easing functions]
- Motion Preferences: Respect prefers-reduced-motion
## Component Patterns
[Common patterns used across the site]
Important: This is a LIVING document. AI should update it as learnings emerge.
6. Project Requirements Document (PRD)
What: Technical specification for the entire project.
Purpose: Tells AI exactly what tech to use and how.
# Project Requirements Document
## Project Overview
[Brief description]
## Tech Stack
- Framework: [Next.js / Remix / etc.]
- Styling: [Tailwind CSS / CSS Modules / etc.]
- UI Components: [shadcn/ui, Radix, etc.]
- Animation: [Framer Motion / GSAP / etc.]
- 3D: [Three.js / React Three Fiber]
- Icons: [Lucide / Heroicons / etc.]
## Dependencies
```json
{
"dependencies": {
// List all required packages
}
}
File Structure
src/
├── app/
│ └── page.tsx
├── components/
│ ├── ui/ # shadcn components
│ ├── sections/ # Page sections
│ └── 3d/ # Three.js components
├── lib/
│ └── utils.ts
└── styles/
└── globals.css
Design System
Page Sections
| Section | Spec File | Priority |
|---|
| Hero | hero-section.md | P0 |
| Features | features-section.md | P1 |
| [etc.] | [etc.] | [etc.] |
Responsiveness
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
Performance Requirements
- LCP: < 2.5s
- FID: < 100ms
- CLS: < 0.1
Accessibility
- WCAG 2.1 AA compliance
- Keyboard navigation
- Screen reader support
---
### 7. Tasks Document
**What**: Step-by-step implementation plan.
**Purpose**: Gives AI a clear execution path.
```markdown
# Implementation Tasks
## Phase 1: Project Setup
- [ ] Initialize Next.js project
- [ ] Install dependencies
- [ ] Configure Tailwind CSS
- [ ] Set up shadcn/ui
- [ ] Create folder structure
- [ ] Configure fonts
- [ ] Set up color variables
## Phase 2: Core Components
- [ ] Build navigation bar
- [ ] Create button variants
- [ ] Set up typography components
- [ ] Create layout components
## Phase 3: Section Building
- [ ] Build Hero section
- [ ] Build Trust Logos section
- [ ] Build Features section
- [ ] [Continue for each section]
## Phase 4: Polish
- [ ] Add animations
- [ ] Optimize images
- [ ] Add loading states
- [ ] Mobile responsiveness pass
- [ ] Accessibility audit
## Phase 5: Launch
- [ ] Performance optimization
- [ ] SEO metadata
- [ ] Final review
Component Resources
shadcn/ui
The foundational component library. Copy-paste components with full customization.
21st.dev
Premium components built on top of shadcn/ui.
- Website: https://21st.dev
- Usage: Advanced components with animations
- Key Feature: Each component includes:
- Preview
- Code to copy
- AI prompt for installation
Three.js / React Three Fiber
3D graphics in the browser.
Sketchfab
Community 3D models and animations.
Best Practices
1. Section Isolation
Start a new chat for each section change:
- Cleaner context (no pollution from other sections)
- Cheaper (fewer tokens consumed)
- More focused results
2. Commit Per Section
After each section is complete:
git add .
git commit -m "feat(landing): add [section-name] section"
This allows easy rollback if iterations go wrong.
3. Include Reference Images
Always paste screenshots in your prompts:
- AI can see exactly what you want
- Reduces ambiguity
- Faster convergence on the right design
4. Include Component Code
When specifying a component from 21st.dev or shadcn:
- Copy the actual code
- Include it in your section spec
- AI can implement it exactly
5. Auto-Update Style Guide
Create a rule file:
# .cursorrules or similar
When building a section and making design decisions that differ from
the style guide, automatically update the style guide to reflect the
new learnings.
6. Screenshot-to-Iteration
When requesting changes:
- Take a screenshot of the current state
- Paste it in the prompt
- Describe what to change
- Reference the original inspiration if needed
The $500 vs $5000 Difference
| Generic AI Output | Premium Framework Output |
|---|
| No context | Full context artifacts |
| Guessing what you want | Following precise specs |
| Inconsistent styling | Living style guide |
| Random components | Curated component library |
| No visual references | Mood boards + screenshots |
| Build everything at once | Section-by-section isolation |
| No iteration loop | Define → Build → Review → Refine |
Prompt Templates
Generate Style Guide
Based on my mood board and design preferences in [website-sections folder]
and in the [product-brief.md], create a style guide that includes:
- Color palette (with usage guidance)
- Typography scale
- Component styles
- Spacing system
- Animation guidelines
This will be our single source of truth for the entire project.
Do not duplicate content from the section specs.
Generate PRD
Based on my [product-brief.md], [style-guide.md], and all section specs
in [website-sections], create a Project Requirements Document that includes:
- Project overview
- Tech stack (extract from component code in specs)
- Dependencies (extract from component libraries used)
- Design system reference
- Page sections with file references
- File structure
- Responsiveness requirements
- Performance requirements
Generate Tasks
Based on the [style-guide.md] and [prd.md], create a tasks markdown file with:
- Phase 1: Project setup tasks
- Phase 2: Core component tasks
- Phase 3: Section building tasks (one per section)
- Phase 4: Polish tasks
- Phase 5: Launch tasks
Each task should be a checkbox item.
Reference the specific spec files for each section.
Build a Section
Build the [Section Name] section.
Reference files:
- Style guide: @style-guide.md
- Section spec: @[section-name]-section.md
- PRD: @prd.md
Follow the design specs exactly.
Use the components specified.
Match the reference images.
Iterate on a Section
[Paste screenshot of current state]
Changes needed:
1. [Specific change 1]
2. [Specific change 2]
Reference the original inspiration: [paste reference image]
Attribution
This framework is derived from the video "How I Build Premium $5k SaaS Websites with AI"
by BuilderSpace (December 2025), which documents a 10-year professional design workflow
adapted for AI-assisted development.
Source: https://www.youtube.com/watch?v=WqSf0noa4hk
"The prep work feels like work. You just want to start building. But that upfront context -
the brief, the mood boards, the style guide, the section specs - that's what separates
a $500 generic website from a $5,000 premium polished one."
