Build AI-driven UIs in .NET MAUI with design systems | ODSP902
Shriram Sankaran and Vishnu Menon show how to build a real-world .NET MAUI app using a structured design system and AI-assisted UI composition, focusing on reusable components, tokens, and theming to keep generated screens consistent without sacrificing performance or maintainability.
Overview
This Microsoft Build 2026 session demonstrates an approach for accelerating UI development in .NET MAUI by combining:
- A design system (rules, patterns, and reusable building blocks for UI consistency)
- Design tokens translated into MAUI-friendly representations
- Reusable MAUI components that encode the design system
- An AI-assisted UI workflow that composes screens while staying constrained by the design system
Session outline (from chapters)
Session agenda: UI problems, AI challenges, design systems, skills, workflow, demo
The presenters frame the problem as a common failure mode of AI-generated UI: screens can be functionally correct but visually inconsistent when the AI lacks the app's design context.
Preview: generated dashboard that is functional but visually inconsistent
They start with an example dashboard UI that works, but does not look cohesive, to motivate why design constraints matter when using AI to generate or compose UI.
Why AI struggles: missing design context and missing application design system
They explain that without an explicit design system (and a way for the AI workflow to reference it), AI-driven UI generation tends to:
- Re-invent styling decisions per screen
- Drift from established patterns
- Introduce inconsistent spacing, typography, and component usage
What a design system is and how it enforces UI consistency
They define a design system as the source of truth for:
- Visual language (colors, typography, spacing)
- Component patterns (buttons, cards, layouts)
- Rules for consistent composition across the app
Reducing hardcoding and repetitive UI work with reusable patterns
The session emphasizes translating design decisions into reusable assets so teams avoid:
- Hardcoded styling scattered across screens
- Repeating the same UI composition work
- Inconsistent implementations of the same component concept
What a “skill” is in the AI workflow
They introduce the concept of a skill as a structured capability used by the AI-driven UI workflow to apply the design system when composing UI.
What skills do not do
They clarify boundaries for skills (what they are not intended to handle) to keep the workflow predictable and maintainable.
Comparison: without skills vs with skills
They compare outcomes when composing UI:
- Without skills: AI output is more ad-hoc and inconsistent
- With skills: AI output is guided by reusable components/tokens and produces more consistent screens
New MAUI control skills
They introduce new MAUI control skills intended to help the AI workflow compose screens using MAUI controls in a way that aligns with the design system.