Take the Next Step in Unity UI
Unity's legacy UI system (uGUI/Canvas) has been the standard for years, but it has performance limitations and lacks CSS-like styling. UI Toolkit is Unity's next-generation UI framework with a design philosophy closer to web technologies (HTML/CSS).
Antigravity's AI agent can generate UI Toolkit's UXML (layout) and USS (styles) from natural language, creating a workflow where web development experience directly translates.
UI Toolkit Basics
UI Toolkit consists of three elements:
- UXML: Layout definitions similar to HTML (
.uxmlfiles) - USS: Style definitions similar to CSS (
.ussfiles) - C# Controllers: Logic and data binding
Generating UXML Layouts with Antigravity
Inventory Screen Example
Prompt for Antigravity:
Create an RPG inventory screen using Unity UI Toolkit.
Layout:
- Left panel: Item list (scrollable, icon + name + quantity)
- Right panel: Selected item details (image, description, stat effects)
- Bottom: "Use", "Discard", "Equip" buttons
- Category tabs: All / Weapons / Armor / Consumables / Materials
Style: Dark fantasy theme, semi-transparent background
Antigravity generates complete UXML with proper element hierarchy, class names for styling, and semantic structure optimized for data binding.
USS Styling Generation
Dark Fantasy Theme
Create USS for the inventory screen above.
Theme: Dark Fantasy
- Background: semi-transparent dark purple (#1a0a2e, 90%)
- Accent: Gold (#c9a84c)
- Text: Light gray (#e0d8cc)
- Buttons: Gold border, glow on hover
- Animations: Scale on hover
Antigravity generates production-ready USS with transitions, hover states, active states, and a cohesive color system.
C# Controller Generation
Create a C# controller for the inventory screen.
Requirements:
- ScriptableObject-based item data
- ListView for item display (virtualized)
- Item selection updates detail panel
- Category filter functionality
- Button event bindings
Antigravity generates a complete controller with UIDocument references, event registration, category filtering, and the ListView makeItem/bindItem pattern for efficient virtualization.
Migrating from Canvas (uGUI)
Antigravity also helps migrate existing Canvas-based UI.
Migrate this Canvas (uGUI) code to UI Toolkit (UXML + USS + C#).
[Paste existing Canvas UI code]
Migration approach:
- RectTransform → USS flexbox layout
- Image component → VisualElement + background-image
- Text (TMP) → Label
- Button → ui:Button
- ScrollRect → ui:ScrollView
- Convert all animations to USS transitions
Performance: Canvas vs UI Toolkit
| Aspect | Canvas (uGUI) | UI Toolkit |
|---|---|---|
| Redraw cost | Rebuilds entire Canvas | Updates only changed elements |
| Batching | Manual Canvas splitting needed | Automatic efficient batching |
| Virtualized lists | None (generates all elements) | ListView with virtualization |
| Style management | Per-element in Inspector | Centralized in USS |
| Memory usage | Heavy (GameObject-based) | Lightweight VisualElements |
For lists with 100+ items, UI Toolkit's virtualized ListView is dramatically lighter than Canvas ScrollRect.
Looking back
Unity UI Toolkit combined with Antigravity significantly streamlines UI development.
- UXML auto-generation: Describe screens in natural language
- USS styling: Specify themes in words, AI generates CSS-like code
- C# controllers: Auto-implement data binding and event handling
- Canvas migration: AI-assisted conversion of existing UI
UI Toolkit adoption is still early, meaning early adopters gain a competitive edge. Antigravity minimizes the learning curve while letting you apply the latest UI framework to real projects.