ios-app-assets（iOS 应用 assets）

iOS App Assets Generation

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

Note: For App Store icons, use the ios-app-icon skill instead.

1. Opaque Assets (Illustrations, Backgrounds)

Generate directly with Nanobanana—no background removal needed.

Illustration Example

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

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)

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

Step 1: Generate on contrasting background

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

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

Example: Settings Gear Icon

# 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"

3. Resizing for iOS Scales

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

# 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

Size Reference

Prompt Tips

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

Quality Checklist

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