app-icon

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App Icon Generation Workflow

应用图标生成工作流

Overview

概述

Generate professional app icons using AI and configure them for both iOS (with iOS 26 Liquid Glass support) and Android platforms in Expo apps.

使用AI生成专业的应用图标，并为Expo应用中的iOS（支持iOS 26液态玻璃效果）和Android平台进行配置。

Step 0: Verify SnapAI Setup (CRITICAL - DO THIS FIRST)

步骤0：验证SnapAI设置（至关重要 - 请先完成此步骤）

Before attempting to generate icons, check if SnapAI is configured:

Check if SnapAI is configured:

bash

npx snapai config --show

If the config check fails or shows no API key:
- SnapAI requires an OpenAI API key to generate icons
- Each icon costs approximately $0.04 via OpenAI's image generation API
- Ask the user: "SnapAI requires an OpenAI API key. Do you have one, or would you like me to help you set it up?"
If the user has an API key:
- Ask them to provide it securely
- Configure it for them with:
bash
```
snapai config --api-key <their-api-key>
```
- Verify the setup worked:
bash
```
snapai config --show
```
If the user needs to get an API key:
- Direct them to: https://platform.openai.com/api-keys
- Explain: "You'll need to:
  1. Create an OpenAI account if you don't have one
  2. Navigate to API keys section
  3. Click 'Create new secret key'
  4. Copy the key (starts with 'sk-')
  5. Come back here and provide it to me"
- Once they provide the key, configure it using the command above

Important Notes:

API keys are stored locally and remain private (zero data collection)
Do NOT proceed with icon generation if SnapAI is not configured
The key must start with "sk-" to be valid
You can handle the configuration for the user - just ask for their API key

在尝试生成图标之前，请检查SnapAI是否已配置：

检查SnapAI是否已配置：

bash

npx snapai config --show

如果配置检查失败或未显示API密钥：
- SnapAI需要OpenAI API密钥才能生成图标
- 通过OpenAI的图像生成API生成每个图标大约需要0.04美元
- 询问用户：“SnapAI需要OpenAI API密钥。你已有密钥，还是需要我帮你进行设置？”
如果用户已有API密钥：
- 请他们安全地提供密钥
- 使用以下命令为其配置：
bash
```
snapai config --api-key <their-api-key>
```
- 验证设置是否成功：
bash
```
snapai config --show
```
如果用户需要获取API密钥：
- 引导他们访问：https://platform.openai.com/api-keys
- 说明：“你需要：
  1. 若没有OpenAI账户，请先创建
  2. 导航至API密钥板块
  3. 点击‘Create new secret key’（创建新的密钥）
  4. 复制密钥（以'sk-'开头）
  5. 返回此处并提供该密钥”
- 一旦用户提供密钥，使用上述命令完成配置

重要说明：

API密钥将存储在本地，且保持私密（无数据收集）
如果SnapAI未配置，请不要继续生成图标
密钥必须以“sk-”开头才有效
你可以帮用户完成配置，只需向他们索要API密钥即可

Step 1: Understand the App Context

步骤1：了解应用上下文

Read the
```
app.json
```
to understand the app name and current icon configuration
Ask the user what the app is about if not clear from context
Identify the app's theme, purpose, and target aesthetic

读取
```
app.json
```
以了解应用名称和当前图标配置
如果从上下文中无法明确应用用途，请询问用户
确定应用的主题、用途和目标美学风格

Step 2: Get Style Preferences

步骤2：获取风格偏好

Ask the user what style they'd like for the icon. Available styles:

```
minimalism
```
- Clean, Apple-inspired minimalism (2-3 colors max)
```
glassy
```
- Premium glass aesthetic with semi-transparent elements
```
gradient
```
- Vibrant gradients, Instagram-inspired
```
neon
```
- Cyberpunk, futuristic with glowing effects
```
material
```
- Google Material Design
```
ios-classic
```
- Traditional iOS with subtle gradients
```
pixel
```
- Retro 8-bit/16-bit game art style
```
geometric
```
- Bold, angular compositions

Or let the user provide a custom style description.

询问用户想要的图标风格。可选风格包括：

```
minimalism
```
- 简洁的苹果风极简设计（最多2-3种颜色）
```
glassy
```
- 带有半透明元素的高级玻璃质感
```
gradient
```
- 充满活力的渐变风格，类似Instagram
```
neon
```
- 赛博朋克风，带有发光效果的未来感设计
```
material
```
- Google Material Design风格
```
ios-classic
```
- 传统iOS风格，带有微妙渐变
```
pixel
```
- 复古8位/16位游戏美术风格
```
geometric
```
- 大胆的几何构图

或者让用户提供自定义风格描述。

Step 3: Generate Icon with SnapAI

步骤3：使用SnapAI生成图标

Pre-flight check: Verify SnapAI is configured before running (see Step 0)

Generate a 1024x1024 icon with transparent background (critical for both platforms):

bash

npx snapai icon --prompt "YOUR_PROMPT_HERE" --background transparent --output-format png --style STYLE_NAME

Important flags:

```
--background transparent
```
- REQUIRED for iOS 26 and Android adaptive icons
```
--output-format png
```
- Ensures PNG format
```
--style
```
- Optional, enhances the visual style
```
--quality high
```
- Optional, for final production icons

The icon will be saved to

./assets/icon-[timestamp].png

预检查： 在运行前验证SnapAI已配置（参见步骤0）

生成带有透明背景的1024x1024图标（对两个平台都至关重要）：

bash

npx snapai icon --prompt "YOUR_PROMPT_HERE" --background transparent --output-format png --style STYLE_NAME

重要参数：

```
--background transparent
```
- 支持iOS 26和Android自适应图标所必需
```
--output-format png
```
- 确保输出为PNG格式
```
--style
```
- 可选参数，用于优化视觉风格
```
--quality high
```
- 可选参数，用于最终生产环境图标

图标将保存至

./assets/icon-[timestamp].png

Step 4: Create iOS 26 .icon Folder Structure

步骤4：创建iOS 26 .icon文件夹结构

Create the new iOS 26 Liquid Glass icon format:

Create the folder structure:

bash

mkdir -p assets/app-icon.icon/Assets

Copy the generated PNG:

bash

cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png

Create
```
assets/app-icon.icon/icon.json
```
with this basic configuration:

json

{
  "fill": "automatic",
  "groups": [
    {
      "layers": [
        {
          "glass": false,
          "image-name": "icon.png",
          "name": "icon"
        }
      ],
      "shadow": {
        "kind": "neutral",
        "opacity": 0.5
      },
      "translucency": {
        "enabled": true,
        "value": 0.5
      }
    }
  ],
  "supported-platforms": {
    "circles": ["watchOS"],
    "squares": "shared"
  }
}

创建新的iOS 26液态玻璃图标格式：

创建文件夹结构：

bash

mkdir -p assets/app-icon.icon/Assets

复制生成的PNG文件：

bash

cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png

创建
```
assets/app-icon.icon/icon.json
```
并添加以下基础配置：

json

{
  "fill": "automatic",
  "groups": [
    {
      "layers": [
        {
          "glass": false,
          "image-name": "icon.png",
          "name": "icon"
        }
      ],
      "shadow": {
        "kind": "neutral",
        "opacity": 0.5
      },
      "translucency": {
        "enabled": true,
        "value": 0.5
      }
    }
  ],
  "supported-platforms": {
    "circles": ["watchOS"],
    "squares": "shared"
  }
}

Step 4.5: Create Android-Optimized Adaptive Icon

步骤4.5：创建针对Android优化的自适应图标

Android adaptive icons have a smaller safe area (~66% of the canvas) compared to iOS. The main icon generated by SnapAI is optimized for iOS safe areas, which means it may appear too large and get clipped on Android devices with circular or squircle masks.

To ensure your icon displays correctly on all Android device shapes (circles, squircles, rounded squares), create a scaled-down version:

Using ImageMagick (recommended):

bash

undefined

Android自适应图标与iOS相比，安全区域更小（约占画布的66%）。SnapAI生成的主图标是针对iOS安全区域优化的，这意味着在带有圆形或圆角矩形遮罩的Android设备上，图标可能会显示过大并被裁剪。

为确保图标在所有Android设备形状（圆形、圆角矩形、圆角正方形）上正确显示，请创建一个缩小版本：

推荐使用ImageMagick：

bash

undefined

Scale the icon to 66% and center it on a 1024x1024 transparent canvas

将图标缩小至66%，并居中放置在1024x1024的透明画布上

convert assets/icon-[timestamp].png
-resize 66%
-gravity center
-background transparent
-extent 1024x1024
assets/android-icon.png


**Alternative - Using sips + ImageMagick (macOS):**
```bash

convert assets/icon-[timestamp].png
-resize 66%
-gravity center
-background transparent
-extent 1024x1024
assets/android-icon.png


**替代方案 - 使用sips + ImageMagick（macOS）：**
```bash

Step 1: Resize to 66% (676x676)

步骤1：缩小至66%（676x676）

sips -Z 676 assets/icon-[timestamp].png --out /tmp/icon-resized.png

Step 2: Create the final centered image

步骤2：创建最终的居中图像

convert -size 1024x1024 xc:transparent /tmp/icon-resized.png
-gravity center -composite assets/android-icon.png


**Note:** If ImageMagick is not installed, install it with:
```bash
brew install imagemagick

convert -size 1024x1024 xc:transparent /tmp/icon-resized.png
-gravity center -composite assets/android-icon.png


**注意：** 如果未安装ImageMagick，请使用以下命令安装：
```bash
brew install imagemagick

Step 5: Update app.json

步骤5：更新app.json

Update the

app.json

to configure icons for both platforms:

更新

app.json

以配置两个平台的图标：

For iOS:

针对iOS：

json

{
  "expo": {
    "ios": {
      "icon": "./assets/app-icon.icon"
    }
  }
}

json

{
  "expo": {
    "ios": {
      "icon": "./assets/app-icon.icon"
    }
  }
}

For Android:

针对Android：

Use the Android-optimized icon created in Step 4.5:

Option 1: Simple (with solid background color)

json

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

Option 2: Comprehensive (recommended) Since the icon has a transparent background, you can use it for all three Android adaptive icon fields:

json

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundImage": "./assets/android-icon.png",
        "monochromeImage": "./assets/android-icon.png"
      }
    }
  }
}

Benefits of Option 2:

```
foregroundImage
```
- Main icon displayed
```
backgroundImage
```
- Provides layered depth effect on Android 8.0+
```
monochromeImage
```
- Used for themed icons on Android 13+ (automatically recolored by system)

Note:

For Option 1, ask the user for their preferred
```
backgroundColor
```
, or use white (#ffffff) as default
For Option 2, the same transparent PNG works perfectly for all three fields
Option 2 provides better integration with Android's Material You theming

使用步骤4.5中创建的Android优化图标：

选项1：简单配置（带纯色背景）

json

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

选项2：完整配置（推荐） 由于图标带有透明背景，你可以将其用于Android自适应图标的所有三个字段：

json

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/android-icon.png",
        "backgroundImage": "./assets/android-icon.png",
        "monochromeImage": "./assets/android-icon.png"
      }
    }
  }
}

选项2的优势：

```
foregroundImage
```
- 显示的主图标
```
backgroundImage
```
- 在Android 8.0+上提供分层深度效果
```
monochromeImage
```
- 用于Android 13+上的主题图标（由系统自动重新着色）

注意：

对于选项1，请询问用户偏好的
```
backgroundColor
```
，或使用白色（#ffffff）作为默认值
对于选项2，同一张透明PNG可完美适用于所有三个字段
选项2能更好地与Android的Material You主题系统集成

Step 6: Verify and Test

步骤6：验证与测试

Verify the folder structure exists:

bash

ls -la assets/app-icon.icon/

Verify app.json is valid JSON:

bash

cat app.json | jq .

Inform the user to test the app with:

bash

npx expo prebuild --clean
npx expo run:ios
npx expo run:android

验证文件夹结构是否存在：

bash

ls -la assets/app-icon.icon/

验证app.json是否为有效的JSON：

bash

cat app.json | jq .

告知用户使用以下命令测试应用：

bash

npx expo prebuild --clean
npx expo run:ios
npx expo run:android

Important Notes

重要说明

Transparent background is critical - The icon must have a transparent background for both iOS Liquid Glass effect and Android adaptive icons
iOS 26 .icon format - The
```
.icon
```
folder enables Liquid Glass effects on iOS 26+
Dual-asset workflow - This skill generates two icon assets:
- ```
icon-[timestamp].png
```
  - Main icon optimized for iOS safe areas (used in
```
.icon
```
  folder)
- ```
android-icon.png
```
  - Scaled to 66% and centered for Android adaptive icon safe areas
Why two assets? - iOS and Android have different safe zones. iOS allows content closer to edges (~80-85%), while Android adaptive icons only guarantee ~66% of the center is visible due to aggressive masking (circles, squircles, etc.)
Android adaptive icon flexibility - The
```
android-icon.png
```
can be used for foregroundImage, backgroundImage, AND monochromeImage fields
Material You support - Using monochromeImage enables Android 13+ themed icons that adapt to user's color scheme
File naming - The
```
.icon
```
folder name can be customized (e.g.,
```
app-icon.icon
```
,
```
myapp.icon
```
)

透明背景至关重要 - 图标必须带有透明背景，才能支持iOS液态玻璃效果和Android自适应图标
iOS 26 .icon格式 -
```
.icon
```
文件夹可在iOS 26+上启用液态玻璃效果
双资源工作流 - 此技能会生成两个图标资源：
- ```
icon-[timestamp].png
```
  - 针对iOS安全区域优化的主图标（用于
```
.icon
```
  文件夹）
- ```
android-icon.png
```
  - 缩小至66%并居中的版本，适用于Android自适应图标安全区域
为何需要两个资源？ - iOS和Android的安全区域不同。iOS允许内容更靠近边缘（约80-85%），而Android自适应图标由于遮罩（圆形、圆角矩形等）的限制，仅保证中心约66%的区域可见
Android自适应图标灵活性 -
```
android-icon.png
```
可用于foregroundImage、backgroundImage和monochromeImage字段
Material You支持 - 使用monochromeImage可让Android 13+的主题图标适配用户的配色方案
文件命名 -
```
.icon
```
文件夹的名称可自定义（例如
```
app-icon.icon
```
、
```
myapp.icon
```
）

Troubleshooting

故障排除

SnapAI Configuration Issues

SnapAI配置问题

"No API key found" - Run
```
snapai config --api-key <key>
```
to set it up
"Invalid API key" - Verify the key starts with "sk-" and is copied correctly from OpenAI
Authentication errors - Check if the API key has been revoked or has insufficient credits at platform.openai.com
Command not found - Ensure you're using
```
npx snapai
```
(not just
```
snapai
```
)

“未找到API密钥” - 运行
```
snapai config --api-key <key>
```
进行设置
“无效的API密钥” - 验证密钥是否以“sk-”开头，且是否从OpenAI正确复制
身份验证错误 - 检查API密钥是否已被撤销，或在platform.openai.com上是否有足够的额度
命令未找到 - 确保使用
```
npx snapai
```
（而非仅
```
snapai
```
）

Icon Display Issues

图标显示问题

If the icon doesn't appear, verify the path in app.json matches the actual folder location
Ensure the PNG inside the .icon folder is exactly 1024x1024
For Android, make sure all image paths (foregroundImage, backgroundImage, monochromeImage) are correct and point to existing files
Run
```
npx expo prebuild --clean
```
to regenerate native projects after icon changes

如果图标未显示，请验证app.json中的路径是否与实际文件夹位置匹配
确保.icon文件夹中的PNG文件尺寸恰好为1024x1024
对于Android，请确保所有图像路径（foregroundImage、backgroundImage、monochromeImage）正确且指向已存在的文件
更改图标后，运行
```
npx expo prebuild --clean
```
重新生成原生项目

ImageMagick Issues (for Android icon)

ImageMagick问题（针对Android图标）

"convert: command not found" - Install ImageMagick with
```
brew install imagemagick
```
Permission denied - Ensure you have write access to the assets folder
Icon still appears clipped on Android - Try reducing the resize percentage from 66% to 60% for more aggressive safe area compliance

“convert: command not found” - 使用
```
brew install imagemagick
```
安装ImageMagick
权限被拒绝 - 确保你拥有assets文件夹的写入权限
图标在Android上仍被裁剪 - 尝试将缩小比例从66%降至60%，以更严格地符合安全区域要求