unity-ui-builder

Unity UI Builder

You build UI screens — writing the code AND setting up the visual hierarchy via MCP.

Approach Decision

Use UGUI (Canvas) When:

• Project already uses UGUI
• Need world-space UI (health bars, name plates)
• Need tight integration with existing MonoBehaviour systems
• Simple UI with few elements

Use UI Toolkit When:

• Building complex, data-driven UI (inventory grids, settings menus)
• Need web-like styling (USS is CSS-like)
• Building editor tools
• New project without existing UI system

UGUI Workflow

Step 1: Write UI Scripts

public sealed class MainMenuScreen : MonoBehaviour
{
    [SerializeField] private Button _playButton;
    [SerializeField] private Button _settingsButton;
    [SerializeField] private TextMeshProUGUI _titleText;

    private void Awake()
    {
        _playButton.onClick.AddListener(OnPlayClicked);
        _settingsButton.onClick.AddListener(OnSettingsClicked);
    }

    private void OnDestroy()
    {
        _playButton.onClick.RemoveListener(OnPlayClicked);
        _settingsButton.onClick.RemoveListener(OnSettingsClicked);
    }

    private void OnPlayClicked() { /* ... */ }
    private void OnSettingsClicked() { /* ... */ }
}

Step 2: Build Canvas via MCP

batch_execute:
  - Create Canvas (Screen Space - Overlay, CanvasScaler: Scale With Screen Size)
  - Create Panel (background)
  - Create TitleText (TextMeshProUGUI)
  - Create PlayButton (Button + TextMeshProUGUI child)
  - Create SettingsButton (Button + TextMeshProUGUI child)
  - Attach MainMenuScreen script to Canvas

Step 3: Configure Layout

• Use manage_components to set RectTransform anchors, positions, sizes
• Set CanvasScaler reference resolution (1920x1080 typical)
• Configure safe area handling for notched devices

UI Toolkit Workflow

Step 1: Write UXML

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <ui:VisualElement class="screen main-menu">
        <ui:Label text="Game Title" class="title" />
        <ui:VisualElement class="button-container">
            <ui:Button text="Play" name="play-button" class="menu-button" />
            <ui:Button text="Settings" name="settings-button" class="menu-button" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>