Game UI Design Workflow skill
Game UI Design Workflow skills give Cursor rules for approving game screens and handing their graphics over to an engine.
- 430 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent writes project documents and graphics and runs local image-processing scripts.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/game-ui-design-workflowDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent writes project documents and graphics and runs local image-processing scripts.
This is third-party code. Review the repository files before installing.
What it does
Game UI Design Workflow is a Cursor skill collection covering game UI work from requirements to graphics handoff. The agent describes interactions, seeks approval for a visual direction and applies those decisions to later screens. Each screen is approved before component breakdown. Splitting scripts and atlas tools prepare those components and check PNG and SVG dimensions and transparency. The agent records assets, states and sources in a registry that links each screen to its components for developer handoff.
Who it is for. Game interface designers extending an approved screen into a consistent engine-ready asset set.
Good fit when
- Before mockups, the game designer documents requirements and player actions.
- The home screen is approved, and its style must carry through the shop, levels and combat UI.
- A developer is waiting for transparent assets from an approved screen with an asset manifest.
- Before handoff, the team checks file dimensions and background transparency.
Not a fit when
- You expect a complete game client with implemented gameplay.
- The task is backend API design without interfaces or graphics.
- The team wants final images in bulk without intermediate approvals.
Example request
Prepare requirements and a screen map for a card game using these references. Stop before generating images and show the decisions needing approval.Limitations
The workflow targets Cursor Agent; its main documentation and invocation examples are in Chinese. Without an image generator available to the agent, mockups remain in `pending-generation` status. Users approve each screen before splitting, so that stage waits for their response. Scripts prepare resources for Godot, Unity and Cocos. The team connects them to gameplay; the collection does not supply a complete game client.
How to disable. Remove the installed skill directories from Cursor’s setup. Preserve project documents and assets before reorganizing the workspace.
FAQ
Can I run only one stage?
Yes. Stage skills can run independently. Read existing project requirements and visual rules before changing anything.
What happens without an image generator?
The agent saves prompts and marks assets as pending generation. Connect an image tool and resume that stage.
Does installation overwrite existing skills?
Not by default. Intentional upgrades use `--force`; compare local changes with the new version first.
Where are decisions stored?
In `specs/<project>/` and visual-contract documents. The agent reads them before a new stage to preserve the approved style.
Can I split a sprite sheet into individual images?
Yes. A dedicated skill and script handle splitting. Check the resulting transparent PNGs and their manifest entries.
Discussion
No questions or reviews yet.
Related
SkillsFour Codex skills covering product design stages, from reviewing a single screen to comparing visual directions.
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Two UI/UX skills teach an agent design decisions: track selection, tokens, component recipes and anti-slop guardrails.
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
README in short
Project requirements live in `specs/<project>/`, with visual decisions in separate documents. The agent reads those documents before each stage, so an existing project can resume at an intermediate stage.
README badge
Original SKILL.md
--- name: game-ui-workflow description: Orchestrates an end-to-end game UI workflow from game design (GDD), PRD, and UI interaction logic through design specification, screen-system extension, page image generation, component breakdown, sprite-sheet splitting, PNG ZIP packaging, atlas packing, engine JSON handoff, asset registration, and validation. Use when users ask to build, extend, visualize, split, or deliver a coherent multi-screen game UI project rather than one isolated artifact. --- # 游戏 UI 总控工作流 把对话需求转换成可复现的 UI 项目。项目事实必须写入 `specs/<project-id>/`；不要仅保留在对话中。 ## 快速路由 根据请求选择最小充分路径： - 游戏策划、PRD、交互逻辑、生图前需求 → `game-ui-product-design` - 规范、设计系统、统一风格 → `game-ui-specification` - 页面清单、功能扩展、玩家旅程 → `game-ui-extension` - 完整单页、原型视觉、页面生图 → `game-ui-page-generator` - 透明组件、切图、素材拆解 → `game-ui-component-breakdown` - 雪碧图、单元素 PNG、切片打包 → `game-ui-sprite-sheet-splitter` - Atlas、9-slice、Godot / Unity / Cocos JSON → `game-ui-asset-pipeline` - 完整项目或多阶段交付 → 按本工作流依次编排 用户明确要求单阶段时，不强迫执行完整流程；但要读取已有契约。 生图前若 `gdd.md` / `prd.md` / `interaction.md` 缺失或仍为 draft，必须先执行生成第一步：`game-ui-product-design`。 ## 分步操作指引 当用户按完整生成链路工作时，**第一步必须是策划与 PRD**，使用以下检查点： 1. **策划与 PRD（生成第一步）**：调用 `game-ui-product-design`，完成并批准 `gdd.md`、`prd.md`、`interaction.md`；未批准前不得进入后续生图步骤。 2. 原型生成视觉：用一个基准页面验证构图和信息层级，保存为未批准版本。 3. UI 风格切换：保持页面结构不变生成风格候选；用户选定后再批准样式契约和基准页。 4. UI 延展：先输出屏幕地图并等待范围确认，再按批次逐页生成。 5. UI 组件拆解：只拆已批准页面，每个组件和状态单独交付。 6. 雪碧图拆分打包：把组件合图切成单元素透明 PNG，生成 manifest 和 ZIP。 7. Atlas 与引擎交付：语义命名、确认 9-slice、打包 Atlas 并生成引擎 JSON。 每一步开始时简要说明： - 当前步骤和目标 - 将读取的输入 - 将产生或修改的文件