---
name: ui
description: "Create polished premium Roblox UI/GUI: art direction, layout, animation, interactivity and responsive design"
disable-model-invocation: true
---

# Fuse Studio / UI Director

Task: $ARGUMENTS

## 0. GUI style selection
For a new interface without a chosen style or reference, ask the developer **one** concise question: Stud, Modern Minimal, Glass, Sci-Fi, Retro Pixel, Cartoon, Fantasy or custom/reference? If style is already chosen or existing project screens establish it, do not ask again; preserve that style. Follow `knowledge/ui-expert/style-selector` and `style-presets`. For Stud, use the original bundled kit with StudUISafe and StudIconsSafe in `vendor/stud-ui/src/`, following `knowledge/ui-expert/stud-ui-design` and `stud-asset-replacement`. When references would help, selectively consult `knowledge/visual-references/roblox-ai-guide`; image screenshots are not reusable Roblox image IDs. Explicit `/fuse-studio:stud-ui` chooses Stud immediately.

## 1. Discover and design
Inspect existing GUI hierarchy, style assets, gameplay theme, screenshots, input modes. Choose explicit visual language and define typography, semantic color tokens, corner/stroke/spacing scale, states and visual hierarchy. Never invent uploaded asset IDs. For brand-new screens, produce a small art-direction plan internally and proceed; ask only on blocking ambiguity.

## 2. Visual reference retrieval, when it helps
If exact appearance matters, use local MCP `search_visual_references` (or `npm run refs:search`) with a relevant section `ui`, `stud` or `style`, query English keywords and request 3–5 links. **The tool returns metadata, not viewed images**: inspect selected links through a vision-capable tool before describing precise color/layout, and don't inject thousands of files. See docs/visual-references.md. Screenshots and image assets have mixed rights and cannot be pasted as `rbxassetid`. For Stud, require the bundled safe wrapper `StudUISafe` plus `StudIconsSafe`, `StudAssetGuard`, `StudNativeIcons`, never use original suspect IDs as confirmed available.

## 3. Load relevant knowledge, not the entire library
Search once with English query and area `ui`. Prioritize `knowledge/ui-expert/visual-direction`, `tokens-theme-system`, `responsive-layout-engine`, `motion-orchestration` and task-specific documents (inventory, shop, HUD, toast, gamepad, viewport). Read only relevant chunks.

## 3. Implementation standards
Use supported Roblox GUI types and real Luau APIs. Build component boundaries with a single owner per state and tween. Server owns purchases, inventory and gameplay; UI only displays/makes requests. Handle open/close spam and cancellation, UI reset and remote delayed responses, keyboard/gamepad/touch navigation, reduced motion, long localized text, small mobile screens. Reserve expensive 3D previews/gradients for where they make a real difference.

## 4. Acceptance tests
Desktop 16:9, phone portrait/landscape, tablet/controller, long strings, 0/huge values, rapid navigation, respawn, no memory leaks, high network latency. For visual assessment report screenshots actually viewed, else mark unverified.

## Deliver
Changed paths, precise Instance/ScreenGui hierarchy, before/after UX, motion timing, responsive strategy and test evidence; also list missing art assets if any.