premium-saas-design

高级 SaaS 设计框架

在斯坦福大学 2002 年开展的一项大型网站可信度研究中（B.J. Fogg 及其同事），人们评判网站是否值得信任时，提及最多的因素是网站的视觉设计。

这项技能提炼了资深产品团队和 UI/UX 设计师采用的专业设计工作流，并针对 AI 辅助开发进行了调整。该框架能将 AI 从“猜测机器”转变为真正的设计伙伴。

---

核心循环

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

这个循环至关重要。真正的产品团队会使用它，而且它与 AI 配合时效果出色。

---

7 份上下文资料

AI 需要上下文才能产出高级成果。这 7 份文档构成了你与 AI 之间的“设计契约”：

1. 项目简介

内容：一份文档，说明你要构建什么、为什么构建，以及面向哪些用户。 用途：为 AI 提供方向，帮助其理解项目。

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

关键要点：把 AI 想象成一位新团队成员。你不会在没有提供任何背景的情况下只对他们说“给我做个网站”。

---

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

内容：为每个区块单独创建文件，其中包含所有文案和内容。 用途：让 AI 能将内容与设计分开处理。

# 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

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

调研来源：

• Dribbble（搜索“[行业] SaaS 落地页”）
• Awwwards
• SaaS 落地页示例
• 竞品网站

---

4. 区块专属情绪板

内容：为每个区块提供详细规范——采用“弗兰肯斯坦”式拼接方法。 用途：为 AI 的每个区块提供精准的视觉指导。

# 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

主视觉内容区

布局

• [左对齐/右对齐/居中对齐]
• [分栏布局说明]

3D 元素（如适用）

• 来源：[Three.js / Sketchfab 链接]
• 位置：[在布局中的位置]
• 动画：[运动类型]
• 代码：

// Include Three.js or animation code

来自组件库的组件

主按钮

• 来源：21st.dev
• 样式：[药丸形、发光描边等]
• 代码：

// Component code

背景效果

• 类型：[渐变、粒子、网格等]
• 来源：[库链接]
• 代码：

// Effect code

动画

• 滚动效果：[视差、淡入等]
• 悬停状态：[哪些元素会动效变化]
• 入场动画：[错落、依次出现等]

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

重要：这是一份持续更新的文档。随着经验积累，AI 应更新这份文档。

---

6. 项目需求文档（PRD）

内容：整个项目的技术规范。 用途：明确告知 AI 应使用哪些技术，以及如何使用。

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

文件结构

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

设计系统

• 参见：style-guide.md

页面区块

区块	规范文件	优先级
主视觉区	hero-section.md	P0
功能	features-section.md	P1
[等]	[等]	[等]

响应式设计

• 移动端：320px - 767px
• 平板：768px - 1023px
• 桌面端：1024px+

性能要求

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

无障碍访问

• 符合 WCAG 2.1 AA 标准
• 支持键盘导航
• 支持屏幕阅读器

---

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

---

组件资源

shadcn/ui

基础组件库。复制粘贴组件，并进行完全自定义。

• 网站：https://ui.shadcn.com
• 用途：基础组件（按钮、输入框、卡片等）

21st.dev

基于 shadcn/ui 构建的高级组件。

• 网站：https://21st.dev
• 用途：带动画效果的高级组件
• 主要特性：每个组件都包含：
  • 预览
  • 可复制的代码
  • 用于安装的 AI 提示词

Three.js / React Three Fiber

在浏览器中呈现 3D 图形。

• Three.js 示例：https://threejs.org/examples/
• 用途：主视觉区 3D 元素、交互式背景

Sketchfab

社区提供的 3D 模型和动画。

• 网站：https://sketchfab.com
• 用途：下载用于主视觉区的 3D 资源

---

最佳实践

1. 按区块隔离

每次切换区块时，都新建一个聊天：

• 上下文更干净（不会受到其他区块的干扰）
• 成本更低（消耗的令牌更少）
• 结果更聚焦

2. 每个区块都提交

每完成一个区块后：

git add .
git commit -m "feat(landing): add [section-name] section"

这样，如果迭代出错，就能轻松回滚。

3. 附上参考图片

在提示词中务必粘贴截图：

• AI 可以准确看到你的需求
• 减少歧义
• 更快找到合适的设计

4. 附上组件代码

指定来自 21st.dev 或 shadcn 的组件时：

• 复制实际代码
• 将其加入区块规范
• AI 就能准确实现

5. 自动更新风格指南

创建一个规则文件：

# .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. 截图并迭代

请求修改时：

1. 截取当前状态的屏幕截图
2. 将截图粘贴到提示词中
3. 描述需要修改的内容
4. 如有需要，引用最初的灵感来源

---

$500 与 $5000 的差别

通用 AI 输出	高端框架输出
没有上下文	完整的上下文材料
猜测你的需求	遵循精准的规范
样式不一致	持续更新的风格指南
随机选择的组件	精选的组件库
没有视觉参考	情绪板 + 截图
一次性构建所有内容	按区块逐一隔离
没有迭代循环	定义 → 构建 → 审核 → 优化

---

提示词模板

生成风格指南

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.

生成 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 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 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.

迭代一个区块

[Paste screenshot of current state]

Changes needed:
1. [Specific change 1]
2. [Specific change 2]

Reference the original inspiration: [paste reference image]

---

致谢

此框架源自 BuilderSpace 于 2025 年 12 月发布的视频《How I Build Premium $5k SaaS Websites with AI》，该视频介绍了一套拥有 10 年专业经验的设计工作流，并将其调整为适用于 AI 辅助开发的流程。

来源：https://www.youtube.com/watch?v=WqSf0noa4hk

---

“准备工作让人感觉像是在干活。你只想马上开始构建。但前期准备的上下文——项目简报、情绪板、风格指南、区块规范——正是普通的 $500 网站与精致高端的 $5,000 网站之间的差别。”