风格目录/卡片堆叠布局

卡片堆叠布局

Card Stack

卡片前后重叠的立体布局，通过 Z 轴层叠和偏移创造深度感，适合轮播、步骤展示、卡组选择。

卡片堆叠立体层叠轮播3D

查看完整 Showcase →

配色方案

Primary

#1a1a2e

Secondary

#f0f0f5

Accent 1

#6c5ce7

Accent 2

#00cec9

Accent 3

#fd79a8

Accent 4

#ffeaa7

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

开始生成

尝试："用卡片堆叠布局风格生成一个着陆页"

设计哲学

Card Stack（卡片堆叠布局）是一种利用 Z 轴创造深度感的布局方式，多张卡片前后重叠，形成视觉层次。

核心理念： - 深度感知：通过层叠暗示更多内容 - 焦点引导：最前面的卡片获得最多关注 - 交互预期：暗示可以翻阅或切换 - 空间节省：在有限空间展示多个选项

必须做 / Do's

+使用 transform 和 z-index 创建层叠效果
+后方卡片缩小和偏移 scale-95 translate-y-4
+添加渐进的透明度 opacity-80, opacity-60
+支持拖拽或点击切换卡片
+添加流畅的过渡动画 transition-all duration-300
+限制可见卡片数量（通常 3-5 张）
+提供视觉提示说明可以交互

禁止做 / Don'ts

-禁止堆叠过多卡片导致混乱
-禁止卡片完全重叠看不出层次
-禁止忽略交互反馈
-禁止动画过于复杂影响性能
-禁止在移动端使用过于复杂的手势

组件模板

组件预览

切换按钮

用于切换卡片的导航按钮

tsx

<div className="flex items-center gap-4">
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl
    transition-shadow
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
    </svg>
  </button>
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl
    transition-shadow
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
  </button>
</div>

全局样式

Global CSS

css

/* Card Stack Global Styles */

/* Stack container */
.card-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* Base card in stack */
.card-stack-item {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stack positions */
.card-stack-item:nth-child(1) {
  z-index: 30;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.card-stack-item:nth-child(2) {
  z-index: 20;
  transform: translateY(16px) scale(0.95);
  opacity: 0.75;
}

.card-stack-item:nth-child(3) {
  z-index: 10;
  transform: translateY(32px) scale(0.9);
  opacity: 0.5;
}

.card-stack-item:nth-child(n+4) {
  z-index: 0;
  transform: translateY(48px) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Fan out on hover */
.card-stack:hover .card-stack-item:nth-child(1) {
  transform: translateY(-10px) scale(1);
}

.card-stack:hover .card-stack-item:nth-child(2) {
  transform: translateY(24px) scale(0.95);
}

.card-stack:hover .card-stack-item:nth-child(3) {
  transform: translateY(48px) scale(0.9);
}

/* Tinder-style swipe */
.card-stack-swipe .card-stack-item.swiping-left {
  transform: translateX(-100%) rotate(-10deg);
  opacity: 0;
}

.card-stack-swipe .card-stack-item.swiping-right {
  transform: translateX(100%) rotate(10deg);
  opacity: 0;
}

/* 3D rotation variant */
.card-stack-3d .card-stack-item:nth-child(2) {
  transform: translateY(16px) scale(0.95) rotateX(5deg);
}

.card-stack-3d .card-stack-item:nth-child(3) {
  transform: translateY(32px) scale(0.9) rotateX(10deg);
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成卡片堆叠布局风格的界面。

定价方案选择

堆叠展示不同定价方案

Create pricing cards with stack layout:
1. 3 cards stacked: Starter, Pro, Enterprise
2. Front card fully visible with details
3. Back cards scaled down and offset
4. Click to bring card to front
5. Each card: plan name, price, features list, CTA
6. Smooth animation on card switch
7. Navigation arrows on sides
Dark gradient background, white cards

产品卡组

类似 Tinder 的产品浏览

Create a Tinder-style product card stack:
1. Stack of product cards (5 cards, 3 visible)
2. Swipe right to like, left to pass
3. Each card: product image, name, price, rating
4. Swipe animation with rotation
5. Undo last action button
6. Match counter at top
7. Category tabs to filter
Fun, interactive, mobile-friendly design

步骤引导

分步引导的卡片堆叠

Create an onboarding flow with card stack:
1. 4 step cards stacked
2. Current step card in front
3. Click Next to advance (card slides out)
4. Click Back to return (card slides in)
5. Progress indicator dots
6. Each card: step number, title, illustration, description
7. Final card has CTA button
Clean design with subtle animations

提示：复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

卡片堆叠布局是一种布局模式，可以与以下视觉风格搭配使用。

Glass Card

毛玻璃透明效果

玻璃拟态

Glassmorphism

Neumorphism

柔和立体的界面

新拟物派

Neumorphism

Soft UI

温和友好的设计

柔和界面风

Soft UI

Gradient

现代渐变风格

现代渐变风

Modern Gradient

BRUTAL

大胆直接的设计

新野兽派

Neo-Brutalist

Style Pack

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照卡片堆叠布局风格生成代码。

You are a frontend expert specializing in Card Stack layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT stack too many visible cards (max 3-5)
- Do NOT overlap cards completely (need visual distinction)
- Do NOT forget interaction feedback
- Do NOT use overly complex animations
- Do NOT use complex gestures on mobile

## Must Follow

- Use transform for positioning: scale, translateY
- Use z-index for layering: z-30, z-20, z-10
- Progressive opacity: 100%, 75%, 50%
- Smooth transitions: transition-all duration-300
- Clear hover/active states
- Limit visible cards: 3-5 maximum

## Stack Structure

Container:
- relative position
- flex center alignment
- Fixed height for consistent layout

Cards (front to back):
- Card 1: z-30, scale-100, opacity-100
- Card 2: z-20, scale-95, translateY-4, opacity-75
- Card 3: z-10, scale-90, translateY-8, opacity-50
- Beyond: hidden or very faded

## Interactions

Hover:
- Front card lifts slightly
- Stack spreads out

Click/Tap:
- Current card moves to back
- Next card animates to front

Swipe (optional):
- Tinder-style left/right swipe
- Card rotates and fades out

## Animation

- Use cubic-bezier for smooth motion
- Card transitions: 300-400ms
- Consider spring physics for natural feel

## Self-Check

After generating code, verify:
1. Cards are visually layered
2. Front card is clearly prominent
3. Interaction works smoothly
4. Max 3-5 visible cards
5. Mobile-friendly touch targets

组件预览

切换按钮

用于切换卡片的导航按钮

tsx

<div className="flex items-center gap-4">
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl
    transition-shadow
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
    </svg>
  </button>
  <button className="
    w-12 h-12
    flex items-center justify-center
    bg-white
    rounded-full
    shadow-lg
    hover:shadow-xl
    transition-shadow
  ">
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
  </button>
</div>

Global CSS

css

/* Card Stack Global Styles */

/* Stack container */
.card-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* Base card in stack */
.card-stack-item {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stack positions */
.card-stack-item:nth-child(1) {
  z-index: 30;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.card-stack-item:nth-child(2) {
  z-index: 20;
  transform: translateY(16px) scale(0.95);
  opacity: 0.75;
}

.card-stack-item:nth-child(3) {
  z-index: 10;
  transform: translateY(32px) scale(0.9);
  opacity: 0.5;
}

.card-stack-item:nth-child(n+4) {
  z-index: 0;
  transform: translateY(48px) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Fan out on hover */
.card-stack:hover .card-stack-item:nth-child(1) {
  transform: translateY(-10px) scale(1);
}

.card-stack:hover .card-stack-item:nth-child(2) {
  transform: translateY(24px) scale(0.95);
}

.card-stack:hover .card-stack-item:nth-child(3) {
  transform: translateY(48px) scale(0.9);
}

/* Tinder-style swipe */
.card-stack-swipe .card-stack-item.swiping-left {
  transform: translateX(-100%) rotate(-10deg);
  opacity: 0;
}

.card-stack-swipe .card-stack-item.swiping-right {
  transform: translateX(100%) rotate(10deg);
  opacity: 0;
}

/* 3D rotation variant */
.card-stack-3d .card-stack-item:nth-child(2) {
  transform: translateY(16px) scale(0.95) rotateX(5deg);
}

.card-stack-3d .card-stack-item:nth-child(3) {
  transform: translateY(32px) scale(0.9) rotateX(10deg);
}

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成卡片堆叠布局风格的界面。

定价方案选择

堆叠展示不同定价方案

Create pricing cards with stack layout:
1. 3 cards stacked: Starter, Pro, Enterprise
2. Front card fully visible with details
3. Back cards scaled down and offset
4. Click to bring card to front
5. Each card: plan name, price, features list, CTA
6. Smooth animation on card switch
7. Navigation arrows on sides
Dark gradient background, white cards

产品卡组

类似 Tinder 的产品浏览

Create a Tinder-style product card stack:
1. Stack of product cards (5 cards, 3 visible)
2. Swipe right to like, left to pass
3. Each card: product image, name, price, rating
4. Swipe animation with rotation
5. Undo last action button
6. Match counter at top
7. Category tabs to filter
Fun, interactive, mobile-friendly design

步骤引导

分步引导的卡片堆叠

Create an onboarding flow with card stack:
1. 4 step cards stacked
2. Current step card in front
3. Click Next to advance (card slides out)
4. Click Back to return (card slides in)
5. Progress indicator dots
6. Each card: step number, title, illustration, description
7. Final card has CTA button
Clean design with subtle animations

提示：复制时会自动附带该风格的设计规范

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照卡片堆叠布局风格生成代码。

You are a frontend expert specializing in Card Stack layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT stack too many visible cards (max 3-5)
- Do NOT overlap cards completely (need visual distinction)
- Do NOT forget interaction feedback
- Do NOT use overly complex animations
- Do NOT use complex gestures on mobile

## Must Follow

- Use transform for positioning: scale, translateY
- Use z-index for layering: z-30, z-20, z-10
- Progressive opacity: 100%, 75%, 50%
- Smooth transitions: transition-all duration-300
- Clear hover/active states
- Limit visible cards: 3-5 maximum

## Stack Structure

Container:
- relative position
- flex center alignment
- Fixed height for consistent layout

Cards (front to back):
- Card 1: z-30, scale-100, opacity-100
- Card 2: z-20, scale-95, translateY-4, opacity-75
- Card 3: z-10, scale-90, translateY-8, opacity-50
- Beyond: hidden or very faded

## Interactions

Hover:
- Front card lifts slightly
- Stack spreads out

Click/Tap:
- Current card moves to back
- Next card animates to front

Swipe (optional):
- Tinder-style left/right swipe
- Card rotates and fades out

## Animation

- Use cubic-bezier for smooth motion
- Card transitions: 300-400ms
- Consider spring physics for natural feel

## Self-Check

After generating code, verify:
1. Cards are visually layered
2. Front card is clearly prominent
3. Interaction works smoothly
4. Max 3-5 visible cards
5. Mobile-friendly touch targets