dev-app-assets

アプリのアセット

1つのアプリのアイデアから、ストア公開に必要なアセット一式をまとめて作成するワンショットパイプラインです。すべての必須サイズのアプリアイコン、スプラッシュ画面、デバイスフレーム付きのApp Store／Play Storeスクリーンショット、フィーチャーグラフィックを生成します。すべてのプラットフォームで、ひとつのビジュアル言語、ひとつのスタイル参照を使います。

使用する場面

• iOS／Android／クロスプラットフォームアプリをリリースする際、申請前にアセット一式が必要な場合。
• 既存アプリをリブランドする際、新しいスタイルですべてのアイコンとストア用アートを再生成する場合。
• そうしなければ30種類のアイコンサイズを手作業で切り出すことになる、インディー開発やハッカソンのリリース。
• ウォッチ、スマートフォン、タブレットのバリエーションに統一感を持たせたい場合。
• 新しい市場向けに、ローカライズ済みのApp Storeスクリーンショットを再生成する場合。

対象外：モーションアセット（gen-ai-useを使用）、マーケティング用LPのヒーロー画像（dev-screenshot-beautifierを使用）、最終的なピクセル単位で完璧なロゴ制作（デザイナーに引き継いでください）。

前提条件

生成を始める前に、次の6つの質問を1回のメッセージで尋ねてください。

1. アプリ名と一行のコンセプト（例：「Rally — ADHDの人向け集中タイマー」）。
2. スタイルの方向性：フラット、グラデーション、クレイモーフィック、ガラス、ピクセルなど。参考にできる既存のロゴやスタイルの見本はありますか？
3. ブランドトークン：メインカラーとアクセントカラー（hex）、タイポグラフィ、ムードを表すキーワード。
4. プラットフォーム：iOS、Android、watchOS、macOS、Web PWAのうち、必要なサイズを教えてください。
5. スクリーンショット用デバイスフレーム：iPhone 16 Pro、Pixel 9、Apple Watch、iPad Proなど。縦向きと横向きのどちらですか？
6. 納品先フォルダー：アセット一式の出力先（例：./app-assets/）。

実行方法

1. マスタースタイルを見積もり、検証します。

   gen-ai models info flux-2-pro
   gen-ai generate -m flux-2-pro -p "<style prompt>" --aspect-ratio 1:1 --dry-run --debug
   

2. マスターアイコンを生成します（1024×1024、唯一の基準となる画像）。 以降のすべてのサイズはこれを基に生成します。一度で決められるよう、仕上がりを確認してください。

   gen-ai generate -m flux-2-pro \
     -p "app icon, 'Rally' focus timer, minimalist gradient, magenta #FF006E to purple #8338EC, soft shadow, rounded-rect canvas, centered glyph, hyperreal studio render" \
     --aspect-ratio 1:1 \
     --download ./app-assets/icon-master \
     --save-to-drive --drive-folder "rally-app-assets"
   

   見た目を確認します。承認されるまで再生成してください。マスターが確定する前に一括生成してはいけません。

3. すべてのアイコンサイズをローカルで生成します（gen-aiのクレジットは不要）。アイコンはマスターをもとに決定的にリサイズします。

   MASTER=./app-assets/icon-master/result.png
   # iOS sizes (App Store 1024, iPhone 60@2x/@3x, iPad, Settings, Spotlight, Notification)
   for size in 1024 180 120 167 152 76 87 80 58 40 120 87 58; do
     sips -z $size $size "$MASTER" --out "./app-assets/ios/icon-${size}.png"
   done
   # Android (mipmap-mdpi … xxxhdpi: 48, 72, 96, 144, 192, 512)
   for size in 48 72 96 144 192 512; do
     sips -z $size $size "$MASTER" --out "./app-assets/android/ic_launcher-${size}.png"
   done
   # watchOS (24, 27.5, 29, 40, 44, 50, 86, 98, 108)
   for size in 48 55 58 80 88 100 172 196 216; do
     sips -z $size $size "$MASTER" --out "./app-assets/watch/icon-${size}.png"
   done
   

4. 同じマスターを基にスプラッシュ画面／起動画面を生成します（ビジュアルのDNAを維持してください）。

   gen-ai generate -m flux-kontext-pro \
     -i ./app-assets/icon-master/result.png \
     -p "splash screen, centered app icon on a vertical gradient, same magenta-to-purple palette, 9:19.5 mobile canvas, calm negative space" \
     --aspect-ratio 9:16 \
     --download ./app-assets/splash
   

5. App Storeのスクリーンショットを一括生成します。プラットフォームごとにマニフェストを用意し、個別にフレームを付けます。

   gen-ai batch run app-store-shots.json -c 4 -o ./app-assets/screenshots
   

   次に、dev-screenshot-beautifier（そのスキルを参照）か、fastlane frameitのようなツールでデバイスフレームを付けます。

6. フィーチャーグラフィック（Play Store）とプロモーション画像（App Store）。

   gen-ai generate -m flux-2-pro \
     -p "Play Store feature graphic, 'Rally' wordmark, 1024×500, same gradient, key benefit 'Focus in bursts'" \
     --aspect-ratio 1024x500 \
     --download ./app-assets/store
   

7. マスクとの位置合わせを確認します。 iOSでは自動的に角丸長方形でマスクされるため、コンテンツをセーフゾーン内に配置してください。そうしないと角が切り取られます。60×60でプレビューし、グリフがはみ出している場合は、プロンプトにcentered glyph, 15% padding all sidesを指定して再生成してください。

クイックリファレンス

App Storeスクリーンショット（6.9インチiPhone、1290×2796、5画面）：

{
  "defaults": {
    "model": "flux-kontext-pro",
    "aspectRatio": "1290x2796",
    "imageUrls": ["./app-assets/icon-master/result.png"]
  },
  "jobs": [
    { "id": "screen-1-hero",      "prompt": "iPhone app UI mockup, 'Rally' focus timer home screen, large timer dial, magenta-to-purple gradient, tagline 'Focus in bursts' above the fold" },
    { "id": "screen-2-session",   "prompt": "iPhone app UI mockup, active focus session, glowing timer ring at 00:14:23, calm dark background" },
    { "id": "screen-3-stats",     "prompt": "iPhone app UI mockup, weekly focus stats bar chart, magenta bars, caption 'You focused 12h this week'" },
    { "id": "screen-4-streak",    "prompt": "iPhone app UI mockup, 14-day streak celebration, confetti, flame icon, headline 'Day 14 unlocked'" },
    { "id": "screen-5-settings",  "prompt": "iPhone app UI mockup, settings screen, clean list rows, same palette, tagline 'Built for ADHD brains'" }
  ]
}

クイックリファレンス

サブタスク	モデル	理由
マスターアプリアイコン（ヒーロー画像）	flux-2-pro	写実的なグラデーションと、鮮明なグリフに最適
マスターからのアイコンスタイルのバリエーション	flux-kontext-pro + -i master.png	アイデンティティを保ちながら、背景や処理を変えられる
ベクタースタイル／フラットアイコン	recraftv4	鮮明な形状、フラットな色、シャープなエッジ
UIテキストが読みやすいApp Storeスクリーンショットのモックアップ	ideogram-v3	画像内のテキストをきれいに描画
アプリアイコンを参照するスプラッシュ／オンボーディング用イラスト	flux-kontext-pro + -i	アセット一式でビジュアルのDNAを維持
スタイルを探るための低コストな下書き	gemini-3.1-flash-image	クレジット消費量が最少

gen-ai models --mode imageでIDを確認してください。

手順

• バッチ処理の前にマスターを確定します。 優れた1024サイズの画像1つは、平凡なバリエーション30個より価値があります。マスターの承認前に、アイコンサイズのループを実行しないでください。
• ローカルでリサイズし、再生成しないでください。 マスター以下のすべてのサイズには、sips／ImageMagick／sharpを使います。サイズごとにAIで再生成すると、差異が生じます。
• 派生アセットにはすべてマスターを参照します。 スプラッシュ画面、スクリーンショット、フィーチャー画像には、-i icon-master.pngを指定します。ビジュアルの一貫性を保てます。
• iOSのマスクを考慮します。 iOSではOS側で自動的にスーパーレクタングルにクリップされるため、グリフをキャンバスの80％以内に収め、中央に配置します。確定前に60×60で確認してください。
• Androidのアダプティブアイコンには、個別の前景レイヤーと背景レイヤーが必要です（108×108、セーフゾーンは72×72）。 前景は透明にし、背景は単色またはグラデーションのタイルとして生成します。
• すべてをDriveに保存します。 --drive-folder "<app>-assets"を指定すれば、リポジトリをクローンせずにデザイナーが一か所で確認できます。
• スタイルプロンプトをバージョン管理します。 正確なプロンプトをapp-assets/STYLE.mdに保存します。後から「スクリーンショットをもう1枚だけ」という依頼があっても、一貫性を保てます。
• CIの実行ごとに再レンダリングしないでください。 アセットはリリース成果物です。コミットするか、一度だけ生成してアセットパイプラインにアップロードしてください。

注意点

注意点	対処方法
iOSのマスク適用後、アイコンの角が切れてしまう	centered glyph, 15% safe-zone paddingを指定してプロンプトを再入力し、マスターを再生成します
Androidのアダプティブアイコンで背景が前景に透ける	背景を透明にして前景を生成し（transparent background, isolated glyph）、手動でレイヤーを重ねます
5枚のスクリーンショットで見た目に一貫性がない	すべてのスクリーンショット生成ジョブで、必ずマスターアイコンを-iで参照します
ストア用スクリーンショットの文言が意味不明になる	スクリーンショットモデルをideogram-v3に切り替えます。文字をレンダリングできます
48pxのウォッチアイコンでグリフが読めない	マスターの線幅とコントラストを上げてから、派生画像を作り直します
iOS版とAndroid版のバリエーションに差異がある	マスター画像を1つだけ使い、ローカルでリサイズします。プラットフォームごとに再生成しないでください
3か月後に「画面をもう1枚」のためのスタイルプロンプトを忘れてしまう	正確なプロンプトとパレットを記載したSTYLE.mdをコミットします

確認

gen-ai whoamiを実行して認証を確認し、その後、失敗したコマンドを--debug付きで再実行します。

コストと所要時間

作業	クレジット	所要時間
マスターアイコン1個（Flux 2 Pro、1024）	3-5	約15-25秒
約25種類のアイコンサイズにローカルでリサイズ	0	合計約5秒
スプラッシュ画面1枚（Flux Kontext Pro、9:16）	3-5	約15-25秒
App Storeのスクリーンショット5枚（Ideogram v3）	10-20	c=4でバッチ処理して約60-90秒
フィーチャー画像1枚（Flux 2 Pro、1024×500）	3-5	約15-25秒
アプリ一式（iOS + Android + watchOS + ストア）	約35-50	約5-8分

関連項目

• gen-ai-use.md — CLIのリファレンス、フラグ、認証
• gen-ai-batch.md — マニフェストの形式、バッチ再開、同時実行数の調整
• gen-ai-workflows.md — モーション／リール用の関連アセットについてはワークフロー5（ローンチキット）
• dev-screenshot-beautifier — App Storeのスクリーンショットにデバイスフレームを追加します
• dev-og-image-service — マーケティングサイト用のソーシャルカード