SpriteCook Build UI Kits

Use this skill for complete screens and cohesive UI systems. Pair it with

spritecook-workflow-essentials

for credits, manifests, safe downloads, and shared defaults.

Requires: SpriteCook MCP server connected to your editor. Set up with

npx spritecook-mcp setup

or see spritecook.ai.

Choose the Right Workflow

Use the UI-kit workflow for menus, HUDs, inventories, dialogs, settings, overlays, shops, character screens, and other compositions whose parts must share one visual language.
Use
```
generate_game_art(mode="ui")
```
only for one isolated icon, badge, button, control, divider, frame, or decoration.
For a new screen, always establish one coherent concept first, then extract production components from that concept. Do not generate unrelated controls independently and try to assemble a visual system afterward.

Default Workflow

Confirm the UI-kit tools are present, then call
```
get_credit_balance
```
before starting the multi-image workflow. If the tools are missing, refresh or reconnect the SpriteCook MCP integration; do not fall back to independently generating a full screen with
```
mode="ui"
```
.
Create the kit with
```
create_ui_kit
```
and preserve its
```
id
```
. Keep the default
```
model="gpt-image-2"
```
unless the user specifically requests Gemini and their account supports 2K Gemini generation.
Establish the concept:
- If the user or agent already has a suitable owned SpriteCook asset ID, pass it as
```
concept_asset_id
```
  . This selects it immediately and skips concept generation.
- If the concept is a local file, use
```
spritecook-upload-assets
```
  first, then pass the returned ID as
```
concept_asset_id
```
  .
- Otherwise call
```
generate_ui_kit_concepts
```
  , follow progress with
```
get_ui_kit
```
  , inspect the returned concept assets, and call
```
select_ui_kit_concept
```
  with the strongest option.
Call
```
generate_ui_kit_component_sheets
```
. Omit
```
sheet_count
```
to let SpriteCook plan one to three sheets from the concept.
Follow progress with
```
get_ui_kit
```
until
```
status
```
is
```
sheet_review
```
and component-sheet assets are present.
Call
```
extract_ui_kit_components
```
without
```
sheet_asset_ids
```
to process every sheet from the selected or latest successful attempt.
Inspect
```
quality_summary
```
and the returned component draft programmatically. Confirm names are distinct, each rectangle represents one useful element, state families are sensible, and scalable components are marked correctly. If
```
requires_review
```
is true, resolve every relevant warning before finalizing.
Call
```
finalize_ui_kit
```
with no
```
components
```
argument only when the saved draft is sensible and
```
quality_summary.requires_review
```
is false. Otherwise supply a corrected component list with fixed names, groups, states, rectangles, scalability, or 9-slice borders.
Preserve the UI-kit ID, finalized component asset IDs, and manifest in the project asset manifest.

Continue through extraction and finalization by default. The returned

review_url

is an optional quality-control surface, not a required handoff. Use it when detection is ambiguous, the user asks to inspect the work, or scalable borders need visual tuning.

Creating the Kit

Give

create_ui_kit

the screen intent, platform, aspect ratio, game description, visual direction, and screen-specific instructions. Use

style_asset_ids

only for owned images that define the broader art direction.

For UI kits, use

gpt-image-2

by default. The accepted canonical alternatives are

gemini-3.1-flash-image

and

gemini-3-pro-image

, but UI-kit concepts are 2K and those Gemini models require a plan that independently allows 2K generation. If the server returns

ui_kit_model_resolution_limit

, retry by creating or updating the kit with

model="gpt-image-2"

; no generation credits were spent on that validation error. Do not use legacy

-preview

model IDs.

Use

state_mode="visible-only"

when the user needs only what appears in the concept. Use

state_mode="complete-states"

for production control families that should include normal, hover/focus, pressed, disabled, checked, or selected variants.

Set the state mode when creating the kit. Omit

state_mode

from

generate_ui_kit_component_sheets

to preserve that stored choice; pass it there only when intentionally overriding the kit for this sheet attempt.

An existing

concept_asset_id

is the specific screen concept being decomposed. It is different from

style_asset_ids

, which provide ambient visual guidance.

Refining Results

Regenerate concepts with
```
revision_notes
```
to explore a fresh batch.
Refine one concept with
```
edit_source_asset_id
```
and
```
edit_notes
```
.
Use
```
focus_notes
```
when only a subset such as buttons, inventory slots, or HUD meters is needed. A focused request uses one sheet.
Use
```
supplemental_notes
```
for missing pieces without replacing accepted sheets.
Refine one component sheet with
```
edit_source_asset_id
```
and
```
edit_notes
```
.
Request
```
high_resolution=true
```
only when the user's plan supports 4K and larger source components materially help.

Paid concept and sheet tools return job IDs immediately. Do not treat submission as completion; call

get_ui_kit

until the workflow reaches the expected review status.

Extraction and 9-Slice Rules

extract_ui_kit_components

defaults to connected-alpha threshold

, minimum area

, merge distance

, and padding

. Keep these defaults unless the sheet visibly fragments or merges components incorrectly.

Always audit the returned

quality_summary

before finalization:

A sheet with
```
at_component_limit=true
```
reached the 100-detection ceiling. Check whether small components were omitted or merged.
Inspect
```
possible_merged
```
and split an obvious multi-object rectangle into separate corrected rectangles, or omit it when its contents already exist separately.
Fix duplicate or vague names and correct controls misclassified as panels or decorations.
Give obvious interaction families one stable
```
group
```
and distinct
```
state
```
values such as normal, hover, pressed, disabled, on/off, selected/unselected, or checked/unchecked.
Treat fallback classification as a reason to review all names and types.
Keep at most 100 finalized components per source sheet, at most three sheets, and at most 300 components total. If splitting a merged rectangle would exceed 100 on a sheet, remove low-value duplicates or combine corrections before finalizing.

Automatic extraction initializes all 9-slice borders to zero. Zero is correct for fixed-size icons and decorations. For scalable panels, buttons, inputs, tooltips, tracks, and frames, set non-zero

left

top

right

, and

bottom

borders only when the protected edges can be identified confidently. Use the optional browser review for precise visual placement.

Finalization returns reusable private component assets plus a manifest containing type, state group, state, dimensions, scalability, and 9-slice metadata. Unity, Godot, and web archive downloads remain available from the browser review page; MCP supplies the assets and manifest directly.

Recovery

Use
```
list_ui_kits
```
if the kit ID is lost, then continue with
```
get_ui_kit
```
.
Use
```
cancel_ui_kit
```
to stop active concept or component-sheet jobs for the kit.
Keep the returned
```
review_url
```
; it opens the same durable kit in SpriteCook without making review mandatory.
Surface brief, user-friendly errors. Preserve successful concepts or sheets after partial failures and continue from them when possible.

spritecook-build-ui-kits

NPX Install

Tags

SKILL.md Content