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