技能库智客分类：Agent 工作流 dev-app-assets

Dev App资产

生成图标,为空状态,登入应用.

296 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

生成图标,为空状态,登入应用.

何时用

- 推出iOS/Android/跨平台应用程序,在提交前需要全套资产

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：App assets、When to Use、Prerequisites、How to Run、Quick Reference、Quick Reference。

文件分析

文件分析：除 SKILL.md 外，正文引用了 assets/icon-master、assets/icon-master/result.png、assets/ios/icon-、assets/android/ic_launcher-、assets/watch/icon-、assets/splash，属于带资源的技能包，这些文件按需再读。

官方 description（原文）

Generate icons, empty states, onboarding for apps.

App assetsWhen to UsePrerequisitesHow to RunQuick ReferenceQuick ReferenceProcedurePitfallsVerificationCost & timeSee also

· 许可：MIT

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: dev-app-assets
description: Generate icons, empty states, onboarding for apps.
许可: MIT

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

指令中引用的文件 · 9

assets/icon-master
assets/icon-master/result.png
assets/ios/icon-
assets/android/ic_launcher-
assets/watch/icon-
assets/splash
assets/screenshots
assets/store
assets/STYLE.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「dev-app-assets」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-4c8e93cd0521703a-Dev-App%E8%B5%84%E4%BA%A7.html
请存为 .cursor/skills/dev-app-assets/SKILL.md 或 .claude/skills/dev-app-assets/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/picsart/gen-ai-skills 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/picsart/gen-ai-skills' --list

npx skills add 'https://github.com/picsart/gen-ai-skills' --skill 'dev-app-assets'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

# 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.

## 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 `gen-ai-use`), marketing LP heroes (`dev-screenshot-beautifier`), or final pixel-perfect logo work (hand off to a designer).

## Prerequisites

Ask before generating (one message, 6 questions):

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

## How to Run

1. **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
   ```

2. **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.

3. **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
   ```

4. **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
   ```

5. **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`.

6. **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
   ```

7. **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.

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

## 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`.

## 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.

## 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 |

## Verification

Run `gen-ai whoami` to confirm authentication, then re-run the failed command with `--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** |

## See also

- `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

阅读排版

--- name: dev-app-assets description: Generate icons, empty states, onboarding for apps. version: 1.0.0 author: Picsart license: MIT platforms: [macos, linux] metadata: hermes: category: dev tags: [picsart, dev, developer-tools, automation] --- # 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. ## 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 `gen-ai-use`), marketing LP heroes (`dev-screenshot-beautifier`), or final pixel-perfect logo work (hand off to a designer). ## Prerequisites Ask before generating (one message, 6 questions): 1. **App name + one-line concept** (e.g. "Rally — a focus timer for ADHD brains"). 2. **Style direction**: flat, gradient, claymorphic, glass, pixel? Any existing logo or style exemplar to reference? 3. **Brand tokens**: primary + accent colors (hex), typography, mood keywords. 4. **Platforms**: iOS, Android, watchOS, macOS, web PWA — which sizes do you need? 5. **Device frames for screenshots**: iPhone 16 Pro, Pixel 9, Apple Watch, iPad Pro? Portrait or landscape? 6. **Deliverable folder**: where should the pack land (e.g. `./app-assets/`)? ## How to Run 1. **Estimate + validate the master style.** ```bash gen-ai models info flux-2-pro gen-ai generate -m flux-2-pro -p "

Dev App资产

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

相关技能

技能创建者Skill Creator

克劳德胡布Clawdhub

团队指挥Agent Team Orchestration

超级力量Superpowers