SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场app-icon

app-icon

设计与创作

查看项目

更新于 10-15 14:53

技能介绍

用途

app-icon 用于生成鲜艳、有立体感的 iOS 与 Android 应用图标，并按应用商店规格进行后处理。适用于为 Expo 或 React Native 项目创建、重新生成或打磨图标。

主要能力

  • 读取 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。
  • 使用图像工具生成图标，例如 Codex 的 image_gen；若可用 gemini-cli 则使用它（未认证时执行 gemini-cli auth set <GOOGLE_API_KEY>）。
  • 提供完整的图标生成提示词模板，包含 Subject 与 Color palette 的填充位置，并规定风格、构图、禁止项与技术参数。
  • 提供 gemini-cli 图像生成命令，默认模型为 gemini-3-pro-image-preview，gemini-2.5-flash-image 为更便宜的备选。
  • 提供后处理命令（sips、magick），用于放大裁剪、格式转换、去除透明通道、生成自适应图标与 favicon。
  • 对输出质量进行校验：拒绝扁平、单色、类 SVG、白底或在 64px 下模糊的输出并重新生成；将安全过滤拒绝改写为一段普通文字。

使用方式

  1. 使用可用的图像工具自行生成图标。Codex 使用 image_gen；若 gemini-cli 可用则使用它。当工具可运行时，不要把提示词交回给用户。不要用 SVG 转 PNG 来伪造。若没有任何工具，将填好的提示词交给用户，并用其文件继续后处理。
  2. 读取 Expo 配置并写入真实路径，从项目提取品牌色与应用概念。
  3. 按模板发送一条提示词，填写 Subject 与 Color palette。消费者、社交、健康或 AI 类应用选择吉祥物；金融、生产力或工具类选择符号或物体。
  4. 使用 gemini-cli 命令生成原始图标。
  5. 使用 sips 与 magick 进行后处理：
    • 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
  6. 若背景已满幅延伸到锐利边角，跳过放大裁剪。若 hasAlpha 为 yes，执行 magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png，并将 expo.android.adaptiveIcon.backgroundColor 匹配为该颜色。没有 magick 时，以“为 Android 自适应安全区留约 20% 内边距”重新生成。
  7. 图标与自适应图标变更需要原生重建（npx expo run:ios 或 npx expo run:android）。若主屏仍显示旧图、扁平字形或边角光晕，则判定运行失败。

适用场景

  • 为 Expo 或 React Native 项目创建新图标。
  • 重新生成或打磨已有图标。
  • 需要同时产出 iOS 图标、Android 自适应图标与 Web favicon 的场景。

限制

  • 需要可用的图像生成工具；若不存在，只能将提示词交给用户并等待其文件。
  • 禁止用 SVG 转 PNG 伪造图标。
  • 图标与自适应图标变更必须进行原生重建才能生效。
  • 提示词中禁止出现文字、字母、人脸、标志、铬色、霓虹、光晕等元素，且不得使用白底、图标套图标、预先烘焙圆角。
  • 关于收费、价格、平台支持范围等更多信息，资料暂未提供。