skills.rest
SummerEngine
SummerEngineOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-graphics

Generate flat-design game UI icons, buttons, panels, and HUD widgets as transparent PNGs wired into Summer Engine scenes.

66|4|Updated Feb 26, 2026
Search Tags:#icon generation#hud#transparent png#game ui#flat design#summer engine#ninepatch
One-click install
npx skills add https://github.com/SummerEngine/summer --skill ui-graphics-summerengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-graphics
Source: https://github.com/SummerEngine/summer/tree/main/library/skills/ui-graphics
Command: npx skills add https://github.com/SummerEngine/summer --skill ui-graphics-summerengine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Game UI assets often fail on two fronts: inconsistent visual style across a set of icons and fake transparency where the model paints a checkerboard instead of real alpha. This Skill enforces a reusable style anchor and a server-side background-removal pass so every icon, button, and panel ships with true transparency and a unified look. ## Core Features & Use Cases - Style-anchored generation: Defines a persistent UI anchor (palette, line weight, shape language) reused across every asset so a 12-icon ability bar looks like one game. - True transparent PNGs: Uses the removeBackground option on summer_generate_image instead of prompting for transparency, eliminating the painted-checkerboard failure. - Engine wiring: Imports assets via summer_import_from_url and wires them into scenes as TextureRect, NinePatchRect, or AtlasTexture nodes with correct patch margins and stretch modes. - Use Case: Generate a fire-spell ability icon, three button states (idle/hover/pressed), and a NinePatch-ready parchment panel, then wire all of them into res://ui/hud.tscn. ## Quick Start Ask your agent to generate a flat-design fire-spell ability icon with a transparent background and wire it into the HUD scene as a TextureRect.

Frequently Asked Questions about ui-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate game UI icons with transparent backgrounds?▼

Generate the icon with summer_generate_image on a plain background and pass options.removeBackground set to true, which runs a real alpha pass server-side. Do not ask for transparency in the prompt text, since models often paint a checkerboard pattern instead.

How do I keep a set of ability icons visually consistent?▼

Define a UI style anchor on the first asset covering palette, outline weight, shape language, and mood, then reuse it verbatim in every subsequent prompt. Generating all icons in one image produces inconsistent results, so generate one at a time.

How do I create a NinePatch-ready panel for Summer Engine?▼

Prompt for a panel with a clear visual distinction between border and center, then wire it as a NinePatchRect and set patch_margin_left, right, top, and bottom to match the actual border width. Without border-versus-center separation, 9-slicing smears the border into the center.

Why does my generated transparent image show a checkerboard pattern?▼

The model rendered the checkerboard literally because the prompt mentioned transparency. Remove all transparency wording from the prompt, generate on a plain background, and pass options.removeBackground set to true to cut real alpha.

Can I generate pixel-art UI or text on buttons with this skill?▼

Pixel-art UI should route to the pixel-art skill, which uses a different prompt pattern and filter. Text should never be rendered by the image model; overlay it in Summer Engine with a Label node on top of the button texture.

Related Skills

Explore More Design & Creative Skills→
CesarAugustusGroBCesarAugustusGroB

art-style-creator

Generate a complete Art Style Guide with color palettes, typography, and mood guidelines.

Community
Advanced
Totes-MickGOATsTotes-MickGOATs
3

godot-ui-theming

Guide Godot Engine UI theming with Theme resources, StyleBoxes, and fonts.

Community
Intermediate
openvettaopenvetta
154

mobile-ui-design

Generates single-file HTML mobile screens with correct safe-area handling for device-frame previews.

Official
Intermediate
noodelskunnoodelskun

pixel-art-css

Generate pixel art interfaces and retro 8-bit UIs with pure CSS.

Community
Intermediate