mcpField
A
app-icon

app-icon

github.com/melvynx设计与 UI243401 次安装1 周前更新
代码仓库

关于 app-icon

app-icon 是一项根据项目的 Expo 配置、品牌色和应用概念生成并处理图标的技能，涵盖 iOS、Android 自适应图标和网页 favicon，并提供图像检查与后处理步骤。

主要功能

  1. 01从 Expo 配置读取图标路径
  2. 02根据项目确定主体与颜色
  3. 03生成各平台所需的图标图像
  4. 04准备符合 Android 安全区域的图稿
  5. 05检查并后处理图像文件

适用场景

  1. 01为 Expo 应用创建图标
  2. 02准备 iOS、Android 和网页图标资源
  3. 03重新生成未通过视觉检查的图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/melvynx/aiblueprint --skill app-icon

安装后在 Claude Code 中输入/app-icon确认已加载。

附带文件agents/openai.yamlassets/codex-icon.svg

详细介绍

使用任何可用的图像工具自行生成图标。Codex：image_gen。如果可以使用 gemini-cli，请使用它（如果尚未通过身份验证，请运行 gemini-cli auth set <GOOGLE_API_KEY>）。工具可以运行时，不要把提示词交给用户。如果没有工具，就将填写完整的提示词交给用户，并在他们提供文件后继续后处理。

读取 Expo 配置并写入实际路径：expo.icon、expo.android.adaptiveIcon.foregroundImage、expo.android.adaptiveIcon.backgroundColor、expo.web.favicon。从项目中提取品牌颜色和应用概念。在提示词中使用颜色名称，不要使用十六进制值。

目标：iOS <ASSETS>/icon.png，1024×1024，不透明，不要烘焙圆角遮罩。Android <ASSETS>/adaptive-icon.png，主体位于中央约 66% 的安全圆形区域内。Web <ASSETS>/favicon.png，192×192。

将以下内容作为一条提示词发送，并填写 Subject 和 Color palette：

Create a 1024x1024 square app icon — premium, vibrant and dimensional, in the style of top App Store featured apps.
Subject: <single hero for <AppName> — soft 3D mascot with simple dot eyes, OR a bold symbolic object; readable at small sizes>
Look: one glossy 3D/2.5D hero, studio lighting, rim light, subtle glow, centered on a FULL-BLEED branded background that reaches all four edges.
Composition: hero fills ~60-80%; one focal point; sharp 90° corners; critical detail inside the central ~70%.
Do NOT: flat pictogram, black-on-white glyph, line icon, white/empty background, icon-in-icon, baked rounded corners, text, letters, faces, logos, chrome, neon, flares.
Color palette: <brand color names>. Technical: square 1:1; readable at 60px.

消费、社交、健康或 AI 类应用选择吉祥物；金融、效率或实用工具类应用选择符号或物件。

gemini-cli image generate --prompt "$PROMPT" \
  --model gemini-3-pro-image-preview --aspect-ratio 1:1 --image-size 2K \
  --out ./icon-raw.png --images-only --json

gemini-2.5-flash-image 是更省钱的备用方案。拒绝扁平、单色、类似 SVG、白色背景或在 64 像素尺寸下显得模糊的输出，并重新生成。遇到安全过滤器拒绝时，将提示词改写成一段普通文字。

sips -z 1126 1126 icon-raw.png --out /tmp/icon-up.png
sips -c 1024 1024 /tmp/icon-up.png --out /tmp/icon-fullbleed.png
sips -s format png /tmp/icon-fullbleed.png --out <ASSETS>/icon.png
sips -g hasAlpha <ASSETS>/icon.png
magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png
sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png

如果背景已延伸至利落的边角，则跳过放大裁剪。如果 hasAlpha 为 yes：magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png。将 expo.android.adaptiveIcon.backgroundColor 设为匹配的颜色。如果没有 magick，则使用“为 Android 自适应安全区域留出约 20% 的边距”重新生成。

图标和 adaptive-icon 的更改需要原生重建（npx expo run:ios 或 npx expo run:android）。如果主屏幕仍显示旧图、扁平字形或角落光晕，则判定运行失败。

评论

支持 Markdown