Game Ui Component Breakdown logo

Game Ui Component Breakdown

Community
guiguiyan930-source
game-ui-component-breakdown

Breaks an approved game UI page or visual style into reusable, individually generated component assets with clean edges, transparent backgrounds where appropriate, stable naming, states, dimensions, prompts, and traceable manifest records. Use for UI slicing, transparent buttons, icons, cards, modals, navigation, characters, props, frames, labels, effects, or development handoff.

Overview

Publisherguiguiyan930-source
Repositorygame-ui-design-workflow
Skill namegame-ui-component-breakdown
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 Component Breakdown 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-component-breakdown
  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-component-breakdown .claude/skills/game-ui-component-breakdown
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Game Ui Component Breakdown 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 Component Breakdown 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 Component Breakdown 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 组件拆解

输出独立素材或待自动切割的组件雪碧图及其契约,不重新生成完整页面。

前置门禁

必须读取:

  • contracts/style-contract.yaml
  • contracts/screen-contract.yaml
  • contracts/component-contract.yaml
  • contracts/asset-manifest.yaml
  • 已批准页面视觉稿

源页面对应 manifest 条目必须为 approved: true。若未批准,停止拆解并说明需要先完成页面验收。

分类

  • background:完整场景底图,无文字、按钮、导航或角色遮挡
  • control:主按钮、次按钮、关闭、返回、领取、导航按钮
  • container:卡片、文本框、弹窗底板、货币栏、进度条
  • icon:资源、功能、状态和导航图标
  • character:角色、NPC、宠物、头像
  • decoration:边框、角标、光效、底座、丝带和粒子

拆解步骤

  1. 确定全套拆解或指定范围。
  2. 建立组件 ID、分类、用途、复用性、尺寸、状态和源页面关系。
  3. 区分页面专属组件与跨页面基础组件。
  4. 为每个组件写一份可独立执行的提示文件。
  5. 图片工具可用时逐个生成,不把多个组件排成素材板。
  6. 检查边缘、透明通道、裁切、光向和比例。
  7. 更新组件契约和资源清单。

雪碧图模式

当用户后续需要“雪碧图拆分、单元素 PNG、ZIP 打包”时,可以先生成一张组件雪碧图作为中间产物:

  • 所有元素完整、互不接触并留有明显间距。
  • 使用透明背景或单一纯色背景。
  • 不要文字、编号、网格线、水印和说明箭头。
  • 阴影与发光不能跨到相邻元素。
  • 同一组件的不同状态保持固定顺序和一致轮廓。

雪碧图不是最终切图。生成后必须调用 game-ui-sprite-sheet-splitter 导出独立 PNG,并完成人工验收。

最终文件名遵循组件语义命名规范。element-001.png 只允许作为检测中间结果,不能作为批准交付。

默认规则

  • 除背景外使用透明背景。
  • 按钮、卡片、弹窗和标签默认不要文字,保留排版留白。
  • 图标保持同一视角、光源、描边和小尺寸识别性。
  • 角色完整无遮挡,姿态适合叠放到原布局。
  • 装饰可叠加,不带不透明矩形底。
  • 保持源页面的视觉权重;不要把次按钮生成得比主按钮更强。
  • 按钮、面板、弹窗和进度条填写 slice 元数据;9-slice margins 需要人工预览确认。

单组件提示文件

保存为 prompts/components/<component-id>.md:

markdown
# <组件名称>

## 来源与用途
## 尺寸和状态
## 必须继承的契约字段
## 图像生成提示词
## 反向限制
## 验收记录

提示词必须明确:

  • “单独的游戏 UI 组件素材”
  • 组件类别、用途、目标尺寸与状态
  • 色调、材质、光向、描边、厚度和圆角
  • 是否透明、是否无文字、中心构图和安全边距
  • 高清、完整轮廓、适合合成和开发
  • 不生成完整页面、不粘连其他组件

特殊规则

背景

无 UI 控件、文字、按钮、导航和前景角色;需要延展时要求边缘自然连续。

按钮与容器

空白文字区、完整边框、真实点击质感;为状态生成独立文件,不在一张图中拼版。

图标

小尺寸可识别、无文字、统一透视;除非契约要求,不附带底板。

角色

完整轮廓、无遮挡、透明背景;不得复刻未经授权的受保护角色。

验收

  • 文件路径、组件 ID 和源页面可追踪
  • 非背景组件透明要求正确
  • 没有文字、乱码、脏边、背景残留或意外裁切
  • 状态之间轮廓稳定,视觉差异符合契约
  • 文件名使用 <component-id>-<state>-v<数字>.<ext>
  • 每个资源在 manifest 中单独登记

工具不可用时保留提示词,将状态设为 pending-generation,不得伪造透明素材。

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 Component Breakdown AI skill do?

Breaks an approved game UI page or visual style into reusable, individually generated component assets with clean edges, transparent backgrounds where appropriate, stable naming, states, dimensions, prompts, and traceable manifest records. Use for UI slicing, transparent buttons, icons, cards, modals, navigation, characters, props, frames, labels, effects, or development handoff.

Why use Game Ui Component Breakdown on TypingMind?

Because you install it once and use it with any model. Game Ui Component Breakdown 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 Component Breakdown 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-component-breakdown. 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 Component Breakdown?

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 Component Breakdown?

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

Is the Game Ui Component Breakdown 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 👇