垂直时间线布局

STYLEKIT_STYLE_REFERENCE
style_name: 垂直时间线布局
style_slug: timeline-vertical
style_source: /styles/timeline-vertical

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

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

## 必须遵守

- 使用伪元素或 div 创建中央连接线
- 节点圆点与连接线对齐
- 左右交替布局增加视觉变化
- 移动端改为单侧布局
- 添加滚动触发的入场动画
- 节点使用统一的时间/序号格式
- 连接线使用柔和颜色不喧宾夺主
- 卡片 hover 时节点需同步高亮或放大，建立轴线联动感
- 卡片 hover 可轻微沿水平轴外移，表达历史节点被拉出审视
- 交互过渡使用 duration-200 ease-out，保障快速时间浏览

## 绝对禁止

- 禁止连接线断裂或不对齐
- 禁止节点大小不一致
- 禁止移动端保持双侧布局
- 禁止忽略时间/序号标识
- 禁止内容过长导致连接线过长
- 禁止节点与卡片交互脱节（仅卡片变化）
- 禁止使用迟缓或拖泥带水的过渡时序

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

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

## Animation & Interaction Rules

- Node Synchronization: hover 某卡片时，时间轴节点必须同步高亮、放大或发光，建立强连接。
- Pull-out Effect: 卡片 hover 可轻微上浮并沿水平轴外移（translate-x），模拟节点被拉出审视。
- Sequential Smoothness: 过渡使用 duration-200 ease-out，支持快速滑动浏览时的稳定反馈。
- Connected Focus: 聚焦卡片边框颜色需和时间轴主线一致，确保叙事连贯性。

## Self-Check

---

# Vertical Timeline (垂直时间线布局) Design System

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

## 核心理念

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

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

设计原则：
- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调
- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级
- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈
- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验
- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-zinc-100
圆角: rounded-xl
```

### 阴影
```
小: shadow-sm
中: shadow-sm
大: shadow-md
悬停: hover:shadow-md
聚焦: focus:shadow-sm
```

### 交互效果
```
悬停位移: hover:-translate-y-0.5
悬停缩放: （无）
悬停透明度: （无）
过渡动画: transition-all duration-300
按下状态: active:scale-95
```

### 字体
```
标题: font-semibold tracking-tight
正文: font-sans
等宽: font-mono
```

### 字号
```
Hero: text-3xl md:text-4xl lg:text-5xl
H1: text-2xl md:text-3xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
正文: text-sm md:text-base
小字: text-xs md:text-sm
```

### 间距
```
Section: py-12 md:py-16 lg:py-20
容器: px-4 md:px-6 lg:px-8
卡片: p-6
小间距: gap-4
中间距: gap-6 md:gap-8
大间距: gap-8 md:gap-12
```

### 颜色角色
```
背景主色: bg-slate-50
背景辅色: bg-white
背景强调色: bg-blue-500, bg-emerald-500, bg-amber-500, bg-red-500
正文主色: text-zinc-900
正文辅色: text-zinc-600
正文弱化色: text-zinc-400
按钮主色: bg-blue-500 text-white
按钮辅色: bg-zinc-100 text-zinc-700
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `rounded-none`
- `border-4`
- `border-8`
- `shadow-2xl`
- `font-black`

### 禁止的模式
- 匹配 `^border-[48]`
- 匹配 `^shadow-2xl`

### 禁止原因
- `rounded-none`: Timeline Vertical uses soft rounded corners (rounded-xl) for cards
- `border-4`: Timeline Vertical uses subtle thin borders (border)
- `shadow-2xl`: Timeline Vertical uses subtle shadows, not dramatic ones

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
inline-flex items-center gap-2
text-sm font-medium
text-blue-600
transition-colors
```

### 卡片必须包含
```
relative
bg-white
rounded-xl
shadow-sm
border border-zinc-100
```

### 输入框必须包含
```
border border-zinc-200
rounded-lg
text-zinc-900
focus:outline-none
focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
```

---

## [COMPARE] Vertical Timeline 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors bg-blue-500 text-white">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="relative bg-white rounded-xl shadow-sm border border-zinc-100 p-6">
  <h3 class="font-semibold tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Vertical Timeline 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-slate-50 text-zinc-900 border border-zinc-100 px-4 md:px-6 lg:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
    <a href="/" class="font-semibold tracking-tight text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 md:gap-8 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-blue-500 text-zinc-900 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold tracking-tight text-3xl md:text-4xl lg:text-5xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors bg-blue-500 text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-slate-50 text-zinc-900 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold tracking-tight text-xl md:text-2xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="relative bg-white rounded-xl shadow-sm border border-zinc-100 p-6">
        <h3 class="font-semibold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-zinc-400">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-white text-zinc-600 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <div>
        <span class="font-semibold tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Vertical Timeline 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors`
- [ ] 卡片包含： `relative bg-white rounded-xl shadow-sm border border-zinc-100`
- [ ] 输入框包含： `border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500`

### 禁止项检查
- [ ] 没有使用 `rounded-none`
- [ ] 没有使用 `border-4`
- [ ] 没有使用 `border-8`
- [ ] 没有使用 `shadow-2xl`
- [ ] 没有使用 `font-black`

### 风格规则检查
- [ ] 使用伪元素或 div 创建中央连接线
- [ ] 节点圆点与连接线对齐
- [ ] 左右交替布局增加视觉变化
- [ ] 移动端改为单侧布局
- [ ] 添加滚动触发的入场动画

### 风格漂移检查
- [ ] 没有违反：禁止连接线断裂或不对齐
- [ ] 没有违反：禁止节点大小不一致
- [ ] 没有违反：禁止移动端保持双侧布局
- [ ] 没有违反：禁止忽略时间/序号标识
- [ ] 没有违反：禁止内容过长导致连接线过长

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Vertical Timeline

---

## [EXAMPLES] 示例 Prompt

### 1. 公司发展历程

展示公司重要里程碑

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

### 2. 工作经历

简历中的职业时间线

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

### 3. 项目进度

项目阶段的流程展示

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

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- 连接线断裂或不对齐
- 节点大小不一致
- 移动端保持双侧布局
- 忽略时间/序号标识
- 内容过长导致连接线过长
- 节点与卡片交互脱节（仅卡片变化）
- 使用迟缓或拖泥带水的过渡时序

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] 禁止连接线断裂或不对齐
- [ ] 禁止节点大小不一致
- [ ] 禁止移动端保持双侧布局
- [ ] 禁止忽略时间/序号标识
- [ ] 禁止内容过长导致连接线过长