Game Ui Sprite Sheet Splitter logo

Game Ui Sprite Sheet Splitter

Community
guiguiyan930-source
game-ui-sprite-sheet-splitter

Splits a generated game UI sprite sheet or component board into individual transparent PNG elements, writes crop metadata, validates dimensions and alpha channels, and packages all PNG files into a ZIP archive. Use after component breakdown when users ask to cut a combined sprite sheet, isolate every button/icon/card/effect, export single elements, remove a solid background, or deliver a downloadable PNG asset pack.

Overview

Publisherguiguiyan930-source
Repositorygame-ui-design-workflow
Skill namegame-ui-sprite-sheet-splitter
Stars
334
Forks
52
Bundled files
1
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 1 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by guiguiyan930-source on GitHub. Read the source before you install it.

Installation

Install the Game Ui Sprite Sheet Splitter AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/guiguiyan930-source/game-ui-design-workflow/tree/main/skills/game-ui-sprite-sheet-splitter
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/guiguiyan930-source/game-ui-design-workflow.git /tmp/game-ui-design-workflow
mkdir -p .claude/skills
cp -r /tmp/game-ui-design-workflow/skills/game-ui-sprite-sheet-splitter .claude/skills/game-ui-sprite-sheet-splitter
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Game Ui Sprite Sheet Splitter in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Game Ui Sprite Sheet Splitter on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Game Ui Sprite Sheet Splitter is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

游戏 UI 雪碧图拆分与 PNG 打包

把组件拆解阶段生成的整张雪碧图进一步切成独立透明 PNG,并打包成可下载 ZIP。不要把“生成组件清单”误当成“已经完成像素级切图”。

前置条件

读取:

  • 已批准的组件拆解结果
  • contracts/style-contract.yaml
  • contracts/component-contract.yaml
  • contracts/asset-manifest.yaml
  • contracts/sprite-contract.yaml(存在时)

输入雪碧图必须是实际存在的图片文件。若只有提示词或组件列表,先完成组件图生成。

最终单元素 PNG 必须去掉全部文字,包括标题、按钮文案、数字标签、占位文字、水印和说明编号。文字不是组件图形的一部分。

适用输入

  • 透明背景雪碧图:优先按 Alpha 通道识别。
  • 纯色或近似纯色背景:采样四周背景色并移除。
  • 同一张图上的按钮、图标、卡片、装饰、特效和角色。

不适合:

  • 元素互相遮挡或粘连严重的完整 UI 页面。
  • 带复杂场景背景且元素没有间隔的合成图。
  • 需要恢复被遮挡像素的素材。

遇到这些情况,应重新生成留有间距的组件雪碧图,而不是强行切割。

输入雪碧图规范

组件生图时优先要求:

  • 所有元素完整、互不接触、四周留白。
  • 统一纯色背景或透明背景。
  • 不要文字、编号、水印和说明线。
  • 阴影不要跨越到相邻组件。
  • 相似状态按固定顺序排列,但不绘制网格线。
  • 不要把一个组件拆散成多个远离的碎片。

自动拆分

执行:

bash
python3 scripts/split_sprite_sheet.py <source.png> \
  --output-dir <project>/assets/sprites/<pack-id>/items \
  --zip <project>/packages/<pack-id>-png.zip \
  --mode auto \
  --prefix <pack-id>

默认行为:

  1. 输入有透明通道时按 Alpha 检测。
  2. 输入不透明时采样边缘背景色。
  3. 合并距离较近的像素区域。
  4. 过滤过小噪点。
  5. 每个元素增加安全边距。
  6. 导出独立透明 PNG。
  7. 生成 sprite-manifest.yaml。
  8. 生成包含 manifest 和全部 PNG 的 ZIP。

语义 mapping

自动序号不能作为最终资产名。准备按检测顺序排列的 YAML:

yaml
items:
  - semantic_name: shop-buy-button-normal
    component_id: shop-buy-button
    category: button
    state: normal
    slice: {type: 9-slice, margins: [36, 36, 28, 28]}

执行时增加:

bash
--mapping mappings/shop-components.yaml

工具会用 semantic_name 作为 PNG 文件名,并把组件 ID、分类、状态与 slice 写入 manifest。命名和切图方式分别遵循组件技能的语义命名规范与切图规则。

自动切割不会自动识别或修复文字。源雪碧图仍有文字时,先执行以下任一操作,再开始切割:

  1. 优先重新生成无文字雪碧图。
  2. 无法重生时,对文字区域做蒙版修复或内容填充,补回底板纹理。
  3. 修复后重新检查,不能只把文字裁掉而留下透明洞、色块或残影。

不得把含文字的切片标记为批准。

参数调整

元素被拆得太碎:

bash
--connect-gap 6

多个元素被粘成一张:

bash
--connect-gap 0

背景残留:

bash
--mode background --background-tolerance 16

浅色组件被误删:

bash
--background-tolerance 8

小图标被过滤:

bash
--min-area 16

需要更多裁切留白:

bash
--padding 8

重新输出时显式使用 --force,不得静默覆盖已批准包。

项目契约

将结果写入 contracts/sprite-contract.yaml:

  • 源雪碧图与源页面
  • 检测模式和阈值
  • 输出目录和 ZIP 路径
  • 单元素 ID、路径、原图坐标、尺寸和透明状态
  • 人工检查状态

在 asset-manifest.yaml 至少登记:

  • 原始雪碧图:kind: sprite-sheet
  • 最终压缩包:kind: package

单元素明细由 sprite-contract.yaml 管理,避免大型组件包让全局 manifest 失控。

人工验收

自动切图后逐项检查:

  • 每个文件只包含一个完整元素。
  • 元素没有被裁断。
  • 相邻元素没有粘连。
  • 阴影、发光和半透明边缘完整。
  • 背景已透明,无白边、色边和脏点。
  • 不含标题、按钮文案、数字标签、水印或文字残影。
  • 文件名、坐标和尺寸与 manifest 一致。
  • ZIP 可以解压,包含全部 PNG 和 manifest。

误切时先调整阈值重新生成;仍无法解决时,在 sprite-contract.yaml 记录人工裁切框,不要把错误结果标记为批准。

文件命名

text
<pack-id>-001.png
<pack-id>-002.png
<pack-id>-003.png
...
<pack-id>-png.zip

确定组件语义后可重命名为:

text
button-primary-default.png
nav-home-selected.png
currency-gold.png
effect-crescent-glow.png

重命名后同步更新 manifest,不能只改文件名。

完成定义

  • 原始雪碧图可追踪
  • 每个元素是独立透明 PNG
  • 自动坐标和实际尺寸已记录
  • 人工验收通过
  • review.text_free: true
  • ZIP 包存在且可解压
  • 最终 PNG 使用语义名称并关联 component ID
  • 项目严格校验通过
  • quickstart.md 记录解压和使用方式

需要继续生成 Atlas 和引擎 JSON 时,调用 game-ui-asset-pipeline。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Game Ui Sprite Sheet Splitter AI skill do?

Splits a generated game UI sprite sheet or component board into individual transparent PNG elements, writes crop metadata, validates dimensions and alpha channels, and packages all PNG files into a ZIP archive. Use after component breakdown when users ask to cut a combined sprite sheet, isolate every button/icon/card/effect, export single elements, remove a solid background, or deliver a downloadable PNG asset pack.

Why use Game Ui Sprite Sheet Splitter on TypingMind?

Because you install it once and use it with any model. Game Ui Sprite Sheet Splitter is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Game Ui Sprite Sheet Splitter in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/guiguiyan930-source/game-ui-design-workflow/tree/main/skills/game-ui-sprite-sheet-splitter. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Game Ui Sprite Sheet Splitter?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Game Ui Sprite Sheet Splitter?

As many as you like. As long as a model supports skills, you can use Game Ui Sprite Sheet Splitter with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Game Ui Sprite Sheet Splitter AI skill free?

Yes. It is published on GitHub by guiguiyan930-source under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇