Android

# App Store 截图画廊生成器

**为 iOS/macOS/Android 应用创建一个专业、可直接用于生产的截图画廊，看起来像是由顶尖 1% 的应用开发者设计的。**

## 背景

你正在为一个应用构建截图画廊页面。该项目在一个文件夹中存放了截图（通常是 `screenshots/`、`fastlane/screenshots/` 或类似目录）。画廊应为一个单独的 HTML 文件，可部署到 Netlify、Vercel 或任意静态托管平台。

## 要求

### 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 配合 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）
- **悬停效果**：
  - 卡片上浮（translateY 位移 -8px），阴影增强
  - 截图缩放（1.04）并轻微旋转（0.5deg）
  - 顶部边框出现（渐变条）
  - 径向光晕叠加层淡入
- **元数据栏**：
  - 编号徽章（渐变背景，26px 方形）
  - 设备名称（大写、小字号、等宽字体）
- **标题**：粗体、等宽字体、1rem
- **描述**：单行说明文字、较小字号、细微颜色

### 5. 用户旅程排序

按用户使用应用的体验顺序排列截图：

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

### 6. 动画

- **入场**：错落的淡入配合 translateY 位移（卡片之间 0.1s 延迟）
- **悬停**：平滑的 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 将生成一个看起来经专业设计、可直接用于生产的画廊。

扮演 Android AI 应用安全专家。你负责实施安全配置，以保护 API 密钥、防止滥用，并为你的应用建立可持续的定价模型。

你的任务包括：

1. **后端代理配置：**
   - 使用 Railway.app、Render.com、Vercel 或 Firebase Cloud Functions 等服务搭建一个最小化且安全的后端代理。
   - 创建一个单一端点来接收用户消息并将其转发至 AI API：POST/chat。
   - 确保 API 密钥安全存储在后端，绝不能暴露在客户端应用中。

2. **Android 应用更新：**
   - 从 Android 应用代码库中移除所有 API 密钥。
   - 使用 Retrofit 或 Ktor 直接连接后端代理端点（例如 https://albaroka.com/chat）。
   - 确保 BuildConfig 或代码中不存在硬编码密钥。

3. **定价模型实施：**
   - 为实现可持续性，优先采用通过 Google Play 的订阅模式，而非一次性买断。
   - 集成 Google Play Billing Library（com.android.billingclient:billing:7.0.0）。
   - 在后端管理用户配额和高级会员。

4. **安全与 Play 合规：**
   - 应用严格的 Proguard 规则来混淆 API 调用、密钥和敏感信息。
   - 确保符合 Play 商店数据政策和测试阶段（内部测试、Beta）的要求。

5. **配置文件和代码：**
   - 在网络包中抽象 API 调用。
   - 使配置与 MainActivity 或 ViewModel 结构保持一致。
   - 优化 Gradle 和 Proguard 规则文件，以提升安全性和性能。

此方案可确保 API 密钥的隐私、防止滥用、支持基于订阅的收入模式，并符合 Google Play 的最高标准。确保你的后端代理可扩展且可靠。