# App Store 截图自动生成

`App Store` `截图生成` `iOS` `Claude Code` `AI增强` `营销素材`

# ASO App Store 截图工具

一个 Claude Code 技能，用于为您的 iOS 应用生成高转化率的 App Store 截图。它会分析您的代码库，识别核心卖点，并使用 AI 创建专业截图。

## 功能介绍

1. **卖点挖掘** — 分析您的应用代码库，识别驱动下载的 3-5 个核心优势
2. **截图匹配** — 审查您的模拟器截图，对其评分，并为每张截图匹配最合适的卖点
3. **截图生成** — 通过两阶段流程生成精美的 App Store 截图：确定性脚手架（compose.py）+ AI 增强（通过 Gemini MCP 调用 Nano Banana Pro）
4. **效果预览** — 生成包含所有截图并排展示的预览图

## 安装说明

### 1. 将技能添加到 Claude Code

```bash
claude install-skill github.com/adamlyttleapps/claude-skill-aso-appstore-screenshots
```

### 2. 安装 Python 依赖

```bash
pip install Pillow
```

### 3. 字体要求

该技能使用 **SF Pro Display Black** 作为标题字体。在 macOS 上，请从 [Apple 开发者字体页面](https://developer.apple.com/fonts/) 安装。预期路径为：

```
/Library/Fonts/SF-Pro-Display-Black.otf
```

### 4. 配置 Gemini MCP（用于 AI 增强）

生成阶段需要将 [@houtini/gemini-mcp](https://www.npmjs.com/package/@houtini/gemini-mcp) 配置为 Claude Code 的 MCP 服务：

```bash
npm install -g @houtini/gemini-mcp
```

然后将其添加到 Claude Code 的 MCP 配置文件（`~/.claude/settings.json` 或项目根目录的 `.mcp.json`）中。

## 使用方法

在您的应用项目目录中执行：

```
/aso-appstore-screenshots
```

技能将以交互方式引导您完成每个阶段。进度会保存到 Claude Code 的记忆系统中，支持跨会话续处理。

## 工作原理

### 脚手架 → 增强流水线

与其从零生成截图（结果往往参差不齐），该技能采用两阶段方式：

1. **compose.py** 生成确定性脚手架，精确控制文字位置、设备边框，并将模拟器截图合成其中
2. **Nano Banana Pro**（通过 Gemini MCP）对脚手架进行增强，添加写实设备边框、突出元素和视觉精修

这样既保证了所有截图布局的一致性，又让 AI 负责创意增强部分。

### 输出结构

截图保存在项目的 `screenshots/` 目录中：

```
screenshots/
  01-benefit-slug/          ← 工作版本
    scaffold.png            ← compose.py 生成的确定性脚手架
    v1.png, v2.png, v3.png  ← AI 增强版本
    v1-resized.png, ...     ← 裁剪至 App Store 尺寸的版本
  final/                    ← 已审批截图，可直接上传
    01-benefit-slug.png
    02-benefit-slug.png
  showcase.png              ← 所有截图并排展示的预览图
```

`final/` 文件夹包含符合 Apple 精确尺寸要求的截图（默认：iPhone 6.7" 对应 1290×2796px）。

## 文件说明

| 文件 | 用途 |
|------|------|
| `SKILL.md` | 技能提示词，定义多阶段工作流 |
| `compose.py` | 确定性脚手架生成器（基于 Pillow） |
| `generate_frame.py` | 生成设备边框模板 |
| `showcase.py` | 生成并排展示的预览图 |
| `assets/device_frame.png` | 预渲染的 iPhone 设备边框模板 |

## 许可证

MIT