全屏滚动布局

STYLEKIT_STYLE_REFERENCE
style_name: 全屏滚动布局
style_slug: full-page-scroll
style_source: /styles/full-page-scroll

# Hard Prompt

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

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

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

## 执行要求

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

## Style Rules

你是一位专精于 Full Page Scroll（整屏滚动）风格的前端开发专家。生成的所有代码都必须严格遵循以下约束：

## 绝对禁止

- 禁止内容超出单屏视口（需要滚动才能看完）
- 禁止没有滚动提示（用户可能不知道往下滚）
- 禁止动画过于复杂导致性能问题
- 禁止锁定滚动时间过长
- 禁止忽略移动端体验
- 禁止所有内容元素使用相同的 transition delay（必须错落才能产生景深感）

## 必须遵守

- 每个 section 设置 min-h-screen 或 h-screen
- 使用 scroll-snap 实现平滑吸附 scroll-snap-type: y mandatory
- 每屏内容垂直水平居中 flex items-center justify-center
- 添加滚动指示器和页面导航点
- 使用 CSS scroll-behavior: smooth
- 考虑添加进入/离开动画
- 提供跳过或快速导航选项
- section 使用 group 类，内容元素用 group-hover 实现视差效果
- 导航点 hover 时从圆形扩展为胶囊形（hover:h-6）暗示可交互层级
- 背景径向渐变在 group-hover 时 scale-110（呼吸感背景）
- 内容层使用不同 delay（delay-0 / delay-75 / delay-150）制造错落视差

## 必须遵循

- 容器：h-screen overflow-y-auto scroll-snap-type: y mandatory
- 分区：min-h-screen snap-start group（必须使用 group 类以实现 hover 视差）
- 内容：使用 flex items-center justify-center 居中
- 导航：右侧固定的胶囊状圆点（hover:h-6 展开）
- 滚动指示器：位于第一个分区底部
- 平滑滚动：scroll-behavior: smooth

## 分区结构

每个分区：
- min-h-screen（完整视口高度）
- snap-start（吸附到分区起始位置）
- group（group-hover 视差效果所必需）
- overflow-hidden（呼吸式背景所必需）
- 内容双向居中
- 各分区使用不同的背景色/渐变
- 数字编号指示（01、02 等）

## 动效与交互规则

- 错落视差：group 分区内的各内容层必须使用不同的过渡延迟，以此营造深度感。眉标/标签使用 delay-0（最快、最前），标题使用 delay-75（中间层），正文使用 delay-150（最慢、最深）。全部搭配 group-hover:-translate-y-N 与 transition-transform duration-700 ease-out。这营造出分区被 hover/聚焦时，各元素仿佛处于不同 Z 轴平面、正朝观众飞来的错觉。
- 呼吸式背景：每个分区都包含一个绝对定位的背景 div（radial-gradient 或其他氛围效果），配合 group-hover:scale-110 transition-transform duration-1000 ease-out。缩放速度缓慢（1000ms）且幅度细微——营造出"房间在呼吸"或"传送门开启"般的观感，同时不会显得突兀。
- 胶囊状导航圆点：侧边导航点默认是圆形（w-3 h-3 rounded-full）。hover 时：hover:h-6（圆点垂直拉伸为胶囊/药丸形状）。当前激活分区对应的圆点始终保持拉长状态（h-10 rounded-full）。这些圆点无需文字标签即可表达分区层级与可交互性。
- 标题缩放：主标题除位移外还使用 group-hover:scale-105——营造出细微的放大效果，强化"内容正在靠近"的电影感视差。
- 滚动指示器：animate-bounce，定位为 absolute bottom-8 left-1/2 -translate-x-1/2。始终出现在第一个分区。
- 缓动：内容视差使用 duration-700 ease-out；背景呼吸效果使用 duration-1000 ease-out；导航圆点使用 duration-300。

## 导航

侧边圆点：
- 固定于右侧，垂直居中
- 激活态：w-3 h-10 rounded-full bg-white（拉长的胶囊形）
- 未激活态：w-3 h-3 rounded-full bg-white/30 hover:bg-white/80 hover:h-6（hover 时展开为胶囊形）
- transition-all duration-300，实现形状的平滑变形

## 自检清单

生成代码后，请逐项确认：
1. 所有分区都有 group 类
2. 分区内的内容元素使用不同的延迟值（delay-0、delay-75、delay-150）
3. 每个分区都有呼吸式背景 div（group-hover:scale-110）
4. 导航圆点使用 hover:h-6 变形为胶囊状
5. 激活态导航圆点始终为 h-10（拉长胶囊形）
6. 所有分区的高度都精确等于视口高度（min-h-screen）
7. 容器已启用滚动吸附（scroll-snap-type y mandatory）

---

# Full Page Scroll (全屏滚动布局) Design System

> 每一屏占满整个视口的沉浸式滚动体验，通过滚动切换完整场景，适合品牌故事、产品介绍、作品集展示。

## 核心理念

Full Page Scroll（全屏滚动布局）是一种将每个内容区块扩展到整个视口的布局方式，创造电影般的叙事体验。

核心理念：
- 沉浸体验：每一屏都是完整的视觉场景
- 叙事节奏：滚动即翻页，控制信息节奏
- 焦点集中：一次只展示一个核心信息
- 记忆深刻：场景化展示更易被记住

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

---

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

### 边框
```
宽度: border-0
颜色: border-white/20
圆角: rounded-full
```

### 阴影
```
小: shadow-none
中: shadow-none
大: shadow-none
悬停: shadow-none
聚焦: shadow-none
```

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

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

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

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

### 颜色角色
```
背景主色: bg-black
背景辅色: bg-zinc-900
背景强调色: bg-gradient-to-br from-indigo-600 to-purple-700, bg-gradient-to-br from-cyan-600 to-blue-600, bg-gradient-to-br from-purple-600 to-pink-600, bg-gradient-to-br from-emerald-600 to-teal-600
正文主色: text-white
正文辅色: text-white/80
正文弱化色: text-white/50
按钮主色: bg-white text-black
按钮辅色: bg-transparent text-white border-2 border-white
```

---

## [FORBIDDEN] 绝对禁止

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

### 禁止的 Class
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `border-gray-200`
- `border-gray-300`
- `text-zinc-900`

### 禁止的模式
- 匹配 `^shadow-(?!none)`
- 匹配 `^border-gray-`

### 禁止原因
- `shadow-lg`: Full Page Scroll uses bold color backgrounds instead of shadows for depth
- `border-gray-200`: Full Page Scroll uses white/transparent borders for dark backgrounds
- `text-black`: Full Page Scroll uses white text on dark/gradient backgrounds

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

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
px-8 md:px-12 py-4 md:py-5
font-semibold text-lg
transition-colors
```

### 卡片必须包含
```
min-h-screen
snap-start
flex items-center justify-center
```

### 输入框必须包含
```
bg-transparent
border-b border-white/30
text-white text-lg
placeholder-white/50
focus:outline-none focus:border-white
transition-colors
```

---

## [COMPARE] Full Page Scroll 错误 vs 正确对比

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

### 按钮

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

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors bg-white text-black">
  点击我
</button>
```

### 卡片

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

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="min-h-screen snap-start flex items-center justify-center p-8 md:p-12">
  <h3 class="font-bold tracking-tight text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### 输入框

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

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Full Page Scroll 页面骨架模板

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

### 导航栏骨架
```html
<nav class="bg-black text-white border-0 border-white/20 px-6 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-bold tracking-tight text-2xl md:text-3xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-sm md:text-base">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-gradient-to-br from-indigo-600 to-purple-700 text-white py-0 px-6 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold tracking-tight text-5xl md:text-7xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-lg md:text-xl lg:text-2xl max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors bg-white text-black">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-black text-white py-0 px-6 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold tracking-tight text-3xl md:text-5xl lg:text-7xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="min-h-screen snap-start flex items-center justify-center p-8 md:p-12">
        <h3 class="font-bold tracking-tight text-2xl md:text-3xl">{CARD_TITLE}</h3>
        <p class="font-sans text-lg md:text-xl lg:text-2xl text-white/50">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors" placeholder="{PLACEHOLDER}" />
```

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

---

## [CHECKLIST] Full Page Scroll 生成后自检清单

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

### Token 检查
- [ ] 按钮包含： `px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors`
- [ ] 卡片包含： `min-h-screen snap-start flex items-center justify-center`
- [ ] 输入框包含： `bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors`

### 禁止项检查
- [ ] 没有使用 `shadow-sm`
- [ ] 没有使用 `shadow-md`
- [ ] 没有使用 `shadow-lg`
- [ ] 没有使用 `shadow-xl`
- [ ] 没有使用 `border-gray-200`
- [ ] 没有使用 `border-gray-300`
- [ ] 没有使用 `text-zinc-900`

### 风格规则检查
- [ ] 每个 section 设置 min-h-screen 或 h-screen
- [ ] 使用 scroll-snap 实现平滑吸附 scroll-snap-type: y mandatory
- [ ] 每屏内容垂直水平居中 flex items-center justify-center
- [ ] 添加滚动指示器和页面导航点
- [ ] 使用 CSS scroll-behavior: smooth

### 风格漂移检查
- [ ] 没有违反：禁止内容超出单屏视口（需要滚动才能看完）
- [ ] 没有违反：禁止没有滚动提示（用户可能不知道往下滚）
- [ ] 没有违反：禁止动画过于复杂导致性能问题
- [ ] 没有违反：禁止锁定滚动时间过长
- [ ] 没有违反：禁止忽略移动端体验

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

---

## [EXAMPLES] 示例 Prompt

### 1. 品牌故事页

讲述品牌历史的全屏滚动

```
Create a brand story page with full page scroll:
1. Container with scroll-snap-type: y mandatory
2. 5 sections, each min-h-screen with different gradient backgrounds
3. Section 1: Hero with brand name and tagline
4. Sections 2-4: Timeline moments with year, title, description
5. Section 5: CTA to explore more
6. Fixed navigation dots on right side
7. Scroll indicator on first section
Content centered, smooth transitions between sections
```

### 2. 产品特性展示

一屏一特性的产品介绍

```
Create a product features page with full page scroll:
1. 4 full-screen sections with scroll snap
2. Each section: feature icon, headline, description, visual
3. Alternating dark/light backgrounds
4. Section entrance animations (fade up)
5. Progress indicator showing current section
6. Final section with pricing CTA
7. Skip button to jump to end
Use bold typography, centered content
```

### 3. 作品集展示

每个项目一屏的作品集

```
Create a portfolio showcase with full page scroll:
1. Hero section with name and role
2. Each project in full-screen section
3. Project sections: large image, title, description, link
4. Different color schemes per project
5. Navigation dots with project names on hover
6. Final section with contact form
7. Smooth scroll between sections
Use dramatic visuals, minimal text
```

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

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

- 内容超出单屏视口（需要滚动才能看完）
- 没有滚动提示（用户可能不知道往下滚）
- 动画过于复杂导致性能问题
- 锁定滚动时间过长
- 忽略移动端体验
- 所有内容元素使用相同的 transition delay（必须错落才能产生景深感）

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

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

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 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 标题上面
- [ ] 禁止内容超出单屏视口（需要滚动才能看完）
- [ ] 禁止没有滚动提示（用户可能不知道往下滚）
- [ ] 禁止动画过于复杂导致性能问题
- [ ] 禁止锁定滚动时间过长
- [ ] 禁止忽略移动端体验