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:
- 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
Goals
- [Primary goal - e.g., drive signups]
- [Secondary goal - e.g., build trust]
- [Tertiary goal - e.g., explain the product]
Requirements
- Fully responsive (mobile-first)
- Blazing fast performance
- Accessible (WCAG 2.1 AA)
- [Other requirements]
Sections
- Hero
- Trust Logos
- Features
- [etc.]
Key Insight: Think of AI as a new team member. You wouldn't tell them "build me a website" without context.
- 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.]
- 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
- 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)
// 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:
// Include Three.js or animation code
Components from Libraries
Primary Button
- Source: 21st.dev
- Style: [pill shaped, glow outline, etc.]
- Code:
// Component code
Background Effects
- Type: [Gradient, particles, grid, etc.]
- Source: [Library link]
- Code:
// Effect 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
- See: style-guide.md
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.
- Website: https://ui.shadcn.com
- Usage: Base components (buttons, inputs, cards, etc.)
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.
- Three.js Examples: https://threejs.org/examples/
- Usage: Hero 3D elements, interactive backgrounds
Sketchfab
Community 3D models and animations.
- Website: https://sketchfab.com
- Usage: Download 3D assets for your hero sections
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."