mcpField
A
app-icon

app-icon

github.com/melvynxデザイン・UI243401 回インストール1 週間前に更新
リポジトリ

app-icon について

app-iconは、プロジェクトのExpo設定、ブランドカラー、アプリのコンセプトをもとにアイコンを生成・調整するスキルです。iOS、Androidのアダプティブアイコン、Webのfaviconに対応し、画像の確認と後処理も扱います。

主な機能

  1. 01Expo設定からアイコンのパスを確認
  2. 02プロジェクトから主題と色を決定
  3. 03各プラットフォーム用の画像を生成
  4. 04Androidのセーフゾーンに合わせた画像作成
  5. 05画像ファイルの確認と後処理

活用シーン

  1. 01Expoアプリのアイコン作成
  2. 02iOS、Android、Web用アイコン素材の準備
  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>)。ツールを実行できる場合は、プロンプトをユーザーに返さないでください。SVG を PNG に変換してごまかさないでください。ツールがない場合は、入力済みのプロンプトをユーザーに渡し、ユーザーのファイルを受け取ってから後処理を再開してください。

Expo の設定を読み、実際のパスに書き込んでください:expo.icon、expo.android.adaptiveIcon.foregroundImage、expo.android.adaptiveIcon.backgroundColor、expo.web.favicon。プロジェクトからブランドカラーとアプリのコンセプトを把握してください。プロンプトでは色名を使い、16 進数は使わないでください。

対象:iOS <ASSETS>/icon.png 1024×1024、透明度なし、角丸マスクの焼き込みなし。Android <ASSETS>/adaptive-icon.png。被写体は中央の約 66%のセーフサークル内に収めてください。Web <ASSETS>/favicon.png 192×192。

次の内容を 1 つのプロンプトとして送信し、「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 風、白背景、または 64px でぼやけて見える出力は却下して再生成してください。安全性フィルターで拒否された場合は、表現を言い換えて簡潔な 1 段落にしてください。

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% の余白を確保」と指定して再生成してください。

アイコンとアダプティブアイコンを変更した場合は、ネイティブで再ビルドする必要があります(npx expo run:ios または npx expo run:android)。ホーム画面に古い画像、平坦なグリフ、または角のハローが表示されたままの場合は、実行を失敗としてください。

コメント