像素画 · 实测
用 AI 做像素画游戏 UI 套件：按钮、血条和 9-slice 面板
游戏 UI 有一幅画所没有的规则。对话框要拉伸到能装下每一行文字，所以它的四个角必须保持完整，四条边则重复拼接。按钮要在常态、悬停和按下之间切换，所以三种状态的尺寸必须完全相同。做不到这些，文本框会露出接缝，按钮会跳动。
2026年9月29日，我们请 Ciyo Agent（Ciyo 智能体）为虚构的森林游戏 Mossfall 做一套小型 UI 套件，并按这些规则逐项测量。第一张图看起来已经完工，却有两条规则没通过。第二张通过了。
把部件和规则一起提出来
我们要求用同一种风格做四个部件：一个对话框面板、一个有三种状态的按钮、一条血条和一个物品栏格子。我们还把引擎的规则写进了需求：四个角完全相同以便做 9-slice（九宫格拉伸），按下状态低一个像素，调色板有限，不要文字。
智能体用 GPT Image 2.5 Flare 做了一张 1,152 × 864 的图，花了 2 个额度。原始文件有 25,696 种颜色，所以智能体在不加抖动的情况下把它减到 16 色，并把两个版本都放到了画板上。
为我的俯视视角像素画游戏 Mossfall（森林场景：苔绿色、温暖的木头棕色、奶油色羊皮纸）在一张图上做一套像素画 UI 套件：1) 一个对话框面板，木质边框，里面是羊皮纸，方角，按 9-slice 设计（四个角完全相同，四条边能均匀重复）；2) 一个按钮的三种状态并排：常态、悬停（更亮）和按下（向下移动一个像素）；3) 一个水平血条边框，红色填充约占三分之二；4) 一个方形小物品栏格子。风格：严格对齐像素网格的清晰硬朗像素，不要抗锯齿，不要模糊，不要渐变，最多 16 种颜色，纯色深色背景。任何元素上都不要文字或字母。我们在第一张图上测到了什么
有一项是对的，有一项接近。血条的红色填充占了轨道的 68.9%，接近我们要的三分之二。按下状态的按钮面比常态低了 7 个源像素；按智能体后来测得的每个游戏像素约 3.5 个源像素计算，这大约是两个游戏像素，而不是一个。
还有两处在游戏里会出问题。三种按钮状态分别宽 273、266 和 271 像素，所以按钮切换状态时会跳动。对话框面板的四个角也不是彼此的副本：和镜像后的左上角相比，右上角有 13% 的像素不同，两个下角分别有 23% 和 25% 不同。
| 规则 | 要求 | 实际 |
|---|---|---|
| 按钮状态 | 尺寸相同 | 宽 273、266 和 271 px |
| 面板四角 | 四个角完全相同 | 13–25% 的像素不同 |
| 按下状态 | 低一个像素 | 按钮面低 7 px（约两个游戏像素） |
| 血条填充 | 约三分之二 | 68.9% |
| 颜色数 | 最多 16 | 原始 25,696；减色后 16 |
为什么四个角和尺寸比外观更重要
9-slice 把面板切成 3 × 3 的网格。四个角只画一次，永远不拉伸。四条边沿长度方向重复，中间部分填满其余空间。如果四个角不一样，无论什么尺寸都会露出接缝；如果边上的图案不能均匀重复，每拼接一次就会出现一道明显的接口。
按钮遵循类似的规则。引擎在同一个位置把一张图换成另一张，所以任何尺寸差异都会让玩家点按时按钮的轮廓发生移动。
告诉智能体哪里没通过、引擎需要什么
我们把测量结果发回去，要求做一套可直接用于游戏的套件。智能体发现模型画的像素大小并不统一：按钮、血条和格子里每个游戏像素约为 4.0 × 3.5 个源像素，面板里约为 6.3 × 5.6。没有一个干净的网格可以对齐。
于是它做了一件值得了解的事：保留设计，用代码干净地重画，每个边框都由一个角和一段每 16 像素重复一次的木纹边块构成。因此最终的套件是对模型设计的精确重建，而不是模型自己的像素，木纹也比原画简单。
我测量了这张 16 色的图：三种按钮状态宽 273、266 和 271 px，所以无法原地切换；对话框面板的四个角彼此之间有 13 到 25% 的像素不同，所以做 9-slice 会露出接缝。请把它做成可直接用于游戏的版本：测量真实的游戏像素尺寸并对齐到那个网格；让三种按钮状态尺寸完全相同；让面板的四个角成为同一个角的镜像副本；把每个元素切成单独的透明背景 PNG；再加一个 9-slice 测试，把面板拉伸到两倍宽度、60% 高度。告诉我网格尺寸和各元素的最终尺寸。9-slice 测试
智能体把 142 × 46 的面板切成九块，再重建为 284 × 28，即两倍宽度、60% 高度。四个角保持完整，木纹连续不断。它还提醒：在这个高度下，边框之间只剩 14 行羊皮纸，这就告诉了你文字能用的最小面板是多大。
我们也检查了文件。三个按钮各为 68 × 36，它们 5 像素宽的边框逐像素一致，按下状态的按钮面正好比另外两个低一个像素。面板四个 7 × 7 的角互为精确镜像。整套件用了 13 种颜色。
UI 素材包卖家承诺了什么
付费 UI 素材包把同样的规则列为卖点，这恰好说明它们就是该测的项目。无论你是买素材包还是自己做，都可以把它们当作检查清单。
2026-09-27 发布。TaleTone 宣布推出自家面向奇幻游戏的付费“UI Window Frame Mega Pack”（UI 窗口边框大合集），提供 SVG 和 PNG 格式，16 种样式、12 种颜色，“optimized for 9-slice layouts and resizing.”（针对 9-slice 布局和缩放做了优化。）这是卖家对自家产品的推广，与 Ciyo 没有任何关系；我们引用它是为了检查清单，而不是推荐。
导入之前的检查清单
检查同一个控件的每种状态尺寸是否相同，要拉伸的元素的四个角是否互为镜像副本，边上的图案是否按整块重复，以及最小的面板是否仍能放下一行文字。然后按一个文件像素对应一个游戏像素，把每个元素单独导出。
像素画游戏 UI
AI 图像模型能做 9-slice 面板吗？
它能画出看起来没问题的面板，但在我们 2026年9月29日的测试中，四个角彼此有 13–25% 的像素不同。我们让 Ciyo Agent 用一个镜像的角重建了面板，之后 9-slice 拉伸就干净了。
为什么我的按钮各状态尺寸不同？
模型把每种状态当作单独的一幅画来画。我们的三种状态宽 273、266 和 271 像素。要求它们共用一个尺寸，并在导入前检查。
最终套件的尺寸是多少？
对话框面板 142 × 46，按钮 68 × 36，血条 174 × 32，物品栏格子 32 × 32，全部按一个文件像素对应一个游戏像素。
花了多少钱？
这张图花了 2 个额度。在我们的测试中，测量和重建都在智能体的工作区里运行，没有额外产生图像费用。
在 Ciyo 里搭建你的 UI 套件
描述你游戏的风格和引擎的规则，然后在同一块画板上和 Ciyo Agent 一起检查并重建套件。