dev-app-assets

应用资源

一站式流水线，可将单个应用创意转化为完整的商店上架资源包：涵盖所有所需尺寸的应用图标、启动屏幕、带设备边框的 App Store / Play Store 截图，以及宣传图。统一的视觉语言、统一的风格参考，适用于所有平台。

适用场景

• 发布 iOS / Android / 跨平台应用，需要在提交审核前备齐完整的资源集。
• 为现有应用重新打造品牌：以新风格重新渲染所有图标和商店素材。
• 独立开发者 / 黑客松项目发布，否则就得手动裁剪 30 种图标尺寸。
• 手表 + 手机 + 平板版本需要呈现统一的产品风格。
• 为新市场重新生成本地化的 App Store 截图。

不适用于：动态素材（使用 gen-ai-use）、营销落地页主视觉图（使用 dev-screenshot-beautifier），或需要最终像素级精准的 Logo 设计（交由设计师处理）。

前置条件

生成前先询问（一条消息，包含 6 个问题）：

1. 应用名称 + 一句话概念（例如：“Rally — 为 ADHD 大脑设计的专注计时器”）。
2. 风格方向：扁平、渐变、黏土风、玻璃拟态、像素风？是否有现有 Logo 或可供参考的风格范例？
3. 品牌要素：主色 + 强调色（十六进制）、字体、氛围关键词。
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. 根据同一主图标生成启动 / 启动屏幕（保持视觉基因一致）。

   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	让整套素材保持视觉基因一致
探索风格时使用的低成本草稿	gemini-3.1-flash-image	点数消耗最低

使用 gen-ai models --mode image 确认 ID。

流程

• 先锁定主图，再批量处理。 一张出色的 1024 图胜过 30 张平庸的变体。主图获批前，绝不要运行图标尺寸循环。
• 在本地调整尺寸，不要重新生成。 对所有小于主图的尺寸使用 sips / ImageMagick / sharp。用 AI 逐个重新生成不同尺寸会造成偏差。
• 后续每个素材都以主图为参考。 将 -i icon-master.png 用于启动画面、截图和功能宣传图，保持统一的视觉风格。
• 遵循 iOS 遮罩规范。 iOS 会在操作系统层级自动裁切为超椭圆形；将图形控制在画布的 80% 以内并居中。提交前，在 60×60 尺寸下测试。
• Android 自适应图标需要单独的前景层和背景层（108×108，安全区域为 72×72）。生成透明前景，背景使用纯色或渐变图块。
• 将所有内容保存到 Drive。 使用 --drive-folder "<app>-assets"，这样设计师无需克隆代码库，就能在同一处审阅素材。
• 为风格提示词添加版本管理。 将准确的提示词保存在 app-assets/STYLE.md 中。以后“再加一张截图”的需求也能保持风格一致。
• 不要在每次 CI 运行时都重新渲染。 素材属于发行产物——将其提交到代码库，或只生成一次并上传到素材流水线。

注意事项

注意事项	修复方法
iOS 遮罩后图标边角被裁切	使用 centered glyph, 15% safe-zone padding 重新编写提示词，再生成主图
Android 自适应图标背景透出	生成透明背景的前景（transparent background, isolated glyph）；手动分层
5 张截图看起来不一致	每个截图任务都使用 -i 引用主图标
商店截图中的文案毫无意义	将截图模型切换为 ideogram-v3——它可以渲染文字
Watch 图标的图形在 48px 下无法辨认	在主图中加粗笔画并增强对比度；重新派生
iOS 和 Android 变体之间存在偏差	使用同一张主图，在本地调整尺寸——不要按平台分别重新生成
3 个月后忘记了风格提示词，又要“再做一个页面”	将准确的提示词和配色方案写入 STYLE.md 并提交

验证

运行 gen-ai whoami 确认身份验证成功，然后使用 --debug 重新运行失败的命令。

成本和耗时

任务	积分	耗时
1 张主图标（Flux 2 Pro，1024）	3-5	~15-25s
在本地调整为约 25 种图标尺寸	0	总计约 5s
1 张启动画面（Flux Kontext Pro，9:16）	3-5	~15-25s
5 张 App Store 截图（Ideogram v3）	10-20	批量处理 c=4 时约 60-90s
1 张功能宣传图（Flux 2 Pro，1024×500）	3-5	~15-25s
完整应用素材包（iOS + Android + watchOS + 商店）	~35-50	~5-8 min

另请参阅

• gen-ai-use.md — CLI 参考、标志、身份验证
• gen-ai-batch.md — 清单格式、批量任务续跑、并发调优
• gen-ai-workflows.md — Workflow 5（发布套件）：用于动态效果／短视频配套素材
• dev-screenshot-beautifier — 为 App Store 截图添加设备边框
• dev-og-image-service — 为营销网站制作社交分享卡片