一句话出 App Store 新素材 Skill

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

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

App Store Connect 新增的「标题和搜索结果」

从 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 图标

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

PSD 里藏着高清泡泡

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

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

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

从 icon.psd 拆出的图层：每个泡泡都是 257px 的独立高清图层

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

合成

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

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

自查时抓到一个 bug

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

问题：本来想画一条半透明高光，结果露出了底下的背景色

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

修复后

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

成品

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

标题图

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

搜索结果图

最后用 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：

---
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 把项目相关的东西全挪进了配置文件：

{
  "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 按手册去项目里找素材、写配置、出图、自查，最后告诉你要注意什么。

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

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