app-icon by code-with-beto/skills
npx skills add https://github.com/code-with-beto/skills --skill app-icon使用 AI 生成专业的应用图标,并为 Expo 应用中的 iOS(支持 iOS 26 Liquid Glass 效果)和 Android 平台进行配置。
在尝试生成图标之前,检查 SnapAI 是否已配置:
npx snapai config --show
如果配置检查失败或显示没有 API 密钥:
如果用户有 API 密钥:
snapai config --api-key <their-api-key>
* 验证设置是否成功:
snapai config --show
4. 如果用户需要获取 API 密钥:
* 引导他们访问:<https://platform.openai.com/api-keys>
* 解释:"您需要:
1. 如果没有 OpenAI 账户,请创建一个
2. 导航到 API 密钥部分
3. 点击 '创建新的密钥'
4. 复制密钥(以 'sk-' 开头)
5. 回到这里并提供给我"
* 一旦他们提供了密钥,使用上述命令进行配置
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
重要说明:
app.json 以了解应用名称和当前图标配置询问用户希望图标采用什么风格。可用风格:
minimalism - 简洁、苹果风格的极简主义(最多 2-3 种颜色)glassy - 高级玻璃美学,带有半透明元素gradient - 充满活力的渐变,Instagram 风格neon - 赛博朋克,未来感,带有发光效果material - Google Material Designios-classic - 传统 iOS 风格,带有微妙的渐变pixel - 复古 8 位/16 位游戏艺术风格geometric - 大胆、棱角分明的构图或者让用户提供自定义风格描述。
预检: 运行前验证 SnapAI 是否已配置(参见步骤 0)
生成一个 1024x1024 的图标,带有透明背景(对两个平台都至关重要):
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
创建新的 iOS 26 Liquid Glass 图标格式:
mkdir -p assets/app-icon.icon/Assets
cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png
assets/app-icon.icon/icon.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 相比,Android 自适应图标的安全区域较小(约占画布的 66%)。SnapAI 生成的主图标针对 iOS 安全区域进行了优化,这意味着在具有圆形或圆角矩形遮罩的 Android 设备上,它可能显得太大并被裁剪。
为确保您的图标在所有 Android 设备形状(圆形、圆角矩形、圆角方形)上正确显示,请创建一个缩小版本:
使用 ImageMagick(推荐):
# 将图标缩放至 66% 并居中放置在 1024x1024 的透明画布上
magick assets/icon-[timestamp].png \
-resize 66% \
-gravity center \
-background transparent \
-extent 1024x1024 \
assets/android-icon.png
替代方案 - 使用 sips + ImageMagick(macOS):
# 步骤 1:调整大小为 66%(676x676)
sips -Z 676 assets/icon-[timestamp].png --out /tmp/icon-resized.png
# 步骤 2:创建最终居中图像
magick -size 1024x1024 xc:transparent /tmp/icon-resized.png \
-gravity center -composite assets/android-icon.png
注意: 如果未安装 ImageMagick,请使用以下命令安装:
brew install imagemagick
更新 app.json 以配置两个平台的图标:
{
"expo": {
"ios": {
"icon": "./assets/app-icon.icon"
}
}
}
使用步骤 4.5 中创建的 Android 优化图标:
选项 1:简单(带纯色背景)
{
"expo": {
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/android-icon.png",
"backgroundColor": "#ffffff"
}
}
}
}
选项 2:全面(推荐) 由于图标具有透明背景,您可以将其用于所有三个 Android 自适应图标字段:
{
"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+ 的主题图标(由系统自动重新着色)注意:
backgroundColor,或使用白色(#ffffff)作为默认值ls -la assets/app-icon.icon/
cat app.json | jq .
npx expo prebuild --clean
npx expo run:ios
npx expo run:android
.icon 文件夹支持 iOS 26+ 的 Liquid Glass 效果icon-[timestamp].png - 针对 iOS 安全区域优化的主图标(用于 .icon 文件夹)android-icon.png - 缩放至 66% 并居中,用于 Android 自适应图标安全区域android-icon.png 可用于 foregroundImage、backgroundImage 和 monochromeImage 字段.icon 文件夹名称可以自定义(例如,app-icon.icon、myapp.icon)snapai config --api-key <key> 进行设置npx snapai(不仅仅是 snapai)npx expo prebuild --clean 以重新生成本地项目brew install imagemagick 安装 ImageMagick每周安装数
239
仓库
GitHub 星标数
22
首次出现
2026年1月27日
安全审计
已安装于
claude-code203
codex180
gemini-cli177
opencode176
github-copilot165
cursor152
Generate professional app icons using AI and configure them for both iOS (with iOS 26 Liquid Glass support) and Android platforms in Expo apps.
Before attempting to generate icons, check if SnapAI is configured:
npx snapai config --show
If the config check fails or shows no API key:
If the user has an API key:
snapai config --api-key <their-api-key>
* Verify the setup worked:
snapai config --show
4. 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:
app.json to understand the app name and current icon configurationAsk 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 elementsgradient - Vibrant gradients, Instagram-inspiredneon - Cyberpunk, futuristic with glowing effectsmaterial - Google Material Designios-classic - Traditional iOS with subtle gradientspixel - Retro 8-bit/16-bit game art stylegeometric - Bold, angular compositionsOr let the user provide a custom style description.
Pre-flight check: Verify SnapAI is configured before running (see Step 0)
Generate a 1024x1024 icon with transparent background (critical for both platforms):
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 iconsThe icon will be saved to ./assets/icon-[timestamp].png
Create the new iOS 26 Liquid Glass icon format:
mkdir -p assets/app-icon.icon/Assets
cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png
assets/app-icon.icon/icon.json with this basic configuration:{
"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"
}
}
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):
# Scale the icon to 66% and center it on a 1024x1024 transparent canvas
magick assets/icon-[timestamp].png \
-resize 66% \
-gravity center \
-background transparent \
-extent 1024x1024 \
assets/android-icon.png
Alternative - Using sips + ImageMagick (macOS):
# Step 1: Resize to 66% (676x676)
sips -Z 676 assets/icon-[timestamp].png --out /tmp/icon-resized.png
# Step 2: Create the final centered image
magick -size 1024x1024 xc:transparent /tmp/icon-resized.png \
-gravity center -composite assets/android-icon.png
Note: If ImageMagick is not installed, install it with:
brew install imagemagick
Update the app.json to configure icons for both platforms:
{
"expo": {
"ios": {
"icon": "./assets/app-icon.icon"
}
}
}
Use the Android-optimized icon created in Step 4.5:
Option 1: Simple (with solid background color)
{
"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:
{
"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 displayedbackgroundImage - Provides layered depth effect on Android 8.0+monochromeImage - Used for themed icons on Android 13+ (automatically recolored by system)Note:
backgroundColor, or use white (#ffffff) as defaultls -la assets/app-icon.icon/
cat app.json | jq .
npx expo prebuild --clean
npx expo run:ios
npx expo run:android
.icon folder enables Liquid Glass effects on iOS 26+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 areasandroid-icon.png can be used for foregroundImage, backgroundImage, AND monochromeImage fieldssnapai config --api-key <key> to set it upnpx snapai (not just snapai)npx expo prebuild --clean to regenerate native projects after icon changesbrew install imagemagickWeekly Installs
239
Repository
GitHub Stars
22
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubWarnSocketFailSnykFail
Installed on
claude-code203
codex180
gemini-cli177
opencode176
github-copilot165
cursor152
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
105,000 周安装
.iconapp-icon.iconmyapp.icon