spritecook-build-ui-kits

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SpriteCook Build UI Kits

SpriteCook 构建UI套件

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.

本技能适用于构建完整界面及连贯UI系统。搭配

spritecook-workflow-essentials

可实现 credits、清单、安全下载及共享默认设置等功能。

要求： SpriteCook MCP服务器需连接至你的编辑器。可通过

npx spritecook-mcp setup

进行设置，或查看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.

若需构建菜单、HUD、背包、对话框、设置界面、覆盖层、商店、角色界面等各部分需共享统一视觉语言的组合界面，请使用UI套件工作流。
仅当生成单个独立图标、徽章、按钮、控件、分隔符、框架或装饰元素时，才使用
```
generate_game_art(mode="ui")
```
。
对于新界面，务必先确立一个连贯的概念，再从该概念中提取生产级组件。切勿独立生成无关控件后再尝试组装视觉系统。

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.

确认UI套件工具已就绪，在启动多图工作流前调用
```
get_credit_balance
```
。若工具缺失，请刷新或重新连接SpriteCook MCP集成；切勿退而求其次，使用
```
mode="ui"
```
独立生成完整界面。
调用
```
create_ui_kit
```
创建套件并保留其
```
id
```
。除非用户明确要求Gemini且其账户支持2K Gemini生成，否则默认使用
```
model="gpt-image-2"
```
。
确立概念：
- 若用户或Agent已有合适的SpriteCook自有资产ID，将其作为
```
concept_asset_id
```
  传入。这将直接选中该资产并跳过概念生成步骤。
- 若概念为本地文件，请先使用
```
spritecook-upload-assets
```
  上传，再将返回的ID作为
```
concept_asset_id
```
  传入。
- 否则调用
```
generate_ui_kit_concepts
```
  ，通过
```
get_ui_kit
```
  跟踪进度，检查返回的概念资产，然后调用
```
select_ui_kit_concept
```
  选择最优方案。
调用
```
generate_ui_kit_component_sheets
```
。省略
```
sheet_count
```
参数，让SpriteCook根据概念规划1至3张组件表。
通过
```
get_ui_kit
```
跟踪进度，直到
```
status
```
变为
```
sheet_review
```
且组件表资产已生成。
调用
```
extract_ui_kit_components
```
时不传入
```
sheet_asset_ids
```
，以处理所选或最新成功生成的所有组件表。
以编程方式检查
```
quality_summary
```
及返回的组件草稿。确认名称唯一、每个矩形代表一个有用元素、状态分类合理、可缩放组件标记正确。若
```
requires_review
```
为true，在定稿前需解决所有相关警告。
仅当保存的草稿合理且
```
quality_summary.requires_review
```
为false时，调用
```
finalize_ui_kit
```
且不传入
```
components
```
参数。否则需提供修正后的组件列表，包含修正后的名称、分组、状态、矩形区域、可缩放性或9-slice边框。
将UI套件ID、定稿后的组件资产ID及清单保存至项目资产清单中。

默认需完成提取和定稿步骤。返回的

review_url

是可选的质量控制界面，并非必须交付的内容。仅当检测结果不明确、用户要求检查工作或可缩放边框需要视觉调优时使用该链接。

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.

向

create_ui_kit

传入界面用途、平台、宽高比、游戏描述、视觉方向及界面特定指令。仅当使用自有图片定义整体艺术风格时，才传入

style_asset_ids

。

对于UI套件，默认使用

gpt-image-2

。可接受的规范替代模型为

gemini-3.1-flash-image

和

gemini-3-pro-image

，但UI套件概念为2K分辨率，这些Gemini模型需要独立支持2K生成的计划。若服务器返回

ui_kit_model_resolution_limit

，请通过创建或更新套件并设置

model="gpt-image-2"

重试；该验证错误不会消耗生成 credits。请勿使用旧版

-preview

模型ID。

当用户仅需要概念中显示的内容时，使用

state_mode="visible-only"

。若需包含正常、悬停/聚焦、按下、禁用、选中或勾选等变体的生产级控件系列，请使用

state_mode="complete-states"

。

创建套件时设置状态模式。在

generate_ui_kit_component_sheets

中省略

state_mode

以保留已存储的选择；仅当有意为本次组件表生成覆盖套件设置时，才传入该参数。

现有

concept_asset_id

是待分解的特定界面概念，与提供环境视觉指导的

style_asset_ids

不同。

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.

使用
```
revision_notes
```
重新生成概念，以探索新的方案批次。
使用
```
edit_source_asset_id
```
和
```
edit_notes
```
优化单个概念。
当仅需要按钮、背包槽或HUD仪表等子集时，使用
```
focus_notes
```
。聚焦请求将使用一张组件表。
使用
```
supplemental_notes
```
补充缺失内容，无需替换已接受的组件表。
使用
```
edit_source_asset_id
```
和
```
edit_notes
```
优化单个组件表。
仅当用户计划支持4K分辨率且更大的源组件确实有帮助时，才请求
```
high_resolution=true
```
。

付费概念和组件表工具会立即返回任务ID。请勿将提交视为完成；需调用

get_ui_kit

直到工作流达到预期的审核状态。

Extraction and 9-Slice Rules

提取与9-Slice规则

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.

extract_ui_kit_components

默认使用连接alpha阈值

、最小面积

、合并距离

及内边距

。除非组件表出现明显的碎片化或组件合并错误，否则请保留这些默认值。

定稿前务必审核返回的

quality_summary

：

若
```
at_component_limit=true
```
，说明已达到100个检测上限。请检查是否遗漏或合并了小型组件。
检查
```
possible_merged
```
，将明显的多对象矩形拆分为单独的修正矩形，或当其内容已单独存在时省略该矩形。
修复重复或模糊的名称，纠正被错误分类为面板或装饰元素的控件。
为明确的交互系列设置一个稳定的
```
group
```
和不同的
```
state
```
值，例如normal、hover、pressed、disabled、on/off、selected/unselected或checked/unchecked。
将 fallback分类视为审核所有名称和类型的理由。
每个源表最多保留100个定稿组件，最多3张组件表，总计最多300个组件。若拆分合并矩形会导致单张表超过100个组件，请在定稿前移除低价值重复项或合并修正内容。

自动提取会将所有9-slice边框初始化为0。0值适用于固定尺寸的图标和装饰元素。对于可缩放面板、按钮、输入框、提示框、轨道和框架，仅当能可靠识别受保护边缘时，才设置非零的

left

、

top

、

right

和

bottom

边框。可使用可选的浏览器审核界面进行精确的视觉定位。

定稿后将返回可复用的私有组件资产及包含类型、状态组、状态、尺寸、可缩放性和9-slice元数据的清单。Unity、Godot及Web存档下载可从浏览器审核页面获取；MCP会直接提供资产和清单。

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.

若丢失套件ID，使用
```
list_ui_kits
```
查询，然后通过
```
get_ui_kit
```
继续操作。
使用
```
cancel_ui_kit
```
停止套件的活跃概念或组件表任务。
保存返回的
```
review_url
```
；该链接可在SpriteCook中打开同一个持久化套件，无需强制审核。
显示简洁、用户友好的错误信息。部分失败后保留成功生成的概念或组件表，并尽可能从中继续开发。