dev-app-assets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App assets

应用资产包

A one-shot pipeline that turns a single app idea into the full store-ready asset pack: app icon across every required size, splash screen, device-framed App Store / Play Store screenshots, and feature graphic. One visual language, one style reference, every platform.

这是一套一站式工作流，只需一个应用创意，即可生成一套完整的、可直接提交应用商店的资产包：包含所有所需尺寸的应用图标、启动页、带设备边框的App Store / Play Store截图，以及宣传图。全平台统一视觉语言与风格参考。

When to Use

适用场景

Launching an iOS / Android / cross-platform app and need the full asset set before submission.
Rebranding an existing app: re-render all icons + store art in a new style.
Indie / hackathon ships where you'd otherwise hand-crop 30 icon sizes.
Watch + phone + tablet variants that must feel like one product.
Regenerating localized App Store screenshots for new markets.

Not for: motion assets (use

motion-studio

), marketing LP heroes (

dev-screenshot-beautifier

), or final pixel-perfect logo work (hand off to a designer).

即将发布iOS / Android / 跨平台应用，需要在提交前准备完整的资产包。
为现有应用重新品牌升级：以新风格重新生成所有图标及商店宣传素材。
独立开发者或黑客松项目：无需手动裁剪30种不同尺寸的图标。
需要保持统一产品风格的手表、手机、平板多端变体。
为新市场重新生成本地化的App Store截图。

不适用场景：动态资产（请使用

motion-studio

）、营销主页核心视觉（请使用

dev-screenshot-beautifier

）、或最终像素级完美的Logo设计（需交付给设计师完成）。

Prerequisites

前置准备

Ask before generating (one message, 6 questions):

App name + one-line concept (e.g. "Rally — a focus timer for ADHD brains").
Style direction: flat, gradient, claymorphic, glass, pixel? Any existing logo or style exemplar to reference?
Brand tokens: primary + accent colors (hex), typography, mood keywords.
Platforms: iOS, Android, watchOS, macOS, web PWA — which sizes do you need?
Device frames for screenshots: iPhone 16 Pro, Pixel 9, Apple Watch, iPad Pro? Portrait or landscape?
Deliverable folder: where should the pack land (e.g.
```
./app-assets/
```
)?

生成前需询问（一次消息，6个问题）：

应用名称 + 一句话概念（例如："Rally — 为ADHD人群打造的专注计时器"）。
风格方向：扁平化、渐变、黏土风格、毛玻璃、像素风？是否有可参考的现有Logo或风格范例？
品牌标识：主色 + 强调色（十六进制值）、字体、氛围关键词。
目标平台：iOS、Android、watchOS、macOS、网页PWA — 需要哪些尺寸？
截图设备边框：iPhone 16 Pro、Pixel 9、Apple Watch、iPad Pro？竖屏还是横屏？
交付文件夹：资产包应保存到哪里（例如：
```
./app-assets/
```
）？

How to Run

运行步骤

Estimate + validate the master style.

bash

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

Generate the master icon (1024×1024, the source-of-truth). This is what every downstream size gets derived from — make it right once.

bash

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"

Review visually. Regenerate until approved — do NOT batch before the master is locked.

Derive all icon sizes locally (no gen-ai credits). Icons are deterministic resizes of the master.

bash

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

Generate the splash / launch screen off the same master (keep visual DNA).

bash

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

Batch the App Store screenshots — one manifest per platform, framed separately.
bash
```
gen-ai batch run app-store-shots.json -c 4 -o ./app-assets/screenshots
```
Then wrap with device frames using
```
dev-screenshot-beautifier
```
(see that skill) or a tool like
```
fastlane frameit
```
.

Feature graphic (Play Store) + promo (App Store).

bash

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

Verify mask alignment. iOS auto-masks to a rounded-rect; content must sit inside the safe zone or you'll get clipped corners. Preview at 60×60 — if the glyph bleeds, regenerate with
```
centered glyph, 15% padding all sides
```
in the prompt.

估算并确认主风格。

bash

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

生成主图标（1024×1024，基准源文件）。所有下游尺寸的图标都将从此文件衍生 — 务必确保一次生成到位。

bash

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"

视觉审核，重新生成直至满意 — 在主图标确定前，请勿批量生成其他资产。

本地衍生所有图标尺寸（无需消耗AI点数）。所有图标均由主图标确定性缩放而来。

bash

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

基于同一主图标生成启动页（保持视觉一致性）。

bash

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

批量生成App Store截图 — 每个平台对应一个清单，单独添加边框。
bash
```
gen-ai batch run app-store-shots.json -c 4 -o ./app-assets/screenshots
```
然后使用
```
dev-screenshot-beautifier
```
（参考该工具文档）或
```
fastlane frameit
```
等工具添加设备边框。

生成Play Store宣传图+App Store推广素材。

bash

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

验证遮罩对齐情况。iOS会自动将图标裁剪为圆角矩形；内容必须位于安全区内，否则角落会被裁剪。以60×60尺寸预览 — 如果图标符号超出范围，请重新生成并在提示词中添加
```
centered glyph, 15% padding all sides
```
。

Quick Reference

快速参考

App Store screenshots (6.9" iPhone, 1290×2796, 5 screens):

json

{
  "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'" }
  ]
}

App Store截图（6.9英寸iPhone，1290×2796，5张截图）：

json

{
  "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'" }
  ]
}

Quick Reference

快速参考

Sub-task	Model	Why
Master app icon (hero render)	`flux-2-pro`	Best photoreal gradients, clean glyphs
Icon style variations from master	`flux-kontext-pro` + `-i master.png`	Preserves identity, varies background/treatment
Vector-style / flat icons	`recraftv4`	Clean shapes, flat color, tight edges
App Store screenshot mockups with readable UI text	`ideogram-v3`	Renders in-image copy cleanly
Splash / onboarding illustration with app icon reference	`flux-kontext-pro` + `-i`	Keeps visual DNA across the set
Cheap drafts while style-hunting	`gemini-3.1-flash-image`	Lowest credits

Confirm IDs with

gen-ai models --mode image

子任务	模型	原因
主应用图标（核心渲染）	`flux-2-pro`	最佳的写实渐变效果，清晰的图标符号
基于主图标生成风格变体	`flux-kontext-pro` + `-i master.png`	保留品牌辨识度，仅调整背景/表现形式
矢量风格/扁平化图标	`recraftv4`	清晰的形状，纯色填充，边缘锐利
带清晰UI文字的App Store截图原型	`ideogram-v3`	能清晰渲染图内文字
带应用图标参考的启动页/引导页插画	`flux-kontext-pro` + `-i`	保持整套资产的视觉一致性
风格探索阶段的低成本草稿	`gemini-3.1-flash-image`	消耗点数最少

使用

gen-ai models --mode image

确认模型ID。

Procedure

操作规范

Lock the master before batching. One great 1024 is worth 30 mediocre variants. Never run the icon-size loop until the master is approved.
Resize locally, don't regenerate.
```
sips
```
/
```
ImageMagick
```
/
```
sharp
```
for all sizes below the master. AI-regenerating each size produces drift.
Reference the master for every downstream asset.
```
-i icon-master.png
```
into splash, screenshots, feature graphic. Shared visual DNA.
Respect iOS mask. iOS auto-clips to a superellipse at the OS level; keep the glyph within 80% of the canvas, centered. Test at 60×60 before committing.
Android adaptive icons need separate foreground + background layers (108×108 with 72×72 safe zone). Generate foreground transparent, background as a solid/gradient tile.
Save everything to Drive.
```
--drive-folder "<app>-assets"
```
— so a designer can review in one place without cloning your repo.
Version the style prompt. Store the exact prompt in
```
app-assets/STYLE.md
```
. Future "just one more screenshot" requests stay consistent.
Don't re-render on every CI run. Assets are release artifacts — commit them, or generate once and upload to your asset pipeline.

批量生成前先确定主图标。一个高质量的1024×1024图标胜过30个平庸的变体。在主图标获批前，切勿运行图标尺寸批量生成脚本。
本地缩放，而非重新生成。使用
```
sips
```
/
```
ImageMagick
```
/
```
sharp
```
处理所有小于主图标的尺寸。AI重新生成每个尺寸会导致风格偏移。
所有下游资产均参考主图标。在生成启动页、截图、宣传图时使用
```
-i icon-master.png
```
参数。保持视觉一致性。
遵守iOS遮罩规则。iOS会在系统层面自动将图标裁剪为超椭圆；请将图标符号限制在画布的80%范围内并居中。提交前以60×60尺寸测试。
Android自适应图标需要单独的前景+背景图层（108×108尺寸，安全区72×72）。生成透明背景的前景图层，背景为纯色/渐变平铺。
所有内容保存到云端硬盘。使用
```
--drive-folder "<app>-assets"
```
参数 — 方便设计师无需克隆仓库即可在同一位置查看。
版本化风格提示词。将精确的提示词存储在
```
app-assets/STYLE.md
```
中。后续“再生成一张截图”的需求能保持风格一致。
不要在每次CI运行时重新渲染。资产属于发布产物 — 提交到代码仓库，或生成一次后上传到资产流水线。

Pitfalls

常见问题

Pitfall	Fix
Icon clipped at corners after iOS mask	Re-prompt with `centered glyph, 15% safe-zone padding` , regenerate master
Android adaptive icon background bleeds through	Generate foreground with transparent bg ( `transparent background, isolated glyph` ); layer manually
Screenshots look inconsistent across 5 shots	Always reference the master icon with `-i` on every screenshot job
Store screenshot copy is gibberish	Switch the screenshot model to `ideogram-v3` — it renders text
Watch icon glyph unreadable at 48px	Increase stroke weight + contrast in the master; re-derive
Drift between iOS and Android variants	Use one master image, resize locally — do not regenerate per platform
Style prompts forgotten 3 months later for "one more screen"	Commit `STYLE.md` with the exact prompt + palette

问题	解决方法
iOS遮罩后图标角落被裁剪	重新提交提示词并添加 `centered glyph, 15% safe-zone padding` ，重新生成主图标
Android自适应图标背景透显	生成透明背景的前景图层（提示词添加 `transparent background, isolated glyph` ）；手动合成图层
5张截图风格不一致	每张截图任务均使用 `-i` 参数参考主图标
商店截图文字混乱	将截图模型切换为 `ideogram-v3` — 它能清晰渲染文字
手表图标在48px尺寸下符号不可读	增加主图标中符号的线条粗细与对比度；重新衍生尺寸
iOS与Android变体风格偏移	使用同一主图标，本地缩放 — 不要为每个平台重新生成
3个月后忘记风格提示词，无法“再生成一张截图”	将精确的提示词+配色方案提交到 `STYLE.md`

Verification

验证方法

Run

gen-ai whoami

to confirm authentication, then re-run the failed command with

--debug

运行

gen-ai whoami

确认身份认证，然后添加

--debug

参数重新运行失败的命令。

Cost & time

成本与耗时

Task	Credits	Time
1 master icon (Flux 2 Pro, 1024)	3-5	~15-25s
Local resize to ~25 icon sizes	0	~5s total
1 splash screen (Flux Kontext Pro, 9:16)	3-5	~15-25s
5× App Store screenshots (Ideogram v3)	10-20	~60-90s batched c=4
1 feature graphic (Flux 2 Pro, 1024×500)	3-5	~15-25s
Full app pack (iOS + Android + watchOS + store)	~35-50	~5-8 min

任务	点数消耗	耗时
1个主图标（Flux 2 Pro，1024尺寸）	3-5	~15-25秒
本地缩放到约25种图标尺寸	0	~5秒总计
1个启动页（Flux Kontext Pro，9:16比例）	3-5	~15-25秒
5张App Store截图（Ideogram v3）	10-20	~60-90秒（批量并发数c=4）
1张宣传图（Flux 2 Pro，1024×500尺寸）	3-5	~15-25秒
完整应用资产包（iOS + Android + watchOS + 商店素材）	~35-50	~5-8分钟

参考链接

```
gen-ai-use.md
```
— CLI reference, flags, auth
```
gen-ai-batch.md
```
— manifest shapes, batch resume, concurrency tuning
```
gen-ai-workflows.md
```
— Workflow 5 (launch kit) for motion/reel companion assets
```
dev-screenshot-beautifier
```
— device-frame the App Store screenshots
```
dev-og-image-service
```
— social cards for the marketing site

```
gen-ai-use.md
```
— CLI参考、参数、认证说明
```
gen-ai-batch.md
```
— 清单格式、批量续跑、并发调优
```
gen-ai-workflows.md
```
— 工作流5（启动工具包），用于动态/视频配套资产
```
dev-screenshot-beautifier
```
— 为App Store截图添加设备边框
```
dev-og-image-service
```
— 营销网站的社交卡片生成工具

dev-app-assets

Original

Translation

App assets

应用资产包

When to Use

适用场景

Prerequisites

前置准备

How to Run

运行步骤

Quick Reference

快速参考

Quick Reference

快速参考

Procedure

操作规范

Pitfalls

常见问题

Verification

验证方法

Cost & time

成本与耗时

See also

参考链接