layer-game-ui

Layer Game UI

概述

游戏 UI 有两项插画不需要处理的任务：适应尺寸变化，以及在小尺寸下仍清晰可读。按钮在一种宽度下看起来合适，换一种宽度就变得模糊，这是有问题的；图标在 512px 下清晰可辨，在 64px 下却变成一团，也是有问题的。这两者在生成前就已决定，取决于提示词的要求以及设置了哪些交付字段。

Layer 通过 execute_forge 上的 nine_slice 处理尺寸调整问题：运行后，它会找到每个轴中间的平直区域，将边缘和中心制作为平铺块，并在文件中记录九切片边距。随后，export_ui_kit 会以引擎绘制这些元素所需的文件格式写出它们。生成机制、费用门槛和轮询都在 layer 中；提示词撰写则在 layer-image 中。

如果这里提到的同级技能未出现在你可用的技能中，请让用户安装它（npx skills add layerai/skills --skill <name>）；若无人值守，则根据工具架构继续操作，并指出这一缺失。

快速参考

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

可调整尺寸的元素

九切片元素由九个部分组成：四个不会缩放的角、四个沿一个轴重复平铺的边，以及一个沿两个轴重复平铺的中心。提示词必须要求生成的图像能够按这种方式切分。

• 装饰仅放在角落。 细密装饰、铆钉、宝石和斜面应放在角落。
• 中间区域保持纯色或纹理均匀。 木纹、羊皮纸或拉丝金属都适合平铺；居中的徽章、纹章或标签则不适合。带有居中徽章的图像不会返回边距，而没有边距的元素无法放入 UI 套件。
• 使用纯色背景。 要求透明背景时，模型会把棋盘格画进像素中。应指定一种与元素形成对比的纯色。
• 不要包含文字。 标签应由引擎负责，它可以在任意宽度下将标签放置在元素上方。

请用这些措辞将要求写进提示词：“华丽的奇幻按钮边框，金色细密装饰仅位于四个角落，深色皮革纯色中心，边缘平直均匀，纯洋红色背景，无文字”。

对于不会调整尺寸的任何内容，请关闭 nine_slice：图标、肖像、徽标、固定尺寸的徽章。

图标和套装

在提示词中注明目标像素尺寸，并按最小尺寸设计。图标在 64px 下效果不佳时，解决办法是减少元素并加粗线条，而不是提高放大质量。

一套图标要通过共享一套设计语法来保持统一，因此每次提示词都要说明：线条粗细、圆角半径、透视（平面、等距或轻微三分之四透视）、配色、光照方向，以及图标是置于底板上还是悬浮呈现。扩展一套图标属于编辑工作，而非生成工作：在使用经过筛选、满足 capabilities: {image_editing: true} 的模型时，将两三个已批准的图标作为 reference_image 附上，模型会复现所示内容。style_reference 只传递外观，设计语法可能因此偏离。

若只需交付一种尺寸，使用 output_fit 并设置 canvas: "FIXED"、目标 width 和 height，以及固定的 padding，即可让每个图标具有相同的画布和边距；trim: true 会先移除透明边距。卡片或符号底板的圆角形状，应通过满版、不透明、方角生成图中的 corner_radius 获得，而不是要求在圆角卡片周围生成透明背景。

交付

export_ui_kit 是确定性的文件操作，不消耗 Creative Units。它最多接受 128 个 file_ids，每个都带有 9 切片内边距，并按照工具包中的排列顺序提供；它会返回一个 zip 下载链接，其中包含导入步骤 README 和每个元素的内边距。

engine	zip 中包含的内容
UNITY	一个图集，以及用于将其切分为带有 9 切片边框的精灵的 .meta
GODOT	一个图集，以及每个元素对应的 StyleBoxTexture .tres，用于主题和 NinePatchRect
CSS	每个元素一张图片，以及包含各元素 border-image 规则的样式表
JSON	一个图集，以及含有每帧边框的 TexturePacker JSON（哈希格式）

在 Unity、Godot 和 CSS 中，边缘和中心区域会无缝重复。PixiJS 和 Phaser 在读取 JSON 时则会拉伸这些区域，因此请告知使用这些引擎的用户：纹理细节繁复的中心区域在大尺寸下会变得模糊，较为朴素的中心区域则更耐放大。

示例

“为我们的 Godot 暗黑奇幻 RPG 制作一套 UI 工具包：主按钮、副按钮、对话面板和提示框边框，风格与我们已批准的物品栏面板相匹配。”

1. 已批准的面板已有 file_id，无需上传。
2. 使用 filter.use_case: "text_to_image" 和 filter.capabilities: {image_editing: true} 调用 list_base_models；选择第一个结果，然后调用 get_base_model。
3. 分别运行四次，每次都设置 nine_slice: true，将已批准的面板作为 reference_image，并在提示词中说明共享的设计语法和元素：“宽幅主按钮，深色铁框，只有四角带银色花丝装饰，中心为素色深色皮革，边缘平直均匀，置于纯洋红色背景上，不含文字”。
4. 使用这些输入调用一次 estimate_forge_price，将结果乘以四，并询问是否超过 20 CUs。执行后，以 poll_interval_seconds 为间隔轮询 get_forge_run。
5. 每个元素选一个输出。任何带有徽章或中心过于繁复的输出都无法使用内边距：为该元素重新生成更朴素的中心区域。
6. 使用 engine: "GODOT" 和四个 file_ids 调用 export_ui_kit。交付链接和 README 中的内边距信息。

常见错误

• 要求 9 切片元素使用透明背景，结果却把棋盘格一并交付。
• 按钮上有居中的徽章或标签，导致它无法使用内边距。
• 对图标、肖像和其他固定尺寸的美术资源设置 nine_slice。
• 在原始分辨率下评判图标，而不是在目标尺寸下评判。
• 扩展已批准的套装时，使用 style_reference，而不是在 image_editing 模型上使用 reference_image。
• 将按钮文字直接绘制到美术资源中。
• 要求透明背景上的圆角卡片，而不是使用 corner_radius 裁切。