---
name: cwb-app-icon
description: Generate native Apple app icons (iOS/macOS/watchOS) using AI via SnapAI CLI. Creates AppIcon.appiconset in Assets.xcassets, iOS 26 Liquid Glass .icon folder, and macOS icns-compatible sizes. Invoke when the user asks to generate, create, or update an app icon for a native Swift project.
source: https://github.com/Code-with-Beto/skills/tree/main/plugins/cwb-app-icon
source-version: 1.0.1
license: MIT
author: Beto (Code with Beto) — adapted for native Apple by ulk
---

# App Icon Generator — Native Apple

Generate AI-powered app icons for native iOS, macOS, watchOS, and tvOS apps using SnapAI and mobicon. This skill adapts the cwb-app-icon workflow (originally for Expo) to native Xcode projects.

**Cost**: ~$0.04/icon via OpenAI DALL-E (SnapAI uses your personal API key — no backend, no telemetry).

---

## Step 0 — Verify tools

```bash
echo "=== ICON TOOLS ==="
command -v snapai  && echo "✅ snapai:  $(snapai --version 2>/dev/null || echo 'OK')" || echo "❌ snapai:  absent → npm i -g @code-with-beto/snapai"
command -v mobicon && echo "✅ mobicon: $(mobicon --version 2>/dev/null || echo 'OK')" || echo "❌ mobicon: absent → npm i -g mobicon-cli"
snapai config check 2>/dev/null || echo "⚠️  OpenAI API key: snapai config set --key sk-..."
```

If snapai is absent, offer two paths:
- **With AI** (recommended): `npm i -g @code-with-beto/snapai` then set OpenAI key
- **Without AI** (manual): ask user to provide an existing 1024×1024 PNG, then go directly to Step 3

---

## Step 1 — Read project context

```bash
# Detect target platforms from project.yml, Package.swift, or .xcodeproj
grep -r "platform\|macOS\|iOS\|watchOS\|tvOS" project.yml 2>/dev/null | head -10
find . -maxdepth 4 -name "*.xcodeproj" -o -name "Package.swift" 2>/dev/null | head -5
# Locate the assets catalog
find . -maxdepth 5 -name "Assets.xcassets" 2>/dev/null | grep -v ".build" | head -5
```

Extract:
- Target platforms (iOS, macOS, watchOS, tvOS, visionOS)
- Deployment targets (iOS 26+ → Liquid Glass eligible)
- Assets.xcassets path

---

## Step 2 — Gather style preferences

Ask the user (AskUserQuestionTool):

> What style should the icon have?
>
> **Style options**: minimalism · glassy · gradient · neon · ios-classic · pixel · geometric · liquid-glass
>
> **Describe your app in one sentence** (used as generation prompt):
>
> **Primary color** (optional, e.g. "deep purple", "ocean blue"):

Compose the SnapAI prompt:
```
"[app description], [style] style, [color], app icon, transparent background, centered composition, no text"
```

---

## Step 3 — Generate source icon (1024×1024 transparent PNG)

```bash
# With SnapAI (AI generation)
snapai generate "<composed prompt>" --output icon-source.png --transparent --size 1024

# Verify result
file icon-source.png
# Expected: PNG image data, 1024 x 1024
```

**Critical**: transparent background is required for both iOS Liquid Glass and macOS compositing.

---

## Step 4 — iOS AppIcon.appiconset

```bash
ASSETS="[path to Assets.xcassets]"

# iOS + macOS universal via mobicon
command -v mobicon && mobicon icon-source.png --platform ios   --dest "$ASSETS/AppIcon.appiconset"
command -v mobicon && mobicon icon-source.png --platform macos --dest "$ASSETS/AppIcon.appiconset"
```

---

## Step 4.5 — iOS 26 Liquid Glass .icon folder (if iOS 26+ target)

Create `Assets.xcassets/AppIcon.icon/` with the following structure:

```
AppIcon.icon/
├── Contents.json          ← icon metadata + layer list
├── icon.png               ← full 1024×1024 (foreground layer)
├── icon-bg.png            ← background layer (solid or gradient, no transparency)
└── icon-mono.png          ← monochrome version (greyscale, for tinted icons)
```

`Contents.json`:
```json
{
  "info": { "author": "xcode", "version": 1 },
  "layers": [
    { "filename": "icon.png",    "role": "foreground" },
    { "filename": "icon-bg.png", "role": "background" },
    { "filename": "icon-mono.png","role": "monochrome" }
  ]
}
```

Generate background and mono variants:
```bash
# Background: filled version (no alpha) — use ImageMagick if available
command -v convert && convert icon-source.png -background "[primary color]" -flatten icon-bg.png
# Monochrome: greyscale
command -v convert && convert icon-source.png -colorspace Gray icon-mono.png
```

Tell the user:
> Open `AppIcon.icon/` in **Xcode Icon Composer** (Xcode 26+) to fine-tune translucency, shadow depth, and glass effects. You can also add Light/Dark/Tinted specializations.

---

## Step 5 — macOS (if macOS target)

macOS icons need full icns size coverage (16→1024). mobicon handles this automatically:

```bash
mobicon icon-source.png --platform macos --dest "$ASSETS/AppIcon.appiconset"
```

macOS safe zone: **no aggressive masking** — the full canvas is visible. No 66% scaling needed (unlike Android adaptive icons).

---

## Step 6 — watchOS (if watchOS target)

```bash
mobicon icon-source.png --platform watchos --dest "$ASSETS/AppIcon.appiconset"
```

watchOS icons are always circular — center the key visual in the middle 70% of the canvas.

---

## Step 7 — Verify in Xcode

```bash
# Check asset catalog integrity
xcrun actool --compile /tmp/icon-check \
  --platform macosx --minimum-deployment-target 14.0 \
  --app-icon AppIcon \
  "$ASSETS" 2>&1 | grep -i "error\|warning" || echo "✅ Assets catalog OK"
```

---

## Final report

```
App Icon — Generated

Source      : icon-source.png (1024×1024, transparent)
Generator   : SnapAI (OpenAI DALL-E, ~$0.04)
Style       : [style chosen]

Outputs:
  iOS AppIcon.appiconset   : [path] ✅
  iOS 26 .icon (Liquid Glass): [path or "N/A — iOS 26 not targeted"]
  macOS AppIcon.appiconset : [path or "N/A"]
  watchOS AppIcon.appiconset: [path or "N/A"]

Next:
  1. Open project in Xcode → verify icon in asset catalog
  2. iOS 26: open AppIcon.icon in Icon Composer to tune glass effects
  3. Run on simulator: check icon on home screen
```