App Store 截图画廊生成器

# 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 应用”或平台文字 - **标题**：大号粗体应用名称，带渐变文字效果 - **副标题**：一行描述，提及关键技术和功能 - **背景**：微妙的网格图案叠加，增加层次感 - **内边距**：减少垂直内边距（顶部 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="描述" 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 将生成一个专业设计水准、可投入生产的画廊。