Back to Details

premium-saas-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Premium SaaS Design Framework

高端SaaS网站设计框架

"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.
「如果设计看起来不够专业，75%的用户不会信任这家公司。」
本技能整合了资深产品团队与UI/UX设计师采用的专业设计工作流，并适配了AI辅助开发场景。该框架将AI从“猜需求的工具”转变为真正的设计合作伙伴。

The Core Loop

核心工作循环

DEFINE → BUILD → REVIEW → REFINE
   ↑                        │
   └────────────────────────┘
This loop is everything. It's used by real product teams and works wonders with AI.
DEFINE → BUILD → REVIEW → REFINE
   ↑                        │
   └────────────────────────┘
这个循环是核心所在，真实产品团队正在使用它，结合AI能发挥奇效。

The 7 Context Artifacts

7项上下文工件

AI needs context to produce premium results. These 7 documents form your "design contract" with AI:
AI需要足够的上下文才能生成高质量的结果。这7份文档构成了你与AI之间的“设计契约”：

1. Project Brief

1. 项目简报

What: Single document explaining what you're building, why, and for whom. Purpose: Gives AI direction and understanding of the project.
markdown
undefined
内容：一份说明你要构建什么、为什么构建以及为谁构建的文档。 目的：为AI提供项目方向与理解基础。
markdown
undefined

Project Brief: [Product Name]

Project Brief: [Product Name]

What We're Building

What We're Building

[Description of the product/website]
[Description of the product/website]

Primary Target Audience

Primary Target Audience

Goals

Goals

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

Requirements

Requirements

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

Sections

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.

---
  1. Hero
  2. Trust Logos
  3. Features
  4. [etc.]

**核心洞察**：把AI当作新加入的团队成员，你不会在不提供任何上下文的情况下就让他们“给我做个网站”。

---

2. Content Files (One Per Section)

2. 板块内容文件（每个板块一份）

What: Separate file for each section containing all copy/content. Purpose: Focuses AI on content separately from design.
markdown
undefined
内容：每个板块单独的文件，包含所有文案与内容。 目的：让AI专注于内容，与设计分离处理。
markdown
undefined

Hero Section Content

Hero Section Content

Headline

Headline

[Main headline text]
[Main headline text]

Subheadline

Subheadline

[Supporting text]
[Supporting text]

CTA Primary

CTA Primary

Text: [Button text] Action: [What happens on click]
Text: [Button text] Action: [What happens on click]

CTA Secondary

CTA Secondary

Text: [Link text] Action: [What happens on click]
Text: [Link text] Action: [What happens on click]

Social Proof (optional)

Social Proof (optional)

[Trust indicators, stats, etc.]

---
[Trust indicators, stats, etc.]

---

3. General Vibe Mood Board

3. 全局风格情绪板

What: Visual inspiration for the overall site aesthetic. Purpose: Answers "What should the whole site FEEL like when we land on it?"
markdown
undefined
内容：网站整体视觉风格的灵感参考。 目的：回答“用户进入网站后，整体感受应该是什么样的？”
markdown
undefined

General Vibe

General Vibe

Overall Aesthetic

Overall Aesthetic

  • Theme: [Dark/Light/Mixed]
  • Feel: [Modern, Professional, Playful, etc.]
  • Color Direction: [Primary color family and why]
  • Theme: [Dark/Light/Mixed]
  • Feel: [Modern, Professional, Playful, etc.]
  • Color Direction: [Primary color family and why]

Inspiration References

Inspiration References

Reference 1: [Site Name]

Reference 1: [Site Name]

  • URL: [link]
  • What I Like:
    • [Specific element 1]
    • [Specific element 2]
  • Screenshot: [embedded image]
  • URL: [link]
  • What I Like:
    • [Specific element 1]
    • [Specific element 2]
  • Screenshot: [embedded image]

Reference 2: [Site Name]

Reference 2: [Site Name]

  • URL: [link]
  • What I Like:
    • [Specific element 1]
    • [Specific element 2]
  • Screenshot: [embedded image]
  • URL: [link]
  • What I Like:
    • [Specific element 1]
    • [Specific element 2]
  • Screenshot: [embedded image]

Color Psychology

Color Psychology

  • Primary Color: [Color] - [Why this color for this audience] Example: Turquoise/blue evokes professionalism and trust (important for security products)
  • Primary Color: [Color] - [Why this color for this audience] Example: Turquoise/blue evokes professionalism and trust (important for security products)

Typography Direction

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

---
  • Headlines: [Font family, weight, style]
  • Body: [Font family, size range]

**调研来源**:
- Dribbble（搜索“[industry] SaaS landing page”）
- Awwwards
- SaaS落地页示例
- 竞品网站

---

4. Section-Specific Mood Boards

4. 板块专属细节参考板

What: Detailed specs for each section - the "Frankenstein" approach. Purpose: Gives AI precise visual direction for every section.
markdown
undefined
内容：每个板块的详细规格——“拼接式”设计方法。 目的：为AI提供每个板块的精准视觉指导。
markdown
undefined

Hero Section Specs

Hero Section Specs

Layout Reference

Layout Reference

  • URL: [Reference site]
  • Screenshot: [embedded]
  • What to Copy:
    • Text alignment: [left/center/right]
    • Font hierarchy
    • Button placement
  • URL: [Reference site]
  • Screenshot: [embedded]
  • What to Copy:
    • Text alignment: [left/center/right]
    • Font hierarchy
    • Button placement

Navigation Bar

Navigation Bar

Components

Components

  • Logo: [Position, size]
  • Menu Links: [Style, hover effects]
  • CTA Button: [Shape, color, glow effects]
  • Logo: [Position, size]
  • Menu Links: [Style, hover effects]
  • CTA Button: [Shape, color, glow effects]

Code Reference (from component library)

Code Reference (from component library)

tsx
// Include actual component code from shadcn/21st.dev
tsx
// Include actual component code from shadcn/21st.dev

Hero Content Area

Hero Content Area

Layout

Layout

  • [Left/Right/Center aligned]
  • [Split layout description]
  • [Left/Right/Center aligned]
  • [Split layout description]

3D Element (if applicable)

3D Element (if applicable)

  • Source: [Three.js / Sketchfab link]
  • Position: [Where in layout]
  • Animation: [Type of movement]
  • Code:
tsx
// Include Three.js or animation code
  • Source: [Three.js / Sketchfab link]
  • Position: [Where in layout]
  • Animation: [Type of movement]
  • Code:
tsx
// Include Three.js or animation code

Components from Libraries

Components from Libraries

Primary Button

Primary Button

  • Source: 21st.dev
  • Style: [pill shaped, glow outline, etc.]
  • Code:
tsx
// Component code
  • Source: 21st.dev
  • Style: [pill shaped, glow outline, etc.]
  • Code:
tsx
// Component code

Background Effects

Background Effects

  • Type: [Gradient, particles, grid, etc.]
  • Source: [Library link]
  • Code:
tsx
// Effect code
  • Type: [Gradient, particles, grid, etc.]
  • Source: [Library link]
  • Code:
tsx
// Effect code

Animations

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.

---
  • Scroll Effects: [Parallax, fade-in, etc.]
  • Hover States: [What elements animate]
  • Entrance Animations: [Staggered, sequential, etc.]

**关键提示**：描述要尽可能细致，这是普通网站与高端网站的核心区别。

---

5. Style Guide (Living Document)

5. 动态设计指南文档

What: Single source of truth for all design specs. Purpose: Ensures consistency across the entire project.
markdown
undefined
内容：所有设计规格的唯一可信来源。 目的：确保整个项目的设计一致性。
markdown
undefined

Style Guide

Style Guide

Design Philosophy

Design Philosophy

[Brief statement about the visual approach]
[Brief statement about the visual approach]

Target Audience

Target Audience

[Who this design serves]
[Who this design serves]

Color Palette

Color Palette

Primary

Primary

  • Main: #[hex] - [Usage: CTAs, key highlights]
  • Light: #[hex] - [Usage: hover states]
  • Dark: #[hex] - [Usage: pressed states]
  • Main: #[hex] - [Usage: CTAs, key highlights]
  • Light: #[hex] - [Usage: hover states]
  • Dark: #[hex] - [Usage: pressed states]

Neutral

Neutral

  • Background: #[hex]
  • Surface: #[hex]
  • Border: #[hex]
  • Text Primary: #[hex]
  • Text Secondary: #[hex]
  • Background: #[hex]
  • Surface: #[hex]
  • Border: #[hex]
  • Text Primary: #[hex]
  • Text Secondary: #[hex]

Accent

Accent

  • Success: #[hex]
  • Warning: #[hex]
  • Error: #[hex]
  • Success: #[hex]
  • Warning: #[hex]
  • Error: #[hex]

Do's and Don'ts

Do's and Don'ts

DO: [Guidance] DON'T: [Anti-patterns]
DO: [Guidance] DON'T: [Anti-patterns]

Typography

Typography

Font Families

Font Families

  • Headlines: [Font name], [fallbacks]
  • Body: [Font name], [fallbacks]
  • Monospace: [Font name] (for code)
  • Headlines: [Font name], [fallbacks]
  • Body: [Font name], [fallbacks]
  • Monospace: [Font name] (for code)

Scale

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]
  • 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

Spacing System

  • xs: [value]
  • sm: [value]
  • md: [value]
  • lg: [value]
  • xl: [value]
  • 2xl: [value]
  • xs: [value]
  • sm: [value]
  • md: [value]
  • lg: [value]
  • xl: [value]
  • 2xl: [value]

Border Radius

Border Radius

  • sm: [value]
  • md: [value]
  • lg: [value]
  • full: 9999px
  • sm: [value]
  • md: [value]
  • lg: [value]
  • full: 9999px

Shadows

Shadows

[Shadow definitions]
[Shadow definitions]

Animation

Animation

  • Duration: [fast/medium/slow values]
  • Easing: [easing functions]
  • Motion Preferences: Respect prefers-reduced-motion
  • Duration: [fast/medium/slow values]
  • Easing: [easing functions]
  • Motion Preferences: Respect prefers-reduced-motion

Component Patterns

Component Patterns

[Common patterns used across the site]

**Important**: This is a LIVING document. AI should update it as learnings emerge.

---
[Common patterns used across the site]

**重要提示**：这是一份**动态更新**的文档。AI应随着项目推进不断更新它。

---

6. Project Requirements Document (PRD)

6. 项目需求文档（PRD）

What: Technical specification for the entire project. Purpose: Tells AI exactly what tech to use and how.
markdown
undefined
内容：整个项目的技术规格说明。 目的：明确告诉AI要使用的技术及实现方式。
markdown
undefined

Project Requirements Document

Project Requirements Document

Project Overview

Project Overview

[Brief description]
[Brief description]

Tech Stack

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

Dependencies

json
{
  "dependencies": {
    // List all required packages
  }
}
json
{
  "dependencies": {
    // List all required packages
  }
}

File Structure

File Structure

src/
├── app/
│   └── page.tsx
├── components/
│   ├── ui/           # shadcn components
│   ├── sections/     # Page sections
│   └── 3d/           # Three.js components
├── lib/
│   └── utils.ts
└── styles/
    └── globals.css
src/
├── app/
│   └── page.tsx
├── components/
│   ├── ui/           # shadcn components
│   ├── sections/     # Page sections
│   └── 3d/           # Three.js components
├── lib/
│   └── utils.ts
└── styles/
    └── globals.css

Design System

Design System

  • See: style-guide.md
  • See: style-guide.md

Page Sections

Page Sections

SectionSpec FilePriority
Herohero-section.mdP0
Featuresfeatures-section.mdP1
[etc.][etc.][etc.]
SectionSpec FilePriority
Herohero-section.mdP0
Featuresfeatures-section.mdP1
[etc.][etc.][etc.]

Responsiveness

Responsiveness

  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px+
  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px+

Performance Requirements

Performance Requirements

  • LCP: < 2.5s
  • FID: < 100ms
  • CLS: < 0.1
  • LCP: < 2.5s
  • FID: < 100ms
  • CLS: < 0.1

Accessibility

Accessibility

  • WCAG 2.1 AA compliance
  • Keyboard navigation
  • Screen reader support

---
  • WCAG 2.1 AA compliance
  • Keyboard navigation
  • Screen reader support

---

7. Tasks Document

7. 任务执行文档

What: Step-by-step implementation plan. Purpose: Gives AI a clear execution path.
markdown
undefined
内容：分步实现计划。 目的：为AI提供清晰的执行路径。
markdown
undefined

Implementation Tasks

Implementation Tasks

Phase 1: Project Setup

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
  • 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

Phase 2: Core Components

  • Build navigation bar
  • Create button variants
  • Set up typography components
  • Create layout components
  • Build navigation bar
  • Create button variants
  • Set up typography components
  • Create layout components

Phase 3: Section Building

Phase 3: Section Building

  • Build Hero section
  • Build Trust Logos section
  • Build Features section
  • [Continue for each section]
  • Build Hero section
  • Build Trust Logos section
  • Build Features section
  • [Continue for each section]

Phase 4: Polish

Phase 4: Polish

  • Add animations
  • Optimize images
  • Add loading states
  • Mobile responsiveness pass
  • Accessibility audit
  • Add animations
  • Optimize images
  • Add loading states
  • Mobile responsiveness pass
  • Accessibility audit

Phase 5: Launch

Phase 5: Launch

  • Performance optimization
  • SEO metadata
  • Final review

---
  • Performance optimization
  • SEO metadata
  • Final review

---

Component Resources

组件资源

shadcn/ui

shadcn/ui

The foundational component library. Copy-paste components with full customization.
基础组件库，支持复制粘贴并完全自定义组件。

21st.dev

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
基于shadcn/ui构建的高端组件库。
  • 官网：https://21st.dev
  • 用途：带动画效果的高级组件
  • 核心特性：每个组件包含：
    • 预览效果
    • 可复制的代码
    • 用于安装的AI提示词

Three.js / React Three Fiber

Three.js / React Three Fiber

3D graphics in the browser.
浏览器端3D图形库。

Sketchfab

Sketchfab

Community 3D models and animations.
社区驱动的3D模型与动画平台。

Best Practices

最佳实践

1. Section Isolation

1. 板块隔离

Start a new chat for each section change:
  • Cleaner context (no pollution from other sections)
  • Cheaper (fewer tokens consumed)
  • More focused results
针对每个板块的修改开启新的对话：
  • 上下文更清晰（不会被其他板块内容干扰）
  • 成本更低（消耗更少的token）
  • 结果更聚焦

2. Commit Per Section

2. 按板块提交代码

After each section is complete:
bash
git add .
git commit -m "feat(landing): add [section-name] section"
This allows easy rollback if iterations go wrong.
每个板块完成后：
bash
git add .
git commit -m "feat(landing): add [section-name] section"
这样如果迭代出现问题，可以轻松回滚。

3. Include Reference Images

3. 包含参考截图

Always paste screenshots in your prompts:
  • AI can see exactly what you want
  • Reduces ambiguity
  • Faster convergence on the right design
在提示词中始终粘贴截图：
  • AI能准确理解你的需求
  • 减少歧义
  • 更快收敛到正确的设计

4. Include Component Code

4. 包含组件代码

When specifying a component from 21st.dev or shadcn:
  • Copy the actual code
  • Include it in your section spec
  • AI can implement it exactly
当指定来自21st.dev或shadcn/ui的组件时：
  • 复制实际代码
  • 包含在板块规格文档中
  • AI可以精准实现

5. Auto-Update Style Guide

5. 自动更新设计指南

Create a rule file:
markdown
undefined
创建规则文件：
markdown
undefined

.cursorrules or similar

.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.
undefined
When building a section and making design decisions that differ from the style guide, automatically update the style guide to reflect the new learnings.
undefined

6. Screenshot-to-Iteration

6. 截图驱动迭代

When requesting changes:
  1. Take a screenshot of the current state
  2. Paste it in the prompt
  3. Describe what to change
  4. Reference the original inspiration if needed
请求修改时：
  1. 截取当前状态的截图
  2. 粘贴到提示词中
  3. 描述需要修改的内容
  4. 必要时参考原始灵感来源

The $500 vs $5000 Difference

500美元与5000美元网站的差异

Generic AI OutputPremium Framework Output
No contextFull context artifacts
Guessing what you wantFollowing precise specs
Inconsistent stylingLiving style guide
Random componentsCurated component library
No visual referencesMood boards + screenshots
Build everything at onceSection-by-section isolation
No iteration loopDefine → Build → Review → Refine
通用AI生成结果本框架生成结果
无上下文完整的上下文工件
猜测需求遵循精确的规格
样式不一致动态更新的设计指南
随机组件精选组件库
无视觉参考情绪板+截图
一次性构建全部内容按板块隔离构建
无迭代循环定义→构建→评审→优化循环

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.
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
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.
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.
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]
[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."
本框架改编自BuilderSpace在2025年12月发布的视频《我如何借助AI构建价值5000美元的高端SaaS网站》，该视频记录了适配AI辅助开发的10年专业设计工作流。
来源：https://www.youtube.com/watch?v=WqSf0noa4hk
「前期准备工作看似繁琐，你可能只想立刻开始构建。但正是这些前置的上下文——项目简报、情绪板、设计指南、板块规格——拉开了500美元通用网站与5000美元高端精致网站的差距。」