99 lines
3.2 KiB
Markdown
99 lines
3.2 KiB
Markdown
|
# 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
|