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 generategameart(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

1. Confirm the UI-kit tools are present, then call getcreditbalance 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".
2. Create the kit with createuikit and preserve its id. Keep the default model="gpt-image-2" unless the user specifically requests Gemini and their account supports 2K Gemini generation.
3. Establish the concept:

- If the user or agent already has a suitable owned SpriteCook asset ID, pass it as conceptassetid. 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 conceptassetid. - Otherwise call generateuikitconcepts, follow progress with getuikit, inspect the returned concept assets, and call selectuikitconcept with the strongest option.

1. Call generateuikitcomponentsheets. Omit sheet_count to let SpriteCook plan one to three sheets from the concept.
2. Follow progress with getuikit until status is sheet_review and component-sheet assets are present.
3. Call extractuikitcomponents without sheetasset_ids to process every sheet from the selected or latest successful attempt.
4. Inspect qualitysummary 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 requiresreview is true, resolve every relevant warning before finalizing.
5. Call finalizeuikit with no components argument only when the saved draft is sensible and qualitysummary.requiresreview is false. Otherwise supply a corrected component list with fixed names, groups, states, rectangles, scalability, or 9-slice borders.
6. 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 createuikit the screen intent, platform, aspect ratio, game description, visual direction, and screen-specific instructions. Use styleassetids 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 uikitmodelresolutionlimit, 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 statemode="visible-only" when the user needs only what appears in the concept. Use statemode="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 statemode from generateuikitcomponent_sheets to preserve that stored choice; pass it there only when intentionally overriding the kit for this sheet attempt.

An existing conceptassetid is the specific screen concept being decomposed. It is different from styleassetids, which provide ambient visual guidance.

Refining Results

• Regenerate concepts with revision_notes to explore a fresh batch.
• Refine one concept with editsourceassetid and editnotes.
• 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 editsourceassetid and editnotes.
• 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 getuikit until the workflow reaches the expected review status.

Extraction and 9-Slice Rules

extractuikit_components defaults to connected-alpha threshold 1, minimum area 24, merge distance 1, and padding 0. Keep these defaults unless the sheet visibly fragments or merges components incorrectly.

Always audit the returned quality_summary before finalization:

• A sheet with atcomponentlimit=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 listuikits if the kit ID is lost, then continue with getuikit.
• Use canceluikit 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.