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

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

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.