TokenToSea提示词广场
English 控制台

App Store 截图画廊生成器

编程开发·任务模板

在聊天中使用

为 iOS、macOS 或 Android 应用生成单文件 HTML 截图画廊页面，含设计令牌与布局要求。

# 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）
- **过渡**：三种速度（快速：150ms，正常：300ms，平滑：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）
- **悬停效果**：
  - 卡片上浮（-8px translateY）并增强阴影
  - 截图放大（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">屏幕标题</h3>
        <p class="screenshot-desc">单行说明文字</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 将生成一个外观专业、可直接用于生产的截图画廊。

相关推荐

更多