风格目录/垂直时间线布局

垂直时间线布局

Vertical Timeline

垂直时间轴布局，通过连接线串联时间节点，适合展示历史进程、项目里程碑、工作经历、流程步骤。

时间线历程里程碑流程步骤进度

查看完整 Showcase →

配色方案

Primary

#1e293b

Secondary

#f8fafc

Accent 1

#3b82f6

Accent 2

#10b981

Accent 3

#f59e0b

Accent 4

#ef4444

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

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

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

开始生成

尝试："用垂直时间线布局风格生成一个着陆页"

设计哲学

Vertical Timeline（垂直时间线布局）是一种用于展示时间序列或流程步骤的布局方式，通过视觉连接线引导阅读。

核心理念： - 线性叙事：清晰的时间或流程顺序 - 节点突出：每个重要时刻都有明确标记 - 连接关系：视觉线条串联所有事件 - 渐进展示：支持滚动触发动画

必须做 / Do's

+使用伪元素或 div 创建中央连接线
+节点圆点与连接线对齐
+左右交替布局增加视觉变化
+移动端改为单侧布局
+添加滚动触发的入场动画
+节点使用统一的时间/序号格式
+连接线使用柔和颜色不喧宾夺主

禁止做 / Don'ts

-禁止连接线断裂或不对齐
-禁止节点大小不一致
-禁止移动端保持双侧布局
-禁止忽略时间/序号标识
-禁止内容过长导致连接线过长

组件模板

组件预览

时间线按钮

时间线节点中的操作按钮

tsx

<button className="
  inline-flex items-center gap-2
  px-4 py-2
  text-sm font-medium
  text-blue-600
  hover:text-blue-700
  transition-colors
">
  <span>View Details</span>
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
</button>

全局样式

Global CSS

css

/* Vertical Timeline Global Styles */

/* Timeline container */
.timeline {
  position: relative;
  padding-left: 2rem;
}

/* Central line */
.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

/* Timeline item */
.timeline-item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2rem;
}

/* Node dot */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #3b82f6;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Alternating layout for desktop */
@media (min-width: 768px) {
  .timeline-alternating {
    padding-left: 0;
  }

  .timeline-alternating::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-alternating .timeline-item {
    width: 50%;
    padding-left: 0;
    padding-right: 2rem;
  }

  .timeline-alternating .timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 2rem;
    padding-right: 0;
  }

  .timeline-alternating .timeline-item::before {
    left: auto;
    right: -0.5rem;
  }

  .timeline-alternating .timeline-item:nth-child(even)::before {
    left: -0.5rem;
    right: auto;
  }
}

/* Scroll animation */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Node color variants */
.timeline-item[data-status="complete"]::before {
  background: #10b981;
}

.timeline-item[data-status="current"]::before {
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.timeline-item[data-status="upcoming"]::before {
  background: #d1d5db;
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成垂直时间线布局风格的界面。

公司发展历程

展示公司重要里程碑

Create a company history timeline:
1. Vertical timeline with central line
2. Alternating left/right layout on desktop
3. Single side on mobile
4. Each node: year, event title, description
5. Different node colors for different types (funding, product, team)
6. Scroll animation: fade in as visible
7. Year navigation at top
Use subtle colors, professional styling

工作经历

简历中的职业时间线

Create a career timeline for resume:
1. Single-side vertical timeline
2. Each node: date range, company, role, achievements
3. Company logo in node instead of dot
4. Current job highlighted
5. Skills tags for each role
6. Smooth scroll animation
7. Download resume button at end
Clean minimal design, professional look

项目进度

项目阶段的流程展示

Create a project progress timeline:
1. Vertical timeline showing project phases
2. Nodes: phase number, name, status (complete/current/upcoming)
3. Complete phases: green nodes with checkmark
4. Current phase: blue pulsing node
5. Upcoming: gray nodes
6. Progress percentage at top
7. Click node to expand details
Interactive with hover states

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

兼容的视觉风格

试试搭配

垂直时间线布局是一种布局模式，可以与以下视觉风格搭配使用。

Featured

Editorial

优雅的杂志排版，衬线标题与留白之美

编辑杂志风

Editorial

Corporate

专业企业风格

企业简洁风

Corporate Clean

Minimal

Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Soft UI

温和友好的设计

柔和界面风

Soft UI

Organic

自然温暖的风格

自然有机风

Natural Organic

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 Vertical Timeline layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT break the connecting line
- Do NOT use inconsistent node sizes
- Do NOT keep alternating layout on mobile
- Do NOT omit time/date labels
- Do NOT make content too long per node

## Must Follow

- Central line: absolute positioned pseudo-element or div
- Node dots: aligned with center line
- Mobile: single-side layout (all items on right)
- Desktop: can alternate left/right
- Consistent spacing between nodes
- Clear time/date indicators

## Structure

Container:
- relative positioning
- padding-left for line space (mobile)
- centered line (desktop alternating)

Central Line:
- Pseudo-element or div
- Absolute positioned
- 2px width, subtle color

Node:
- Circular dot (w-4 h-4)
- Aligned with line center
- Different colors for status
- White border for contrast

Content Card:
- Connected visually to node
- Date/time label
- Title and description
- Optional action button

## Responsive

Mobile:
- All items on one side
- Line on left
- Full-width cards

Desktop:
- Optional alternating sides
- Line in center
- Cards 50% width

## Animation

Scroll-triggered:
- Items fade in on scroll
- Stagger animation
- Node pulse on current

## Self-Check

After generating code, verify:
1. Line is continuous
2. Nodes are aligned
3. Mobile is single-side
4. All items have dates
5. Scroll animation works

组件预览

时间线按钮

时间线节点中的操作按钮

tsx

<button className="
  inline-flex items-center gap-2
  px-4 py-2
  text-sm font-medium
  text-blue-600
  hover:text-blue-700
  transition-colors
">
  <span>View Details</span>
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
</button>

Global CSS

css

/* Vertical Timeline Global Styles */

/* Timeline container */
.timeline {
  position: relative;
  padding-left: 2rem;
}

/* Central line */
.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

/* Timeline item */
.timeline-item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2rem;
}

/* Node dot */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #3b82f6;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Alternating layout for desktop */
@media (min-width: 768px) {
  .timeline-alternating {
    padding-left: 0;
  }

  .timeline-alternating::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-alternating .timeline-item {
    width: 50%;
    padding-left: 0;
    padding-right: 2rem;
  }

  .timeline-alternating .timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 2rem;
    padding-right: 0;
  }

  .timeline-alternating .timeline-item::before {
    left: auto;
    right: -0.5rem;
  }

  .timeline-alternating .timeline-item:nth-child(even)::before {
    left: -0.5rem;
    right: auto;
  }
}

/* Scroll animation */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Node color variants */
.timeline-item[data-status="complete"]::before {
  background: #10b981;
}

.timeline-item[data-status="current"]::before {
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.timeline-item[data-status="upcoming"]::before {
  background: #d1d5db;
}

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成垂直时间线布局风格的界面。

公司发展历程

展示公司重要里程碑

Create a company history timeline:
1. Vertical timeline with central line
2. Alternating left/right layout on desktop
3. Single side on mobile
4. Each node: year, event title, description
5. Different node colors for different types (funding, product, team)
6. Scroll animation: fade in as visible
7. Year navigation at top
Use subtle colors, professional styling

工作经历

简历中的职业时间线

Create a career timeline for resume:
1. Single-side vertical timeline
2. Each node: date range, company, role, achievements
3. Company logo in node instead of dot
4. Current job highlighted
5. Skills tags for each role
6. Smooth scroll animation
7. Download resume button at end
Clean minimal design, professional look

项目进度

项目阶段的流程展示

Create a project progress timeline:
1. Vertical timeline showing project phases
2. Nodes: phase number, name, status (complete/current/upcoming)
3. Complete phases: green nodes with checkmark
4. Current phase: blue pulsing node
5. Upcoming: gray nodes
6. Progress percentage at top
7. Click node to expand details
Interactive with hover states

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

导出风格包

获取完整的可机器读取风格资源，包括 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 Vertical Timeline layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT break the connecting line
- Do NOT use inconsistent node sizes
- Do NOT keep alternating layout on mobile
- Do NOT omit time/date labels
- Do NOT make content too long per node

## Must Follow

- Central line: absolute positioned pseudo-element or div
- Node dots: aligned with center line
- Mobile: single-side layout (all items on right)
- Desktop: can alternate left/right
- Consistent spacing between nodes
- Clear time/date indicators

## Structure

Container:
- relative positioning
- padding-left for line space (mobile)
- centered line (desktop alternating)

Central Line:
- Pseudo-element or div
- Absolute positioned
- 2px width, subtle color

Node:
- Circular dot (w-4 h-4)
- Aligned with line center
- Different colors for status
- White border for contrast

Content Card:
- Connected visually to node
- Date/time label
- Title and description
- Optional action button

## Responsive

Mobile:
- All items on one side
- Line on left
- Full-width cards

Desktop:
- Optional alternating sides
- Line in center
- Cards 50% width

## Animation

Scroll-triggered:
- Items fade in on scroll
- Stagger animation
- Node pulse on current

## Self-Check

After generating code, verify:
1. Line is continuous
2. Nodes are aligned
3. Mobile is single-side
4. All items have dates
5. Scroll animation works