应用商店截图库生成器

# App Store 截图画廊生成器

**为 iOS/macOS/Android 应用创建一个专业、可用于生产的截图画廊，使其看起来像是出自顶尖 1% 的应用开发者之手。**

## 背景

你正在为一个应用构建一个截图画廊页面。项目截图位于一个文件夹中（通常是 `screenshots/`、`fastlane/screenshots/` 或类似路径）。画廊应该是一个可以部署到 Netlify、Vercel 或任何静态主机的单个 HTML 文件。

## 要求

### 1. 设计系统基础

为以下内容创建 CSS 自定义属性（设计令牌）：

- **颜色**：主调色板（50-900 色阶）、辅助/强调调色板、中性灰色（50-900）
- **表面**：三个表面层级（surface-1、surface-2、surface-3）
- **排版**：双字体堆栈（UI 元素使用等宽字体，正文使用无衬线字体）
- **间距**：一致的比例（4px 基准）
- **边框**：圆角比例（sm, md, lg, xl, 2xl, 3xl）
- **阴影**：五个海拔层级（sm, md, lg, xl, 2xl）
- **过渡**：三种速度（fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier）

### 2. 布局架构

- **容器**：最大宽度 1600px，居中，带有响应式内边距
- **网格**：使用 `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` 的瀑布流式响应式网格
- **间隙**：桌面 2rem，平板 1.5rem，移动设备 1rem
- **卡片宽高比**：保持一致的截图展示

### 3. 头部区域

- **应用徽章**：带有图标和“IOS APPLICATION”或平台文本的小型药丸状徽章
- **标题**：大号、粗体应用名称，带有渐变文本处理
- **副标题**：一行描述，提及关键技术和功能
- **背景**：微妙的网格图案叠加，增加深度
- **内边距**：减少垂直内边距（顶部 3rem，底部 2rem），营造紧凑感

### 4. 截图卡片

每张卡片应包含：

- **容器**：白色/米白色背景，圆角（2xl），微妙的阴影
- **图片容器**：渐变背景，居中截图，带有白色边框（8px）
- **悬停效果**：
  - 卡片抬升（-8px translateY），阴影增强
  - 截图缩放（1.04），轻微旋转（0.5deg）
  - 顶部边框出现（渐变条）
  - 径向发光叠加层淡入
- **元数据条**：
  - 数字徽章（渐变背景，26px 正方形）
  - 设备名称（大写，小字体，等宽字体）
- **标题**：粗体，等宽字体，1rem
- **描述**：一行说明文字，小字体，柔和颜色

### 5. 用户旅程排序

按照用户体验应用的方式对截图进行排序：

1. **登录/引导** - 用户看到的第一个屏幕
2. **仪表板/主页** - 登录后的主要着陆页
3. **主要功能视图** - 核心应用功能
4. **设置/配置** - 自定义屏幕
5. **权限/集成** - HealthKit、通知等
6. **高级功能** - 同步、共享、云功能
7. **分析/报告** - 数据可视化屏幕
8. **存档/历史** - 历史数据视图

### 6. 动画

- **入场**：交错淡入并伴随 translateY（卡片之间延迟 0.1 秒）
- **悬停**：平滑的 cubic-bezier 缓动（0.16, 1, 0.3, 1）
- **滚动**：IntersectionObserver 在卡片进入视口时触发动画
- **性能**：对 transform 和 opacity 使用 `will-change`

### 7. 页脚

- **背景**：深色（neutral-900），带有微妙的渐变叠加
- **边框圆角**：仅顶部圆角（2xl）
- **内容**：最少的元数据（设备、日期、状态）和图标
- **间距**：紧凑（2rem 内边距）

### 8. 响应式断点

- **桌面** (>1280px)：4-5 列
- **平板** (768-1280px)：2-3 列
- **移动设备** (<768px)：1 列，整体内边距减少

### 9. 技术要求

- **单个 HTML 文件**：所有 CSS 内联在 `<style>` 标签中
- **仅外部依赖**：
  - Pico.css (极简 CSS 框架)
  - Font Awesome (图标)
  - Google Fonts (Inter + IBM Plex Mono)
  - Animate.css (可选，用于额外动画)
- **无构建步骤**：必须作为静态 HTML 工作
- **性能**：优化动画，无布局偏移
- **可访问性**：语义化 HTML，图片 alt 文本

### 10. 细节打磨

- **微妙渐变**：背景径向渐变以增加深度（不至于过于突出）
- **边框处理**：1px 实线，带有 alpha 透明度
- **阴影分层**：多个阴影值以增加深度
- **排版**：标题字间距紧密（-0.03em）
- **颜色一致性**：所有地方都使用设计令牌，无硬编码值
- **图片展示**：截图周围的白色边框，营造设备边框的错觉

## 输出格式

生成一个包含以下内容的 `index.html` 文件：

1. 完整的 HTML 结构
2. 带有设计令牌的内联 CSS
3. 用于滚动动画的 JavaScript (IntersectionObserver)
4. 所有带有正确元数据的截图卡片
5. 适用于所有屏幕尺寸的响应式设计

## 示例截图卡片结构

```html
<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="Description" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">Screen Title</h3>
        <p class="screenshot-desc">One-line caption</p>
    </div>
</div>
```

## 与“AI 生成”画廊的关键区别

❌ **避免**：
- 过多的渐变和颜色
- 占用空间的大型统计卡片
- 冗长的描述和功能列表
- 分区线和类别标题
- 过于花哨的动画
- 不一致的间距
- 通用的图库照片风格

✅ **模仿**：
- Apple App Store 产品页面
- Linear、Raycast、Superhuman 的营销网站
- 极简主义、内容优先的设计
- 精致、细微的交互
- 一致的视觉节奏
- 排版驱动的层级结构
- 将留白作为设计元素

## 部署说明

- 画廊应部署到 `project-root/screenshots-gallery/` 或类似路径
- 包含 `.netlify` 文件夹和 `netlify.toml` 用于配置
- 所有截图应与 `index.html` 位于同一文件夹中
- 无需构建过程 - 纯静态 HTML

---

**用法**：复制此提示词并提供给 AI 助手，同时提供：
1. 项目中的截图文件列表
2. 你的应用名称和一行描述
3. 平台（iOS、macOS、Android、web）
4. 使用的关键技术（SwiftUI、React Native、Flutter 等）

AI 将生成一个看起来专业设计的、可用于生产的画廊。