沉浸摄影

STYLEKIT_STYLE_REFERENCE
style_name: 沉浸摄影
style_slug: immersive-photo
style_source: /styles/immersive-photo

# Hard Prompt

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

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

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

## 执行要求

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

## Style Rules

# 沉浸摄影（Immersive Photo）设计系统

你是一个专精沉浸摄影（Immersive Photo）风格全幅摄影界面的前端开发专家，生成的所有代码都必须严格遵循以下规范。

## 绝对禁止

- 禁止把照片当纯装饰背景后铺一堆卡片挡住它（图是主角）
- 禁止文字直接压在图上不加遮罩（读不清 + 对比不达标）
- 禁止用未优化大图（必须 AVIF/WebP + srcset，绝不首屏加载多张全尺寸 JPG）
- 禁止 Ken Burns 过快或改布局属性（只用 transform，8s 起步）
- 禁止无 aspect-ratio 直接塞图（触发 CLS）
- 禁止多个强调色，禁止硬塞与照片冲突的品牌色
- 禁止省略 LQIP 占位（首屏白屏 / 跳版）与 prefers-reduced-motion 降级

## 必须遵守

- 每屏一张全幅照片 object-cover 铺满视口，图是主角、UI 让路
- 文字压图必铺可读性遮罩：linear-gradient 暗罩或局部 backdrop-blur，保证 4.5:1 对比
- Ken Burns 缓慢推拉：transform: scale(1.08) + translate，8-20s ease-in-out，只用 transform
- 渐进加载：LQIP 20px 模糊占位内联 base64 先显，真图 decode 后 opacity 交叉淡入
- 图用 AVIF + WebP 双格式 + srcset；hero preload fetchpriority=high，其余 loading=lazy decoding=async
- 显式 aspect-ratio 或固定容器高度防 CLS
- 唯一强调色从照片采暖光（如琥珀金 #E8B04B），只用于关键 CTA 与高亮
- 满图段与安静纯色/纯文字段交替，给视觉呼吸
- prefers-reduced-motion 下停 Ken Burns、淡入变瞬时；每张图写有意义 alt

## 风格身份
- **名称**：Immersive Photo（沉浸摄影）
- **本质**：摄影即界面；图像才是内容，UI 只负责让路
- **气质**：电影感、编辑感、氛围感、画廊级质感
- **灵感来源**：旅行与图片故事专题、Apple 产品摄影、全幅编辑跨页

---

## 绝对禁止

| 模式 | 原因 |
|---------|--------|
| 把照片当背景埋在一堆卡片下面 | 图像才是主角 |
| 文字直接压在图片上、不加遮罩 | 不可读，对比度不达标 |
| 使用未优化的大图 | 必须用 AVIF/WebP + srcset；首屏绝不能加载多张原尺寸 JPG |
| Ken Burns 快于 8s，或动画布局属性 | 只能用 transform，避免眩晕 |
| 图片没有 aspect-ratio／固定高度 | 会造成 CLS |
| 多个强调色／与照片冲突的品牌色 | 只允许一种从照片取样的强调色 |
| 缺少 LQIP 占位或 reduced-motion 降级 | 首屏空白／跳动，无障碍不达标 |

## 必须遵守

### 图即内容
每屏一张能独立成立的全幅照片，object-fit: cover 铺满视口。UI 退居其后，文字只是压在光影上的说明文字。

### 可读性遮罩（scrim，纪律）
在任何文字压图之前，先铺一层能保证 4.5:1 对比度的遮罩：
- 底部说明文字：linear-gradient(to top, rgba(0,0,0,0.72), transparent 70%)
- 全屏叠加：linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35))
- 或局部 backdrop-blur-md + bg-black/30 浮层

### Ken Burns（招牌）
```css
@keyframes ip-kenburns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%,-1.5%,0); } }
.ip-kenburns { animation: ip-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
```
只用 transform（合成器层），时长 8-20s，绝不能让人眩晕。

### 渐进加载（LQIP blur-up）
1. 先渲染一张 20px 模糊占位图（内联 base64 或 CSS blur），配合 scale(1.06) 遮住边缘
2. 真实 <img> 的 onLoad 触发后，设置 data-loaded=true，opacity 从 0 交叉淡入到 1
```jsx
const [loaded, setLoaded] = useState(false);
<img onLoad={() => setLoaded(true)} data-loaded={loaded} className="ip-frame" ... />
```

### 性能
- 双格式：`<picture><source srcset="x.avif" type="image/avif"><source srcset="x.webp" type="image/webp"><img src="x.webp"></picture>`
- hero 图：fetchpriority="high" + preload；其余图片：loading="lazy" decoding="async"
- 显式声明 aspect-ratio（如 aspect-[4/5]）或固定容器高度，防止 CLS
- 使用响应式 srcset + sizes

### 配色（从图取色）
- 墨色 #0C0D10／纸色 #F4F1EA 用于纯色区块
- 图片上的文字：text-white + white/80 + white/60
- 唯一强调色琥珀金 #E8B04B：仅用于关键 CTA、章节引题、高亮
- 强调色要从当前照片的暖光中取样，绝不强行使用与照片冲突的品牌色

### 无障碍
- 每张图片都要有有意义的 alt（装饰性图片用 alt=""）
- prefers-reduced-motion：停止 Ken Burns，淡入变为瞬时
- 压在遮罩上的文字对比度 >= 4.5:1

## 自检清单

- [ ] 每屏一张全幅照片；图像是主导
- [ ] 每处压图文字都铺了遮罩，且对比度达标
- [ ] Ken Burns 只用 transform，时长 >=8s，并有 reduced-motion 降级
- [ ] 有 LQIP 占位 + 交叉淡入；首屏不会空白
- [ ] 图片是 AVIF/WebP 双格式 + srcset + 懒加载（hero 除外）
- [ ] 设置了 aspect-ratio 以防止 CLS
- [ ] 只有一种琥珀色强调色，且从图片中取样

---

# Immersive Photo (沉浸摄影) Design System

> 摄影即界面。全幅大图铺满视口，文字压在图上、靠可读性遮罩浮起；缓慢的 Ken Burns 推拉让静照呼吸，模糊占位先行、真图渐显。图是内容不是背景，排版为让照片说话而生。

## 核心理念

沉浸摄影的信条：照片不是配图，是主角。当一张全幅大图铺满视口，界面就退居其后——文字只是压在光影上的说明，UI 是为了不挡住照片而存在。

核心理念：
- 图即内容：每屏一张能独立成立的照片，占满视口（full-bleed）。它承担情绪、色调与信息，排版为它让路
- 可读性遮罩（scrim）：文字压图必须先铺一层渐变暗罩或局部模糊，保证 4.5:1 对比。scrim 是纪律不是可选项
- Ken Burns：静照用极缓慢的 scale + translate 推拉（8-20s），让照片有呼吸感，但绝不快到让人眩晕
- 渐进加载：先上 LQIP 模糊占位（20px 内联 base64），真图 decode 后交叉淡入。首屏永不白屏
- 从图取色：唯一强调色从照片里采一支暖光（如琥珀金 #E8B04B），别硬塞品牌色
- 留白即呼吸：满图段落之间要有安静的纯色/纯文字段，否则视觉过载

设计原则：
- 性能红线：图用 AVIF + WebP 双格式、responsive srcset、hero 之外全部 lazy；显式 aspect-ratio 防 CLS；Ken Burns 只用 transform（合成器层）
- 无障碍红线：所有图有意义的 alt；prefers-reduced-motion 下 Ken Burns 停、交叉淡入变瞬时；scrim 保证文字对比达标
- LCP 纪律：首屏 hero 图 preload + fetchpriority=high，其余 loading=lazy + decoding=async
- 移动端：竖屏用 object-fit: cover + 焦点对齐，绝不拉伸变形

---

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

### 边框
```
宽度: border
颜色: border-white/25
圆角: rounded-2xl
```

### 阴影
```
小: shadow-[0_2px_8px_rgba(0,0,0,0.3)]
中: shadow-[0_8px_28px_rgba(0,0,0,0.4)]
大: shadow-[0_24px_60px_rgba(0,0,0,0.5)]
悬停: hover:shadow-[0_16px_44px_rgba(0,0,0,0.5)]
聚焦: focus-visible:ring-2 focus-visible:ring-white/60
```

### 交互效果
```
悬停位移: （无）
悬停缩放: （无）
悬停透明度: hover:bg-white/20
过渡动画: transition-all duration-300 ease-out
按下状态: active:scale-[0.98]
```

### 字体
```
标题: font-semibold text-white tracking-tight
正文: text-white/80 leading-relaxed
等宽: font-mono text-[#E8B04B] uppercase tracking-widest
```

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

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

### 颜色角色
```
背景主色: bg-[#0C0D10]
背景辅色: bg-[#1A1C22]
背景强调色: bg-[#E8B04B]
正文主色: text-white
正文辅色: text-white/80
正文弱化色: text-white/60
按钮主色: bg-white/12 backdrop-blur-md text-white border border-white/30
按钮辅色: bg-[#E8B04B] text-[#0C0D10]
```

---

## [FORBIDDEN] 绝对禁止

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

### 禁止的 Class
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `rounded-none`
- `duration-100`

### 禁止的模式
- 匹配 `^bg-gradient-to-r$`
- 匹配 `^from-(indigo|purple|pink|fuchsia)-`
- 匹配 `^rounded-none$`

### 禁止原因
- `bg-gradient-to-r`: Depth and color come from the photograph, not decorative gradients
- `from-indigo-600`: No AI-cliche gradients; the accent is sampled from the image's light
- `rounded-none`: Full-bleed imagery reads better with soft rounded framing (rounded-2xl)
- `duration-100`: Photo transitions and Ken Burns are slow and cinematic, never snappy

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

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
bg-white/12 backdrop-blur-md
border border-white/30
rounded-full
text-white
hover:bg-white/20 hover:border-white/50
transition-all duration-300
```

### 卡片必须包含
```
relative overflow-hidden
rounded-2xl
```

### 输入框必须包含
```
bg-white/10 backdrop-blur-md
border border-white/25
rounded-full
text-white placeholder-white/50
focus:outline-none focus:border-white/60 focus:bg-white/15
transition-all duration-300
```

---

## [COMPARE] Immersive Photo 错误 vs 正确对比

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

### 按钮

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

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300 bg-white/12 backdrop-blur-md text-white border border-white/30">
  点击我
</button>
```

### 卡片

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

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

### 输入框

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

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Immersive Photo 页面骨架模板

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

### 导航栏骨架
```html
<nav class="bg-[#0C0D10] text-white border border-white/25 px-6 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
    <a href="/" class="font-semibold text-white tracking-tight text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-8 text-white/80 leading-relaxed text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#E8B04B] text-white py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold text-white tracking-tight text-5xl md:text-7xl">
      {HEADLINE}
    </h1>
    <p class="text-white/80 leading-relaxed text-base md:text-lg max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300 bg-white/12 backdrop-blur-md text-white border border-white/30">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#0C0D10] text-white py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold text-white tracking-tight text-3xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card template - repeat for each card -->
      <div class="relative overflow-hidden rounded-2xl p-6">
        <h3 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="text-white/80 leading-relaxed text-base md:text-lg text-white/60">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#1A1C22] text-white/80 py-24 md:py-32 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      <div>
        <span class="font-semibold text-white tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="text-white/80 leading-relaxed text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="text-white/80 leading-relaxed text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Immersive Photo 生成后自检清单

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

### Token 检查
- [ ] 按钮包含： `bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300`
- [ ] 卡片包含： `relative overflow-hidden rounded-2xl`
- [ ] 输入框包含： `bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300`

### 禁止项检查
- [ ] 没有使用 `bg-gradient-to-r`
- [ ] 没有使用 `from-indigo-600`
- [ ] 没有使用 `via-purple-600`
- [ ] 没有使用 `to-pink-500`
- [ ] 没有使用 `rounded-none`
- [ ] 没有使用 `duration-100`

### 风格规则检查
- [ ] 每屏一张全幅照片 object-cover 铺满视口，图是主角、UI 让路
- [ ] 文字压图必铺可读性遮罩：linear-gradient 暗罩或局部 backdrop-blur，保证 4.5:1 对比
- [ ] Ken Burns 缓慢推拉：transform: scale(1.08) + translate，8-20s ease-in-out，只用 transform
- [ ] 渐进加载：LQIP 20px 模糊占位内联 base64 先显，真图 decode 后 opacity 交叉淡入
- [ ] 图用 AVIF + WebP 双格式 + srcset；hero preload fetchpriority=high，其余 loading=lazy decoding=async

### 风格漂移检查
- [ ] 没有违反：禁止把照片当纯装饰背景后铺一堆卡片挡住它（图是主角）
- [ ] 没有违反：禁止文字直接压在图上不加遮罩（读不清 + 对比不达标）
- [ ] 没有违反：禁止用未优化大图（必须 AVIF/WebP + srcset，绝不首屏加载多张全尺寸 JPG）
- [ ] 没有违反：禁止 Ken Burns 过快或改布局属性（只用 transform，8s 起步）
- [ ] 没有违反：禁止无 aspect-ratio 直接塞图（触发 CLS）

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

---

## [EXAMPLES] 示例 Prompt

### 1. 摄影游记长页

全幅大图驱动的旅行摄影长页

```
Create an immersive photo travelogue with:
1. Full-screen hero photo with a slow Ken Burns drift (transform scale 1->1.12, 18s ease-in-out alternate), an LQIP blur-up placeholder that cross-fades to the real frame, and a bottom-to-top scrim
2. Ink #0C0D10 / paper #F4F1EA solid sections between the photo passages for breath
3. Chapter kickers and one CTA in amber #E8B04B sampled from the light; everything else white/white-80 over imagery
4. A gallery of full-bleed photo cards (aspect-[4/5]) that scale slightly on hover, each with a gradient scrim caption
5. Images as <picture> AVIF+WebP with srcset; hero fetchpriority=high, rest loading=lazy decoding=async; explicit aspect-ratio to avoid CLS
6. Frosted (backdrop-blur) nav and buttons that stay legible over any photo
7. prefers-reduced-motion: Ken Burns off, fades instant; meaningful alt on every image
```

### 2. 产品摄影落地页

大图沉浸式产品落地页

```
Create an immersive product landing page with:
1. A full-bleed product hero photo, Ken Burns on load, LQIP blur-up, and a left-anchored scrim so the headline stays readable
2. Alternating sections: full-bleed lifestyle photo, then a quiet ink/paper text section, repeating
3. Amber #E8B04B for the single buy CTA and price highlight only; all other text white over scrims
4. Photo detail cards with aspect-ratio locked and hover scale-105
5. <picture> AVIF+WebP srcset, hero preloaded fetchpriority=high, rest lazy
6. A frosted sticky buy-bar (backdrop-blur) that floats over the imagery
7. reduced-motion: no Ken Burns, instant cross-fades; every image has descriptive alt
```

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

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

- 把照片当纯装饰背景后铺一堆卡片挡住它（图是主角）
- 文字直接压在图上不加遮罩（读不清 + 对比不达标）
- 用未优化大图（必须 AVIF/WebP + srcset，绝不首屏加载多张全尺寸 JPG）
- Ken Burns 过快或改布局属性（只用 transform，8s 起步）
- 无 aspect-ratio 直接塞图（触发 CLS）
- 多个强调色，禁止硬塞与照片冲突的品牌色
- 省略 LQIP 占位（首屏白屏 / 跳版）与 prefers-reduced-motion 降级

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

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

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 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 标题上面
- [ ] 禁止把照片当纯装饰背景后铺一堆卡片挡住它（图是主角）
- [ ] 禁止文字直接压在图上不加遮罩（读不清 + 对比不达标）
- [ ] 禁止用未优化大图（必须 AVIF/WebP + srcset，绝不首屏加载多张全尺寸 JPG）
- [ ] 禁止 Ken Burns 过快或改布局属性（只用 transform，8s 起步）
- [ ] 禁止无 aspect-ratio 直接塞图（触发 CLS）