Designing UI Elements

Overview

Game UI needs to be readable, responsive, and visually consistent with the game world. Pixel art UI requires careful attention to contrast, clear iconography, and scalable layouts that work at different screen resolutions.

spritesynth's generate UI endpoint specializes in interface elements, producing pixel art buttons, panels, and icons that match your game's aesthetic.

Step 1: Generate a UI Button

Start with the most common UI building block:

curl -X POST https://api.spritesynth.com/v1/generations/ui \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
"prompt": "pixel art blue UI button, rounded corners, highlighted edge, fantasy style",
    "width": 64,
    "height": 32
  }'

Generate three states per button: normal, hover, and pressed.

Step 2: Generate UI Panels and Frames

Create window frames, inventory panels, and dialog boxes:

curl -X POST https://api.spritesynth.com/v1/generations/ui \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
"prompt": "pixel art UI panel frame, dark wood border, parchment background, RPG style",
    "width": 128,
    "height": 128
  }'

Step 3: Consistent UI Styling with Style Reference

Ensure all UI elements share the same visual style by using style reference generation:

curl -X POST https://api.spritesynth.com/v1/generations/style \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "style_image": "base64_encoded_existing_ui_element",
    "prompt": "pixel art settings gear icon, dark theme, game UI",
    "width": 16,
    "height": 16
  }'

Pass a generated button or panel as the style_image — new icons, panels, and HUD elements will match its border style, color palette, and shading approach automatically.

Step 4: Generate Icons

Build a library of action and inventory icons:

curl -X POST https://api.spritesynth.com/v1/generations/image \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
"prompt": "pixel art heart icon, red, 16x16, game UI",
    "width": 16,
    "height": 16
  }'

Generate icons at 16x16 or 24x24 — the standard sizes for game UI.

Tips

• 9-slice scaling — Design UI panels so the corners and edges can be sliced and the center stretched to any size.
• High contrast text areas — Ensure text areas have a dark enough background that white text remains readable.
• Consistent border width — Use the same border width (2-3px) across all UI elements for a cohesive look.