注意：请务必使用 6.1 英寸模拟器来截取初始屏幕截图

这样可以省去后续调整图片的麻烦

App Store 和 Google Play 屏幕截图生成器

这是一项专为 AI 驱动的编码助手（Claude Code、Cursor、Windsurf 等）设计的技能，能够为 iOS 和 Android 应用程序生成生产就绪的 App Store 和 Google Play 屏幕截图。它会搭建一个 Next.js 项目，设计广告风格的截图，并以 Apple 和 Google 所需的所有分辨率导出这些截图。

截图及应用已获 Apple 审核通过 - https://apps.apple.com/us/app/bloom-coffee-shelf-recipe/id6759914524

功能简介

• 询问您的应用品牌、功能和风格偏好
• 搭建一个最小化的 Next.js 项目（或在现有项目中运行）
• 将每张截图设计成 广告形式，而非单纯的 UI 展示
• 使用经过验证的 App Store / Play Store 文案模式撰写吸引人的文案
• 利用内置的 iPhone 模拟器和基于 CSS 的 Android 设备框架，以完整分辨率渲染截图
• 导出适用于 两家商店 的所有所需尺寸的 PNG 文件
• 支持 Android 手机、7 英寸平板、10 英寸平板（竖屏 + 横屏）以及 特色图形（1024×500）
• 支持基于本地化的截图集和本地化文案
• 支持可复用的主题预设，方便快速切换视觉方向
• 支持 RTL 方向布局，并可批量导出不同语言/设备/主题组合的截图

包含资源

• mockup.png — 已预先测量好的 iPhone 框架，带有透明屏幕区域
• Android 设备框架完全由 CSS 渲染，无需额外的模拟器 PNG 图像

安装方法

使用 npx skills（推荐）

npx skills add ParthJadhav/app-store-screenshots

此方法适用于 Claude Code、Cursor、Windsurf、OpenCode、Codex 以及其他 40 多种助手。

全局安装（可在所有项目中使用）：

npx skills add ParthJadhav/app-store-screenshots -g

为特定助手安装：

npx skills add ParthJadhav/app-store-screenshots -a claude-code

手动安装（git 克隆）

git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

使用方法

安装完成后，当您要求 Claude Code 执行以下操作时，该技能将自动触发：

• 构建 App Store 或 Google Play 屏幕截图
• 为 iOS 或 Android 应用程序生成营销截图
• 创建可用于两家商店的可导出截图资产

或者直接告诉 Claude Code 您的需求：

> 为我的应用构建 App Store 和 Google Play 屏幕截图

Claude 会先询问您关于应用截图、品牌色、字体、功能、风格方向以及幻灯片数量等信息，然后再开始制作。

示例提示语

以下是一些不错的起始提示，它们既提供了产品背景信息，又留有空间让技能引导设计流程。

习惯追踪应用

为我的习惯追踪应用构建 App Store 截图。
这款应用帮助用户坚持简单的日常习惯。
我想要 6 张幻灯片，干净简约的风格，暖色调中性色，营造宁静高端的感觉。

财务管理应用

为我的个人财务管理应用生成 App Store 截图。
该应用的主要优势在于快速记录支出、清晰展示月度趋势以及共享预算功能。
我希望采用鲜明现代的风格，高对比度，共 7 张幻灯片。

AI 生产力工具

为我的 AI 笔记应用创建可导出的 App Store 截图。
其核心价值是将杂乱的语音笔记转化为简洁的摘要和待办事项。
我想要大胆的文案、深色背景，以及精致前卫的科技感外观。

健康类应用

为我的冥想应用构建营销截图。
该应用专注于睡眠、缓解压力和短时引导练习。
请采用柔和温暖的有机风格，优先考虑情感效果而非功能列表。

多语言/多主题应用

为我的语言学习应用构建 App Store 截图。
我需要英语、德语和阿拉伯语三种语言版本的截图。
使用两种可复用的主题：简洁浅色和深色大胆风格。
确保阿拉伯语版本的截图具有原生 RTL 感觉，而不仅仅是翻译过来的。

更好提示语的技巧

• 用一句话说明应用的功能
• 按优先级列出 3–5 个主要功能
• 描述您想要的视觉风格
• 提及所需的幻灯片数量
• 是否需要多语言支持或 RTL 本地化
• 是否希望统一视觉方向或使用可复用的主题预设
• 如果希望输出符合特定 App Store 风格，请提供参考

自动搭建的内容

如果从空文件夹开始，该技能会创建如下目录结构：

project/
├── public/
│   ├── mockup.png          # iPhone 框架（从技能中复制而来）
│   ├── app-icon.png        # 您的应用图标
│   ├── screenshots/        # iOS 截图（可选本地化子文件夹）
│   │   └── android/        # Android 截图（当同时针对两个平台时）
│   └── screenshots-ipad/   # 可选的 iPad 截图
├── src/app/
│   ├── layout.tsx          # 字体设置
│   └── page.tsx            # 截图生成器（单个文件）
├── package.json
└── ...

当同时针对两家商店时，技能会使用基于平台的文件夹结构，将 iOS 和 Android 截图分开存放。

整个生成器仅包含一个 single page.tsx 文件。启动开发服务器后，打开浏览器，点击任意一张截图即可将其导出为 PNG 格式。

最新版本的技能还能够引导助手完成以下任务：

• 生成本地化标签页和特定于本地化的截图文件夹
• 基于设计令牌的可复用主题预设
• 针对阿拉伯语、希伯来语等语言的 RTL 方向布局
• 支持按本地化/设备/主题组合进行批量导出

导出尺寸

Apple App Store

显示屏	分辨率
6.9"	1320 x 2868
6.5"	1284 x 2778
6.3"	1206 x 2622
6.1"	1125 x 2436

Google Play 商店

设备	分辨率
手机（竖屏）	1080 x 1920
7 英寸平板（竖屏）	1200 x 1920
7 英寸平板（横屏）	1920 x 1200
10 英寸平板（竖屏）	1600 x 2560
10 英寸平板（横屏）	2560 x 1600
特色图形	1024 x 500

截图会以各平台的最大尺寸设计，再缩小到较小的尺寸。Android 设备框架完全由 CSS 渲染。

高级功能

多语言截图

该技能可以通过在本地化文件夹下嵌套图像来生成多语言版本的截图系统，例如：

public/screenshots/en/home.png
public/screenshots/de/home.png
public/screenshots/ar/home.png

生成的页面会保持幻灯片结构不变，仅切换本地化基础路径和文案词典。

主题预设

技能不再硬编码单一的设计方向，而是采用基于标记的预设系统，例如：

const THEMES = {
  "clean-light": { bg: "#F6F1EA", fg: "#171717", accent: "#5B7CFA" },
  "dark-bold": { bg: "#0B1020", fg: "#F8FAFC", accent: "#8B5CF6" },
  "warm-editorial": { bg: "#F7E8DA", fg: "#2B1D17", accent: "#D97706" },
} as const;

这样可以在快速测试不同视觉风格的同时，复用相同的幻灯片系统。

支持 RTL 的设计

对于阿拉伯语、希伯来语等从右到左书写的语言环境，该技能现在会指示代理执行以下操作：

• 在截图画布上设置 dir="rtl"
• 为目标语言重写换行符
• 有意镜像非对称布局
• 确保版面保持原生感，而不是机械地翻转

批量导出矩阵

生成器现在不仅支持导出当前幻灯片，还支持以下导出方式：

• 当前语言/设备/主题下的所有幻灯片
• 当前主题下的所有语言版本
• 必要时导出完整的语言 × 设备 × 主题矩阵

技术栈

依赖项	用途
Next.js	开发服务器 + 静态图片服务
TypeScript	类型安全
Tailwind CSS	样式化
html-to-image	按精确分辨率导出 PNG
React	组件组合

核心设计原则

• 截图是广告，而非文档 — 每张幻灯片只传达一个核心理念
• 文案遵循“一秒法则” — 在 App Store 的缩略图尺寸下仍可清晰阅读
• 布局多样化 — 任何相邻的两张幻灯片都不会使用相同的手机摆放位置
• 风格由用户驱动 — 不使用硬编码的颜色、渐变或字体

质量检查清单

在导出之前，每张幻灯片都应通过以下快速审核：

• 标题应在约一秒钟内传达一个明确的理念
• 第一张幻灯片应突出最强的用户价值
• 相邻的幻灯片不应重复使用相同的布局
• 装饰元素应服务于信息传递，而非遮挡界面
• 文字、截图和构图在导出后仍应保持正确比例

系统要求

• Node.js 18 或更高版本
• 使用 bun、pnpm、yarn 或 npm 中的任意一种包管理工具（自动检测，推荐使用 bun）

贡献说明

欢迎各类贡献，尤其关注以下方面：

• 截图生成的可靠性
• 技能提示的质量
• 更清晰的文档和入门指南
• 跨代理兼容性

如需贡献，请先阅读 CONTRIBUTING.md。此外，Bug 报告和功能请求现已提供问题模板，以便更轻松地复现和评审。

许可证

MIT

app-store-screenshots 快速上手指南

app-store-screenshots 是一个专为 AI 编程助手（如 Claude Code、Cursor、Windsurf 等）设计的技能工具。它能自动搭建 Next.js 项目，生成符合 Apple App Store 和 Google Play 商店要求的高质量营销截图（广告风格），并导出所有必需分辨率的图片。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：macOS、Linux 或 Windows (WSL)
• Node.js：版本 18 或更高
• 包管理器：推荐使用 bun，也支持 pnpm、yarn 或 npm（工具会自动检测）
• AI 编程助手：已安装并配置好 Claude Code、Cursor、Windsurf 或其他支持 Skills 的代理工具
• 模拟器建议：若需截取初始应用界面，请务必使用 6.1 英寸 的 iOS 模拟器，以避免后期调整图片尺寸。

安装步骤

推荐通过 npx skills 命令直接安装，该方式兼容 40+ 种 AI 代理。

方式一：全局安装（推荐）

安装后可在所有项目中通用：

npx skills add ParthJadhav/app-store-screenshots -g

方式二：为特定代理安装

仅针对特定工具（如 Claude Code）安装：

npx skills add ParthJadhav/app-store-screenshots -a claude-code

方式三：手动安装 (Git Clone)

如果不使用 npx，可手动克隆到本地技能目录：

git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

基本使用

安装完成后，无需编写复杂代码，只需在您的 AI 编程助手对话框中输入自然语言指令即可触发。

1. 触发生成

在对话中输入类似以下的指令：

Build App Store and Google Play screenshots for my app

2. 提供关键信息

AI 会引导您确认以下细节，您也可以直接在初始指令中提供以加快流程：

• 应用功能：一句话描述应用是做什么的。
• 核心卖点：列出 3-5 个主要功能。
• 视觉风格：描述想要的风格（如：极简、现代、温暖、深色模式等）。
• 截图数量：需要生成的幻灯片数量（通常 5-8 张）。
• 多语言/RTL：是否需要多语言版本或右向左（如阿拉伯语）布局。

3. 使用示例提示词

示例 A：习惯养成类应用

Build App Store screenshots for my habit tracker.
The app helps people stay consistent with simple daily routines.
I want 6 slides, clean/minimal style, warm neutrals, and a calm premium feel.

示例 B：多语言与多主题

Build App Store screenshots for my language learning app.
I need English, German, and Arabic screenshot sets.
Use two reusable themes: clean-light and dark-bold.
Make sure Arabic slides feel RTL-native, not just translated.

4. 预览与导出

工具会自动 scaffold 一个最小化的 Next.js 项目：

1. 运行开发服务器（通常由 AI 自动执行 npm run dev 或 bun run dev）。
2. 在浏览器中打开生成的页面。
3. 页面上会展示所有设计好的截图，点击任意截图即可将其作为高分辨率 PNG 文件导出。

生成的文件结构将包含所有平台所需的尺寸（iOS 多种屏幕比例、Android 手机/平板横竖屏及 Feature Graphic），并自动处理多语言文件夹结构。