# In App Asset Generator

> Generate and process 2D game assets, sprites, icons, UI graphics, and custom imagery for in-app experiences. Covers prompt engineering for consistent vector art, background removal, sprite sheet slicing, and design system alignment. Use when creating game visuals, icon packs, animations, or any custom in-app imagery.

- Skill: `faas-tech/in-app-asset-generator` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add faas-tech/in-app-asset-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/faas-tech/in-app-asset-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: faas-tech (https://skillmd.com/u/faas-tech)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/faas-tech/in-app-asset-generator

---


# In-App Asset Generation & Processing

This skill provides best practices and processing scripts for generating high-quality 2D sprites, icons, backgrounds, and UI elements using AI image generation, then preparing them for use in web or mobile apps.

## Prompt Engineering Best Practices

When using an image generation tool (Imagen, DALL-E, etc.) to create app or game components, follow these rules for consistency and usability:

1. **Format & Perspective**: Always explicitly ask for a *"clean, simple 2D flat vector graphic"*. Do not allow the model to generate 3D renders, gradients, or complex shading unless specifically requested.
2. **Style Transfer via Reference Images**: Whenever possible, pass a screenshot of your app's UI as a reference image. State in the prompt: *"Using the provided screenshot as a direct style, color, and aesthetic reference..."* This is the most effective way to guarantee brand alignment.
3. **Encode Your Design System**: Explicitly include your app's design mandates in the prompt. Reference your outline style, fill patterns, and visual language (e.g., *"thick dark outlines, flat pastel fills, rounded corners"*).
4. **Use Exact Hex Codes**: Do not use vague color names like "red" or "blue". Extract exact hex codes from your app's CSS or design tokens and force the prompt to use them (e.g., `Primary #3B82F6`, `Accent #F59E0B`).
5. **Background Isolation**: To ensure the processing script can strip the background for transparent PNGs, always end your prompt with: *"Solid white background. Do not add any shadows dropping onto the background canvas."*

### Example: Applying a Design System

If your app uses a Neo-Brutalist style:
```
"2D flat vector graphic of a treasure chest. Thick navy blue (#1D3557) outlines,
solid Gold (#F4A261) fill, neo-brutalist style. Solid white background."
```

If your app uses a soft/rounded style:
```
"2D flat vector graphic of a treasure chest. Thin rounded outlines (#374151),
soft gradient fills in sky blue (#7DD3FC) to white, modern minimal style.
Solid white background."
```

The key is extracting your design tokens and embedding them directly in every prompt.

## Creating Consistent Icon Sets

When building an entire set of UI icons or game sprites, they must look like they belong to the same visual family.

1. **Batch Generation Strategy**: Generate icons as a single tiled atlas or "sprite sheet" in one API request (e.g., *"generate a 2x2 grid containing a coin, a sword, a shield, and a potion, all in the exact same style"*). Then slice them programmatically with the included script.
2. **Anchor with Reference Images**: Every image generation request *must* receive the exact same reference image. This forces the model to continuously reference the same styling rules.
3. **Rigid Prompt Templates**: Develop a rigid prompt template and only swap out the subject:
   ```
   "Using the attached UI reference image, generate a clean 2D flat vector
   graphic of [SUBJECT]. [OUTLINE_STYLE], [FILL_STYLE], [DESIGN_SYSTEM].
   Solid white background."
   ```
4. **Validate Against Design Tokens**: Check generated outputs against your app's CSS tokens before finalizing. If a generated asset uses a slightly different color than your design system, adjust and regenerate.

## Processing Assets

AI image generators typically output JPEG or WebP files with baked-in backgrounds. To use these as components, strip the background and convert to RGBA PNGs.

### Background Removal

**Script Path:** `<path-to-skill>/scripts/process_asset.py`

```bash
python <path-to-skill>/scripts/process_asset.py \
  --input "/path/to/generated_image.png" \
  --out_dir "./public/game_assets" \
  --name "coin" \
  --crop
```

**Arguments:**
* `--input` (Required): Path to the raw generated image.
* `--out_dir` (Required): Destination directory for the transparent PNG.
* `--name` (Required): Output filename without `.png` extension.
* `--crop` (Optional): Auto-crop transparent padding around the asset.
* `--threshold` (Optional): White detection threshold (0-255). Default `240`. Lower values are more aggressive at removing near-white pixels. Raise to `250` if the asset has light-colored areas being incorrectly removed.

### Sprite Sheet Slicing

**Script Path:** `<path-to-skill>/scripts/slice_sprites.py`

```bash
python <path-to-skill>/scripts/slice_sprites.py \
  --input "/path/to/spritesheet.png" \
  --out_dir "./public/game_assets/icons" \
  --prefix "item" \
  --rows 2 --cols 3
```

**Arguments:**
* `--input` (Required): Path to the sprite sheet image.
* `--out_dir` (Required): Destination directory for sliced images.
* `--prefix` (Required): Filename prefix (outputs `prefix_0.png`, `prefix_1.png`, ...).
* `--rows` (Required): Number of rows in the grid.
* `--cols` (Required): Number of columns in the grid.
* `--col_major` (Optional): Iterate columns first instead of rows.

## Workflow Example

1. Identify the need for a new "Coin" icon.
2. Look up your design tokens — find the gold hex code (e.g., `#F4A261`).
3. Generate with your image tool: *"2D flat vector graphic of a coin. [your outline style], solid Gold (#F4A261) fill. Solid white background."*
4. Process: `python <path-to-skill>/scripts/process_asset.py --input ./artifact.png --out_dir ./public/game_assets --name coin --crop`
5. Wire `/game_assets/coin.png` into your component.