提示词中文站 prompts.chat 中文镜像
首页 全部提示词 Web Development

App Store 截图画廊生成器

App Store Screenshots Gallery Generator

文本 @agileinnov8tor 3,558 字符 在 prompts.chat 查看 译文有问题？

中文译文

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）
  • 悬停效果：
    • 卡片上浮（-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. 适配所有屏幕尺寸的响应式设计

截图卡片结构示例

<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 将生成一个可直接投入生产、看起来经过专业设计的图库。

English original

App Store Screenshots Gallery Generator

Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.

Context

You are building a screenshots gallery page for an app. The project has screenshots in a folder (typically screenshots/, fastlane/screenshots/, or similar). The gallery should be a single HTML file that can be deployed to Netlify, Vercel, or any static host.

Requirements

1. Design System Foundation

Create CSS custom properties (design tokens) for:

  • Colors: Primary palette (50-900 shades), secondary/accent palette, neutral grays (50-900)
  • Surfaces: Three surface levels (surface-1, surface-2, surface-3)
  • Typography: Two-font stack (mono for UI elements, sans for body)
  • Spacing: Consistent scale (4px base)
  • Borders: Radius scale (sm, md, lg, xl, 2xl, 3xl)
  • Shadows: Five elevation levels (sm, md, lg, xl, 2xl)
  • Transitions: Three speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier)

2. Layout Architecture

  • Container: Max-width 1600px, centered, with responsive padding
  • Grid: Masonry-style responsive grid using grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))
  • Gap: 2rem on desktop, 1.5rem tablet, 1rem mobile
  • Card aspect ratio: Maintain consistent screenshot presentation

3. Header Section

  • App badge: Small pill-shaped badge with icon and "IOS APPLICATION" or platform text
  • Title: Large, bold app name with gradient text treatment
  • Subtitle: One-line description mentioning key technologies and features
  • Background: Subtle grid pattern overlay for depth
  • Padding: Reduced vertical padding (3rem top, 2rem bottom) for compact feel

4. Screenshot Cards

Each card should have:

  • Container: White/off-white background, rounded corners (2xl), subtle shadow
  • Image container: Gradient background, centered screenshot with white border (8px)
  • Hover effects:
    • Card lifts (-8px translateY) with enhanced shadow
    • Screenshot scales (1.04) with slight rotation (0.5deg)
    • Top border appears (gradient bar)
    • Radial glow overlay fades in
  • Metadata bar:
    • Number badge (gradient background, 26px square)
    • Device name (uppercase, small font, mono font)
  • Title: Bold, mono font, 1rem
  • Description: One-line caption, smaller font, subtle color

5. User Journey Ordering

Order screenshots by how users experience the app:

  1. Login/Onboarding - First screen users see
  2. Dashboard/Home - Main landing after login
  3. Primary feature views - Core app functionality
  4. Settings/Configuration - Customization screens
  5. Permissions/Integrations - HealthKit, notifications, etc.
  6. Advanced features - Sync, sharing, cloud features
  7. Analytics/Reports - Data visualization screens
  8. Archive/History - Historical data views

6. Animations

  • Entrance: Staggered fade-in with translateY (0.1s delays between cards)
  • Hover: Smooth cubic-bezier easing (0.16, 1, 0.3, 1)
  • Scroll: IntersectionObserver to trigger animations when cards enter viewport
  • Performance: Use will-change for transform and opacity

7. Footer

  • Background: Dark (neutral-900) with subtle gradient overlay
  • Border radius: Top corners only (2xl)
  • Content: Minimal metadata (device, date, status) with icons
  • Spacing: Compact (2rem padding)

8. Responsive Breakpoints

  • Desktop (>1280px): 4-5 columns
  • Tablet (768-1280px): 2-3 columns
  • Mobile (<768px): 1 column, reduced padding throughout

9. Technical Requirements

  • Single HTML file: All CSS inline in <style> tag
  • External dependencies only:
    • Pico.css (minimal CSS framework)
    • Font Awesome (icons)
    • Google Fonts (Inter + IBM Plex Mono)
    • Animate.css (optional, for additional animations)
  • No build step: Must work as static HTML
  • Performance: Optimized animations, no layout shift
  • Accessibility: Semantic HTML, alt text on images

10. Polish Details

  • Subtle gradients: Background radials for depth (not overwhelming)
  • Border treatment: 1px solid with alpha transparency
  • Shadow layering: Multiple shadow values for depth
  • Typography: Tight letter-spacing on headings (-0.03em)
  • Color consistency: Use design tokens everywhere, no hardcoded values
  • Image presentation: White border around screenshots for device frame illusion

Output Format

Generate a single index.html file with:

  1. Complete HTML structure
  2. Inline CSS with design tokens
  3. JavaScript for scroll animations (IntersectionObserver)
  4. All screenshot cards with proper metadata
  5. Responsive design for all screen sizes

Example Screenshot Card Structure

<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>

Key Differentiators from "AI-looking" Galleries

❌ Avoid:

  • Excessive gradients and colors
  • Large stat cards that waste space
  • Verbose descriptions and feature lists
  • Section dividers and category headers
  • Overwhelming animations
  • Inconsistent spacing
  • Generic stock photography style

✅ Emulate:

  • Apple App Store product pages
  • Linear, Raycast, Superhuman marketing sites
  • Minimalist, content-first design
  • Subtle, refined interactions
  • Consistent visual rhythm
  • Typography-driven hierarchy
  • White space as design element

Deployment Notes

  • Gallery should deploy to project-root/screenshots-gallery/ or similar
  • Include .netlify folder with netlify.toml for configuration
  • All screenshots should be in the same folder as index.html
  • No build process required - pure static HTML

Usage: Copy this prompt and provide it to an AI assistant along with:

  1. The list of screenshot files in your project
  2. Your app name and one-line description
  3. The platform (iOS, macOS, Android, web)
  4. Key technologies used (SwiftUI, React Native, Flutter, etc.)

The AI will generate a production-ready gallery that looks professionally designed.

同类提示词

更多「Web Development」→