瀑布流布局

STYLEKIT_STYLE_REFERENCE
style_name: 瀑布流布局
style_slug: masonry-flow
style_source: /styles/masonry-flow

# Hard Prompt

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

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

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

## 执行要求

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

## Style Rules

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

## 必须遵守

- 使用 CSS columns 实现简单瀑布流 columns-2 md:columns-3 lg:columns-4
- 或使用 CSS Grid masonry（需浏览器支持）grid-rows-[masonry]
- 卡片添加 break-inside-avoid 防止内容断裂
- 统一卡片宽度，高度自适应内容
- 保持列间距一致 gap-4 或 gap-6
- 添加加载动画和懒加载图片
- 响应式调整列数 columns-1 sm:columns-2 lg:columns-3
- 卡片使用 group 类，图片在 overflow-hidden 内 group-hover:scale-105 duration-700 ease-out（Confined Zoom，永不突破容器）
- 卡片悬浮：hover:-translate-y-1 hover:shadow-[0_15px_30px_rgba(0,0,0,0.08)]（Subtle Elevation，轻盈不打断瀑布流视觉连贯性）
- 操作按钮 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300（Overlay Reveal，遮罩抽屉浮现）
- filter 筛选按钮 duration-200 确保即时响应（Action Snappiness）

## 绝对禁止

- 禁止强制所有卡片等高（失去瀑布流特色）
- 禁止卡片宽度不一致
- 禁止间距不统一
- 禁止忽略图片加载状态
- 禁止在小屏幕使用过多列数
- 禁止图片放大突破 overflow-hidden 容器（Confined Zoom 必须保持边界）
- 禁止卡片使用生硬的深色边框作为 hover 反馈（用阴影和位移代替）
- 禁止 hover 位移超过 -translate-y-1（过大的浮起会打断瀑布流视觉连贯性）

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Animation & Interaction Rules

- Confined Zoom: 图片缩放必须发生在 overflow-hidden 容器内，推荐 group-hover:scale-105 + duration-700。
- Subtle Elevation: hover 位移控制在 -translate-y-1，并用弥散阴影而非硬边框表达聚焦。
- Overlay Reveal: 图片覆盖层和操作按钮使用 opacity + translate 的组合渐显，不改变卡片主尺寸。
- Action Snappiness: 顶部筛选和分类按钮使用 duration-200，确保快速切换反馈。

## Self-Check

---

# Masonry Flow (瀑布流布局) Design System

> Pinterest 风格的不等高卡片瀑布流布局，通过 CSS columns 或 masonry grid 实现自然流动的视觉效果，适合图片展示、作品集、社交媒体。

## 核心理念

Masonry Flow（瀑布流布局）是一种模仿砖墙砌筑方式的布局，卡片按列排列，高度不一，形成自然流动的视觉效果。

核心理念：
- 自然流动：内容高度由内容本身决定，无需强制等高
- 空间利用：最大化利用可视区域，减少留白浪费
- 视觉节奏：不规则高度创造有趣的视觉韵律
- 无限滚动：天然适合加载更多内容的交互模式

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

---

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

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

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

### 交互效果
```
悬停位移: hover:-translate-y-1
悬停缩放: hover:scale-[1.02]
悬停透明度: （无）
过渡动画: 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-8 md:py-12 lg:py-16
容器: px-4 md:px-6 lg:px-8
卡片: p-4 md:p-5
小间距: gap-3 md:gap-4
中间距: gap-4 md:gap-6
大间距: gap-6 md:gap-8
```

### 颜色角色
```
背景主色: bg-zinc-50
背景辅色: bg-white
背景强调色: bg-[#e94560], bg-[#16c79a], bg-[#ffd460], bg-[#7579e7]
正文主色: text-zinc-900
正文辅色: text-zinc-600
正文弱化色: text-zinc-400
按钮主色: bg-zinc-900 text-white
按钮辅色: bg-zinc-100 text-zinc-700
```

---

## [FORBIDDEN] 绝对禁止

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

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

### 禁止的模式
- 匹配 `^border-[248]`
- 匹配 `^shadow-\[`

### 禁止原因
- `rounded-none`: Masonry Flow uses rounded corners (rounded-xl) for soft card aesthetics
- `border-4`: Masonry Flow uses borderless or very subtle borders
- `font-black`: Masonry Flow uses semibold weight, not black

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

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
rounded-lg
font-medium text-sm
transition-colors
```

### 卡片必须包含
```
break-inside-avoid
rounded-xl
overflow-hidden
bg-white
```

### 输入框必须包含
```
rounded-full
bg-zinc-100
border-0
focus:outline-none
focus:ring-2 focus:ring-zinc-900/10
transition-all
```

---

## [COMPARE] Masonry Flow 错误 vs 正确对比

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

### 按钮

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

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="rounded-lg font-medium text-sm transition-colors bg-zinc-900 text-white">
  点击我
</button>
```

### 卡片

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

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="break-inside-avoid rounded-xl overflow-hidden bg-white p-4 md:p-5">
  <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="rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Masonry Flow 页面骨架模板

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

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

### Hero 区块骨架
```html
<section class="bg-[#e94560] text-zinc-900 py-8 md:py-12 lg:py-16 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="rounded-lg font-medium text-sm transition-colors bg-zinc-900 text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-zinc-50 text-zinc-900 py-8 md:py-12 lg:py-16 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-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="break-inside-avoid rounded-xl overflow-hidden bg-white p-4 md:p-5">
        <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="rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-white text-zinc-600 py-8 md:py-12 lg:py-16 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-6 md:gap-8">
      <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] Masonry Flow 生成后自检清单

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

### Token 检查
- [ ] 按钮包含： `rounded-lg font-medium text-sm transition-colors`
- [ ] 卡片包含： `break-inside-avoid rounded-xl overflow-hidden bg-white`
- [ ] 输入框包含： `rounded-full bg-zinc-100 border-0 focus:outline-none focus:ring-2 focus:ring-zinc-900/10 transition-all`

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

### 风格规则检查
- [ ] 使用 CSS columns 实现简单瀑布流 columns-2 md:columns-3 lg:columns-4
- [ ] 或使用 CSS Grid masonry（需浏览器支持）grid-rows-[masonry]
- [ ] 卡片添加 break-inside-avoid 防止内容断裂
- [ ] 统一卡片宽度，高度自适应内容
- [ ] 保持列间距一致 gap-4 或 gap-6

### 风格漂移检查
- [ ] 没有违反：禁止强制所有卡片等高（失去瀑布流特色）
- [ ] 没有违反：禁止卡片宽度不一致
- [ ] 没有违反：禁止间距不统一
- [ ] 没有违反：禁止忽略图片加载状态
- [ ] 没有违反：禁止在小屏幕使用过多列数

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

---

## [EXAMPLES] 示例 Prompt

### 1. 图片画廊

Pinterest 风格的图片瀑布流

```
Create a Pinterest-style photo gallery with masonry layout:
1. Use CSS columns for masonry: columns-2 md:columns-3 lg:columns-4
2. Cards with varying heights (aspect-[3/4], aspect-square, aspect-[4/5])
3. Each card: rounded-xl, overflow-hidden, shadow on hover
4. Image with lazy loading and hover scale effect
5. Optional overlay with title on hover
6. Filter tabs at top (All, Photos, Videos, etc.)
7. Load more button at bottom
All cards use break-inside-avoid, consistent gap-4
```

### 2. 作品集展示

设计师作品集的瀑布流布局

```
Create a designer portfolio with masonry flow:
1. Masonry grid with columns-1 md:columns-2 lg:columns-3
2. Project cards with different aspect ratios
3. Each card shows: project image, title, category tag
4. Hover effect: reveal project description
5. Mix of image cards and text-only cards
6. Category filter navigation
7. Smooth scroll to load more projects
Cards use break-inside-avoid, rounded-2xl, elegant shadows
```

### 3. 社交动态墙

社交媒体风格的内容流

```
Create a social media feed with masonry layout:
1. Masonry columns: columns-1 sm:columns-2 lg:columns-3
2. Mixed content cards: text posts, images, quotes, links
3. Each card has: avatar, username, timestamp, content, reactions
4. Image posts have varying aspect ratios
5. Text posts auto-height based on content
6. Hover to show action buttons (like, comment, share)
7. Infinite scroll loading indicator
Use break-inside-avoid, rounded-xl cards, subtle shadows
```

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

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

- 强制所有卡片等高（失去瀑布流特色）
- 卡片宽度不一致
- 间距不统一
- 忽略图片加载状态
- 在小屏幕使用过多列数
- 图片放大突破 overflow-hidden 容器（Confined Zoom 必须保持边界）
- 卡片使用生硬的深色边框作为 hover 反馈（用阴影和位移代替）
- hover 位移超过 -translate-y-1（过大的浮起会打断瀑布流视觉连贯性）

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

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

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 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 标题上面
- [ ] 禁止强制所有卡片等高（失去瀑布流特色）
- [ ] 禁止卡片宽度不一致
- [ ] 禁止间距不统一
- [ ] 禁止忽略图片加载状态
- [ ] 禁止在小屏幕使用过多列数