layer-game-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Layer Game UI

Layer 游戏 UI

Overview

概述

Game UI has two jobs that illustration does not: it resizes, and it reads at small sizes. A button that looks right at one width and smears at another is broken; an icon that reads at 512px and turns to mush at 64px is broken. Both are decided before generation, by what the prompt asks for and by which delivery fields are set.

Layer handles the resize problem with

nine_slice

execute_forge

: after the run it finds the plain band through the middle of each axis, makes the edges and centre tile, and records the 9-slice insets on the file.

export_ui_kit

then writes those elements in the files an engine draws them by. Generation mechanics, the spend gate and polling are in

layer

; prompt craft is in

layer-image

If a sibling skill named here is missing from your available skills, ask the user to install it (

npx skills add layerai/skills --skill <name>

); unattended, proceed from tool schemas and flag the gap.

游戏 UI 有两项插画不具备的要求：它需要可缩放，并且在小尺寸下清晰可辨。一个在某种宽度下看起来合适、换一种宽度却变形模糊的按钮就是坏的；一个在 512px 下清晰、在 64px 下却糊成一团的图标也是坏的。这两点在生成前就已决定，取决于提示词的要求以及设置了哪些交付字段。

Layer 通过在

execute_forge

中使用

nine_slice

来处理缩放问题：运行结束后，它会找出每个轴向中央的纯色带，划分出边缘和中心切片，并把 9-slice insets 记录到文件中。随后，

export_ui_kit

会按照各引擎实际用于绘制这些元素的文件格式将其写出。生成机制、消费门槛和轮询逻辑位于

layer

；提示词编写位于

layer-image

。

如果这里提到的某个同级 skill 不在可用 skill 列表中，请让用户安装（

npx skills add layerai/skills --skill <name>

）；在无人值守模式下，则根据工具 schema 继续执行并标记该缺失项。

Quick reference

快速参考

Need	Use
Button, panel, frame, tab, tooltip	`execute_forge` with `nine_slice: true`
Anything that never resizes	Omit `nine_slice`
Element that must match approved UI	Approved files as `reference_image` , model filtered for `image_editing`
Icons on one canvas size	`output_fit` with `canvas: "FIXED"` , `width` , `height` , `padding`
Remove transparent margin	`output_fit.trim: true`
Rounded card or badge plate	Generate full bleed and opaque, then `output_fit.corner_radius`
Transparent icon	`remove_background: true` (billed as its own run, so pass it to the estimate)
Engine import of resizable elements	`export_ui_kit` with `engine` `UNITY` , `GODOT` , `CSS` or `JSON`

需求	使用方式
按钮、面板、边框、标签页、工具提示	使用 `execute_forge` 并设置 `nine_slice: true`
任何不需要缩放的元素	省略 `nine_slice`
必须与已批准 UI 匹配的元素	将已批准的文件用作 `reference_image` ，并筛选支持 `image_editing` 的模型
使用统一画布尺寸的图标	使用 `output_fit` ，并设置 `canvas: "FIXED"` 、 `width` 、 `height` 、 `padding`
移除透明边距	`output_fit.trim: true`
圆角卡片或徽章底板	生成满幅、不透明图像，然后设置 `output_fit.corner_radius`
透明图标	`remove_background: true` （单独计费为一次运行，因此也要将其传给估算）
将可缩放元素导入引擎	使用 `export_ui_kit` ，并将 `engine` 设为 `UNITY` 、 `GODOT` 、 `CSS` 或 `JSON`

Resizable elements

可缩放元素

A 9-slice element is nine pieces: four corners that never scale, four edges that repeat along one axis, and a centre that repeats along both. The prompt has to produce an image that splits that way.

Ornament in the corners only. Filigree, rivets, gems and bevels belong in the corners.
A plain or evenly textured middle. Wood grain, parchment, or brushed metal tile well; a centred emblem, crest or label does not. An image with a centred emblem comes back without insets, and an element without insets cannot go into a UI kit.
A solid background colour. Asked for a transparent background, models paint a checkerboard into the pixels. Name a flat colour that contrasts with the element instead.
No text. A label belongs to the engine, which sets it over the element at any width.

Write it into the prompt in those words: "Ornate fantasy button frame, gold filigree in the four corners only, plain dark leather centre, even straight edges, on a solid magenta background, no text".

Keep

nine_slice

off for anything that does not resize: icons, portraits, a logo, a fixed-size badge.

一个 9-slice 元素由九块组成：四个永不缩放的角、四条沿一个轴重复的边，以及一块沿两个轴重复的中心。提示词必须生成能够按这种方式切分的图像。

装饰仅放在四角。 卷曲花纹、铆钉、宝石和斜面应置于四角。
中间应为纯色或纹理均匀。 木纹、羊皮纸或拉丝金属很适合；居中的徽记、纹章或标签则不适合。若图像带有居中的徽记，返回结果就不会包含 insets；而没有 insets 的元素无法加入 UI 套件。
使用纯色背景。 要求透明背景时，模型会把棋盘格画进像素。应指定一种与元素形成对比的纯色背景。
不要包含文字。 标签文字应由引擎处理，引擎可以将其叠加在元素上并适配任意宽度。

应使用以下措辞写入提示词：“华丽的奇幻按钮边框，金色卷曲花纹仅位于四角，中间为纯色深色皮革，边缘平直均匀，置于纯洋红色背景上，不含文字”。

对于任何不需要缩放的元素，请关闭

nine_slice

：图标、肖像、Logo、固定尺寸徽章。

Icons and sets

图标与图标集

State the target pixel size in the prompt and design for the smallest one. The fix for an icon that fails at 64px is fewer elements and heavier strokes, not a better upscale.

A set holds together by sharing a grammar, so name it in every prompt: stroke weight, corner radius, perspective (flat, isometric, or slight three-quarter), palette, lighting direction, and whether icons sit on a plate or float free. Extending a set is an editing job, not a generation job: attach two or three approved icons as

reference_image

on a model filtered with

capabilities: {image_editing: true}

, which reproduces what it is shown.

style_reference

carries a look only and lets the grammar drift.

For delivery at one size,

output_fit

with

canvas: "FIXED"

, the target

width

and

height

, and a fixed

padding

gives every icon the same box and margin;

trim: true

removes the transparent margin first. A card or symbol plate gets its rounded shape from

corner_radius

on a full-bleed, opaque, square-cornered generation, not from asking for a transparent background around a rounded card.

在提示词中注明目标像素尺寸，并按其中最小的尺寸进行设计。图标在 64px 下失败时，正确的修复方法是减少元素数量并加粗描边，而不是进行更好的放大。

一套图标要靠共享同一套设计规范才能保持一致，因此要在每个提示词中写明：描边粗细、圆角、透视（平面、等距或轻微四分之三视角）、调色板、光照方向，以及图标是置于底板上还是独立悬浮。扩展图标集应使用编辑而非生成：将两三个已批准的图标作为

reference_image

附加到经过

capabilities: {image_editing: true}

筛选的模型上，模型会复现所展示的内容。

style_reference

只能提供风格参考，并会让设计规范发生偏移。

若要按单一尺寸交付，使用

output_fit

，设置

canvas: "FIXED"

、目标

width

和

height

以及固定的

padding

，即可让每个图标拥有相同的画框和边距；

trim: true

会先移除透明边距。卡片或符号底板的圆角应通过对满幅、不透明且直角生成的图像设置

corner_radius

来实现，而不是要求在圆角卡片周围生成透明背景。

Delivery

交付

export_ui_kit

is a deterministic file operation and costs no Creative Units. It takes up to 128

file_ids

, every one carrying 9-slice insets, in the order the kit should list them, and returns a download link to a zip with a README of import steps and each element's insets.

`engine`	What the zip holds
`UNITY`	One atlas and the `.meta` that slices it into sprites with 9-slice borders
`GODOT`	One atlas and a StyleBoxTexture `.tres` per element, for themes, NinePatchRect
`CSS`	One image per element and a stylesheet with a `border-image` rule for each
`JSON`	One atlas and TexturePacker JSON (hash) with each frame's borders

Edges and centre repeat without a seam in Unity, Godot and CSS. PixiJS and Phaser, reading the JSON, stretch them instead, so tell users on those engines that a heavily textured centre will smear at large sizes and a plainer one holds up better.

export_ui_kit

是确定性的文件操作，不消耗 Creative Units。它最多接受 128 个

file_ids

，且每个都必须带有 9-slice insets；传入顺序就是 UI 套件中的列出顺序。执行后，它会返回一个 zip 下载链接，其中包含一份 README，说明导入步骤以及每个元素的 insets。

`engine`	zip 中的内容
`UNITY`	一张图集和一个 `.meta` 文件，该文件会将图集切分为带 9-slice 边框的 sprites
`GODOT`	一张图集，以及每个元素对应的 StyleBoxTexture `.tres` 文件，用于主题和 NinePatchRect
`CSS`	每个元素一张图像，以及一份样式表，其中每个元素都有一条 `border-image` 规则
`JSON`	一张图集和 TexturePacker JSON (hash) 文件，其中包含每个 frame 的 borders

边缘和中心在 Unity、Godot 与 CSS 中重复平铺时不会出现接缝。而读取 JSON 的 PixiJS 和 Phaser 会直接拉伸它们，因此应告知使用这些引擎的用户：中心纹理过于复杂时，大尺寸下会出现涂抹感，而较简洁的中心区域更能适应放大。

Worked example

实战示例

"A UI kit for our dark-fantasy RPG in Godot: primary button, secondary button, dialogue panel and tooltip frame, matching the inventory panel we already approved."

The approved panel already has a
```
file_id
```
; no upload.

list_base_models

with

filter.use_case: "text_to_image"

and

filter.capabilities: {image_editing: true}

; take the first result, then

get_base_model

Four runs, each with
```
nine_slice: true
```
, the approved panel as
```
reference_image
```
, and a prompt naming the shared grammar plus the element: "Primary button, wide, dark iron frame, silver filigree in the four corners only, plain dark leather centre, even straight edges, on a solid magenta background, no text".
```
estimate_forge_price
```
once with those inputs, multiply by four, and ask above 20 CUs. Execute and poll
```
get_forge_run
```
at
```
poll_interval_seconds
```
.
Pick one output per element. Any that came back with an emblem or a busy centre will not carry insets: rerun that one with a plainer middle.
```
export_ui_kit
```
with
```
engine: "GODOT"
```
and the four
```
file_ids
```
. Hand over the link and the README's insets.

“为我们在 Godot 中开发的暗黑奇幻 RPG 制作一套 UI：主按钮、次按钮、对话面板和工具提示边框，并与已批准的背包面板保持一致。”

已批准的面板已有
```
file_id
```
，无需上传。

调用

list_base_models

，传入

filter.use_case: "text_to_image"

和

filter.capabilities: {image_editing: true}

；取第一个结果，然后调用

get_base_model

。

运行四次，每次都设置
```
nine_slice: true
```
，将已批准的面板作为
```
reference_image
```
，并使用同时写明共享设计规范和具体元素的提示词：“主按钮，宽幅，深铁边框，金色卷曲花纹仅位于四角，中间为纯色深色皮革，边缘平直均匀，置于纯洋红色背景上，不含文字”。
使用上述输入调用一次
```
estimate_forge_price
```
，将结果乘以四；如果费用超过 20 CUs，则先询问用户。执行后，以
```
poll_interval_seconds
```
为间隔轮询
```
get_forge_run
```
。
每个元素选择一个输出。任何返回结果若带有徽记或过于繁杂的中心区域，就不会包含 insets：使用更简洁的中间区域重新运行该元素。
调用
```
export_ui_kit
```
，设置
```
engine: "GODOT"
```
并传入四个
```
file_ids
```
。交付下载链接和 README 中的 insets。

Common mistakes

常见错误

Asking a 9-slice element for a transparent background, then shipping the checkerboard.
A centred crest or label on a button, which leaves it without insets.
Setting
```
nine_slice
```
on icons, portraits and other fixed-size art.
Judging an icon at full resolution instead of at its target size.
Adding to an approved set with
```
style_reference
```
instead of
```
reference_image
```
on an
```
image_editing
```
model.
Baking button text into the art.
Asking for a rounded card on transparency instead of trimming it with
```
corner_radius
```
.

要求 9-slice 元素使用透明背景，最后却交付了棋盘格背景。
在按钮中央放置纹章或标签，导致它没有 insets。
对图标、肖像和其他固定尺寸美术资源设置
```
nine_slice
```
。
以全分辨率而非目标尺寸判断图标效果。
扩展已批准的图标集时，在支持
```
image_editing
```
的模型上使用
```
style_reference
```
，而不是
```
reference_image
```
。
将按钮文字直接烘焙进美术资源中。
要求在透明背景上生成圆角卡片，而不是通过
```
corner_radius
```
裁切出圆角。