ios-app-assets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

iOS App Assets Generation

iOS 应用资源生成

Generate in-app assets: UI icons, sprites, illustrations, backgrounds using Nanobanana.

Note: For App Store icons, use the

ios-app-icon

skill instead.

使用Nanobanana生成应用内资源：UI图标、sprites、插画、背景。

注意： 若要生成App Store图标，请改用

ios-app-icon

skill。

1. Opaque Assets (Illustrations, Backgrounds)

1. 不透明资源（插画、背景）

Generate directly with Nanobanana—no background removal needed.

直接使用Nanobanana生成，无需移除背景。

Illustration Example

插画示例

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "Person meditating on mountain peak at sunrise, modern illustration style, purple and orange warm tones, soft gradients, peaceful mood, professional app aesthetic" \
  --size 1024x1024 \
  --output "onboarding-meditation.png"

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "Person meditating on mountain peak at sunrise, modern illustration style, purple and orange warm tones, soft gradients, peaceful mood, professional app aesthetic" \
  --size 1024x1024 \
  --output "onboarding-meditation.png"

Background Example

背景示例

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "Abstract flowing gradient background, deep purple to soft pink, smooth organic curves, subtle texture, modern app aesthetic" \
  --size 1024x1024 \
  --output "background-gradient.png"

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "Abstract flowing gradient background, deep purple to soft pink, smooth organic curves, subtle texture, modern app aesthetic" \
  --size 1024x1024 \
  --output "background-gradient.png"

2. Transparent Assets (UI Icons, Sprites)

2. 透明资源（UI图标、Sprites）

Generate on solid contrasting background, then remove it with ImageMagick.

在高对比度纯色背景上生成，随后使用ImageMagick移除背景。

Step 1: Generate on contrasting background

步骤1：在高对比度背景上生成

Subject Color	Use Background
White/light	Bright green (#00FF00)
Dark/black	White or yellow
Colorful/mixed	Solid gray (#808080)

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "[Description], clean vector style, sharp edges, on solid bright green #00FF00 background" \
  --size 1024x1024 \
  --output "temp-asset.png"

主体颜色	推荐使用背景
白色/浅色	亮绿色 (#00FF00)
深色/黑色	白色或黄色
彩色/混合色	纯灰色 (#808080)

bash

bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "[Description], clean vector style, sharp edges, on solid bright green #00FF00 background" \
  --size 1024x1024 \
  --output "temp-asset.png"

Step 2: Remove background with ImageMagick

步骤2：使用ImageMagick移除背景

bash

magick temp-asset.png -fuzz 10% -transparent "#00FF00" "final-asset.png"

bash

magick temp-asset.png -fuzz 10% -transparent "#00FF00" "final-asset.png"

Verify transparency

magick identify -verbose final-asset.png | grep -E "(Type|Alpha)"

Should show: Type: TrueColorAlpha

undefined

undefined

Example: Settings Gear Icon

示例：设置齿轮图标

bash

undefined

bash

undefined

Generate on green

bun .claude/skills/nanobanana-skill/nanobanana.ts
--prompt "Settings gear icon, clean vector style, white with subtle metallic sheen, sharp precise edges, on solid bright green #00FF00 background"
--size 1024x1024
--output "temp-gear.png"

Remove green

magick temp-gear.png -fuzz 10% -transparent "#00FF00" "gear-icon.png"

undefined

magick temp-gear.png -fuzz 10% -transparent "#00FF00" "gear-icon.png"

undefined

3. Resizing for iOS Scales

3. 适配iOS倍率缩放

UI Icons (@1x/@2x/@3x)

UI图标 (@1x/@2x/@3x)

bash

undefined

bash

undefined

For 24pt icon (navigation bar)

magick icon.png -resize 24x24 icon@1x.png magick icon.png -resize 48x48 icon@2x.png magick icon.png -resize 72x72 icon@3x.png

For 25pt icon (tab bar)

magick icon.png -resize 25x25 icon@1x.png magick icon.png -resize 50x50 icon@2x.png magick icon.png -resize 75x75 icon@3x.png

undefined

magick icon.png -resize 25x25 icon@1x.png magick icon.png -resize 50x50 icon@2x.png magick icon.png -resize 75x75 icon@3x.png

undefined

Size Reference

尺寸参考

Element	Points	@1x	@2x	@3x
Tab bar	25pt	25px	50px	75px
Toolbar	22pt	22px	44px	66px
Navigation	24pt	24px	48px	72px
Touch target	44pt	44px	88px	132px

元素	点值	@1x	@2x	@3x
标签栏	25pt	25px	50px	75px
工具栏	22pt	22px	44px	66px
导航栏	24pt	24px	48px	72px
点击热区	44pt	44px	88px	132px

Prompt Tips

Prompt 编写技巧

For icons:

"clean vector style" — crisp edges
"sharp precise edges" — clean cuts for removal
"consistent weight/thickness" — professional look

For illustrations:

"modern illustration style" — contemporary feel
"soft gradients" — depth without being 3D
"professional app aesthetic" — polished look

图标相关：

"clean vector style" — 边缘清晰
"sharp precise edges" — 边缘锐利便于背景移除
"consistent weight/thickness" — 视觉效果专业

插画相关：

"modern illustration style" — 现代风格
"soft gradients" — 有层次感但无3D效果
"professional app aesthetic" — 视觉效果精致

Quality Checklist

质量检查清单

View with Read tool before delivering
Edges clean (especially after removal)
Recognizable at target size
Consistent with app's visual style

交付前使用Read工具预览
边缘干净（尤其是背景移除后）
在目标尺寸下可清晰识别
与应用视觉风格统一