# 一句话出 App Store 新素材 Skill

> iOS 27 起 App Store Connect 新增产品页标题和搜索结果两种创意素材。没有设计师，就让 Claude 用项目自带的背景、PSD 图层和实机截图合成，自查放大细节，再把规格、流程和踩坑写成一个可复用的 Claude Code Skill。

- 原文链接: https://laojin.blog/blog/20261016_appstore_creative_assets_skill
- 作者: 老金
- 发布日期: 2026-10-16
- 标签: Claude Code, Agent Skills, App Store, 独立开发, Pillow

---

![一句话出 App Store 新素材 Skill](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/00_cover.png)

## App Store 又多了一块要填的地方

最近打开 App Store Connect，会看到一条新提示：「App 营销新方式」。

![App Store Connect 新增的「标题和搜索结果」](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/00_asc.jpg)

从 iOS 27 开始，开发者可以给 App 上传两种新的创意素材：

- 标题（Header）：用户进入产品页后最先看到的大图，在页面顶部；
- 搜索结果（Search Results）：用户在搜索页看到你的 App 时显示的卡片，这时还没点进产品页。

不传搜索结果素材的话，App Store 会退回去用截图和预览视频。可这两个位置恰好是用户决定点不点进来、下不下载的地方，对一款小游戏来说，值得认真做一下。

问题是我是独立开发，手上没有设计师。

于是做了一个 Skill，以后任何项目一句话就能复用。

---

## 先把规格查清楚

我直接把 Apple 的最佳实践链接丢给 Claude，它自己顺着链接找到规格页面，整理出了这张表：

| 位置 | 比例 | 尺寸 | 格式 |
|---|---|---|---|
| 产品页标题 | 21:9 | 3840×1646（固定） | jpg / png |
| 产品页标题 | 16:9 | 5244×2950 | 仅 png |
| 搜索结果 | 3:2 | 1920×1280 ~ 3840×2560 | jpg / png |
| 搜索结果 | 16:9 | 5244×2950 | 仅 png |

容易踩坑的几个点：

- **图片不能带透明通道**，PNG 必须存成 RGB；
- 焦点内容放在画面中央，不同设备会裁掉四周；
- 文字要短，给画面加分，不要去解释画面；
- 禁止出现价格折扣、网址、版权符号、没拿过的奖项、其他平台的 Logo、Apple 的荣誉标识（编辑推荐、今日游戏等），以及超过 4+ 分级的内容。

两张图的定位也不同。标题图讲品牌和氛围，告诉用户这是什么调性的游戏。搜索结果图讲玩法，Apple 的原话是 *State the obvious*，要让人一眼看出这个 App 是干什么的，最好直接放真实界面。

---

## 第一遍：用项目自己的素材拼

我没让 AI 去「画」。一是生成的图很难和游戏实际画风对上；二是 Apple 要求素材准确反映 App 内容（审核指南 2.3），画出来的东西容易货不对板。

所以只用项目里已有的素材，靠程序合成。

### 盘点素材

Claude 先在项目里搜了一遍图片，挑出尺寸最大的那些，拼成一张缩略图墙自己看：

![项目里已有的素材：活动图、海底背景、Logo、App 图标](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/01_sources.jpg)

最后选中的是游戏主背景（海底场景）、Logo 和几张原始实机截图。

### PSD 里藏着高清泡泡

游戏里的泡泡贴图只有 64px，放到 4K 画布上肯定糊。

这时 Claude 注意到项目里有个 `icon.psd`，是 App 图标的源文件，就用 ImageMagick 把图层全拆了出来：

```bash
magick icon.psd layers/l_%02d.png
```

![从 icon.psd 拆出的图层：每个泡泡都是 257px 的独立高清图层](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/02_psd_layers.jpg)

图标里每个泡泡都是独立的 257px 图层，正好拿来做装饰。这是整个过程里最值钱的一步，后来写进了 Skill：先去 PSD 和图标源文件里找素材。

### 合成

用 Python + Pillow 写了个合成脚本：

- 背景：海底图按比例裁切，轻微模糊掩盖放大痕迹，四周压暗，再叠上光束和小气泡；
- 标题图：两侧是倒挂的泡泡阵，和游戏盘面呼应，中间放 Logo 和标语「一击连消 · 重温童年经典」；
- 搜索结果图：三台手机展示实机截图，两侧那台各倾斜 ±7°，顶部是 Logo 和标签「数百关卡 · 爽快连消」。

### 自查时抓到一个 bug

生成完 Claude 没急着交差，把 Logo 和文字区域按 1:1 裁出来看，发现黄色标签上有一条蓝色横杠：

![问题：本来想画一条半透明高光，结果露出了底下的背景色](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/04_bug_pill.jpg)

原因是 Pillow 的 `ImageDraw` 在 RGBA 图上画半透明颜色时会直接替换像素，不和底下的颜色混合，背景的蓝色就透了出来。去掉这条高光就好了：

![修复后](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/04_fixed_pill.jpg)

这种问题在缩略图上几乎看不出来，**一定要放大检查**。它也进了 Skill 的「踩过的坑」。

### 成品

标题图，21:9，3840×1646：

![标题图](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/05_header.jpg)

搜索结果图，3:2，3840×2560：

![搜索结果图](https://pic-1258874139.cos.ap-hongkong.myqcloud.com/laojinblog/posts/20261016/06_search.jpg)

最后用 `magick identify` 核对：尺寸和规格一致，sRGB 3 通道，没有透明通道。

---

## 第二遍：把过程写成 Skill

做一次不难。换个项目、换种语言、换一批截图，我不想每次都从头跟 AI 讲一遍。

Skill 就是一份写给 AI 的操作手册加配套脚本，放在一个目录里：

```
~/.claude/skills/appstore-creative-assets/
├── SKILL.md        # 规格、设计规则、流程、踩坑记录
└── scripts/gen.py  # 读取配置、生成素材的脚本
```

放在 `~/.claude/skills/` 下是用户级的，所有项目都能用；放在项目的 `.claude/skills/` 下只对这个项目生效。

Claude 平时只看得到每个 Skill 的名字和一句描述，你说的话和描述对上了，它才去加载完整的 `SKILL.md`。

我是先手动做完一遍才写的 Skill。素材分辨率不够、Pillow 半透明这类坑，不亲自跑一遍是想不到要写进去的。

### description 决定什么时候触发

`SKILL.md` 开头是一段 frontmatter：

```markdown
---
name: appstore-creative-assets
description: 为 App/游戏生成 App Store Connect「标题和搜索结果」创意素材
  （产品页标题 21:9 3840×1646、搜索结果 3:2 3840×2560）。当用户说
  "生成 AppStore 标题素材"、"搜索结果素材"、"产品页 header 图"、
  "creative assets"、"App 营销新方式"或贴出 App Store Connect
  「标题和搜索结果」页面截图时使用。
---
```

这句 description 是整个 Skill 里最要紧的。我的做法是把用户可能的说法都列进去，中文、英文，连「贴一张截图」这种场景也算上。

### 正文写这次摸索出来的东西

正文不用写成教科书。我写进去的是这次 AI 自己摸索出来、下次不想再摸索一遍的内容：

- 规格表和官方链接，规格可能会变，留着链接方便下次重新核对；
- 设计规则和禁止项，直接摘自 Apple 文档；
- 流程：收集素材 → 写配置 → 生成 → 检查 → 汇报；
- 找素材的技巧：优先拆 PSD 图层，别用已经套过手机壳的营销截图；
- 检查清单：缩略图看整体、1:1 看细节、核对尺寸和通道、对照禁止清单；
- 踩过的坑，比如上面那个 Pillow 半透明的 bug。

检查那一步我写成了必做项。AI 生成完很容易直接宣布完成，把「放大看细节」写进流程，大部分低级问题都能拦下来。

### 脚本改成读配置

第一遍的脚本里路径、文案都是写死的，只能用在这个项目。写 Skill 时我让 Claude 把项目相关的东西全挪进了配置文件：

```json
{
  "out_dir": ".",
  "background": "../path/bg.png",
  "logo": "../path/logo.png",
  "sprites": ["sprites/a.png", "sprites/b.png"],
  "screenshots": ["shot1.png", "shot2.png", "shot3.png"],
  "screenshot_crop_top": 160,
  "header_tagline": "一击连消 · 重温童年经典",
  "search_tagline": "数百关卡 · 爽快连消"
}
```

又补了几样兜底：没有背景图就用渐变色；光束、气泡这些水下风格的装饰可以关掉，换别的题材也能用；字体、配色、Logo 大小都能配。

尺寸、格式、合成这些确定的事交给脚本。选哪些素材、文案怎么写、布局要不要调，留给 AI 判断。

### 验证

写完做了两个测试。一个是用原项目的素材按新流程重跑，结果和第一次手工做的一致；另一个是只给 Logo、不给背景和装饰图，看兜底逻辑能不能出图。两次输出都符合规格。

---

## 以后怎么用

在任何项目里对 Claude Code 说一句：

> 帮我生成 AppStore 的标题和搜索结果素材

或者直接贴一张 App Store Connect 的截图，Skill 就会被触发。Claude 按手册去项目里找素材、写配置、出图、自查，最后告诉你要注意什么。

出英文版只要改配置里那两句标语，重跑一次：

```bash
python3 ~/.claude/skills/appstore-creative-assets/scripts/gen.py config.json
```

以后再遇到新问题，就往「踩过的坑」里加一条。

---

「泡泡龙-全民版」下载链接：
https://apps.apple.com/cn/app/%E6%B3%A1%E6%B3%A1%E9%BE%99-%E5%85%A8%E6%B0%91%E7%89%88/id1008579203